169it科技资讯
169it -->


当前位置:  编程技术>WEB前端

CSS可以做的几个令你叹为观止的实例分享

    来源: 互联网  发布时间:2014-10-07

在我写“你未必知道的JavaScript和CSS交互的5种方法”一文时,人们对于JavaScript和CSS是如何重叠的感到惊讶。今天,我将重点强调你能用CSS完成的7种工作——不需要通过JavaScript或图片。

  CSS@supports

  在使用一些浏览器可能没有的特性时,每一个优秀的前端开发者都需要进行特性测试。特性测试一直以来都是由JavaScript来做的,许多人使用Modernizr,一个由许多测试良好的案例构成的优秀实用工具,来做特性测试。一个新API:@supports,不管怎样,已经出现在开发人员面前,它能让你用CSS来做特性测试。以下是一些@supports如何工作的简单例子:

代码如下:

/* basic usage */
@supports(prop:value) {
 /* more styles */
}

/* real usage */
@supports (display: flex) {
 div { display: flex; }
}

/* testing prefixes too */
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {

    section {
      display: -webkit-flex;
      display: -moz-flex;
     display: flex;
     float: none;
    }
}

这个新的@supports特性,同样有一个对应的JavaScript版本,但已经过期了,我们期待着早点使用它!

  CSS滤镜

  写一个服务来修改图片的色调,然后你可以以数十亿美元把它卖给Facebook。当然,那是一件很简单的事,但是写图像滤镜并不是一门科学。我到Mozilla 的第一个星期写的一个小程序(得了奖,额,我只是随便说说而已)用了一些基于JS的数学用canvas来创建图像滤镜,但现在我们用CSS就能创建图像滤镜了。

代码如下:

/* simple filter */
.myElement {
 -webkit-filter: blur(2px);
}

/* advanced filter */
.myElement {
 -webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}

  这个类型的滤镜只是改变了下图像的原来样子而已,保存或导出图像时并没有用所说的滤镜,但当你需要给照片美化或处理海报时这很好用。

  Pointr Events和 Bricking Clicks

  CSS的Pointr Events属性提供了一个方法来有效的禁用一个元素,正因为如此,通过JavaScript,点击一个链接不会触发一个单击事件:

代码如下:

/* do nothing when clicked or activated */
.disabled { pointer-events: none; }/* this will _not_ fire because of the pointer-events: none application */

document.getElementById("disabled-element").addEventListener("click", function(e) {
 alert("Clicked!");
});

  在上面的例子中,由于CSS pointer-events值的原因,单击事件将不会触发。我发现了它的巨大作用,你不需要每处都检查className或属性来确保一些元素是否已经禁用了。
  
  折叠、展开菜单

  CSS让我们可以创建过渡效果和动画,但是很多时候我们需要JavaScript库来帮助我们修改一些东西和控制动画。一个很流行的动画就是折叠、展开菜单效果,很多人都不知道只用CSS就可以实现!

代码如下:

/* slider in open state */
.slider {
 overflow-y: hidden;
 max-height: 500px; /* approximate max height */

 transition-property: all;
 transition-duration: .5s;
 transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

/* close it with the "closed" class */
.slider.closed {
 max-height: 0;
}

  Max-height的一个巧妙使用能让元素按想要的效果来折叠和展开。

  CSS计数器

  “计数器”这个术语在网络上表示的意思经常让我们傻笑,但CSS 计数器是另一件更让我们傻笑的事。CSS计数器允许开发人员在指定的元素上用:before和:after来增加一个计数器:

代码如下:

/* initialize the counter */
ol.slides {
 counter-reset: slideNum;
}

/* increment the counter */
ol.slides > li {
 counter-increment: slideNum;
}

/* display the counter value */
ol.slides li:after {
 content: "[" counter(slideNum) "]";
}

  你经常见到CSS计数器被用在幻灯片效果上,和像表单内容的列表上。

  Unicode CSS样式名

  有许多CSS最好的实践文档,它们都是由如何给CSS样式命名开始的。你永远不会见到有个文档说的的用unicode符号来命名你的样式:

代码如下:

.ಠ_ಠ {
 border: 1px solid #f00;
 background: pink;
}

.❤ {
 background: lightgreen;
 border: 1px solid green;
}

  请别用这些符号。除非你能行!

  CSS圆

  CSS三角形是一个技术活,CSS圆也同样如此。通过滥用CSS border-radius,你能创建很完美的圆!

代码如下:

circle {
 border-radius: 50%;
 width: 200px;
 height: 200px;
 /* width and height can be anything, as long as they're equal */
}

  你可以给你的圆增加渐变,你甚至可以使用CSS动画来让你的圆动起来!CSS即将有更多统一的API提供给这些图形,但现在你可以用这种方法来创建圆了。

  你看到了,7件你能用CSS做的事让你很惊讶,其中一些是很有用的,一些可以在工作中用不到。请告诉我,我是否遗漏了一些在工作你经常使用优秀CSS方法。


    
相关技术文章:
    ▪详细分析css float 属性以及position:absolute 的区别

     1.float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。div一个典型的块级元素,会单独占据一行。 先看看最基本的块级元素如何排列的。html代码,以下样式都是基于此。 代码如下:<div class="boxBg">        <div class="box1">        框框1        </div>        <div class="box2">        框框2        </div>     ......


    ▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

     IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值,重现代码如下 代码如下:<!DOCTYPE html><html>    <head>        <meta charset="utf-8"/>        <title>IE6-IE9中tbody的innerHTML不能复制bug</title>    </head>    <body style="height:3000px">        <table>            <tbody>                <tr><td>aaa</td></tr>            </tbody>        </table>        <p>            <button id="btn1">GE......


    ▪CSS小例子(只显示下划线的文本框,像文字一样的按钮)

     只显示下划线的文本框,像文字一样的按钮 ......


 
最新技术文章:
    ▪css white-space:nowrap属性用法(可以强制文字不换行输出)

     强制不换行,直接使用white-space:nowrap即可。CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre 换行和其他空白字符都将受到保护 nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象例:强制不换行 代码如下: div{white-space:nowrap;} ......


    ▪IE里button设置border:none属性无效解决方法

     某个元素设置无边框,只需要给元素设置border:none即可,当然设置border:0效果一样,但实际上两者是有性能差别的 代码如下:border:none:边框设置为为none,不做任何处理;border:0:边框宽度设置为0像素,但是实际上border-color和border-style还是在渲染的。然而在IE中,对于button和input元素确并不是这样,在IE6,7中border:none仅等价于border-style:none,而边框所占的空间还是在的。这导致了调input的宽度和高度在各个浏览器中不统一!在IE6,7中,虽然设置了border:none后,边框仍存在。不信你试一试。下面给......


    ▪border:none与border:0使用区别

     一、border:noneborder-style的简写在chrome审查元素看到以下结果 代码如下:element.style {border: none;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;border-width: initial;border-color: initial;}在firefox中用firebug查看元素会看到以下结果: 代码如下:element.style {    border: medium none;}注意这个medium值二、border:0border-width的简写在chrome审查元素看到以下结果......


 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

浙ICP备11055608号