CSS ile Köşe Bandı (Ribbon) Yapımı Kodları

Html ve Css kullanarak köşe bandı nasıl yapılır. Diğer adıyla Ribbon CSS ile Köşe Bantları Nasıl Yapılır? Kategori Bandı Yapımı, Etiketler bandı yapımı kodları
9kuyruk.com
1006
.
9kuyruk.com
22 Ocak 2022 21:48
.
Yazılım
.
Yazar: 9k
CSS ile Köşe Bandı (Ribbon) Yapımı Kodları

CSS ile Köşe Bantları Nasıl Yapılır?


Köşe batlarına kategori, etiket, yorum sayısı, okunma sayısı gibi verileri yazabilirsiniz. Diğer adıyla Ribbon CSS ile Köşe Bantları Nasıl Yapılır ? , Kategori Bandı Yapımı, Kutuların Kenarlarına Etiketler bandı yapımı kodlarına aşağıdan ulaşabilirsiniz.


Ribbon (Köşe Bandı) HTML Kodları:


<div class="box">
<div class="ribbon ribbon-top-left"><span>ribbon</span></div>
<div class="ribbon ribbon-top-right"><span>ribbon</span></div>
<div class="ribbon ribbon-bottom-left"><span>ribbon</span></div>
<div class="ribbon ribbon-bottom-right"><span>ribbon</span></div>
</div>


Ribbon (Köşe Bandı) CSS Kodları:


body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f0f0f0;
}
.box {
position: relative;
max-width: 600px;
width: 90%;
height: 400px;
background: #fff;
box-shadow: 0 0 15px rgba(0,0,0,.1);
}
/* common */
.ribbon {
width: 150px;
height: 150px;
overflow: hidden;
position: absolute;
}
.ribbon::before,
.ribbon::after {
position: absolute;
z-index: -1;
content: '';
display: block;
border: 5px solid #2980b9;
}
.ribbon span {
position: absolute;
display: block;
width: 225px;
padding: 15px 0;
background-color: #3498db;
box-shadow: 0 5px 10px rgba(0,0,0,.1);
color: #fff;
font: 700 18px/1 'Lato', sans-serif;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
text-transform: uppercase;
text-align: center;
}
/* Sol Üst Köşe Bandı (Ribbon) */
.ribbon-top-left {
top: -10px;
left: -10px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
border-top-color: transparent;
border-left-color: transparent;
}
.ribbon-top-left::before {
top: 0;
right: 0;
}
.ribbon-top-left::after {
bottom: 0;
left: 0;
}
.ribbon-top-left span {
right: -25px;
top: 30px;
transform: rotate(-45deg);
}
/* Sağ Üst Köşe Bandı (Ribbon) */
.ribbon-top-right {
top: -10px;
right: -10px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
border-top-color: transparent;
border-right-color: transparent;
}
.ribbon-top-right::before {
top: 0;
left: 0;
}
.ribbon-top-right::after {
bottom: 0;
right: 0;
}
.ribbon-top-right span {
left: -25px;
top: 30px;
transform: rotate(45deg);
}
/* Sol Alt Köşe Bandı (Ribbon) */
.ribbon-bottom-left {
bottom: -10px;
left: -10px;
}
.ribbon-bottom-left::before,
.ribbon-bottom-left::after {
border-bottom-color: transparent;
border-left-color: transparent;
}
.ribbon-bottom-left::before {
bottom: 0;
right: 0;
}
.ribbon-bottom-left::after {
top: 0;
left: 0;
}
.ribbon-bottom-left span {
right: -25px;
bottom: 30px;
transform: rotate(225deg);
}
/* Sağ Alt Köşe Bandı (Ribbon) */
.ribbon-bottom-right {
bottom: -10px;
right: -10px;
}
.ribbon-bottom-right::before,
.ribbon-bottom-right::after {
border-bottom-color: transparent;
border-right-color: transparent;
}
.ribbon-bottom-right::before {
bottom: 0;
left: 0;
}
.ribbon-bottom-right::after {
top: 0;
right: 0;
}
.ribbon-bottom-right span {
left: -25px;
bottom: 30px;
transform: rotate(-225deg);
}

Yorumlar (0)
İlginizi Çekebilir
Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev Umut Alev