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

在我写“你未必知道的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方法。

(0)

相关推荐

  • CSS3实例分享之多重背景的实现(Multiple backgrounds)

    CSS3的诞生为我们解决了这一问题,在CSS3里,通过background-image或者background可以为一个容器设置多张背景图像,也就是说可以把不同背景图象只放到一个块元素里. 首先我们来看一下语法吧: background : [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-attachment]

  • 你未必知道的JavaScript和CSS交互的5种方法

    随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作.我们的网页中都有.js文件和.css文件,但这并不意味着CSS和js是独立不能交互的.下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道! 用JavaScript获取伪元素(pseudo-element)属性 大家都知道如何通过一个元素的style属性获取它的CSS样式值,但能获取伪元素(pseudo-eleme

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

    在我写"你未必知道的JavaScript和CSS交互的5种方法"一文时,人们对于JavaScript和CSS是如何重叠的感到惊讶.今天,我将重点强调你能用CSS完成的7种工作--不需要通过JavaScript或图片. CSS@supports 在使用一些浏览器可能没有的特性时,每一个优秀的前端开发者都需要进行特性测试.特性测试一直以来都是由JavaScript来做的,许多人使用Modernizr,一个由许多测试良好的案例构成的优秀实用工具,来做特性测试.一个新API:@supports

  • 使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享

    CSS+JavaScript 实现原理: 创建一个满屏的div,使用绝对定位,这样的话它就可以脱离文档流,对其他的元素不会产生影响,并且将其设置为半透明状态,当然这个透明度可以随便调的,同时创建一个login元素,它也使用绝对定位,并将其z-index属性值大于面屏的div,这个时候它就不会被满屏div遮盖.在默认状态下这两个div的display属性值是none.当点击相应的按钮可以更改他们的display属性值. <!DOCTYPE html> <html> <head&

  • HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)

    刮刮乐想必大家都玩过,小时候兜里一有钱,就喊上小伙伴兴冲冲的跑去家旁边的小卖部,用那稚嫩地小手递给老板那被捏的皱巴巴的五毛钱,满眼期待的刮着买来的刮刮乐,心里早已想好中了100块钱大钞要去买好多好多辣条.卡片.陀螺.奥迪双钻的悠悠球- 认认真真看完本文,你就可以用你女朋友的美照实现一个独属于你的刮刮乐哦!(当然如果你没有女朋友的话,也可以用你珍藏多年的美女图片哦!) ⛳️使用HTML.CSS和JavaS实现刮刮卡/刮刮乐 ♥️别着急,先看演示

  • vuex + axios 做登录验证 并且保存登录状态的实例

    还是那句话,网上找个完整的博客真的难,实现效果全靠摸索啊 第一步:安装axios .vuex npm i -s axios npm i -s vuex 执行这两句 ,vue等环境搭建就不废话了 第二步:配置main.js文件 上图不上码,菊花万人捅,附上代码 // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.

  • JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

    本文实例讲述了JS+CSS实现鼠标经过弹出一个DIV框效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • Python利用matplotlib做图中图及次坐标轴的实例

    图中图 准备数据 import matplotlib.pyplot as plt fig = plt.figure() x = [1, 2, 3, 4, 5, 6, 7] y = [1, 3, 4, 2, 5, 8, 6] - 大图 首先确定大图左下角的位置以及宽高: 注意,4个值都是占整个figure坐标系的百分比.在这里,假设figure的大小是10x10,那么大图就被包含在由(1, 1)开始,宽8,高8的坐标系内. # below are all percentage left, bott

  • pytorch 利用lstm做mnist手写数字识别分类的实例

    代码如下,U我认为对于新手来说最重要的是学会rnn读取数据的格式. # -*- coding: utf-8 -*- """ Created on Tue Oct 9 08:53:25 2018 @author: www """ import sys sys.path.append('..') import torch import datetime from torch.autograd import Variable from torch im

  • 巧用CSS滤镜做图案文字

    经典论坛 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 用css filter做鼠标滑过图片效果

    首先看个简单的例子吧. http://www.cssrain.cn *{ margin:0; padding:0;} body{ margin:0 auto; font-size:12px;} .model{margin:0 auto; width:30px;} .model a:hover{ text-decoration:none;} .model a img{ border:#fff 1px solid;} .model a:hover img{ border:#888 1px dotte

  • html、css和jquery相结合实现简单的进度条效果实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery实现进度条</title>

随机推荐