圆角，大家一定都会做，border-radius, 内凹圆角如何实现？ 可以拿个白色圆盒子盖住方形盒子的大半边实现，但是这样，是不透明的，背景发生改变时，就要改遮盖盒子的颜色，或者背景是渐变，改起来更麻烦，或背景是图片等等，就直接不太好改了，这种方法就有局限性。 说白了就是遮盖的那部分不透明以后，自适应性不强。 这里介绍一个用径向渐变实现的内凹圆角，可以解决上述问题。可以用CSS生成一个背景透明的内凹圆角。 1. 基本线性渐变 div { height: 100px; width: 200px; backgroun…
设计行业的发展非常迅速，每天都有新颖的创意网站更新，而HTML和CSS在方向上有一定局限。 CSS已经从内容布局方面走了很长的路。 它是用来精确控制文件的布局和媒体应用不同类型的布局。 现代web站点是为了提供各种类型的设计与用户交互。 在大多数情况下可以使用CSS3效果。 给设计师更多的灵活性和互操作性,CSS3是CSS提出的下一个主要版本。 下面给大家带来免费下载的HTML5+CSS3登陆表单 ，这可能方便您的设计项目或您自己的网站。 免费下载的HTML5+CSS3登陆表单 你可以找到大量的在线免费设计的东西。…
今天带给大家一篇自己翻译的文章，3个简单的hover动效效果，初次翻译有不对的地方大家多多见谅。 现代网络中，很多技术形式可以实现有趣的动效，但最简单优雅的通常是CSS，特别是新增加的CSS3。 过去，我们不得不依靠JavaScript实现动效，但由于跨浏览器支持CSS3不断地升级，现在我们可以不通过任何脚本实现。但是很悲催，仍然有浏览器（IE9以下）不支持CSS3，所有你需要一个旧版的浏览器或设置渐进性效果来解决兼容性问题。 今天我们来看一个炫酷的悬停效果--图片和文字标题的隐藏、显示切换动效。 如果你需要示例代…
世界上有很多Web设计师、前端人员喜欢到Codepen上展示他们的片段代码，有的代码的确强大而惊人，所以我们经常到这里获取一些小灵感是很不错的。 最近Codepen官网上发布了2014年Codepen上最热门的100个code&CSS片段代码，这些片段中有不少今人惊叹和创意的CSS和code，值得一看，下面我们来看看TOP10的片段有那几个吧： TOP 10: 摇摆的电灯 灯泡好像被微风吹动一样，左右摇摆，很写意。 预览效果 TOP 9: 纯CSS视差滚动 这是比较流行的特效，用纯CSS编写很厉害！ 预览效…
作为前端的设计师和工程师，我们用 CSS 去做样式、定位并创建出好看的网站。我们经常用 CSS 去添加页面的运动过渡效果甚至动画，但我们经常做的东西不会超过这些。 动效是一个有助于访客和消费者理解我们设计的强有力工具。这里有些原则能最大限度地应用在我们的工作中。 迪士尼经过基础工作练习的长时间累积，在 1981 年出版的 The Illusion of Life: Disney Animation 一书中发表了动画的十二个原则 (12 Principles of Animation) 。这些原则描述了动画能怎样用于…
当下CSS3应用已经相当广泛，其中重要成员之一就是CSS3动画。并且，随着CSS动画的逐渐深入与普及，更复杂与细腻的动画场景也如雨后春笋般破土而出。例如上个月做的「企业QQ-新年祝福」活动： 感谢shirley帮忙录制上面的视频，虽然视频内容是手机上的显示效果，但是，这个“企业新年祝福活动”原本只针对桌面端，移动端是后来辅助增强（增加了相当于活动页面UV 5.7%的点击）。而目前大多数类似页面只针对移动端，例如其他同事实现的QQ空间5.0预约页第二版： 扫码(需登录)或者链接二选一： 访问demo戳这里 因此，需要…
悄悄地，GIF 格式的进度条已经越来越少，CSS 进度条如雨后春笋般涌现。今天要介绍的这个 CSS3 进度条，效果和 Flyme OS 4 上的加载动画一样。 首先，来看下最终的效果： 它的 HTML 结构也很简单，但不是 Single Element： <div class="spinner"><i></i></div> 外层元素 .spinner 负责显示底部的半透明圆环： .spinner { font-size: 20px; wid…
