文档章节

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

lotozhou
 lotozhou
发布于 2015/12/03 11:27
字数 219
阅读 51
收藏 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
粉丝 9
博文 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

没有更多内容

加载失败,请刷新页面

加载更多

eureka多注册中心

eureka分区的深入讲解

miaojiangmin
23分钟前
2
0
RAM SSO功能重磅发布 —— 满足客户使用企业本地账号登录阿里云

阿里云RAM (Resource Access Management)为客户提供身份与访问控制管理服务。使用RAM,可以轻松创建并管理您的用户(比如雇员、企业开发的应用程序),并控制用户对云资源的访问权限。 对云资...

阿里云官方博客
26分钟前
3
0
Mysql 8.0 | #08004Client does not support authentication protocol requested by server

完整报错 #08004Client does not support authentication protocol requested by server; consider upgrading MySQL client 解决方法 Using the old mysql_native_password works:ALTER ......

云迹
29分钟前
1
0
kylin入门到实战

1.概述 kylin是一款开源的分布式数据分析工具,基于hadoop之上的sql查询接口,能支持超大规模的数据分析。响应时间在亚秒级别,其核心是预计算,计算结果存放在hbase中。 2.特性 可扩展超快O...

hblt-j
31分钟前
1
0
vagrant mac 安装和使用

varant 在mac上使用起来非常的方便,具体的下载步骤可以看这里https://segmentfault.com/a/1190000000264347 这里主要是记录一下配置文件 # -*- mode: ruby -*- # vi: set ft=ruby : # All V...

一千零一夜个为什么
32分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部