Twitter上的点赞动画
推特最近更新了他们的点赞按钮,使用了全新的动画,而这个动画使用一组动画来实现的而不是依赖于CSS的 transitions
。今天使用CSS动画的steps
方法来重建这个动画。
推特最近更新了他们的点赞按钮,使用了全新的动画,而这个动画使用一组动画来实现的而不是依赖于CSS的 transitions
。今天使用CSS动画的steps
方法来重建这个动画。
这一次我们将使用CSS来画个超能陆战队里面大白的头像。我们的做法是在一个元素上,使用CSS动态改变背景图的位置,并且加上一些线性效果。
我们很容易无法摆脱的使用我们所熟悉的CSS技术,当新的问题出现,这样会使我们处于不利的地位。随着Web继续的发展,对新的解决方案的需求也会继续增大。因此,作为网页设计师和前端开发人员,我们别无选择,只有去了解我们的工具集并且熟悉它。这意味着我们还要了解一些特殊的工具-那些不经常使用的,但是当需要它们的时候,它们恰恰是最正确的工具。今天,我将要向你介绍一些你以前可能不知道的CSS工具。这些工具都是计量单位,就像像素或者相对单位,但是很可能你从来没听说过它们!让我们一探究竟吧。
在我的关于CSS字体大小的文章中,我写了关于(相对的)新的视窗单位。这些单位vw
,vh
,vmin
,和vmax
都是基于浏览器视窗(Viewport)的大小的。因为它们的实际大小是根据视窗(Viewport)大小改变的,对于响应式设计中这使它们成为很好的单位。虽然在我以前的文章中我反对使用这些单位定义字体大小,但是用它们定义布局元素是非常有用的。
Marie Mosley和他的朋友刚刚在Almanac改动了text-decoration
的属性。你可能了解这个属性。例如,很多浏览器在链接处默认text-decoration: underline
即添加下划线,当然,你也可以设置 text-decoration: none
删除下划线。但你有可能不知道这个属性还可以做很多事情,并且使用各种子属性可以实现更多细致的样式。
嗨,各位,又到了周末总结时间!得益于大量的 Grunt 和 Gulp 插件,我们可以轻松实现网站数据的可视化,虽然深入理解这些工具还比较困难,但分门别类的将它们列出来,也是很有帮助的。
经过近20年的发展,如今的网页排版,以其高密度的显示以及OpenType功能的支持,离现实世界的印刷排版仅是一步之遥。但是平面设计还是有一个领域,我们还在不断地fall back到使用位图,而不是使用单纯的文本:字体显示,如说明性的、绚丽的、戏剧性的、俏皮的、试验性的或料想不到的艺术字母。
本来要管理Rhythm排版一致不是一件易事,响应式中的Rhythm排版就更加困难。幸运的是,Sass的Map可以更好的管理和实现响应式排版。有各种各样的方法来处理响应式排版和Vertical Rhythm,并不局限于我的建议。然而,这是我很多次工作中总结出来的经验之谈。
Hero images 给响应式设计提出了独特的挑战。在最近的响应式图片核查期间,我们发现了一个独特的解决方法,一个我想要分享的方法。直到几年前,我都不熟悉Hero image这个术语。一个就职于大公司的朋友用这个术语,我不得不问这个是什么意思。我不知道这是不是一个常见的描述因为我与世隔绝了。或者这可能是大公司的术语。
今天给大家介绍有关于响应式设计中的一个新东西,现在也比较流行:响应式图像。RWD不是一个新话题,但实现它的方法并不轻松,在实现过程当中充满了陷阱。尤其是当RWD涉及到图片的处理时,有很多问题还有待于解决。