CSS3 is a fantastic tool to design good looking websites and in this tutorial, we are going to see how to create a nice Ribbon with 3D effect and... Read More
#rib_effect{ font-size:18px; width:350px; position:relative; background:#869bc7; color:#fff; text-align:center; text-shadow:1px 1px 2px rgba(0,0,0,0.5); box-shadow:0px 5px 8px rgba(0,0,0,0.3); -webkit-box-shadow:0px 5px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow:0px 5px 8px rgba(0, 0, 0, 0.3); padding:20px 30px; margin:30px auto 40px } #rib_effect:after,#rib_effect:before{ position:absolute; bottom:-18px; border:solid 30px #677798; content:""; z-index:-1 } #rib_effect:after{ border-left-width:60px; border-right-color:transparent; right:-72px } #rib_effect:before{ border-right-width:60px; border-left-color:transparent; left:-72px } #rib_effect #rib_text:after,#rib_text:before{ content:""; position:absolute; border-style:solid; border-color:#524f80 transparent; bottom:-18px } #rib_effect #rib_text:after{ right:0; border-width:18px 18px 0 0 } #rib_effect #rib_text:before{ left:0; border-width:18px 0 0 18px }
CSS3 is a fantastic tool to design good looking websites and in this tutorial, we are going to see how to create a nice Ribbon with 3D effect and... Read More