【ul开发攻略】HTML5/CSS3菜单代码 阴影+发光+圆角
2014-10-08 13:40
591 查看
HTML5/CSS3菜单特效代码,实现了阴影+发光+圆角效果,实属不错,不过IE8下看不到效果,期待IE8快点兼容css3啦。本效果代码简洁,还可继续优化完善,要的就拿去哦。
View Code
效果截图:
代码分析:
我们拖动ul到HTML后,默认的样式有点。没有文字阴影,渐变背景,没有边框阴影。
当我们去掉点过后(list-style: none;),不让原先点的位置仍然占宽(padding: 0px;),我们又想让ul里的元素们都能一行显示(display: inline;)。感觉这些都视乎很简单。那么我们真正要实现文字阴影、渐变背景和边框阴影又怎么做呢?
世间无难事,只怕不懂CSS。
其实CSS3已经有了可以设定文字阴影,渐变背景和边框阴影的标签。
文字阴影:
text-shadow:5px 2px 5px #FFFFFF;
渐变背景:
background: #37578C;
background: -webkit-linear-gradient(#37578C, #002B46, #608BAE);
background: -moz-linear-gradient(#37578C, #002B46, #608BAE);
background: -ms-linear-gradient(#37578C, #002B46, #608BAE);
background: -o-linear-gradient(#37578C, #002B46, #608BAE);
background: linear-gradient(#37578C, #002B46, #608BAE);
边框阴影:
box-shadow: 2px 2px 5px #FFFFFF;
初次特效外,还有什么圆角(border-radius: 5px 5px 0px 0px;当然也要考虑浏览器差异,类似渐变背景的写法。)
感觉这些特效,已经能基本满足我们日常设计中的基本需求了。什么3D样式的按钮等等。
后边继续跟进研究CSS3在3D效果的体验上的做法。
欢迎关注 ~
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5/CSS3阴影菜单</title> <style> .ui-menu { border: 0px; background: #37578C; background: -webkit-linear-gradient(#37578C, #002B46, #608BAE); background: -moz-linear-gradient(#37578C, #002B46, #608BAE); background: -ms-linear-gradient(#37578C, #002B46, #608BAE); background: -o-linear-gradient(#37578C, #002B46, #608BAE); background: linear-gradient(#37578C, #002B46, #608BAE); border-radius: 5px 5px 5px 5px; padding: 5px 20px 0px 20px; line-height: 20px; box-shadow: 2px 2px 5px #FFFFFF; } .ui-menu-li { border-radius: 5px 5px 0px 0px; padding: 5px 10px 5px 10px; list-style: none; display: inline; font-family: "Courier New", Courier, monospace; font-size: 13px; color: #FFFFFF; text-shadow:5px 2px 5px #FFFFFF; cursor: pointer; } .ui-menu-li-curr { background: #89B5D2; background: -webkit-linear-gradient(#37578C, #608BAE); background: -moz-linear-gradient(#37578C, #608BAE); background: -ms-linear-gradient(#37578C, #608BAE); background: -o-linear-gradient(#37578C, #608BAE); background: linear-gradient(#F2B1D9, #608BAE); border-radius: 5px 5px 5px 5px; box-shadow: 2px 2px 5px #FFFFFF; } .ui-menu-li:hover { background: #89B5D2; background: -webkit-linear-gradient(#37578C, #608BAE); background: -moz-linear-gradient(#37578C, #608BAE); background: -ms-linear-gradient(#37578C, #608BAE); background: -o-linear-gradient(#37578C, #608BAE); background: linear-gradient(#F2B1D9, #608BAE); border-radius: 5px 5px 5px 5px; box-shadow: 2px 2px 5px #FFFFFF; } </style> </head> <body style=" background-color:#000;"> <menu class="ui-menu"> <li class="ui-menu-li"><a href="http://www.codefans.net">源码爱好者</a></li> <li class="ui-menu-li">技术文章</li> <li class="ui-menu-li ui-menu-li-curr">网页特效</li> <li class="ui-menu-li">精品源码</li> <li class="ui-menu-li">下载排行</li> <li class="ui-menu-li">最新更新</li> <li class="ui-menu-li">回到首页</li> </menu> </body> </html>
View Code
效果截图:
代码分析:
我们拖动ul到HTML后,默认的样式有点。没有文字阴影,渐变背景,没有边框阴影。
当我们去掉点过后(list-style: none;),不让原先点的位置仍然占宽(padding: 0px;),我们又想让ul里的元素们都能一行显示(display: inline;)。感觉这些都视乎很简单。那么我们真正要实现文字阴影、渐变背景和边框阴影又怎么做呢?
世间无难事,只怕不懂CSS。
其实CSS3已经有了可以设定文字阴影,渐变背景和边框阴影的标签。
文字阴影:
text-shadow:5px 2px 5px #FFFFFF;
渐变背景:
background: #37578C;
background: -webkit-linear-gradient(#37578C, #002B46, #608BAE);
background: -moz-linear-gradient(#37578C, #002B46, #608BAE);
background: -ms-linear-gradient(#37578C, #002B46, #608BAE);
background: -o-linear-gradient(#37578C, #002B46, #608BAE);
background: linear-gradient(#37578C, #002B46, #608BAE);
边框阴影:
box-shadow: 2px 2px 5px #FFFFFF;
初次特效外,还有什么圆角(border-radius: 5px 5px 0px 0px;当然也要考虑浏览器差异,类似渐变背景的写法。)
感觉这些特效,已经能基本满足我们日常设计中的基本需求了。什么3D样式的按钮等等。
后边继续跟进研究CSS3在3D效果的体验上的做法。
欢迎关注 ~
相关文章推荐
- html5 css3网站菜单实现代码
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
- css3常用代码 圆角 旋转 线性渐变 盒状阴影
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
- 从零开始学习前端开发 — 16、CSS3圆角与阴影
- 一段关于带阴影的UIView切圆角的代码
- 19个基于 HTML5 和 CSS3 开发的优秀应用程序
- 绿色带阴影的CSS导航菜单代码
- HTML5 CSS3实现圆角样式,兼容所有浏览器(一)
- CSS3新技术:圆角、透明、阴影和大小
- 22个实用的HTML5 CSS3表单开发教程
- 基于Jquery的开发个代阴影的对话框效果代码
- css3圆角和阴影
- html5 Game开发系列文章之 三 搭建基本游戏框架(代码封装)
- 22个实用的HTML5 CSS3表单开发教程
- 22个实用的HTML5 CSS3表单开发教程
- 19个基于 HTML5 和 CSS3 开发的优秀应用程序
- CSS实现绿色带阴影自适应宽度的菜单代码
- Asp.net 2.0 自定义控件开发[工具栏菜单控件](示例代码下载)
- 很棒带阴影的JS+CSS滑动门菜单代码