点此查看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’来创建颜色渐......
看了demo的朋友，猜猜为了实现这个效果，明河使用了几行js代码？100行？200行？曾经明河实现了一样的效果，用了195行的js代码，有兴趣的朋友可以猛击《divSlider — jquery滑动门插件（明河作品）》，而在这个demo中，明河用了0行的js代码！是的，你没看错，真的是0行，不信可以打开demo源代码看下（说这段时明河突然想起了很搞的电视广告，候总吼着八心八箭…此处省略1W......
当你的表单使用ajax来提交的时候，有一个点要关注：防止用户重复点击提交按钮，同时要跟用户一个良好的交互反馈，比如点击提交后，有“正在提交中….”的提示或者出现一张loading图片。 在这个demo很好的展示ajax表单提交时的按钮交互处理，同时代码也不会特别复杂，算是一个学习jquery的不错demo，原文请看《Create a Simple Interactive CSS Button with jQuery》。 1.构建一个简单......
不一一截图。更多的示例，请猛击下面的“查看demo”。 除了一二个面板实用性比较强外，其他的，可以作为学习css3的范例，页面中实际用到jquery地方不对。
......
半透明的边框效果，现在在很多网站可以看的到，比如新浪微博、淘宝网。实现方法多种多样，通用性比较好的方法有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......
圆角是css3中应用最广的属性，今天明河将详解css3的圆角设置。 先来段经典的通用于Firefox, Safari/Chrome, Opera , IE9的圆角设置代码： .round{ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* future proofing */ -khtml-border-radius: 10px; /* for old Konqueror browsers */ } 来自明河之前发过的实用的css代码片段集合。 为了更好的说......
之前明河介绍了不少图片画廊效果，但效果基本上大同小异，今天明河介绍些使用css3构建的图片画廊，利用css3可以实现图片的旋转、倒影等，使画廊看上去相当华丽（当然IE支持不善）。 1、Polaroid from Tutorialzine css3、拖拉、灯箱效果的混合体，相当不错的效果。 2、Polaroid from 3site 相对于第一个效果，此画廊效果有些别扭，交互上有待加强。 3、Polaroid from Zurb 这个效果倒是......
效果说明：当你滚动页面的时候，菜单会放大，固定于头部一起滚动。 制作教程 一、创建如下的菜单结构 <div id="navi"> <div id="menu" class="default"> <ul> <li><a href="#">首页</a></li> &nb......