助你美化网站的实用css3技巧(3)
来源:互联网 发布:淘宝联盟推广管理页面 编辑:程序博客网 时间:2024/06/07 20:47
圆角丝带效果
这段代码有点长,但是圆角丝带效果很奇特!
HTML:
<div class="wrapper"> <div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div></div>CSS:
.wrapper { margin: 50px auto; width: 280px; height: 370px; background: white; border-radius: 10px; -webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.3); -moz-box-shadow:0px 0px 8px rgba(0,0,0,0.3); box-shadow:0px 0px 8px rgba(0,0,0,0.3); position:relative; z-index:90;} .ribbon-wrapper-green { width:85px; height:88px; overflow:hidden; position:absolute; top: -3px; right: -3px;} .ribbon-green { font: bold 15px Sans-Serif; color: #333; text-align: center; text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #BFDC7A; background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45); background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45); color: #6a6340; -webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow:0px 0px 3px rgba(0,0,0,0.3); box-shadow:0px 0px 3px rgba(0,0,0,0.3);} .ribbon-green:before, .ribbon-green:after { content: ""; border-top:3px solid #6e8900; border-left:3px solid transparent; border-right:3px solid transparent; position:absolute; bottom:-3px;} .ribbon-green:before { left: 0;}.ribbon-green:after { right: 0;}
0 0
- 助你美化网站的实用css3技巧(3)
- 助你美化网站的实用css3技巧(1)
- 助你美化网站的实用css3技巧(2)
- 前端笔记:帮助你美化网站的10+实用 CSS3 技巧
- 掌握CSS3:一些实用的技巧
- 47款超酷超实用的CSS3技巧教程
- 模拟下拉框-美化你的网站
- PPT文档实用美化技巧
- 你需要了解的CSS3技巧
- 教你3招实用的网站数据分析技能!
- bluePen – 使用在线 CSS 编辑器美化你的网站
- 教你几种很实用的炒股技巧
- 实用的css3属性
- 美化你的菜单
- 美化你的DataGirdView
- 美化你的文字
- 美化你的代码
- 美化你的listView
- XCODE官方正版离线下载方式
- java实现lpad函数
- Java学习笔记-接口类学习
- Java NIO系列教程(二) Channel
- Android控件之ImageView
- 助你美化网站的实用css3技巧(3)
- Windows下Python pip的安装
- hadoop+mahout 建立决策树实验的问题
- 华为面试题
- std::vector源码浅析
- Java 监听机制
- 【iOS学习笔记 15-12-3】关于masonry布局中的frame和bounds
- Hive_9. Hive Streaming -- 待完善
- Java NIO系列教程(三) Buffer