Clik here to view.
藤藤每日一练——CSS3制作登录表单
今天藤藤给大家带来的是一个CSS3制作的登录表单效果，这个效果有两上亮点，第一是渐变制作内凹圆角效果，第二个就是渐变制作花边效果。可以说这两个效果的实现都有一定的难度，如果你对css3的渐变属性gradient和CSS3的多背景不了解的话，你是无法实现的。如果你对这个效果感兴趣，那就自己动手一试吧。 demodownload HTML 结构 <div class="box">...
View ArticleClik here to view.
CSS3制作登录表单
站上已经放了多个CSS3制作的表单效果了，但为增强大家的视野，继续跟大家分享一个CSS3制作的登录表单。这个案例其实很简单，主要使用box-shadow做了分层纸张效果，使用gradient制作渐变按钮效果，然后就是@font-face制作的icon效果。其实这些理论方面的知识在站上都能找到，如果你是第一次接触这些，不仿试着查找一下。 demodownload HTML结构 <div...
View ArticleClik here to view.
CSS3制作卷角菜单
这个案例是由@猫仔同学提供的。最大的亮点就是使用了CSS3制作了卷边效果，配上js的移动效果，真是与众不同。在这个demo中主要运用了border-radius制作卷边效果，使用gradient实现了导航的渐变效果，而且还使用了border绘制了向上的箭头，同时给箭头配上了一个css3的动画效果。真的不错哟。 demodownload HTML 结构 <div...
View ArticleClik here to view.
CSS3制作立体导航
首先非常感谢verycd的@不点同学提供案例。这个案例是使用CSS3制作的一个多颜色3D立体导航。在这个案例中有两个关键之处，其一使用box-shadow制作导航立体效果，其二使用gradient配合:before选择器制作导航项之间的分隔线。详细请参阅代码。 demodownload HTML结构 <ul class="nav black"> <li><a...
View ArticleClik here to view.
藤藤每日一练——CSS3制作3D表单
藤藤今天给大家带来一款使用CSS3制作的3D立体表单效果。在这个案例中主要使用了CSS3的渐变制作了body的背景；使用box-shadow制作的3D立体input框和3D立体按钮；使用@font-face制作的icon图标。 demodownload HTML 结构 <div class="box"> <form> <div>secure...
View Article渐进增强版html
<!DOCTYPE HTML> <!--[if !IE]><!--><html lang="zh-cn"><!--<![endif]--> <!--[if gt IE 9]><html class="ie10" lang="zh-cn"><![endif]--> <!--[if IE...
View ArticleClik here to view.
藤藤每日一练——CSS3制作Twitter信息框
今天与大家分享一款使用CSS3制作的Twitter信息分享框。在这个DEMO中，使用的CSS3属性还是那么几个，css3的渐变gradient，盒子阴影box-shadow，css3的选择器等，不过在这个案例中两个特色之处，一个是使用了":before"配合gradient制作了内凹圆角效果，类似于chrome浏览器上的tabs效果，这个效果可有点难度（思路来自于Tabs with Round...
View ArticleClik here to view.
Tabs with Round Out Borders
这个效果和前面藤藤制作的CSS3制作Twitter信息框是一样的，不过比她的效果简单一些，再次放上来的目的是写了一篇《Tabs with Round Out Borders》博文，主要针对的就是这种效果的制作思路与细节。在这个效果中主要运用的是元素的“:after”和“:before”来制作tabs的底部内凹圆角效果。 demodownload HTML结构： <ul class="nav...
View ArticleClik here to view.
Tabs with Round Out Borders
前几天藤藤在每一练中写了一个《CSS3制作Twitter信息框》效果，酷似Chrome浏览器的tabs效果： 从上面的效果图上来看，似乎有点棘手，特别是tabs底部的内凹圆角之处的处理。当初转这个设计图的时候，我们一起都没有思路，后来在css-tricks中找到了一篇类似于这种设计的教程，仔细阅读后才知道其原理。今天稍有空闲，将其教程Tabs with Round Out...
View ArticleClik here to view.
CSS3重构百度图片首页中图片展示效果
今天使用百度图片搜索图片时，无意之中看到首页的图片展示效果具有旋转、阴影等效果。好奇之下查看其源码，使用了一些CSS3属性制作，但不知道出与什么原因，在制作这个效果中并不什么完美（我个人认为），于是动手自己整了一个，放上来与大家分享，希望大家喜欢 demodownload HTML结构 <div id="index_tags"> <a href="#"> <img...
View ArticleClik here to view.
细说百度图片栏目——图片展示效果
今天写个DEMO效果时，无意之中在Baidu图片中发现其图片列表使用了CSS3的transform,transition,box-shadow等属性。这是不是可以说百度在开始引领国内的CSSer开始使用CSS3相关属性呢？如果是的话，那这对于前端开发人员来说是一件福事。毕竟百度是国内互联网中大企业之一，他的一些举动都将有很多前端人员跟随着。这些都是我个人的猜想，仅供参考，因为我就是一个CSS3的爱好...
View ArticleClik here to view.
藤藤每日一练——CSS3制作Freebie标签
这个案例主要使用css3来制作标签，不过使用的的属性还是常见的那几种，可是要实现还是有一定的难度。其中最有亮点的是使用css3来实现斜线背景以及方格背景，然后就是使用@font-face来制作icon图标。原理简单，重要的是思路，以及这两种背景实现的细节。感兴趣的同学直接看源码。 demodownload HTML标签 <div class="box"> <ul...
View ArticleClik here to view.
藤藤每日一练——CSS3 Chunky Button Pack
这是一个CSS3使用gradient、box-shadow制作的按钮集合，在w3cplus有关于按钮方面的实例不少，随便搜索css3...
View ArticleClik here to view.
12个优秀的Responsive LightBox特效
Responsive(响应式) Design现在互联网上有关于这个的介绍到处可见，也是一种流行的布局设计。但是LightBox呢？他是一个常见的媒体展示效果，让你的图片或视频，点击后能在整个屏幕展示其效果。如果你的网站是一个Responsive布局，你当然希望Web中运用的LightBox特效也具有Responsive的功能。那怎么办呢？mike ilz在《12 Responsive...
View ArticleClik here to view.
20款Responsive Menu教程
Responsive设计就不说是什么了？如果你不太了解，可以先点击这里做一定的了解，也可以点击这里查看一些有关于Responsive的案例。今天要跟大家说的是有关于Responsive导航的制作。...
View ArticleClik here to view.
藤藤每日一练——CSS3制作分步注册表单
这个DEMO是使用CSS3制作的一个分步注册表单，每个input对应的是每一步，在表单得到焦点时，对应的step也会进行对应的改变。不过这个效果是使用js代码来实现，但整个表单的外观是由CSS3来完成的，整个案例中使用了：@font-face来制作icon图标，使用gradient来制作渐变的按钮效果，使用text-shadow来制作文字阴影效果等等，方便简单点，但细节与创意才是最重要的，喜欢的同学...
View ArticleClik here to view.
2012年优秀jQuery插件连载（九）
今天继续为大家推荐十款jQuery插件，这十款插件包含以下几种类型，表单自定义样控件，比如说checkbox,radio,file等；Responsiv布局的Media Queries的javascript库；等高插件；自定义滚动条插件；媒体分享等插件，详细的大家请阅读下面的详细内容。 1、Ideal Forms Ideal...
View ArticleClik here to view.
15个Responsive设计的测试工具
有很多工具和技术，能创建一个完美的网站，针对于不同的用户群体。同时，网页设计已经不在单纯是一个简单的布局，相对来说比以前复杂的多。因为许多不同的浏览器分辨率和设备的出现，传纺的网页展示风格并不适合所有的设备，这样就要求Web页面出来要适应于不同的屏幕分辨率和不同的终端设备，比如说移动终端设备。值得庆幸的是，Responsive设计可以实现各种分辨率和移动终端的效果。而且有很多工具来创建创建这种技术，...
View Articlecss重置
本css重置参考了normalize.css、bootstrap等,然后根据自己多年的经验进行了一些简单的整理并修改，以更适合自己目前的使用及一些大型项目的使用。...
View ArticleHTML常用编码转换
本代码片段由rookie提供。 var encoding = (function () { function ToASCII(str) { return this.ToNormal(str).replace(/[^\u0000-\u00FF]/g, function () { return escape(arguments[0]).replace(/(?:%u)([0-9a-f]{4})/gi,...
View Article