本演示关键使用了几个新型的CSS属性(background-blend-mode, mix-blend-mode, 和 filter),利用这些属性,我们可以让同一张图片呈现出各种不可思议的神奇效果。

今儿,我就准备向大伙儿介绍一些你们之前可能很少见过CSS家伙们。他们每个都是度量的单位,类似pixel 和 em 这样的,但是很有可能你之前从来就没听过这些家伙们!就让我们一起来交个朋友吧~

三维立体效果我觉得是CSS3中最有意思的地方,不得不佩服那些开发者大神们,让我们能够通过几行CSS代码就能得到酷炫的视觉体验。

CSS3按钮一般都可以设计的非常漂亮,利用投影、渐变等CSS3属性特效可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔透的牛奶,而且在点击按钮时出现3D效果的动画,按钮按下时,按钮会轻轻的弹动一下,非常逼真。

觉得黑得可以的点个赞呗。

这篇文章里我们将学习CSS里flexbox布局的几个最重要的概念,通过学习flexbox布局,你会发现以往遇到的所有的关于布局的问题,现在都可以轻松解决了。

用CSS3绘制的各种小图标

在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句“我靠,原来css中的border还可以这样玩”。这篇文章主要是很早以前看了别人用纯CSS绘制三角形后自己的一些思路的整理,文中会介绍几种小图标的效果。

今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形、圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家。

纯文本,纯CSS,简单干净的CSS动画,使用方便,完全可以替代图形进度条,加载等待git动图等

用css3 给checkbox添加动画特效,当用户点击时,它们会表现的像个小动物

用CSS3改radio input添加点击时的动画特效

谷歌HTML/CSS代码格式指导

你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素、内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

JavaScript有一个preventDefault方法, 他可用以来取消事件的默认动作。比如取消打开链接,选择文本或拖放等。

CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字、图片等,也就是,让页面内容不可选。也可以只允许用户选中文字,或者全部都放开,用户可以同时选中文字、还包括文本里的图片、视频等其它东西。user-select属性的作用是元素基本的,它不仅可以作用整个页面,也可以只在指定的元素和其子元素上生效。

我们将这些防止错误出现的程序称为”linters”。Javascript中有几个比较好的linter。但是在CSS中,我们就没有这么幸运了,我们的选择十分有限: 基于Ruby的,具有特殊预处理程序的scss-lint和较早的CSS Lint。现在我就要开始介绍一下我们开发的工具: stylelint.

单选框Radio和多选框checkbox需要美化吗?当然,原生的样式百年不变已经满足不了我们客户的需求。表单很多控件需要美化,我们有借 助Javascript来做美化的,也有直接用CSS来美化的,今天我给大家介绍使用纯CSS实现radio和checkbox的美化。

CSS中的 animation 属性可以让很多其它CSS属性产生动画效果,比如color, background-color, height, width等。当然,你需要为每个动画定义@keyframes CSS规则,animation需要调用这些@keyframes产生动画效果

如何让table元素也能表现出自适应性?按HTML5的说法,table是一个不鼓励使用的HTML标记,但现实工作中,我们避免不了的偶尔会用到它。那么,怎样让一个传统的表格也表现出自适应性呢?

这是一个自我实现的css绘图脚本,页面自己每跳出一行代码,都会即时作用到页面上,展示出这行代码的实际作用,于是,我们就看到了一个鲜红的跳动的心就一步一步的呈现在读者面前。

CSS中的clip-path能够让你指定一个网页元素的显示区域,而不是缺省的显示全部。在过去有个等效的属性, clip,但在新的CSS规范中,它已经被标志为deprecated,用新的clip-path代替。

这是一个能方便的找到CSS动画制作的代码片段的地方。

下面展示的是一批完全只用CSS制作的加载等待动画效果。每个动画只运用了简单的css属性,没有任何繁重的渲染动作和布局计算,都是非常轻量级的代码。