T086ѧϰ�� | վ��ѧԺ | �����ĵ� | ���� | Ъ���� | IP��ַ��ѯ | �������� | ���ջ��� | �����ֵ� | ���ù��� | ������Ϣ��ѯ

ÿλ����ʦ��Ӧ��ӵ�е�50��CSS����Ƭ��

�� ����ʱ�䣺2013-06-07 | ���壺�� �� С��
[����]����ÿ�����˶��� ������ ,������ҵ�������Ǹ�����������. ��վ�����ߺ�ǰ�˹���ʦ���Ѿ�ȫ����ʹ�� CSS3 properties, ������Щ���� ������֧�� ���µ�����. ���ǻ�����Щ������CSS2����Ƭ�κ�CSS3һ��������.��ƪ��...

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 */
}

Code Source

һЩ�µ�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;
}

Code Source

�������е��˶����������ǵ���վ��ʹ��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 */
}

Code Source

����һ���ܰ���ģ�棬������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;

Code Source

������Ϊ����һ���µ�ҳ��ͷ�Է籩ʽ�������Լ���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*/
}

Code Source

Ӧ������������Ƭ�ν�ʹ����������ͼ����ʵ��.polaroid �ࡣ�⽫�ᴴ������Ƭ����Ч������һ���ܿ��İױߺ�һЩ��������Ӱ����Ҫ���¿�/����ֵ���Ա�������ͼƬ�ߴ�����վ������ƥ�䡣

12. ê����α��

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }

Code Source

������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;
}

Code Source

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;
}

Code Source

��Ӧ�ñ�עһ�����������ڲ�֧��CSS3�﷨����ʽ�������в�����ȷ�Ĺ�����Ȼ������������Ѱ��һ������Ҫ��������ϵͳ֧�ֵĿ��ٵĽ������������������ҵ������õĴ����Σ�������վ�������Ӻܴ�����Ƭͬʱ����ʹ����������������ʱ�򱣳ֿɱ��ߴ��͹̶�������

15. ��ֱ��������

.container {
    min-height: 6.5em;
    display: table-cell;
    vertical-align: middle;
}

Code Source

ʹ�� 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;
}

Code Source

������һЩ���Ǻ����׼ǵ�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;
}

Code Source

20. CSS3 ��������

tbody tr:nth-child(odd) {
    background-color: #ccc;
}

Code Source

������Ŀ���õ�Ӧ�����������б���. Ϊ40��50�еı��������ǺܷѾ�������. ͨ������������CSS3�������Կ��Է�����Ϊ���������ϱ���ɫ.

21. �ַ�����

.amp {
    font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
    font-style: italic;
    font-weight: normal;
}

Code Source

����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;
}

Code Source

�������Ų���,������������.��CSS3�������ε��б�ǰ׺�ǿ��ܵ�. ����������̫����,��ϧ���Dz������е���������֧��.

26. �̶����ȵľ��в���

#page-wrap {
    width: 800px;
    margin: 0 auto;
}

Code Source

��֪��֮ǰ�Ѿ��ᵽ����������ˮƽ����.�������Ĵ���������ʵ�̶ֹ����ȵ�ˮƽ���� .

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;
}

Code Source

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');
}

Code Source

����ʵ����������������Ҫ���õĶ�, Ϊ������վ����һ���̶�ҳ���Ǻܼ򵥵�. ��Щҳ�Ų���ҳ�����ι������ǹ̶���,�����԰���һЩ������Ϣ������ϵ��ʽ�ȵ�. ������Ϊ�û��������Ӽ�ֵ.

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));
}

Code Source

ʹ��͸��ͼƬ�Ѿ�������վ����������ʵ��. ��ʼ��ʱ����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);
}

Code Source

������ϲ�������������Զ���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;
}

Code Source

�൱��ɬ��һ��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+ */
}

Code Source

���͵�pre��ǩ���ڲ�����������ʾ���������ġ�����Ԥ���ŵ��ı�����������Notepad��Textedit���ֵ������������㾭������������ˮƽ��������һ�������֡�����CSS���뽫ǿ������pre��ǩΪ��װ������ʽ�������ܵ���������ȥ��

34.ǿ�ƿɵ�����Ŀ����ʾ���͹���

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
    cursor: pointer;
}

Code Source

������Ĭ�ϵĿɵ���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;
}

Code Source

����һЩ�������õ����У������߿����Ҳ��������ж����ô�������ȷʵ��������Ч����������Ȼ���Ƕ�һ�޶��ģ�ֻ�轫����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;
}

Code Source

ÿ�����۵��Ի�����ʱ���������û�������;�ͻḡ�ֳ�������Щ�������ڴ����������������ߴ��������棬������ʾ�����ı���ֻ�轫������������������ʽ������Ҳ���Դ����� 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;
}

Code Source

���Ѿ��ṩ�����ೣ�����﷨������������CSS�����Լ�һЩHTMLԪ�����á�����ģ�����������д�H1-H5����Ҫ����ͷԪ�ص�Ĭ����ʽ����Ҳ����������H6������ȴ��δ��������վʹ����������Ƕ�׵���ͷ��

38.��CSS��������

body {
    background-image: url(data:image/png;base64,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);
    background-color: #0094d0;
}

Code Source

����ʦ�Ѿ�������վ�м�������Ч���кܳ�ʱ���ˣ���Ȼ����ͨ����ʹ�þ���͸���ȵ��ظ��Ĵ�שͼ�񡣵������ǿ��Ը�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;
}

Code Source

�Ҿ�����Ҳ�������ر����еĴ����Σ������ڿ�������ȷʵ�����г���������һ������������Ҫ����һ���б���Ŀ������ȴ���ָ�Ϊ���������� 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;
}

Code Source

�����࿪Դ�Ļ���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;
}

Code Source

��Ϊ��һ����web�������а�����ģ�壬�������������򵥵�CSS3��ť�ࡣ��ʹ���� .graybtn����������ʾ����Ӧ����ɫ�����ⲻ��˵�㲻�ܸı���ʽ��Ӧ���Լ�����վ����ɫ���в���ʮ��������ֵ���Ա��Ӳ�ͬ����ɫ��Χ�ҵ�ƥ���Ľ���ɫ����

42.��һ����ӡҳ����ʾURLS

@media print   {  
  a:after {  
    content: " [" attr(href) "] ";  
  }  
}

Code Source

����������һ��������վ���߹�����������ӡ�زĵ���Դ���������������ҵ������õĴ�����֮һ�ˡ�ҳ���е�ê���ӽ�����ȥ����ͨ������ʾһ�¡�������ӡʱ�������û����ῴ�������ı����г����ӵ�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;
}

Code Source

�������߷������������ε�ʱ��������һ���Ծ������������Ǽ��˴�����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;
}

Code Source

������Բ�㻨�����ƣ�����Ҳ���Դ���һ�������޷��ķ���ͼ����������������������Ҫ������һ���﷨����������֧��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;
}

Code Source

��Ϊһ�� Github���û������λ�����������ӡ�����̡�������ʹ��CSS3��ת�����ԣ����ٵĴ���Github �����д����Կ�Դ������Github�����ڶ�׷���Ĵ�������˵���dz���������������һ����Ծ��Github�׼����Ļ������йܵ�HTML/CSS/JS��ʾ��˵Ҳ�ܰ���

47. ѹ���� CSS ��������

p {
  font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;
}

Code Source

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); 
}

Code Source

����ҳ������Ч����������Ӧ�����κΰ�����վ���ݵ����������������뵽ͼ��ý���������ı����������������������κζ��󡣲鿴���δ�����������ʾҳ ���Ա�����Щҳ������ʵ�־��������и��õ����⡣

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 ���������գ����ǿ������� �������ı���װ��Ե�Ķ�̬����������ͼƬ�����ƺ��ܹ��ܺõ����ϵ���������Ʒ��ͼ������ͼ����ƵԤ�����򲩿����£������г���һЩ�뷨��

����

�����и�����ȥ�����������ܸ���Ȥ�����£�

����

��վ��ǰ����ʽ�����Ѿ��ɳ�Ϊ�������ϵ���Ҫ���������� W3C �Ѿ�������HTML5��CSS3�淶����������Ӧ���Ǵ�����վ��Ĭ�����ԡ��о����ĺ��µĿ����߶�Ӧ��ϲ���������ϣ�����Ը���ҵ�һЩ���õĴ��롣

���ж��߶�Ӧ������û�������������¸��ƺͱ�����Щ�����Ρ����췢���Ĵ�����CSS���붼���ڿ�Դ����֮�£������ṩ�����ڳ����ġ��Ҳ���ŵ�ṩÿ������Ҫ��CSS���룬����ϣ�������Ѿ��dz��ӽ����������й�������ϵ�е��뷨�����⣬��������������������ʱ�����Ƿ�����

���£�

  • #01 (27-05-2013) �C ��һЩCSS��������ʹ"bottom"��ʾΪ"bottombottom"����������WordPress���������ġ������Ѿ�����ʱ�� ����������ͬʱ�����������﷨�����Ľ�����������л��������bug�Ķ��ߣ�

ԭ�ģ�http://www.oschina.net/translate/css-snippets-for-designers

  • ת����ע����Դ��ITѧϰ�� ��ַ��http://www.t086.com/ �����������Ƽ�������
  • �ر������� ��վ�������ر�������ֹת�ص�ר�������������¿�������ת�أ���������ע��������ԭʼ���ߡ����°�Ȩ������ԭʼ�������С����ڱ���վת�����µĸ��˺���վ�����DZ�ʾ������л�⡣������վת�ص������а�Ȩ��������ϵ���ǣ����ǻᾡ�����Ը�����
  • ��
  • ��
  • ��
  • ��
  • ��
  • ��
  • ��
  • ��
  • ��
������ѯ Health Check Gulangyu
© 2017 T086ѧϰ�� - T086.com(ԭitlearner.com)
RunTime:19.31ms QueryTime:7