ÿλ����ʦ��Ӧ��ӵ�е�50��CSS����Ƭ��
1. CSS ����
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; } ������CSS����������������Ĵ���Ƭ��. �������Լ����Ƶ����ô��룬������ Eric Meyer��s reset codes��������һЩͼƬ���趨�Լ�Ϊ���еĺ���Ԫ�ض����߿�, �����ʵ���marings �� padding.
2. ������ CSS Clearfix
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; } ����clearfix���뱻�ܶ������Ŀ�����������վ. ��Ӧ����һ�����ڱ��渡��Ԫ�صĺ���ģ����. �⽫ȷ���������κ����ݶ������췽ʽ���ֶ����Ǹ�������.
3. 2011 ���µ� Clearfix
.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; } �����Ͳ�˵�����°汾�;����汾֮������Ҫ��������. ����������������Ч���������ĸ���Ԫ��, ���Ҷ�֧�����е�������������Internet Explorer 6-8.
4. ��������������
.transparent {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
} һЩ�µ�CSS3�������ǿ�����Ϊ���������κεط�. ʵ���ϲ���,���ǻ�����������,���Ⱦ��Ǹ�����. ��������filter��������֤������IE����������������.
5. CSS �������
blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: .5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: .1em;
margin-right: .25em;
vertical-align: -.4em;
}
blockquote p {
display: inline;
} �������е��˶����������ǵ���վ��ʹ��blockquotes. ��������Ϊ����һ���ܺõ�Ԫ�����ڷ������û����Ż����ͺ���ҳ�ϵ��ظ�����. �����Ĵ���Ϊ����blockquotes�ṩһ��Ĭ����ʽ,�����������ݾͲ��ῴ����������ζ.
6. ���Ե�Բ��
#container {
-webkit-border-radius: 4px 3px 6px 10px;
-moz-border-radius: 4px 3px 6px 10px;
-o-border-radius: 4px 3px 6px 10px;
border-radius: 4px 3px 6px 10px;
}
/* alternative syntax broken into each line */
#container {
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 10px;
} �����������߶���ϤCSS3��Բ������. ������֪������Ϊÿ�����趨��ͬ��ֵ��? �����Ĵ��������㶨��������! �����������汾��Ϊ��ʵ��������Ч��,��ϸ�о��°�.
7.һ��ý����ѯ
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
/* Styles */
} ����һ���ܰ���ģ�棬������CSS-Tricks�ҵ�����������ý����ѯ�������������Ѿ������ǵ�����ȫ�������ˣ������������˳ɶֵ�ʵ�ʵ��ƶ��豸����Щ������������������Ĥ���豸��ʹ����С�豸���ر�����
8. �ִ�����ջ
/* Times New Roman-based serif */ font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; /* A modern Georgia-based serif */ font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; /*A more traditional Garamond-based serif */ font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; /*The Helvetica/Arial-based sans serif */ font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; /*The Verdana-based sans serif */ font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; /*The Trebuchet-based sans serif */ font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; /*The heavier "Impact" sans serif */ font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; /*The monospace */ font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
������Ϊ����һ���µ�ҳ��ͷ�Է籩ʽ�������Լ���CSS����ջ����ϣ����һСƬ�����ܼ���һЩ��ĥ��������һЩ�������ֿ�ʼ��ģ�档���������Ҹ��������ӣ��鿴һ��CSS ����ջ ����������ϲ������Դ֮һ��
9. �Զ����ı�ѡ��
::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; } һЩ��ʽ���������������㶨��ҳ���еĸ�����ɫ��Ĭ��������Ϊ����ɫ�����������������κ�Ͷ�����õ���ɫֵ����СƬ���������˵��͵�::selectionĿ���Լ�רΪWebkit��Mozilla���ض�ǰ��
10.����H1�ı�ΪLogo��־
h1 {
text-indent: -9999px;
margin: 0 auto;
width: 320px;
height: 85px;
background: transparent url("images/logo.png") no-repeat scroll;
} �ҵ�һ��ע���������ʵ�����ڹ��ϵ�Digg ���� ��Ϊ��SEO��Ŀ�ģ���Ҳ��������һ������������վ�����Ƶ�H1��ǩ����ʹ��CSS���������������ı�ʹ�����ɼ�������һ�����ƻ���logoͼƬ�滻����
11. polaroidͼ���߽�
img.polaroid {
background:#000; /*Change this to a background image or remove*/
border:solid #fff;
border-width:6px 6px 20px 6px;
box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */
-webkit-box-shadow:1px 1px 5px #333;
-moz-box-shadow:1px 1px 5px #333;
height:200px; /*Set to height of your image or desired div*/
width:200px; /*Set to width of your image or desired div*/
} Ӧ������������Ƭ�ν�ʹ����������ͼ����ʵ��.polaroid �ࡣ�⽫�ᴴ������Ƭ����Ч������һ���ܿ��İױߺ�һЩ��������Ӱ����Ҫ���¿�/����ֵ���Ա�������ͼƬ�ߴ�����վ������ƥ�䡣
12. ê����α��
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; } ������CSS������֪��ê��������:hoverЧ������������������С�δ��������������ο�����Щ��һ��ê���Ӻ�һЩ����HTMLԪ�ص��ĸ�Ĭ��״̬�������������ֱߣ�ֱ�������Լ�סһЩ�����ӵ�������
13. ��ʽCSS3 Pull-����
.has-pullquote:before {
/* Reset metrics. */
padding: 0;
border: none;
/* Content */
content: attr(data-pullquote);
/* Pull out to the right, modular scale based margins. */
float: right;
width: 320px;
margin: 12px -140px 24px 36px;
/* Baseline correction */
position: relative;
top: 5px;
/* Typography (30px line-height equals 25% incremental leading) */
font-size: 23px;
line-height: 30px;
}
.pullquote-adelle:before {
font-family: "adelle-1", "adelle-2";
font-weight: 100;
top: 10px !important;
}
.pullquote-helvetica:before {
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: bold;
top: 7px !important;
}
.pullquote-facit:before {
font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
font-weight: bold;
top: 7px !important;
} Pull-����(Pull-quotes)��������(blockquotes)��ͬ�����dz��������IJ��ͻ����������µ�һ�ߡ���Щ���ľ����������������ı����������ǺͿ�������ʾ��������һ������ЩĬ��������һЩ���������ԣ�����3���ɹ�ѡ���Ķ��ص��������͡�
14.ȫ��������CSS3
html {
background: url('images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
} ��Ӧ�ñ�עһ�����������ڲ�֧��CSS3�����ʽ�������в�����ȷ�Ĺ�����Ȼ������������Ѱ��һ������Ҫ��������ϵͳ֧�ֵĿ��ٵĽ������������������ҵ������õĴ����Σ�������վ�������Ӻܴ�����Ƭͬʱ����ʹ����������������ʱ�ֿɱ��ߴ��̶�������
15. ��ֱ��������
.container {
min-height: 6.5em;
display: table-cell;
vertical-align: middle;
} ʹ�� margin: 0 auto ��������������ʹ��Ƕ������λ����ҳ����ˮƽ���С�Ȼ���Դ�ֱ���ı�Ҫ���ѵĶ࣬�����ǿ��ǵ��������������ķ�ʽ��������������JavaScript����������覹����Ĵ�CSS����������
16.ǿ�ƴ�ֱ������
html { height: 101% }
��������ҳ�����ݲ��������������������������߶ȣ���ô�㲻�ό���ڻ�ȡ�����������Ǹı���С����ǿ�����dz��֣��������Ĵ��ڿ������Ӷ�����10-15���أ���������ҳ�����ݡ����������ν���֤����HTMLԪ�����DZ���������һ���㣬ǿ�ƹ�����һֱͣ�����ʵ�λ�á�
17. CSS3�ݶ�ģ��
#colorbox {
background: #629721;
background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
background-image: -webkit-linear-gradient(top, #83b842, #629721);
background-image: -moz-linear-gradient(top, #83b842, #629721);
background-image: -ms-linear-gradient(top, #83b842, #629721);
background-image: -o-linear-gradient(top, #83b842, #629721);
background-image: linear-gradient(top, #83b842, #629721);
} CSS3�ݶ����¼�����������һ�������IJ��֡������ض�ǰ���Լ��䣬������������Ƭ�ν���Ϊ��ÿ����Ŀ��ʡһ��ʱ�䡣 18. @font-faceģ��
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyWebFont', Arial, sans-serif;
} ������һЩ���Ǻ����ǵ�CSS3���롣ʹ��@font-face�����Ը�������վǶ���Լ���TTF/OTF/SVG/WOFF�ļ��������Զ������������͡�Ϊ��δ������Ŀ��������ģ����Ϊһ�����������ӡ�
19. ��������CSS3Ԫ��
p {
position:relative;
z-index:1;
padding: 10px;
margin: 10px;
font-size: 21px;
line-height: 1.3em;
color: #fff;
background: #ff0030;
-webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
-moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
p:before {
content: "";
position: absolute;
z-index: -1;
top: 3px;
bottom: 3px;
left :3px;
right: 3px;
border: 2px dashed #fff;
}
p a {
color: #fff;
text-decoration:none;
}
p a:hover, p a:focus, p a:active {
text-decoration:underline;
} 20. CSS3 ��������
tbody tr:nth-child(odd) {
background-color: #ccc;
} ������Ŀ���õ�Ӧ�����������б���. Ϊ40��50�еı��������ǺܷѾ�������. ͨ������������CSS3�������Կ��Է�����Ϊ���������ϱ���ɫ.
21. �ַ�����
.amp {
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
} ����css������ҳ��������Χ�����ֵ�spanԪ��. ���ὫһЩ���͵�serif ������б����ʽ��ʾ.�����¿����Dz�����ϲ���ķ�����.
22. ��������ĸ
p:first-letter{
display: block;
margin: 5px 0 0 5px;
float: left;
color: #ff3366;
font-size: 5.4em;
font-family: Georgia, Times New Roman, serif;
} �ڱ�ֽ��ͼƬ����һ�����������ǵ�����ĸ������Ч��. �������㹻��������ҳ����˵�϶�������Ӱ��. ������CSS�������������е�P��ǩ,��Ҳ�������Ƕ���Ϊһ��class����ID.
23. CSS3����ģ���ڲ���Ӱ
#mydiv {
-moz-box-shadow: inset 2px 0 4px #000;
-webkit-box-shadow: inset 2px 0 4px #000;
box-shadow: inset 2px 0 4px #000;
} ��ӰΪ���ǵ���վ�ṩ�˾��ı仯. �㼸���������е�Ԫ�ض�����������, ���������dz�����. �����Ĵ��붨��������Ӱ,��������˵�ܳ�,����һ���Ļ����»��Ǻܺõ�.
24. CSS3����ģ���ⲿ��Ӱ
#mydiv {
-webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
-moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
} ��CSS3����Ӱһ��,��Ҳ�ṩһ������Ӱ�Ĵ���. ע�����������ֱ�ʾģ������,���ĸ���ʾ��Χ. �˽�������W3Schools.
25. �������б�ǰ
ul {
margin: 0.75em 0;
padding: 0 1em;
list-style: none;
}
li:before {
content: "";
border-color: transparent #111;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9em;
position: relative;
} �������Ų���,������������.��CSS3�������ε��б�ǰ�ǿ��ܵ�. ����������̫����,��ϧ���Dz������е���������֧��.
26. �̶����ȵľ��в���
#page-wrap {
width: 800px;
margin: 0 auto;
} ��֪��֮ǰ�Ѿ��ᵽ����������ˮƽ����.�������Ĵ���������ʵ�̶ֹ����ȵ�ˮƽ���� .
27. CSS3 �ı�����
#columns-3 {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 12px;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 12px;
-webkit-column-rule: 1px solid #c4c8cc;
} CSS3��������վ�Ͽ��������dz�����, ��ʵ���������������ΰѻ����ı������ݷ�����ʾ. ͨ�������Ĵ���,Ϊ�����ı������������е��е���ֵ,�ı����ݽ��ᰴ���趨��ֵ�ֳɿ�����ͬ����.
28. CSS �̶���ҳ��
#footer {
position: fixed;
left: 0px;
bottom: 0px;
height: 30px;
width: 100%;
background: #444;
}
/* IE 6 */
* html #footer {
position: absolute;
top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
} ����ʵ����������������Ҫ���õĶ�, Ϊ������վ����һ���̶�ҳ���Ǻܼ�. ��Щҳ�Ų���ҳ�����ι������ǹ̶���,��������һЩ������Ϣ������ϵ��ʽ�ȵ�. ������Ϊ�û��������Ӽ�ֵ.
29. PNG ͼƬ�� IE6�µ�����
.bg {
width:200px;
height:100px;
background: url(/https/www.t086.com/folder/yourimage.png) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}
/* 1px gif method */
img, .png {
position: relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
} ʹ����ͼƬ�Ѿ�������վ����������ʵ��. ��ʼ��ʱ����gifͼ,���ڶ�ʹ��PNG��ͼ. ���ҵ���һЩIE�ϰ�����������֧��������������. �����������Ĵ������ܸ㶨��������.
30. ������������С�߶�
#container {
min-height: 550px;
height: auto !important;
height: 550px;
} ���ò�ʹ��min-height�Ŀ�����֪��������Щ������֧����������. �ܶ��µ���������֧����������, Ȼ��Internet Explorer �� �ϰ汾�� Firefox������֧��������. �����Ĵ����ܽ�������Bug.
31. CSS3����������
input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #ddd;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
} ������ϲ�������������Զ���CSS3�࣬������Ϊ������Ĭ����������Ϊ�ķ�ʽ������֪����Chrome & Safar�û��Ա������������������ܷ��С�����Щ���Լӵ�������ʽ��������������������Ԫ������һ��ȫ�µ����ơ�
32. �����ļ����͵�������ʽ
/* external links */
a[href^="http://"] {
padding-right: 13px;
background: url('external.gif') no-repeat center right;
}
/* emails */
a[href^="mailto:"] {
padding-right: 20px;
background: url('email.png') no-repeat center right;
}
/* pdfs */
a[href$=".pdf"] {
padding-right: 18px;
background: url('acrobat.png') no-repeat center right;
} �൱��ɬ��һ��CSS���룬����ϲ�����Ĵ������������Ծ���ʹ��CSSѡ���������ӵ��ļ����ͣ�����ͼ����Ϊ����ͼƬ����Щ��������ͬ��Э�飨HTTP, FTP, IRC, mailto������ֻ�������Լ����ļ����ͣ�mp3, avi, pdf����
33. ǿ�ƴ�����װ
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
} ���͵�pre��ǩ���ڲ�����������ʾ���������ġ�����Ԥ���ŵ��ı�����������Notepad��Textedit���ֵ������������㾭������������ˮƽ��������һ�������֡�����CSS���뽫ǿ������pre��ǩΪ��װ������ʽ�������ܵ���������ȥ��
34.ǿ�ƿɵ�����Ŀ����ʾ������
a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
cursor: pointer;
} ������Ĭ�ϵĿɵ���HTMLԪ�ز���������ʾ���͵�ָ��ͼ�ꡣʹ������CSSѡ�������ã������Զ������ؼ���Ԫ���Լ��κ�ʹ�� .pointer��������������ǿ��ָ��ָ������״��
35. ��ҳ������Ӱ
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
} ����һЩ�������õ����У������߿����Ҳ��������ж����ô�������ȷʵ��������Ч����������Ȼ���Ƕ�һ���ģ�ֻ�轫����CSS ���븽�ӵ�����bodyԪ�أ����ܴ�����ҳ�涥��������ʾһ���������˵���Ӱ��
36. CSS3 �Ի�����
.chat-bubble {
background-color: #ededed;
border: 2px solid #666;
font-size: 35px;
line-height: 1.3em;
margin: 10px auto;
padding: 10px;
position: relative;
text-align: center;
width: 300px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
font-family: 'Bangers', arial, serif;
}
.chat-bubble-arrow-border {
border-color: #666 transparent transparent transparent;
border-style: solid;
border-width: 20px;
height: 0;
width: 0;
position: absolute;
bottom: -42px;
left: 30px;
}
.chat-bubble-arrow {
border-color: #ededed transparent transparent transparent;
border-style: solid;
border-width: 20px;
height: 0;
width: 0;
position: absolute;
bottom: -39px;
left: 30px;
} ÿ�����۵��Ի�����ʱ���������û�������;�ͻḡ�ֳ�������Щ�������ڴ����������������ߴ��������棬������ʾ�����ı���ֻ�轫������������������ʽ������Ҳ���Դ����� CSS3����Ƭ�� �ҵ����ص�HTML���롣
37. Ĭ�ϵ� H1-H5 ��ͷ
h1,h2,h3,h4,h5{
color: #005a9c;
}
h1{
font-size: 2.6em;
line-height: 2.45em;
}
h2{
font-size: 2.1em;
line-height: 1.9em;
}
h3{
font-size: 1.8em;
line-height: 1.65em;
}
h4{
font-size: 1.65em;
line-height: 1.4em;
}
h5{
font-size: 1.4em;
line-height: 1.25em;
} ���Ѿ��ṩ�����ೣ�����������������CSS�����Լ�һЩHTMLԪ�����á�����ģ�����������д�H1-H5����Ҫ����ͷԪ�ص�Ĭ����ʽ����Ҳ����������H6������ȴ��δ��������վʹ����������Ƕ����ͷ��
38.��CSS��������
body {
background-image: url(data:image/png;base64,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);
background-color: #0094d0;
} ����ʦ�Ѿ�������վ�м�������Ч���кܳ�ʱ���ˣ���Ȼ����ͨ����ʹ�þ������ȵ��ظ��Ĵ�שͼ�������ǿ��Ը�CSSǶ��Base64����������ȫ�µ�ͼ��������������Ƭ�ε������У�����body�����ϲ�����һ��СС��������������Ҳ������������������������һ���Զ���������������
39. ���������
ol.chapters {
list-style: none;
margin-left: 0;
}
ol.chapters > li:before {
content: counter(chapter) ". ";
counter-increment: chapter;
font-weight: bold;
float: left;
width: 40px;
}
ol.chapters li {
clear: left;
}
ol.start {
counter-reset: chapter;
}
ol.continue {
counter-reset: chapter 11;
} �Ҿ�����Ҳ�������ر����еĴ����Σ������ڿ�������ȷʵ�����г���������һ������������Ҫ����һ���б���Ŀ������ȴ���ָ�Ϊ���������� ULԪ�ء��鿴�����Ĵ�������Ѱһ���ܺõĴ�CSS��������
40. CSS��ͣ������ʾ
a {
border-bottom:1px solid #bbb;
color:#666;
display:inline-block;
position:relative;
text-decoration:none;
}
a:hover,
a:focus {
color:#36c;
}
a:active {
top:1px;
}
/* Tooltip styling */
a[data-tooltip]:after {
border-top: 8px solid #222;
border-top: 8px solid hsla(0,0%,0%,.85);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
display: none;
height: 0;
width: 0;
left: 25%;
position: absolute;
}
a[data-tooltip]:before {
background: #222;
background: hsla(0,0%,0%,.85);
color: #f6f6f6;
content: attr(data-tooltip);
display: none;
font-family: sans-serif;
font-size: 14px;
height: 32px;
left: 0;
line-height: 32px;
padding: 0 15px;
position: absolute;
text-shadow: 0 1px 1px hsla(0,0%,0%,1);
white-space: nowrap;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
a[data-tooltip]:hover:after {
display: block;
top: -9px;
}
a[data-tooltip]:hover:before {
display: block;
top: -41px;
}
a[data-tooltip]:active:after {
top: -10px;
}
a[data-tooltip]:active:before {
top: -42px;
} �����Դ�Ļ���jQuery�Ĺ�����ʾ����������������վ��ʵʩ��������CSS�Ĺ�����ʾ�dz��������������ҷdz�ϲ���Ĵ�����֮һ��ֻҪ���Ƶ�������ʽ������ʹ���µ�HTML5�������ԣ�������ͨ��data-tooltip���ù�����ʾ�ı���
41. ����ɫ��Բ�ΰ�ť
.graybtn {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
background-color:#ffffff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
.graybtn:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
background-color:#d1d1d1;
}
.graybtn:active {
position:relative;
top:1px;
} ��Ϊ��һ����web�������а�����ģ�壬��������������CSS3��ť�ࡣ��ʹ���� .graybtn����������ʾ����Ӧ����ɫ�����ⲻ��˵�㲻�ܸı���ʽ��Ӧ���Լ�����վ����ɫ���в���ʮ��������ֵ���Ա��Ӳ�ͬ����ɫ��Χ�ҵ�ƥ���Ľ���ɫ����
42.��һ����ӡҳ����ʾURLS
@media print {
a:after {
content: " [" attr(href) "] ";
}
} ����������һ��������վ���߹�����������ӡ�زĵ���Դ���������������ҵ������õĴ�����֮һ�ˡ�ҳ���е�ê���ӽ�����ȥ����ͨ������ʾһ�¡�������ӡʱ�������û����ῴ�������ı����г����ӵ�URL��������Ҫ���������ӵ���ҳ�������ض��Ĵ�ӡ�ĵ���ȴ������URL������˵���dz����㡣
43. �����ƶ�Webkit����
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} �����������ƶ������ľ��飬���δ���Ҳ�����Ƿdz����á������� Safari����������Webkit�����������������ƶ���վʱ������ע���һ�������Ǿͻ���һ��Χ����Ԫ�صĻ�ɫ���ӡ�ֻҪ������Щ��ʽ��������վ���Ϳ����Ƴ�����ԭ�����ƶ��������ĸ���Ч����
44. CSS3 ��Բ����ͼ��
body {
background: radial-gradient(circle, white 10%, transparent 10%),
radial-gradient(circle, white 10%, black 10%) 50px 50px;
background-size: 100px 100px;
} �������߷������������ε�ʱ��������һ���Ծ������������Ǽ��˴�����CSS3��BGģʽ����Ȥ������������bodyԪ��ΪĬ��Ŀ�꣬�������Խ������õ�ҳ���е��κ�div������
45. CSS3 ����ͼ��
body {
background-color: white;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size: 100px 100px;
background-position: 0 0, 50px 50px;
} ������Բ�㻨�����ƣ�����Ҳ���Դ���һ���������ķ���ͼ����������������������Ҫ������һ�������������֧��CSS3����������������ȥ������ȱ��ͬ����Ҳ���Ըı���������ɫ��ֵ���Ա�ƥ�����Լ���վ����ɫ������
46. Github Fork �д�
.ribbon {
background-color: #a00;
overflow: hidden;
/* top left corner */
position: absolute;
left: -3em;
top: 2.5em;
/* 45 deg ccw rotation */
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
/* shadow */
-moz-box-shadow: 0 0 1em #888;
-webkit-box-shadow: 0 0 1em #888;
}
.ribbon a {
border: 1px solid #faa;
color: #fff;
display: block;
font: bold 81.25% 'Helvetiva Neue', Helvetica, Arial, sans-serif;
margin: 0.05em 0 0.075em 0;
padding: 0.5em 3.5em;
text-align: center;
text-decoration: none;
/* shadow */
text-shadow: 0 0 0.5em #444;
} ��Ϊһ�� Github���û������λ�����������ӡ�����̡�������ʹ��CSS3��ת�����ԣ����ٵĴ���Github �����д����Կ�Դ������Github�����ڶ����Ĵ�������˵���dz���������������һ����Ծ��Github�����Ļ������йܵ�HTML/CSS/JS��ʾ��˵Ҳ�ܰ���
47. ѹ���� CSS ��������
p {
font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;
} web�����߲�����ʹ������ѹ�����������Ե���Ҫԭ�������ڲ����������ö�����Ҫ�ġ����������ټǷ���������������ʹ������ʽ���Ͻ�ʡ����ʱ�����ռ䡣������Ҫ��������������ʽ��ʽ��ʱ����ʹ����������Ƭ�Ρ�
48. ҳ������Ч��
ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
}
ul.box li {
position: relative;
float: left;
width: 250px;
height: 150px;
padding: 0;
border: 1px solid #efefef;
margin: 0 30px 30px 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
ul.box li:before,
ul.box li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg);
}
ul.box li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg);
} ����ҳ������Ч����������Ӧ�����κΰ�����վ���ݵ����������������뵽ͼ��ý���������ı����������������������κζ��鿴���δ�����������ʾҳ ���Ա�����Щҳ������ʵ�־��������и��õ����⡣
49.�������
a {
color: #00e;
}
a:visited {
color: #551a8b;
}
a:hover {
color: #06e;
}
a:focus {
outline: thin dotted;
}
a:hover, a:active {
outline: 0;
}
a, a:visited, a:active {
text-decoration: none;
color: #fff;
-webkit-transition: all .3s ease-in-out;
}
a:hover, .glow {
color: #ff0;
text-shadow: 0 0 10px #ff0;
} CSS3 ���ı���Ӱ�ṩ��һ�����ص���ҳ�Ű��ƶ���������ȷ�е�˵������Ƭ���Ƿdz��õ��ƶ����д�����������ͣ������Ч����Դ����Ȼ�Ҳ�����Ϊ������Ч���Ժ���ʧ����������������վ���������������ĵ���������һ���ܹ������ߡ�
50. ������ɫ�� CSS3 չʾ����
.featureBanner {
position: relative;
margin: 20px
}
.featureBanner:before {
content: "Featured";
position: absolute;
top: 5px;
left: -8px;
padding-right: 10px;
color: #232323;
font-weight: bold;
height: 0px;
border: 15px solid #ffa200;
border-right-color: transparent;
line-height: 0px;
box-shadow: -0px 5px 5px -5px #000;
z-index: 1;
}
.featureBanner:after {
content: "";
position: absolute;
top: 35px;
left: -8px;
border: 4px solid #89540c;
border-left-color: transparent;
border-bottom-color: transparent;
} ͨ����Ҫ��������������������Ч��������Ҫ����һ�ű���ͼƬ������֧�� CSS3 ���������գ����ǿ������� �������ı���װ��Ե�Ķ�̬����������ͼƬ�����ƺ��ܹ��ܺõ����ϵ���������Ʒ��ͼ������ͼ����ƵԤ���������£������г���һЩ�뷨��
����
�����и�����ȥ�����������ܸ���Ȥ�����£�
- CSS�ص�����:��������
- 20���Գ�ѧ�����õ�CSS����
- 11�� CSS�༭�� �C �ع�
- ���������CSS3������������
- �ع�CSS��ʽ���ȼ�
- CSS3α��ָ��
����
��վ��ǰ����ʽ�����Ѿ��ɳ�Ϊ�������ϵ���Ҫ���������� W3C �Ѿ�������HTML5��CSS3�淶����������Ӧ���Ǵ�����վ��Ĭ�����ԡ��о����ĺ��µĿ����߶�Ӧ��ϲ���������ϣ�����Ը���ҵ�һЩ���õĴ��롣
���ж��߶�Ӧ������û�������������¸��ƺͱ�����Щ�����Ρ����췢���Ĵ�����CSS���붼���ڿ�Դ����֮�£������ṩ�����ڳ����ġ��Ҳ���ŵ�ṩÿ������Ҫ��CSS���룬����ϣ�������Ѿ��dz��ӽ����������й�������ϵ�е��뷨�����⣬��������������������ʱ�����Ƿ�����
���£�
- #01 (27-05-2013) �C ��һЩCSS��������ʹ"bottom"��ʾΪ"bottombottom"����������WordPress���������ġ������Ѿ�����ʱ�� ����������ͬʱ����������������Ľ�����������л��������bug�Ķ��ߣ�
���ǵķ��빤������ CC Э�����������ǵĹ������ַ�������Ȩ�棬�뼰ʱ��ϵ����
ԭ�ģ�http://www.oschina.net/translate/css-snippets-for-designers
- ת����ע����Դ��ITѧϰ�� ��ַ��http://www.t086.com/ �����������Ƽ�������
- �ر������� ��վ�������ر�������ֹת�ص�ר�������������¿�������ת�أ���������ע��������ԭʼ���ߡ����°�Ȩ������ԭʼ�������С����ڱ���վת�����µĸ��˺���վ�����DZ�ʾ������л�⡣������վת�ص������а�Ȩ��������ϵ���ǣ����ǻᾡ�����Ը�����
- �������е���ɫ
- �������ж�IP��ַ��A��B���C��
- ������ϵ��Ц�� (ʷ����ȫ��
- ��Google���������ŵ���ͨv4.0
- ���ٶ�ͳ��URL��hm������utm�����Ķ�Ӧ��ϵ
- ��ƻ������MACbook Air���ݼ���ȫ
- ��Linux��ʹ��host��dig��nslookup��ѯDNS
- �����Լ���VPS�Google��������
- ���������ԡ���װ Windows XP ����ϵͳ��ͼ��ȫ����
- ��С�ڴ�VPS֮Nginx+PHP-fpm�߸����Ż���ѹ�����Է���