CSS3

Flexbox——快速布局神器

在很多方面HTML和CSS是一个强大的内容发布机制——易学、灵活和强大。但复杂的布局是他不擅长的。如果你想创建一个简单的图片与文本的布局,那么还算简单,但是制作一个复杂的多列布局,要做的众多浏览器的兼容一致那还是很复杂的。我们通常都是使用浮动或者其他方法来实现这个目的,而其中出现的bug和浏览器的差异性使用对布局失去兴趣。为了应对这种情况,CSS3包含了许多模块,使用不同的布局更加容易。我们已经在其他文章中看到多栏布局媒体生成的内容分页,现在我们将注意力转向CSS3的 Flexbox布局模块。今天根据的《Flexbox — fast track to layout nirvana?》一文所译,向大家介绍Flexbox这一布局神器,希望大家喜欢。

Flexbox中动画内幕

Flexbox是CSS3中一个重要的而且非常有用的属性,用来制作弹性布局是非常的方便而又强大。自2009年至今, 这个属性的语法规则也是变更多回。对于难度也较其他属性复杂的多,要用好这个属性还是需要花一些力气的。今天看到写了一篇有关于flexbox的动画效果教程《Animating flexboxes: the lowdown》,蛮好理解的,所以花了一天时间译了一下这篇文章,希望对大家的学习有所帮助,里面css部分还是蛮简单的,对于不懂js的同学,要理解里面的js代码功能还是有点蛋疼,像我一样,还有部分没理解。喜欢的就往下看吧。

CSS遮罩——如何在CSS中使用遮罩

Css遮罩是2008年4月由苹果公司添加到webkit引擎中的。遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果。值得庆幸的是2012年11月15号,遮罩第一次出现在w3c公布的草案中。但是跟苹果公司的是不同的版本。今天由D姐根据Christian Schaefer的英文文章原名《CSS Masks – How To Use Masking In CSS Now》进行翻译,给大家介绍有关webkit中新的css技术——css滤镜

学习使用:before和:after伪元素

伪类“:before”和“:after”在当今这个Web技术潮流之下,使用是越来越多。如果你有观注过各种网页设计的博客(或者有观注过本站的相关博文),你可能已经注意到了“:before”和“:after”在前端开发中展现的魅力。可能很多同学只知道是怎么用,但并未深入的去了解这两个伪类,并不要紧,今天由胡均根据英文文章原名《Learning To Use The :before And :after Pseudo-Elements In CSS》进行翻译,给大家介绍了“:before”和“:after”在Web设计中是如何起的作用,以及其需要注意的一些细节。希望能帮助更好的理解这两个伪类。

CSS3 制作文字特效

今天主要搜集了一些网页中文字用css3制作的特效,并亲自尝试了一下,现把关键的代码和效果贴出来与同学们一起分享,希望能对大家在平时的制作中有所帮助。废话不说,直接进入效果的制作,感兴趣的同学跟着我的代码制作一次,你肯定会有不少的收获。

Inset Text(内阴影效果)

内阴影的文字效果是利用text-shadow属性根据不同光源制作出来的。需要注意三个颜色的配置问题,背景色,前景色,阴影色需要采用有一定的亮度对比色,这样效果更佳,请看下面的效果。

CSS3 Multi-columns 之列数和列宽

Multi-column”译成中文就是“多列”,这个"Multi-column"是W3CCSS3增加的一个多列布局模块(CSS Multi-column Layout Module)。它主要应用在文本的多列布局方面,对于文本的多列布局我想大家并不陌生,因为报纸和杂志上我们随处可见,这种布局在报纸和杂志上都使用了几十年了,但需要在Web页面上实现文本的多列布局,正如下图所示:

Jquery和CSS3打造靓丽的动画进度条

今天在做项目中碰到一个需要用制作一个动画的进度条,一开始搞不清楚是怎么一回事,后在google中搜索了css progress bar,真的太多这样的资料,后随便弄了一个。今天贴出来与大家分享。跟我一起走吧>>>>。

CSS Globe为我们提供了一种简易实现动画进度条的方法。只需要3个元素,1个内容块和2个内嵌元素即可实现一个漂亮的动态进度条效果。只是需要注意的 是,这个效果是比较漂亮,但并能实现实时载入。而是在页面首次载入的时候,会根据你的设置,以Gif动画的形式显示进度条的载入。也就是说,可以用来美 观,但不具有交互作用。如下图所示:

页面

返回顶部