现代 CSS

2013年03月23日第3次W3cplus在线YY交流会

分享主题

九九——《前端如何使用github》

D姐——《Responsive小试牛刀》

太棒了!border 打造钻石王老五,发家致富值得学习!

钻石一枚

今天给大家带来钻石图形demo,主要使用了 border.请用 Chrome 浏览器浏览.

CSS制作面包屑

CSS制作面包屑

面包屑是Web中常见的一个元件,早前在《CSS3制作Breadcrumbs》和案例《css3面包屑设计》使用CSS3制作了各式各样的面包屑效果,今天@逆天使用上原始的CSS配合一定的标签制作了一款兼容多浏览器的面包屑案例,感兴趣的可以看看:

太棒了!mask 轻松构建炫酷CSS探照特效!

太棒了!mask 轻松构建炫酷CSS探照特效!

今天 993 为大家带来 mask  的新 demo,打造过程比前作复杂一些,本作代号是:Think different,希望大家能喜欢小弟做的 demo,多提建议帮助我改进。(请在 Chrome 下浏览)

太棒了!mask 简单构建刀光一闪效果!

太棒了!mask 简单构建刀光一闪效果!

今天将介绍遮罩属性 —— mask 的简单 demo。 mask 属性暂时只有 webkit 浏览器支持,使用需要加标识符。案例中用到的缩写均可展开,特别需要强调的是 mask-origin 这个属性,指定了遮罩的初始位置。默认是 padding,本例中设置为 content。

六种实现元素水平居中

居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中、垂直居中和水平垂直居中。而其中水平居中相对于后两者来说要简单得多。早期总结了一下互联网上有关于水平垂直居中的几种实现方案,比如说《CSS制作水平垂直居中对齐》中介绍了八中实现水平垂直的方案,而在《CSS制作图片水平垂直居中》一文介绍了四种实现图片垂直居中的方案,并且在《CSS3实现水平垂直居中》使用了css3的flexbox的属性轻松实现多行文本水平垂直居中的方法。当然大家有可能认为这些方法对于浏览嘎嘎的兼容性处理太烦了,也有人使用jQuery的方法实现水平垂直居中效果,比如在《jQuery制作元素在屏幕中水平垂直居中效果》中介绍的。今天我在这篇文章中向大家介绍实现水平居中的六种不同方法,希望对大家有所帮助。

主流浏览器的Hack写法

此处的“hack”并非是网络中很神秘的组织“黑客”,而是使用他们可以帮助你解决浏览器下一些怪异和特殊的bug。很多时候对于这样的讨论也非常多,比如说在您的代码中应不应该使用hack?甚至延伸到使用“hack”是一个优秀的前端人员?其实,有时候是逼不得以,必须为之。

Metrostyle Web UI

Metrostyle Web UI

Metro风格成了一种新的设计风潮,久违的了藤藤根据国外友人提供的Metro设计图,把整个Metrostyle设计转换成CSS代码,其中一些效果使用了CSS3来制作,比如说自定义时间动画、加载进度长,复选框自定义、tooltip提示框等效果。在整套Metrostyle UI中包括了:导航(含下拉导航效果)、登录表单、下拉控件、搜索表单、自定义选择框、时钟、加载进度条、日历、icon图标、视图按钮、分享按钮、复选框、色板、功能按钮、垂直手风琴、视频播放器面板、选项卡、按钮和价格区块等20个Web中常见的UI效果。

关于w3cplus文章版权的申明

年前,大漠在微博上号召了一些翻译者,打算把国外的一些优秀资源翻译过来,好方便那些英语比较薄弱的人,以促进整个前端行业的进步。这些翻译者本着对w3cplus的信任和为前端行业贡献自己一份微薄之力的热情而加入。他们中的大多数其实英文也不好,借助于google或字典,翻译一篇文章得花费很多时间;他们默默无闻自愿无偿,凭着热情和毅力慢慢进步。w3cplus既然给予不了物质的资助,就应该给他们一份成长的机会,所以所有的翻译文章都会注明作者的联系方式,说不定就可以结识些志同道合的朋友。现在他们的文章直接被进行第二次加工而出现,而他们的个人信息则被删得一干二净,你让w3cplus如何对他们交代。在此特别申明,对于翻译的文章,w3cplus始终坚持拥护翻译者,如果w3cplus最后连这个都做不到……

CSS3制作登录表单

CSS3制作登录表单

这个表单效果是很普通,但其制作采用的方法却很有创新,其中用到老技术的是@font-face制作icon、box-shadow制作阴影等,最亮点是使用了calc()函数来计算定位的值。这可是一种新玩法,虽然前面有介绍过这个属性的使用方法,后期的制作中却很少使用他,这个案例让我再次领略了calc()函数的功能。如果你喜欢,也可以尝试一下,自己动手丰衣足食。

页面

返回顶部