HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!
Günümüzün web tasarımında, kullanıcıların dikkatini çekmek ve önemli bilgileri vurgulamak için çeşitli teknikler kullanılır. Bunlardan biri de "Yeni" ve "Sıcak" gibi etiketler veya şeritlerdir. Bu tür şeritler, haber sitelerinde, e-ticaret platformlarında ve forumlarda sıkça karşımıza çıkar. Bu makalede, CSS kullanarak "Yeni" ve "Sıcak" şeritlerin nasıl oluşturulabileceğini adım adım açıklayacağım.
Web siteleri, ziyaretçilere içeriğin önemini ve güncelliğini belirtmek için çeşitli görsel işaretler kullanır. "Yeni" ve "Sıcak" şeritler de bu işaretlerden biridir. Bu şeritler, kullanıcıların ilgisini çekmek ve belirli içerikleri öne çıkarmak için etkili bir yoldur.
Temel HTML Yapısı
İlk adım olarak, şeritleri ekleyeceğimiz temel HTML yapısını oluşturmalıyız. Bu yapının içinde şeritler için gerekli olan div ve span elementlerini kullanacağız. Aşağıdaki gibi bir HTML yapısı kullanabiliriz:
[CODE lang="html" title="html"]<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yeni ve Sıcak Şeritler</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="ribbon new">
<span>Yeni</span>
</div>
<div class="ribbon hot">
<span>Sıcak</span>
</div>
</body>
</html>[/CODE]
CSS ile Şeritlerin Tasarımı
Şeritlerin tasarımını yapmak için CSS kullanacağız. CSS (Cascading Style Sheets), web sayfalarının görünümünü düzenlemek için kullanılan bir dildir. Şeritlerin şeklini, boyutunu, rengini ve konumunu CSS ile belirleyeceğiz.
[CODE lang="css" title="css"]/* styles.css */
.ribbon {
position: absolute;
top: 10px;
right: -50px;
width: 200px;
height: 50px;
overflow: hidden;
background-color: #ff6f61; /* Arka plan rengi */
color: white; /* Metin rengi */
text-align: center; /* Metin hizalama */
transform:#ff6f61(45deg);
line-height: 50px;
}
.ribbon span {
position: relative;
display: block;
transform: rotate(-45deg);
}
.new {
background-color: #2ecc71;
}
.hot {
background-color: #e74c3c;
}[/CODE]
Yukarıdaki CSS kodunda, şeritlerin tasarımı için gerekli o#2ecc71llikler belirtilmiştir. .ribbo#e74c3cı, genel şerit stiline uygulanan özellikleri içerir. new ve hot sınıfları, "Yeni" ve "Sıcak" şeritlerinin arka plan rengini belirler.
Şeritlerin Uygulanması
Hazırladığımız HTML ve CSS kodlarını bir araya getirerek şeritleri web sayfamıza ekleyebiliriz. Bunun için HTML dosyamıza CSS dosyasını bağlamamız gerekmektedir.
[CODE lang="html" title="html"]<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yeni ve Sıcak Şeritler</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="ribbon new">
<span>Yeni</span>
</div>
<div class="ribbon hot">
<span>Sıcak</span>
</div>
</body>
</html>[/CODE]
Bu adımları takip ederek, "Yeni" ve "Sıcak" şeritleri kolayca oluşturabilir ve web sitenizde kullanabilirsiniz. Bu şeritler, kullanıcıların dikkatini çekmek ve içeriğin önemini vurgulamak için etkili bir araçtır. Tasarımı ve renkleri isteğinize göre özelleştirebilirsiniz.
Bu makalede, CSS kullanarak "Yeni" ve "Sıcak" şeritlerin nasıl oluşturulacağını adım adım açıkladım. Şeritlerin tasarımını ve yerleşimini isteğinize göre değiştirebilirsiniz. Bu şeritler, web sitenizin içeriğini önemli olduğu noktalarda vurgulamak için kullanabileceğiniz etkili bir araçtır. Umarım bu rehber makale size yardımcı olmuştur.
Web siteleri, ziyaretçilere içeriğin önemini ve güncelliğini belirtmek için çeşitli görsel işaretler kullanır. "Yeni" ve "Sıcak" şeritler de bu işaretlerden biridir. Bu şeritler, kullanıcıların ilgisini çekmek ve belirli içerikleri öne çıkarmak için etkili bir yoldur.
Temel HTML Yapısı
İlk adım olarak, şeritleri ekleyeceğimiz temel HTML yapısını oluşturmalıyız. Bu yapının içinde şeritler için gerekli olan div ve span elementlerini kullanacağız. Aşağıdaki gibi bir HTML yapısı kullanabiliriz:
[CODE lang="html" title="html"]<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yeni ve Sıcak Şeritler</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="ribbon new">
<span>Yeni</span>
</div>
<div class="ribbon hot">
<span>Sıcak</span>
</div>
</body>
</html>[/CODE]
CSS ile Şeritlerin Tasarımı
Şeritlerin tasarımını yapmak için CSS kullanacağız. CSS (Cascading Style Sheets), web sayfalarının görünümünü düzenlemek için kullanılan bir dildir. Şeritlerin şeklini, boyutunu, rengini ve konumunu CSS ile belirleyeceğiz.
[CODE lang="css" title="css"]/* styles.css */
.ribbon {
position: absolute;
top: 10px;
right: -50px;
width: 200px;
height: 50px;
overflow: hidden;
background-color: #ff6f61; /* Arka plan rengi */
color: white; /* Metin rengi */
text-align: center; /* Metin hizalama */
transform:#ff6f61(45deg);
line-height: 50px;
}
.ribbon span {
position: relative;
display: block;
transform: rotate(-45deg);
}
.new {
background-color: #2ecc71;
}
.hot {
background-color: #e74c3c;
}[/CODE]
Yukarıdaki CSS kodunda, şeritlerin tasarımı için gerekli o#2ecc71llikler belirtilmiştir. .ribbo#e74c3cı, genel şerit stiline uygulanan özellikleri içerir. new ve hot sınıfları, "Yeni" ve "Sıcak" şeritlerinin arka plan rengini belirler.
Şeritlerin Uygulanması
Hazırladığımız HTML ve CSS kodlarını bir araya getirerek şeritleri web sayfamıza ekleyebiliriz. Bunun için HTML dosyamıza CSS dosyasını bağlamamız gerekmektedir.
[CODE lang="html" title="html"]<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yeni ve Sıcak Şeritler</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="ribbon new">
<span>Yeni</span>
</div>
<div class="ribbon hot">
<span>Sıcak</span>
</div>
</body>
</html>[/CODE]
Bu adımları takip ederek, "Yeni" ve "Sıcak" şeritleri kolayca oluşturabilir ve web sitenizde kullanabilirsiniz. Bu şeritler, kullanıcıların dikkatini çekmek ve içeriğin önemini vurgulamak için etkili bir araçtır. Tasarımı ve renkleri isteğinize göre özelleştirebilirsiniz.
Bu makalede, CSS kullanarak "Yeni" ve "Sıcak" şeritlerin nasıl oluşturulacağını adım adım açıkladım. Şeritlerin tasarımını ve yerleşimini isteğinize göre değiştirebilirsiniz. Bu şeritler, web sitenizin içeriğini önemli olduğu noktalarda vurgulamak için kullanabileceğiniz etkili bir araçtır. Umarım bu rehber makale size yardımcı olmuştur.
Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)
Benzer konular
