现代 CSS

一个完整的Flexbox指南

Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的。(这里我们称为Flex)。Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。Flex容器会使子项目(伸缩项目)扩展来填满可用空间,或缩小他们以防止溢出容器。最重要的是,Flexbox布局方向不可预知,他不像常规的布局(块就是从上到下,内联就从左到右)。而那些常规的适合页面布局,但对于支持大型或者杂的应用程序(特别是当他涉及到取向改变、缩放、拉伸和收缩等)就缺乏灵活性。根据Chris Coyier的《A Complete Guide to Flexbox》所译,再次向大家系统介绍了Flexbox模块中的各个术语,以及属性、属性参数所起的作用,并附上几个简单的实例与大家理论与实战相结合,实打实的了解清楚Flexbo模块。

如何把你的图标转换成web字体

使用@font-face运用本地字体,制作一些特殊的字体效果非常方便,特别是使用@font-face制作图标,更是让我们省了很多事情。但我们使用的一般都是别人提供好的图标字体,这样一来就有很多同学在问,如何制作自己需要的字体呢?或者说如何将自己需要的图标转换成自己需要字体,在运用到web页面中?这个问题问得很好,其实实现思路并不复杂,我们需要通过一些适量图的软件,绘制出矢量图标,然后通过一定的工具将这些图标转换成需要的字体。或许你会说,这不是废话,还是没有谈到怎么做出来。大家不用着急,根据Martin Gittins的《How to turn your icons into a web font》文章介绍,你只需要一款制作矢量图的应用软件,和一个免费的Web应用程序IcoMoon将矢量图转换成Web字体工具就可以轻松的帮你实现。如果你不信,不仿往下看,我想你看后,以后再也不会使用位图了。(^_^)

css3制作后台管理面板

css3制作后台管理面板

今天为大家带来一个CSS3制作的网站后台管理面板的模板。主要运用到了CSS3新增加的target伪类结合opacity来制作Tab选项卡,以及fontface制作图标等,另外还通过这个- -input-placeholder伪类来统一placeholder内字体在各个浏览器下的样式,具体请看代码注释。

CSS3制作价格表二

CSS3制作价格表二

上回@格子同学使用div模仿了一个价格表格,外观优美,只是其中有一些内容和样式结合在一起,分离不够完美。今天她再次为大家制作了一个价格表格。这次案例中修正了上一回的内容与样式的结合问题,并且利用CSS3制作出完美的UI效果。其中最为有特色的就是CSS3渐变的运用。第一使用渐变制作了一个大背景,第二使用渐变制作了一个网格纹理效果,第三使用渐变制作了锯齿花边效果。在这三个效果中应数锯齿花边难做,如果你不知道如何制作这样的效果,不仿跟着这个案例往下看看。

CSS3制作价格表

CSS3制作价格表

制作一个表格容易,但是要设计一个表格,让它爽心悦目,对于前端攻城师来说可是一个挑战——我们不仅需要考虑表格的外观好看,而且要提高用户的体验,让用户方便阅读表格,方便从表格中找到自己需要的数据。早前参考Red TeamRed介绍的CSS3制作表格的教程——《Feature table design with CSS3》做了一定的讲解《CSS3美化表格》。今天我们换过一种思路,完全使用div来模仿表格,而且这个模仿出来的表格更具扩展,最大的特点是设计完美。

CSS3条件判断——@supports

CSS3条件判断,听起来“不明觉厉”,如果你对CSS稍为熟悉一点的话,你会发现CSS中的“@media”就是条件判断之一。是的,在CSS3的条件判断规范文档中包含了两个部分,其一是“@media”规则,主要用来“根据媒体属性区分样式表”(特别是在Responsive设计中,发挥的作用更是强大);其二是“@supports”规则,主要用来代替前面常用的Modernizr库,在不支持CSS3的浏览器下实现渐进增强式设计。换句话来说,@supports可以让我们在不支持CSS3属性的浏览器下配上单独的样式,看起来很强大,那具体如何使用呢?我们今天一起简单的来学习一下。

CSS3制作迷你播放器面板

CSS3制作迷你播放器面板

这是格子同学提供的一款由CSS3制作的迷你播放器面板的案例(时间效果是由jQuery完成)。这个案例仿Mac电脑的窗口风格设计,整个面板分成三部分,顶部由标题和最小化、最大化以及关闭按钮组成(这三个按钮功能未添加);中间部分类似于播放器一样,左边是播放的按钮(播放、中止和停止)三个组成,以及播放时间的计算(时间效果由jQuery完成);最底下部分是整个时间的统计文本。整体效果清爽,设计层次清晰。当然大家关注的还是使用了什么技术,这里我们仅仅面板效果来说的话,并不复杂,只使用了CSS3的圆角、阴影、渐变和@font-face几个简单的属性,感兴趣的话继续往下看代码吧。

CSS3制作小清新导航

CSS3制作小清新导航

简约而又养眼的一个导航。

CSS3 Media Queries 片段

Responsive设计在现代Web设计中可谓是越来越流行,但很同学们并未理解其真正的设计概念,往往把Responsive视为一种自适应布局。当然有很多同学也在尝试动写Responsive的案例,但如何取其断点左右纠结,如何设置哪几个断点?又从何入手?

Responsive中的断点都依赖于CSS3的Media Queries来决断。曾在CSS3 Media Queries模板使用em单位创建CSS3的Media QueriesiPads和iPones的Media Queries有过这方面的介绍。今天特意根据一些Responsive框架整理了一些常见的Media Queries片段,以供大家参考。

css3制作大型导航

CSS3制作大型导航

白牙同学好久都没有做练习了,今天为大家带来一个CSS3制作的简单大型导航,运用到的CSS3属性包括圆角border-radius、渐变、盒子和文字阴影等等。

页面

返回顶部