使用css3制作仿Apple.com的导航栏

apple_menu

点此查看demo apple的官网有个相当不错的头部导航,今天我们运用css3的知识,不借助一张图片,来实现类似的效果。 1.会用到的css3知识 text-shadow :文字阴影 border-radius:圆角 box-shadow:容器阴影 box-shadow: inset :当增加inset后,表示使用内阴影 gradient :渐变,渐变的代码还是很多的,幸运的是网上有自动生成渐变的工具,请看CSS3 Gradient Generator keyframes :这个属性就比较有意思......

使用css3制作带高亮条纹的简单按钮

stripes-button

点此查看demo 使用css3的渐变特性制作带渐变效果的button,明河曾整理成一个合集,有兴趣的朋友可以看《css按钮效果及其教程合集》,今天这个教程在渐变的基础再增强下效果:白色的斜纹效果(斜纹效果貌似韩国的网站应用特别多),不使用图片哦。 1.原理说明 要使用css实现斜纹效果,需要解决几个问题: 1、如何使用css向按钮内部添加内容? 伪类:before或:after结合content......

css:box-shadow的发光效果

twitter_input

如果用过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......

4月最好的HTML5和CSS3教程

cs3tool

CSS3跨浏览器验证工具 这篇文章介绍一些帮助写CSS3代码的工具 CSS3按钮 介绍不用图片用纯CSS3创建按钮的教程 简洁时尚的CSS3表单 该教程讲述用一些CSS3的属性创建表单。你可以简单的定制这些样式。 纯的CSS3按钮被按下背景渐变效果 本教程中,讲述只用CSS而不用图片来创建按钮被按下、划过效果和背景渐变效果。在Webkit浏览器中,运用渐变特性‘-webkit-gradient’来创建颜色渐......

css3实战—制作一个弹性滑动的图片显示

css3-flexbox

看了demo的朋友,猜猜为了实现这个效果,明河使用了几行js代码?100行?200行?曾经明河实现了一样的效果,用了195行的js代码,有兴趣的朋友可以猛击《divSlider — jquery滑动门插件(明河作品)》,而在这个demo中,明河用了0行的js代码!是的,你没看错,真的是0行,不信可以打开demo源代码看下(说这段时明河突然想起了很搞的电视广告,候总吼着八心八箭…此处省略1W......

使用jquery制作ajax提交表单时的交互按钮

button

当你的表单使用ajax来提交的时候,有一个点要关注:防止用户重复点击提交按钮,同时要跟用户一个良好的交互反馈,比如点击提交后,有“正在提交中….”的提示或者出现一张loading图片。 在这个demo很好的展示ajax表单提交时的按钮交互处理,同时代码也不会特别复杂,算是一个学习jquery的不错demo,原文请看《Create a Simple Interactive CSS Button with jQuery》。 1.构建一个简单......

使用background-clip制作半透明的边框

bc

半透明的边框效果,现在在很多网站可以看的到,比如新浪微博、淘宝网。实现方法多种多样,通用性比较好的方法有2个: 1、新浪微博的半透明边框解决方案: 上图来自明河的微博首页的截图 新浪微博的半透明边框的对话框,采用了九宫法的方式,半透明的边框其实是图片,9张图片组成可自适应宽度和高度的半透明边框,这种实现方式应该来说是比较理想的,问题就是......

css3华丽的气泡效果按钮

css3_animated_buttons

(明河备注: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圆角Border-radius详解

radius-3

圆角是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代码片段集合。 为了更好的说......

10个使用css3构建的图片画廊

3

之前明河介绍了不少图片画廊效果,但效果基本上大同小异,今天明河介绍些使用css3构建的图片画廊,利用css3可以实现图片的旋转、倒影等,使画廊看上去相当华丽(当然IE支持不善)。 1、Polaroid from Tutorialzine css3、拖拉、灯箱效果的混合体,相当不错的效果。 2、Polaroid from 3site 相对于第一个效果,此画廊效果有些别扭,交互上有待加强。 3、Polaroid from Zurb 这个效果倒是......

css3+jquery实现固定头部的菜单

css3-menu

效果说明:当你滚动页面的时候,菜单会放大,固定于头部一起滚动。 制作教程 一、创建如下的菜单结构 <div id="navi">         <div id="menu" class="default">             <ul>                 <li><a href="#">首页</a></li>               &nb......

12