首页 web前端 css教程 CSS可以做的几个令你叹为观止的实例分享_经验交流

CSS可以做的几个令你叹为观止的实例分享_经验交流

May 16, 2016 pm 12:03 PM
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方法。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vue中placeholder是什么意思 vue中placeholder是什么意思 May 07, 2024 am 09:57 AM

在 Vue.js 中,placeholder 属性指定输入元素的占位符文本,当用户未输入内容时显示,提供输入提示或示例,提高表单可访问性。其用法为在输入元素中设置 placeholder 属性,并可使用 CSS 自定义外观。最佳实践包括与输入相关、简短清晰、避免默认文本,并考虑可访问性。

js中span是什么意思 js中span是什么意思 May 06, 2024 am 11:42 AM

span 标签可为文本添加样式、属性或行为,用于:添加样式,如颜色、字体大小。设置属性,如 id、class 等。关联行为,如点击、悬停等。标记文本,以便进一步处理或引用。

js中rem是什么意思 js中rem是什么意思 May 06, 2024 am 11:30 AM

CSS 中的 REM 是一种相对于根元素(html)字体大小的相对单位。它具有以下特点:相对根元素字体大小,不受父元素影响。当根元素字体大小改变时,使用 REM 的元素也会相应调整。可用于任何 CSS 属性。使用 REM 的优点包括:响应性:保持不同设备和屏幕大小上的文本可读性。一致性:确保整个网站字体大小一致。可扩展性:通过调整根元素字体大小轻松更改全局字体大小。

vue中引入图片的方法 vue中引入图片的方法 May 02, 2024 pm 10:48 PM

Vue 中引入图片有五种方法:通过 URL、require 函数、静态文件、v-bind 指令和 CSS 背景图片。可以在 Vue 的计算属性或侦听器中处理动态图片,并使用打包工具优化图片加载。确保路径正确,否则会显示加载错误。

span标签的作用是什么 span标签的作用是什么 Apr 30, 2024 pm 01:54 PM

SPAN 标签是一种内联 HTML 标签,用于通过应用样式、颜色和字体大小等属性来突出显示文本,作用包括强调文本、分组文本、添加悬停效果和动态更新内容。它通过在要强调的文本周围放置 <span> 和 </span> 标签来使用,并通过 CSS 样式或 JavaScript 进行操作。SPAN 标签的好处包括语义清晰、样式灵活性以及维护简单。

js中prompt怎么换行 js中prompt怎么换行 May 01, 2024 am 06:24 AM

在 JavaScript 中使用 prompt() 方法时,可以通过以下三种方法实现换行:1. 在要换行的位置插入 "\n" 字符;2. 在提示文本中使用换行符;3. 使用 CSS 的 "white-space: pre" 样式强制换行。

浏览器插件是什么语言写的 浏览器插件是什么语言写的 May 08, 2024 pm 09:36 PM

浏览器插件通常使用以下语言编写:前端语言:JavaScript、HTML、CSS后端语言:C++、Rust、WebAssembly其他语言:Python、Java

js中什么是节点 js中什么是节点 May 07, 2024 pm 09:06 PM

节点是 JavaScript DOM 中表示 HTML 元素的实体。它们代表页面中的特定元素,可用于访问和操作该元素。常见的节点类型包括元素节点、文本节点、注释节点和文档节点。通过 DOM 方法(如 getElementById()),可以访问节点并对其进行操作,包括修改属性、添加/移除子节点、插入/替换节点和克隆节点。节点遍历有助于在 DOM 结构中导航。节点在动态创建页面内容、事件处理、动画和数据绑定方面非常有用。

See all articles