当前位置: 首页 > 前端开发 >

每位设计师都应该拥有的50个CSS代码片段(2)

时间:2013-06-12 04:30 来源:oschina(开源中国) 作者:凉风 点击:
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:

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)不同,它们出现在你的博客或者新闻文章的一边。这些引文经常从文章中引用文本,所以它们和块引用显示的稍许不一样。这些默认类具有一些基础的属性,带有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% }

如果你的页面内容不能填满你的浏览器窗口整个高度,那么你不会焦灼于获取滚动条。但是改变大小将会强制它们出现,并给你的窗口宽度增加额外的10-15像素,推走你的页面内容。这个代码段将保证你的HTML元素总是比浏览器高一点点,强制滚动条一直停留在适当位置。

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梯度是新技术参数的另一个奇妙的部分。许多特定前缀难以记忆,所以这个代码片段将能为你每个项目节省一点时间。

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 字体用斜体形式显示.测试下看看是不是你喜欢的风格吧.

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

阴影为我们的网站提供了巨大的变化. 你几乎可以所有的元素定义这个属性, 看起来都非常不错. 上面的代码定义了内阴影,对设计来说很丑,但在一定的环境下还是很好的.

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中三角形的列表前缀是可能的. 这个看起来太酷了,可惜的是不是所有的浏览器都支持.

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分列在网站上看起来会非常不错, 现实的问题是我们如何把基于文本的内容分列显示. 通过上面的代码,为你的文本段落设置其中的列的数值,文本内容将会按你设定的值分成宽度相同的列.

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(/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用户对表单里的输入框轮廓很反感。将这些属性加到你的样式表,会给基本的输入框元素设置一个全新的设计。

本文标签: css 代码片段 设计师

最新内容

回到顶部