今天在网上看到一有趣的开关按钮的制作,用到了SVG、css3和js,下面的演示中还引用了TweenMax.min.js,这是一个js动画工具库。
上面的这个加载中效果,以前是用gif动图实现的,但随着CSS的进步,CSS动画功能越来越强大,我们只用一小片段HTML和CSS就能实现,方便了很多,体积也减小了很多。
终于找到了一个好方法,使用:not(:last-of-type)简单方便,再也不要麻烦的单独使用:last-of-type了,不错!
问题是这样的:如果几个inline-block元素放在一起,它们的代码是按常见的HTML标准格式化,那么,在它们之间就会存留一些空格。
Web开发人员在调试网页时经常会遇到clear:both不起作用的情况,clear:both的作用是让改元素不浮动,让它在左右两边都没有其它网页元素排列。大多数情况下我们需要用用到clear:both,是因为让一个网页元素float:left或float:right时,它却浮动在其它元素旁,
本演示关键使用了几个新型的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属性,没有任何繁重的渲染动作和布局计算,都是非常轻量级的代码。
这个里面里你能看到的26个标准的英文字母并不是普通的字体,它们是用CSS在空白的页面上绘制出来的,纯css作品,用鼠标移动到CSS代码上,你能看的这段代码绘制的相应的字母局部。主要运用了CSS3里的多个新变换功能,需要使用最新的浏览器进行观赏。
空格在calc()的加减操作中有着非常重要的作用,这跟普通的编程语言中的用法有所区别,我想,这可能是因为在CSS中,你可以用“aaa-bbb”这样中间有减号的类名,而在多数的编程语言中,这样的变量名是不允许的。
专门针对IE的条件性注释(Conditional comments)是个很奇葩的东西,它是专门给IE浏览器准备的,因为其它浏览器根本不能识别这种标记。但当IE的版本到到达10、11后,开始不支持这种条件性注释
在css里有很多的属性是复合属性——可以拆分成多个属性表示,我们通常将复合属性称作简写,比如今天要说的font属性。
HTML中有很多元素,每这元素都有自己特定的显示样式,但随着浏览器的升级,随着浏览器的多样化,随着HTML标准的改进,各种HTML元素的外观也在不知不觉的发生着变化,很多HTML元素使用老式浏览器观看是一个样,而使用最新版的浏览器观看又是一个样,使用火狐浏览器是一个样,使用谷歌浏览器又是一个样,所以,本文就是讲所以HTML元素都归集到一个页面,每种元素都给出了一个样例,你可以在这个页面里一目了然的观看所以HTML元素的缺省样式。这个页面还有用来测试你的CSS的作用效果,看看哪些元素受你的css影响,哪些不受影响。