冰果 发布于 03月02, 2015

【视频】css动画实用技巧

Hello,大家好,今天跟大家聊一下,如何使用css3动画属性来实现惊艳的动画效果。

CSS想必大家都用过,那么你可知道使用CSS还可以实现一些有意思的动画效果?今天就请大家随着我们的课程,一起去领略一番吧!

551b98ae0001e57906000338-590-330

阅读全文 »

冰果 发布于 12月30, 2013

移动端实现标题文字的截断

适用场景

当屏幕分辨率为320X500时模块标题效果如下:

当屏幕分辨率为480X500时模块标题效果如下:

也就是当屏幕分辨率大时显示的文字多,分辨率小时显示文字少,同时需要保证这一部分始终完全显示。

实现方式

方案一: DEMO 来自@蒋轩哲

  1. 整个容器标题文字容器 添加 overflow:hidden;text-overflow:ellipsis;white-space:nowrap; 保证内容在一行内显示。效果如下,我们需要显示的网站标识同时也被省略掉了,这时我们接着改进
  2. 标题文字容器添加 display:inline-block;max-width:100%;设置容器最大宽度为100%,这时我们发现网站标识被挤到了下面
  3. 网站标识容器添加 display:inline-block;margin-left:-6em; 通过设置负margin让我们网站标识可以出显示在标题行里
  4. 标题文字容器接着添加 padding-right:6em;box-sizing:border-box; 通过设置box-sizing属性值为border-box,把padding-right值占用的位置计算到了标题文字容器里,注意:padding-right的值正好是网站标识容器margin-left的调整的值。调整完后的效果如下:

  5. 最后我们调整一下标题文字容器网站标识容器的垂直对齐方式让它们垂直居中对齐

方案二:DEMO 来自@guopi

  1. 标题容器添加 display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%;
  2. 最后我们调整一下对齐方式让内容在整个容器中垂直居中对齐

方案三:DEMO 来自@snadn

  1. 标题容器添加 display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;vertical-align:top; 这里我们提前把垂直居中对齐设置好了。
  2. 又整个容器 添加white-space:nowrap; 把内容控制成一行显示
  3. 接着为又整个容器添加margin-right:100px;把标题内容限制在一定的宽度内,好让网站标识显示出来。
  4. 在上面的效果中发现灰色背景也同时被限制在了一定的宽度内,所以我们把背景的设置提出来放在整个容器上,最终效果如下:

方案四:DEMO 来自@snadn

  1. 标题容器添加 display:inline-block; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 100px);
  2. 最后我们调整一下对齐方式让内容在整个容器中垂直居中对齐

总结:

  1. 方案一和方案三对于不同分辨率下的截断效果比较统一
  2. 方案二在不同分辨率下有些差异,比如分辨率较大时内容会截断的多一些,分辨率小时内容又会截断的少一些
  3. 方案四在移动端的兼容性不是很好慎用。

阅读全文 »

冰果 发布于 10月24, 2013

【翻译】如何使用JavaScript控制CSS Animations(动画)和Transitions(过渡)

源文:http://css-tricks.com/controlling-css-animations-transitions-javascript/

Zach邮件跟我说,上Stack Overflow这类的论坛,他经常碰到一些关于JavaScript控制CSS 动画的问题,又提供给我几个例子。我很久就打算写一些关于这方面的文章,所以很高兴让Zach提出来并促使我写了这个教程。
有时候WEB开发人员认为CSS的动画比JavaScript的动画更难理解。虽然CSS动画有其局限性,但它的性能比大多数JavaScript库更加高效,因为它可以借助硬件加速啊!其效果绝对可以超出我们的预期。

CSS animations和transitions再加上点JavaScript就可以实现硬件加速动画,而且其交互效果比大多数JavaScript库更高效。 So,让我们快点开始吧!小伙伴们都等不及了!

阅读全文 »

冰果 发布于 10月08, 2013

【翻译】10个非常节省时间的CSS整理工具

原文地址:http://www.sitepoint.com/terrific-time-saving-css-tools/

整洁,组织良好的CSS有很多好处。一个干净整洁的CSS的站点将被加载的更快,展现在搜索引擎结果中更加突出,并且在未来的客户端中也能得以很好的展示。从每天的访问者到资深的设计师同事都将从你的辛勤成果整洁的CSS标签中获益。
但是,当你准备整理一堆被无数次迭代设计和更改的css时,那将会是一个枯燥、耗时的过程。
或许,你并不想去承担如此枯燥乏味的任务,你的客户也不想付费去做如此耗时却只有很少好处的活儿。
站在设计师的角度,手动整理css可是足以摧毁创造力的,它让你不再关注工作中需要的较高层次的思考,也可能让你逐渐不喜欢你的专业。
幸运的是,这里有一些出色有用的工具可以帮助你自动处理CSS中一些更平常的问题,解放你的脑细胞来处理网页设计中更有创意,更有意思的事情。以下工具会给你留下一个高效,优化,无可挑剔组织的CSS样式表。

阅读全文 »