Ribbon Label
Status- Offline
Son çevrim içi zamanı: Sep 2023


Yazılım: CSS
Değerlendirme:
Kurulan: 0

Yayınlanış: 26-07-2018
Son Güncelleme: Belirsiz
İndirme: 0

CSS kodu:
HTML KODU:
Kod:
body { background-color:white /*#6F6349*/; text-align: center; font-family: 'Shadows Into Light', cursive; font-size: 16px; color: white; } .destacados{ padding: 70px 0; text-align: center; } .box1 { /* See "NOTE 3" */ position:relative; z-index:1; width:100%; padding:20px; margin:20px auto; border: 1px solid rgb(200, 200, 200); box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px; background: #E4C054; border-radius: 4px; } .box1 h3 { position:relative; padding:10px 30px; margin:0 -30px 20px; font-size:28px; line-height:32px; font-weight:bold; text-align:center; color:#fff; background:#cc0000; /* css3 extras */ text-shadow:0 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.2); /* See "NOTE 1" */ zoom:1; } .box1 h3:before, .box1 h3:after { content:""; position:absolute; /* See "NOTE 2" */ z-index:-1; top:100%; left:0; border-width:0 10px 10px 0; border-style:solid; border-color:transparent maroon; } .box1 h3:after { left:auto; right:0; border-width:0 0 10px 10px; } .box1 h4 { position:relative; padding:10px 30px; margin:0 -30px 20px; font-size:28px; line-height:32px; font-weight:bold; text-align:center; color:#fff; background:#87A800; /* css3 extras */ text-shadow:0 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.2); /* See "NOTE 1" */ zoom:1; } .box1 h4:before, .box1 h4:after { content:""; position:absolute; /* See "NOTE 2" */ z-index:-1; top:100%; left:0; border-width:0 10px 10px 0; border-style:solid; border-color:transparent #647D01; } .box1 h4:after { left:auto; right:0; border-width:0 0 10px 10px; }
HTML-Kodu:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script><script src="//code.jquery.com/jquery-1.11.1.min.js"></script><!------ Include the above in your HEAD tag ----------> <div class="container"><div class="row destacados"> <div class="col-md-offset-2 col-md-4"> <div class="box1"> <h3>label 1</h2>a </div> </div> <div class="col-md-4"> <div class="box1"> <h4>label 2</h4> </div> </div></div> </div>
Ekran görüntüleri
-
label.jpg (14,8 KB (Kilobyte), 1 Kez İndirilmiş)
Kullanıcı Duyuru
- Sitemize kayıt olan herkes kontrol edilmeksizin mesaj/konu/resim paylaşabilmektedir. Bu sebepten ötürü, sitemiz üzerinden paylaşılan mesajlar, konular ve resimlerden doğabilecek olan yasal sorumluluklar paylaşan kullanıcıya aittir. TRWebmaster.com hiçbir yasal sorumluluk kabul etmemektedir. Illegal herhangi bir faaliyet görülmesi durumunda destek@trwebmaster.com adresine mail atıldığı taktirde mesaj, konu ya da resim en fazla 24 saat içerisinde silinecektir.