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

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

时间:2013-06-12 04:30 来源:oschina(开源中国) 作者:凉风 点击:
42.在一个打印页面显示URLS @media print { a:after { content: [ attr(href) ] ; } } Code Source 如果你运行一个新闻网站或者管理有许多打印素材的资源,这可能是你能找到

42.在一个打印页面显示URLS

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

Code Source

如果你运行一个新闻网站或者管理有许多打印素材的资源,这可能是你能找到的最好的代码段之一了。页面中的锚链接将看上去与普通样子显示一致。但当打印时,你的用户将会看到链接文本具有超链接的URL。这对需要访问你链接的网页,但在特定的打印文档中却看不到URL的人来说,非常方便。

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

根据你从事移动方面的经验,这段代码也许不是非常有用。但当用 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上有众多追随的代码包来说这非常完美。如果你有一个活跃的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 的文本阴影提供了一个独特的网页排版制定方法。更确切的说,这个片段是非常好的制定富有创意的鼠标悬停发光特效的资源。虽然我并不认为这个特效可以毫无失调的融入大多数网站,但如果你有耐心调整它,你一定能够打动访问者。

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代码,但我希望我们已经非常接近!如果你有关于这个系列的想法或问题,在下面的评论讨论区随时与我们分享。

译文来源地址:http://www.oschina.net/translate/css-snippets-for-designers

英文原文地址:http://www.hongkiat.com/blog/css-snippets-for-designers/

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

最新内容

回到顶部