现代 CSS

Beautiful Login Form

 Beautiful Login Form

好久没有写案例了,今天邮件收到Team Dzyngiri 设计的Creating Beautiful Login Form。他这个案例用了很多CSS3效果,不过有些地方还是使用了图片和jQuery来实现。后来兴趣来了,我根据他的设计效果进行了一些修改。比如说,icon我使用了我们常用的@font-face来制作,icon显示与隐藏,他是通过jQuery来实现,我现在改了他的结构和样式,通过css来实现。感兴趣的同学可以对比一下两种方法的实现过程与区别。

216个Web安全颜色

Web上的颜色运用,对于设计师来说是小菜一碟,对于不是设计师来说还真是头痛的事情。打个比方说,Web的安全色是什么?或者说Web的安全色有多少?说实话,我以前只知道一个数字216,但我不知道具体是什么?今天为大家整理了216个web安全颜色,仅供大家参考。

我和W3cplus的故事

时间如流水,2012年12月21日并不是世界的末日,随之张开双臂迎来了新的一年2013年。回首往事,W3cplus从域名的注册开始到2012年的12月28日,也算是走过了两年的历程。

两年的时间对于人的一生来说是很短暂的,但对于一个刚学习走路的新生儿来说,这两年是非常宝贵的,因为这两年能让他慢慢的学着走路,慢慢的让他走的更稳。为了能更好的激励自己,为也这宝贵的两年光阴,我想回忆一下我和w3cplus之间的故事。

机缘巧合,我的工作中接触了Drupal,为了能实战,我开始使用Drupal制作网站,一个属于自己的个人网站,也就是今天的W3cplus。在创建w3cplus时我碰到了许多问题,有一些问题是我个人能力无法解决的(因为我只是一个CSSer),还好有很多热心朋友:@为之Drupal中国的龙马、Lugir@袁哥帮助,特别是@为之兄手把手的教我,让我从中受益良多。

藤藤每日一练——Toolbar Menu

藤藤每日一练——Toolbar Menu

辞岁迎新,在2012年w3cplus为大家提供了116个案例,其中案例有原创,也有仿制,同时也有转载,但这些案例都是最新,最有创意的,也是我们精心挑选的,让我从中获益不浅。从藤藤加入w3cplus后,我们开辟了一个藤藤每日一练 栏目,她经过自己的努力和大有分享了近四十个有关于CSS3的案例,这些案例有的是独立创造的,有的是根据国外知名的设计图,将设计转换为CSS3的code。我想有很多同学从中学到了自己想学的知识。我们将在2013年会为大家推出更多的、更有意义的案例。今天藤藤为大家提供新年来第一个案例。希望大家喜欢,更希望大家能支持我们w3cplus的发展。

我们的js世界

新年伊始,欢迎@清风加入w3cplus。他将用自己独立的角度与大家分享自己的学习心得。在这里我仅代表w3cplus的全体成员欢迎@清风的加入,我们同时欢迎更多爱于分享的同学加入我们的队伍之中,让更多的同学受益.今天这篇文章 是清风同学第一次与大加分享.他从不同的角度阐述了对js的理解,希望这篇文章对大家有所帮助,更希望清风为大家带来更多的分享。

使用CSS3的background-size优化苹果的Retina屏幕的图像显示

Sprites熟悉的人较多,在国内有有称之为精灵,也有人称之为雪碧,我个人更喜欢称之为Sprites图像。在一张图上集成了很多个图,然后通过background-position定位,达到背景图显示正确的效果,减少Http的请求个数,从而优化性能。而background-size来说,如果你没有接触过CSS3方面的相关知识,那可能会比较陌生,不知道如何使用,其实很简单,就是通过这个属性来改变背景图片的大小。很神奇吧。那么,为什么 这两个东东就跟Retina屏幕设备扯上了关系呢?要是你有了解过Retina,你就知道是为什么了,要是你从未了解过,也无需担心,继续阅读这篇博文,你就知道为什么了。

藤藤每日一练——CSS3制作下拉菜单

藤藤每日一练——CSS3制作下拉菜单

下拉菜单如果不需要兼容IE6的话,完全可以不依赖于任何js脚本实现,今天这个案例也是有关于CSS下拉菜单,但有别于以往的,主要区别是子菜单是固定显示在那,而不是默认隐藏,鼠标悬浮显示的那种,另外还通过CSS3添加了一个滑动块的效果,以前这种滑动块效果也是需要js来实现,今天看到的是没有使用任何脚本代码,感兴趣的不仿一看。

iPads和iPhones的Media Queries

CSS3 Media Queries是一个强大的媒体查询功能,他的出现使用我们的站点可以随着不同的设备展现出不同的样多风格。紧随着Responsive设计的出现,Media Queries的功能是越来越得到前端人员的亲眯。

我也不另外,跟着这股时尚流行风,从接触到学习,紧接的到应用,对这个属性有了基本上的了解和实战经验。为了大家方便使用Media Queries,W3cplus通过互联网的搜集整理了一份CSS3 Media Queries模板。随着移动端上的应用越来越多,特别是苹果公司的系列产品型号的增加,给前端人员对Media Queries的运用带些许的麻烦。为了解决这个麻烦,在互联网上搜集了相关的资料,专门针对苹果的iPads和iPhones的Media Queries模板,希望这些模板能帮助大家减少在网上查找的时间。

藤藤每日一练——Pure CSS3 Circle Menu

藤藤每日一练——Pure CSS3 Circle Menu

由于藤藤忙于考试,所以好久没有和大家分享CSS3的案例了,今天藤藤特意整理了一个DEMO与大家分享。这个案例是一个圆形转盘导航,初看效果可能很多人都会认为不可思议,CSS3能做出这样的效果,是的,真的是CSS3做的。在整个效果中有几个关键之处,扇形形是通过clip、border-radius和transfrom来实现,其中使用gradient和box-shadow制作了不同的颜色块。对于icon就不用说了,@font-face来完成的。如果你感兴趣,不仿自己先思考一下。

CSS3 Glowing Text Effect

CSS3 Glowing Text Effect

好像没有写CSS3方面的Demo效果了,今天在邮件中看到一个有关于CSS3写的文字发光和动画的案例,觉得很有意思,也就动手一试了,真心的爽。这个效果中最关键的是使用了十个相同的标签,来模仿了一个3D立体的效果,同时设置一个抖动的效果,这个效果主要由transform的rotate3d来制作,在不同的时间段设置不同的效果,另外通过text-shadow制作了阴影颜色变化的效果。详细的看代码吧。

页面

返回顶部