点此查看demo apple的官网有个相当不错的头部导航，今天我们运用css3的知识，不借助一张图片，来实现类似的效果。 1.会用到的css3知识 text-shadow ：文字阴影 border-radius：圆角 box-shadow：容器阴影 box-shadow: inset ：当增加inset后，表示使用内阴影 gradient ：渐变，渐变的代码还是很多的，幸运的是网上有自动生成渐变的工具，请看CSS3 Gradient Generator keyframes ：这个属性就比较有意思......
点此查看demo 使用css3的渐变特性制作带渐变效果的button，明河曾整理成一个合集，有兴趣的朋友可以看《css按钮效果及其教程合集》，今天这个教程在渐变的基础再增强下效果：白色的斜纹效果（斜纹效果貌似韩国的网站应用特别多），不使用图片哦。 1.原理说明 要使用css实现斜纹效果，需要解决几个问题： 1、如何使用css向按钮内部添加内容？ 伪类:before或:after结合content......
如果用过twitter，你可能已经留意到当输入框获得焦点后，它的边框会有蓝色发光的效果，并且这里运用了transition属性，使得发光效果有很平滑的过渡。本教程将讲述如何运用box-shadow属性来做到这样的效果。 CSS代码如下： input { transition: all 0.30s ease-in-out; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; outline:none; } 这里通过运用transition属性来展现inp......
CSS3跨浏览器验证工具 这篇文章介绍一些帮助写CSS3代码的工具 CSS3按钮 介绍不用图片用纯CSS3创建按钮的教程 简洁时尚的CSS3表单 该教程讲述用一些CSS3的属性创建表单。你可以简单的定制这些样式。 纯的CSS3按钮被按下背景渐变效果 本教程中，讲述只用CSS而不用图片来创建按钮被按下、划过效果和背景渐变效果。在Webkit浏览器中，运用渐变特性‘-webkit-gradient’来创建颜色渐......
（留意图片底部二角的阴影效果） 要实现容器阴影效果，对于css3来说只是小菜一碟，使用box-shadow类似如下代码即可搞定： box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 但如果要实现demo中的卷曲阴影效果......
看了demo的朋友，猜猜为了实现这个效果，明河使用了几行js代码？100行？200行？曾经明河实现了一样的效果，用了195行的js代码，有兴趣的朋友可以猛击《divSlider — jquery滑动门插件（明河作品）》，而在这个demo中，明河用了0行的js代码！是的，你没看错，真的是0行，不信可以打开demo源代码看下（说这段时明河突然想起了很搞的电视广告，候总吼着八心八箭…此处省略1W......
这是tutorialzine上的一篇实战性颇强的教程，明河将其翻译过来，献给各位对css3敢兴趣的朋友。 这篇教程主要演示的是css3的旋转特性，由于浏览器间还是存在差异的，引入了jquery.rotate.js，姑且忽略IE。同时演示了jquery自定义事件的使用。 1.创建一个幻灯片html结构 <div id="slideShowContainer"> <div id="slideShow"> ......
半透明的边框效果，现在在很多网站可以看的到，比如新浪微博、淘宝网。实现方法多种多样，通用性比较好的方法有2个： 1、新浪微博的半透明边框解决方案： 上图来自明河的微博首页的截图 新浪微博的半透明边框的对话框，采用了九宫法的方式，半透明的边框其实是图片，9张图片组成可自适应宽度和高度的半透明边框，这种实现方式应该来说是比较理想的，问题就是......
（明河备注：webkit浏览器下可看到圆角、渐变背景及气泡动画，firefox和IE看不到气泡动画，IE9以下不支持圆角、渐变背景。） 现在来看制作过程 1、创建如下按钮html结构 <a href="#" class="button big blue">Big Button</a> <a href="#" class="button blue medium">Medium Button</a> <a href="#" class="button small blue"&g......
效果说明：当你滚动页面的时候，菜单会放大，固定于头部一起滚动。 制作教程 一、创建如下的菜单结构 <div id="navi"> <div id="menu" class="default"> <ul> <li><a href="#">首页</a></li> &nb......
如上图，这是作者用纯css实现的’JQuery Sliders’。接下来让我们跟随作者，看一下是如何实现的。 一、Html结构 首先构造如下html，很简单的由div和一个列表组成，至于列表里的内容，根据个人需要自己填充。 <div id="slider"> <ul> <li> <p>www.ria.com–ria之家，专注于ria技术的blog，欢迎......
相当逼真，css3果然强悍。 友情提示：请勿在IE下浏览。 来看下原作者的设计草图： 简明创建过程 第一步 ：创建如下菜单结构 <div id="startmenu"> <ul id="programs"> <li><a href="#"><img src="firefox-32.png" alt="" />Mozilla Firefox</a></li> ......