文档章节

助你美化网站的实用css3技巧(3)

lotozhou
 lotozhou
发布于 2015/12/03 11:27
字数 219
阅读 50
收藏 2

圆角丝带效果

这段代码有点长,但是圆角丝带效果很奇特!

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;
}


© 著作权归作者所有

共有 人打赏支持
lotozhou
粉丝 8
博文 51
码字总数 51524
作品 0
苏州
程序员
助你美化网站的实用css3技巧(1)

CSS3 规范让前端开发人员能够创建出各种复杂的视觉效果,使网站更好看,更能够吸引用户访问。这篇文章中,我收集了一组实用的 CSS3 技巧,能够帮助你美化您的网站,并给它一个更专业的外观和...

罗马教堂的钟声
2015/12/01
40
0
助你美化网站的实用css3技巧(2)

CSS3 calc() 的使用 calc() 用法类似于函数,能够给元素设置动态的值: .simpleBlock { width: calc(100% - 100px);} .complexBlock { width: calc(100% - 50% / 3); padding: 5px calc(3% -......

罗马教堂的钟声
2015/12/02
46
0
如果你在找 CSS 学习资源,那就收藏这篇文章

本文由伯乐在线 -伯小乐 翻译。未经许可,禁止转载! 英文出处:Grace Smith。欢迎加入翻译组。 如果你在寻找一些 CSS 基础和高级的指南或资源,那这篇文章应该有你要的 CSS 初级和高级指南:...

伯乐在线
2014/11/07
0
0
分享一个CSS3实现的动态内容标签页切换效果教程

日期:2012-4-14 来源:GBin1.com 在线演示 本地下载 在这篇教程中,我们将学习如何使用CSS3来实现一个动态的标签页切换效果。希望大家喜欢。 内容标签页在网站或者web开发中经常使用到,它对...

gbin1
2012/04/16
0
0
程序猿必备的15款web前端动画插件七

  1.超简易的SVG/CSS3 Loading加载动画图标   今天我们要为大家分享一组非常简易的SVG/CSS3 Loading加载动画图标,和之前分享的SVG实现的一组超华丽Loading加载动画相比,这组Loading动画...

爱码农
01/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

白话SpringCloud | 第十章:路由网关(Zuul)进阶:过滤器、异常处理

前言 简单介绍了关于Zuul的一些简单使用以及一些路由规则的简单说明。而对于一个统一网关而言,需要处理各种各类的请求,对不同的url进行拦截,或者对调用服务的异常进行二次处理等等。今天,...

oKong
21分钟前
1
0
详解nohup和& 区别

详解nohup和& 区别 2017年11月29日 16:57:38 King-Long 阅读数:7266 版权声明:本文为博主原创文章,欢迎转载。 https://blog.csdn.net/u011095110/article/details/78666833 nohup 一、【解...

linjin200
32分钟前
3
0
Character的static方法

基本类型char的包装类是Character,使用的比较多,大家是比较熟悉的。 我只是觉得里面有很多static方法,平时不怎么用,学习一下怎么实现的,或许日后就用到了。 static int compare(char x,...

woshixin
33分钟前
1
0
正则介绍_sed

10月17日任务 9.4/9.5 sed sed工具 匹配打印 -n 只打印匹配行,不然其他行也会打印出来 p 打印(配合-n使用) [root@centos7 tmp]# sed -n '/root/'p passwd root:x:0:0:root:/root:/bin/ba...

robertt15
33分钟前
2
0
轻松解码类似eval(function(p,a,c,k,e,d){}))的JavaScript代码

轻松解码类似eval(function(p,a,c,k,e,d){}))的JavaScript代码 2013年05月22日 15:18:05 秋实先生 阅读数:14826 这里解码百度访问统计代码构造函数为示例: 百度访问统计代码JavaScript源码:...

_纵横捭阖_
42分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部