/
index.html
614 lines (423 loc) · 19.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>[CSS] 5個對設計師有幫助的CSS屬性 - apa</title>
<meta name="author" content="阿帕">
<meta name="description" content="如果要寫一個網頁，基本上就是利用HTML+CSS互相搭配(廢話)，網路上的教學也非常的多，除非是剛踏入這一行的新手，不然大部分的人對這都不陌生，不過雖然CSS整體來說並不難，但有幾個特別的屬性他並不是這麼直覺好懂，但卻很適合設計師來學習，所以這篇就來筆記幾個CSS，來幫助釐清觀念 Clear …">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://blog.rx836.tw/blog/5-css-properties/">
<link href="/favicon.png" rel="icon">
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<script src="/javascripts/modernizr-2.0.js"></script>
<script src="/javascripts/ender.js"></script>
<script src="/javascripts/octopress.js" type="text/javascript"></script>
<link href="/atom.xml" rel="alternate" title="apa" type="application/atom+xml">
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<meta property="fb:admins" content="100000102681259"/>
<meta property="fb:app_id" content="416172151763823" />
<meta property="og:title" content="[CSS] 5個對設計師有幫助的CSS屬性 - apa" />
<meta property="og:description" content="如果要寫一個網頁，基本上就是利用HTML+CSS互相搭配(廢話)，網路上的教學也非常的多，除非是剛踏入這一行的新手，不然大部分的人對這都不陌生，不過雖然CSS整體來說並不難，但有幾個特別的屬性他並不是這麼直覺好懂，但卻很適合設計師來學習，所以這篇就來筆記幾個CSS，來幫助釐清觀念 Clear …" />
<meta property="og:url" content="http://blog.rx836.tw/blog/5-css-properties/" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31245620-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body >
<header role="banner"><hgroup>
<h1><a href="/">apa</a></h1>
<h2>Stay Hungry, Stay Foolish</h2>
</hgroup>
</header>
<nav role="navigation"><ul class="subscription" data-subscription="rss">
<li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
</ul>
<form action="http://google.com/search" method="get">
<fieldset role="search">
<input type="hidden" name="q" value="site:blog.rx836.tw" />
<input class="search" type="text" name="q" results="0" placeholder="Search"/>
</fieldset>
</form>
<ul class="main-navigation">
<li><a href="/">Blog</a></li>
<li><a href="/blog/archives">Archives</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<div id="main">
<div id="content">
<div>
<article class="hentry" role="article">
<header>
<h1 class="entry-title">[CSS] 5個對設計師有幫助的CSS屬性</h1>
<p class="meta">
<time datetime="2012-12-05T14:50:00+08:00" pubdate data-updated="true">Dec 5<span>th</span>, 2012</time>
| <a href="#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p>如果要寫一個網頁，基本上就是利用HTML+CSS互相搭配(廢話)，網路上的教學也非常的多，除非是剛踏入這一行的新手，不然大部分的人對這都不陌生，不過雖然CSS整體來說並不難，但有幾個特別的屬性他並不是這麼直覺好懂，但卻很適合設計師來學習，所以這篇就來筆記幾個CSS，來幫助釐清觀念</p>
<!--more-->
<h2>Clear</h2>
<p>首先來看一個基本的網站架構</p>
<p>HTML</p>
<pre><code><div id="container">
<h1>網站標題</h1>
<div id="content">
<h2>文章標題</h2>
<p>文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容</p>
</div>
<div id="sidebar">
<h2>側邊欄位1</h2>
</div>
<div id="sidebar2">
<h2>側邊欄位2</h2>
</div>
<div id="footer">我是footer</div>
</div>
</code></pre>
<p>CSS</p>
<pre><code>#container{
background:#0CF;
width:450px;
}
#content{
background:#FC3;
width:250px;
float:left;
}
#sidebar{
float:left;
background:#360;
width:100px;
}
#sidebar2{
float:left;
background:#F0F;
width:100px;
}
#footer{
}
</code></pre>
<p>看起來就長的像這樣</p>
<p><img src="https://lh6.googleusercontent.com/-hrlyAdCFVM4/UL9zdLc_WSI/AAAAAAAACBY/obrq-cebCvY/s470/2012-12-05_225116.jpg" /></p>
<p>HTML部份就是利用一個div做為最外層的container，裡面包有content、sidebar和footer，利用CSS的屬性 <strong>float</strong>，將content和sidebar排成水平一直線，這是排版常使用的技巧，可是會發現，footer卻不是心中所想的那樣置底，反而受到float影響而圍繞在其他的div周圍</p>
<h3>如何讓單一的div消除float的影響</h3>
<p>就是 <strong>Clear</strong> 的功效，所以為了讓footer排在應該有的位置，我們可以這樣添加CSS屬性</p>
<pre><code>#footer{
clear:both;
}
</code></pre>
<p>結果</p>
<p><img src="https://lh6.googleusercontent.com/-j2gYazTo_HE/UL9zdAr8LVI/AAAAAAAACBg/EN-h4zoISdQ/s466/2012-12-05_230147.jpg" /></p>
<p>有發現了嗎？只要簡單的加上clear這個屬性，div就會乖乖地恢復他本來的特性，讓你水平或垂直排列可以隨心所欲</p>
<h2>Box Shadows</h2>
<p>box-shadow這個新的CSS3屬性之前有在<a href="http://blog.rx836.tw/blog/css3-real-beauty-box-shadows/" target="_blank">文章</a>介紹過，其實他就是利用CSS很方便的做出陰影效果，例如像這樣加上CSS</p>
<pre><code>#content{
background:#ccc;
width:250px;
float:left;
padding:5px;
-webkit-box-shadow: inset 0px 0px 2px 2px #f00;
box-shadow: inset 0px 0px 2px 2px #f00;
}
</code></pre>
<p>我們這邊利用box-shadow做出有內嵌效果的div，並且加上5px的內距，會發現整個網站會長成這樣</p>
<p><img src="https://lh5.googleusercontent.com/-dxl0B5r8Ksk/UL9zdMMiRLI/AAAAAAAACBc/lGKF0VdvFo8/s469/2012-12-05_231526.jpg" /></p>
<p>這也是寫CSS常會發生的事情，一個沒注意就破版了，原因是之前設container寬度為450px，content為250px，兩個sidebar分別為100px，這樣加起來是剛好的，但加上了padding的5px以後(有左右兩邊，所以實際是10px)，兩個sidebar必須調整為95，這樣才不會擠壓到</p>
<pre><code>#sidebar{
float:left;
background:#360;
width:95px;
}
#sidebar2{
float:left;
background:#F0F;
width:95px;
}
</code></pre>
<p><img src="https://lh5.googleusercontent.com/-S0FvavMd3Lo/UL9zdySksMI/AAAAAAAACBk/DnzWTwuLljo/s468/2012-12-05_232026.jpg" /></p>
<p>這樣就正常了，回到剛剛的box-shadow，可以看到為了跨瀏覽器的關係，我們在使用box-shadow會搭配每個瀏覽器的前綴</p>
<pre><code>-webkit-box-shadow: inset 0px 0px 2px 2px #f00;
</code></pre>
<p>另外box-shadow屬性寫法如下</p>
<pre><code>box-shadow: inset x-offset y-offset blur spread color
</code></pre>
<p>每個值所代表的意義為</p>
<p><strong>x-offset</strong>: 水平位移植，必須要指定</p>
<p><strong>y-offset</strong>: 垂直位移植，必須要指定</p>
<p><strong>blur</strong>: 模糊效果，不能為負值，預設為0</p>
<p><strong>spread</strong>: 擴散強度，可以為負值(縮小)，預設為0</p>
<p><strong>color</strong>: 顏色，有些網站可能會寫預設值為黑色，<strong>但一般建議還是要給予顏色，因為有些瀏覽器預設值並不一定為黑色(例如手機)</strong></p>
<p><strong>inset</strong>: 這個值有些人是放在<strong>最前面</strong>，有些是放在<strong>最後面</strong>，兩者皆可，如果有給予這個值box就會在陰影裡面，反之則在外面</p>
<p>而除了box-shadow以外，CSS3其實還有針對文字的text-shadow，範例如下</p>
<pre><code>h2{
Font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
color:#fff;
text-shadow: -2px 0px 3px #003366;
}
</code></pre>
<p>差別在於text-shadow沒有spread，而效果看起來就像這樣</p>
<p><img src="https://lh5.googleusercontent.com/-2vCt4XwlUoY/UL9zeNS-J5I/AAAAAAAACBo/TMv2Oo5TPAg/s469/2012-12-05_233015.jpg" /></p>
<p>明顯可以看出文字擁有立體的感覺</p>
<h2>CSS Gradients</h2>
<p>用CSS3來表達漸層，用法其實不難，難的是要做到跨瀏覽器不是一件很容易的事情，以下是範例語法</p>
<pre><code>#container{
background: #a8e7ff; /* Old browsers */
background: -moz-linear-gradient(top, #a8e7ff 0%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8e7ff), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a8e7ff 0%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a8e7ff 0%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a8e7ff 0%,#4096ee 100%); /* IE10+ */
background: linear-gradient(to bottom, #a8e7ff 0%,#4096ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8e7ff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
}
</code></pre>
<p><img src="https://lh4.googleusercontent.com/-HaSJlf5Trxc/UL9zec5QzcI/AAAAAAAACBs/ewEGX4ImfBc/s605/2012-12-05_233546.jpg" /></p>
<p>可以看到頁面從淡藍變成深藍，而且是用CSS而不是圖片來達成，但為了配合到每個瀏覽器這裡使用了8行的CSS，每一行的CSS都長的不太一樣，這也是比較令人煩惱的地方，基本的語法如下</p>
<pre><code>(top, #a8e7ff 0%,#4096ee 100%)
</code></pre>
<p>這意思就是指漸層的效果是從最上方開始變化到最下方，如果是50%，就是指從中間開始</p>
<h2>Dropdown Menus</h2>
<p>下拉選單是網站常見的元素，可以利用HTML加上CSS來呈現這樣的效果，關鍵點在於 <strong>hover</strong> 和 <strong>display:none</strong>，範例如下</p>
<p>HTML</p>
<pre><code><div class="menubar">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul> <li><a href="#">Sliders</a></li>
<li><a href="#">Galleries</a></li>
<li><a href="#">Apps</a></li>
<li><a href="#">Extensions</a></li>
</ul>
</li>
<li><a href="/about.html">About</a> </li>
<li><a href="#">Company History</a></li>
<li><a href="#">Address</a></li>
<li><a href="#">Customer Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</code></pre>
<p>CSS</p>
<pre><code>.menubar{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menubar ul{
background: rgb(109,109,109);
height:50px;
list-style:none;
margin:0;
padding:0;
}
.menubar li{
float:left;
padding:0px;
}
.menubar li a{
background: rgb(109,109,109);
color:#cccccc;
display:block;
font-weight:normal;
line-height:50px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menubar li a:hover, .menubar ul li:hover a{
background: rgb(71,71,71);
color:#FFFFFF;
text-decoration:none;
}
.menubar li ul{
background: rgb(109,109,109);
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:200px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menubar li:hover ul{
display:block;
}
.menubar li li {
background: rgb(109,109,109);
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menubar li:hover li a{
background:none;
}
.menubar li ul a{
display:block;
height:50px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menubar li ul a:hover, .menubar li ul li:hover a{
background: rgb(71,71,71);
border:0px;
color:#ffffff;
text-decoration:none;
}
.menubar p{
clear:left;
}
</code></pre>
<p>看起來的效果就像這樣</p>
<p><img src="https://lh4.googleusercontent.com/-bnIvT8x3nww/UL9ze-1MTWI/AAAAAAAACB8/c4k6lL2dy_k/s896/2012-12-05_235741.jpg" /></p>
<p>不用任何一行js就可以做出下拉的選單，而剛剛提到的關鍵點屬性display</p>
<pre><code>.menubar li:hover ul{
display:block;
}
</code></pre>
<p>利用這個屬性就可以做到將滑鼠移過去的時候，子選單就會呈現出來</p>
<h2>Border Radius</h2>
<p><strong>圓角</strong>也是做網站設計很常用到的元素，利用CSS3的屬性border-radius也可以輕鬆做到，但有些人或許不知道圓角還可以針對四個角做不同的設置，範例如下</p>
<p>CSS</p>
<pre><code>#container{
background: #a8e7ff; /* Old browsers */
width:600px;
-webkit-border-radius: 20px 5px 115px 35px;
border-radius: 20px 5px 115px 35px;
}
</code></pre>
<p>我們一樣拿剛剛最前面那個範例來說明，效果如下</p>
<p><img src="https://lh3.googleusercontent.com/-xzuDA1ptHRo/UL9zfIUb32I/AAAAAAAACB4/cKv2qf7ahQM/s619/2012-12-06_001054.jpg" /></p>
<p>可以看到四個角給的值不同，圓角的效果也都不同，但特別注意的是，在使用圓角效果時，要注意會不會有破版的情形發生，就如同圖的左下角圓角，跟剛剛提到的padding意思一樣</p>
<p>以上是幾個對設計師來說好用的CSS屬性，希望對大家有幫助</p>
<h3>參考資料:</h3>
<p><a href="http://designfestival.com/5-css-properties-that-give-designers-fits/" target="_blank">5 CSS Properties That Give Designers Fits</a></p>
<p>內容如有錯誤，歡迎指正</p>
</div>
<div>如果你覺得這篇文章有幫助，請幫我讚聲一下:)</div>
<div class="sharing">
<div class="fb-like" data-send="true" data-width="450" data-show-faces="false"></div>
</div>
<footer>
<p class="meta">
<span class="byline author vcard">Posted by <span class="fn">阿帕</span></span>
<time datetime="2012-12-05T14:50:00+08:00" pubdate data-updated="true">Dec 5<span>th</span>, 2012</time>
<span class="categories">
<a class='category' href='/blog/categories/css/'>CSS</a>
</span>
</p>
<p class="meta">
<a class="basic-alignment left" href="/blog/jquery-plugin-format-number/" title="Previous Post: [jQ-Plugin] 簡易的數值格式化-Numeral.js">« [jQ-Plugin] 簡易的數值格式化-Numeral.js</a>
<a class="basic-alignment right" href="/blog/css3-scrolling-effect/" title="Next Post: [CSS] 利用CSS3做scrolling effect">[CSS] 利用CSS3做scrolling effect »</a>
</p>
</footer>
</article>
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
<section>
<h1>FB Comments</h1>
<div id="facebook_comments" aria-live="polite">
<noscript>Please enable JavaScript to view the comments powered by facebook</noscript>
<div class="fb-comments"
data-href="http://blog.rx836.tw/blog/5-css-properties/"
data-num-posts="5"
data-width="570">
</div>
</div>
</section>
</div>
<aside class="sidebar">
<section>
<h1>Categories</h1>
<ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
<a href="/blog/jquery-plugin-for-pinterest/">[jQ-Plugin] 自製 Pinterest 分享圖片 plugin </a>
</li>
<li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
<li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
<li class="post">
<a href="/blog/alert-confirm-prompt/">[jQ-Plugin] 用jQuery打造alert、confirm和prompt dialogs</a>
</li>
<li class="post">
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
</ul>
</section>
</aside>
</div>
</div>
<footer role="contentinfo"><p>
Copyright © 2013 - 阿帕 -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'rx836';
// var disqus_developer = 1;
//var disqus_identifier = 'http://blog.rx836.tw/blog/5-css-properties/';
var disqus_identifier = 'http://blog.rx836.tw/blog/5-css-properties/';
var disqus_url = 'http://blog.rx836.tw/blog/5-css-properties/';
var disqus_script = 'embed.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=416172151763823";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
(function(){
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
})();
</script>
</body>
</html>