- Katılım
- 15 May 2013
- Konular
- 1,207
- Mesajlar
- 7,321
- Çözüm
- 6
- Online süresi
- 2mo 16d
- Reaksiyon Skoru
- 5,958
- Altın Konu
- 410
- Başarım Puanı
- 349
- MmoLira
- 45,963
- DevLira
- 3
ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!
CSS Renkleri
CSS renkleri, bir web sayfasındaki metinlerin, arka planların, kenarlıkların ve diğer öğelerin görünümünü değiştirmek için kullanılır. Renkler, bir sitenin daha çekici ve okunması kolay olmasına yardımcı olur.
- Kullanım Alanları: Metin, arka plan ve kenarlık stillerini belirlemek için kullanılırlar.
- Amacı: Kontrast oluşturmaya, içeriği vurgulamaya ve genel görsel tasarımı iyileştirmeye yardımcı olurlar.
- Tanımlama Yöntemleri: Renkler; adlar (İngilizce isimleri, örn: red), HEX kodları (#FF0000), RGB (rgb(255, 0, 0)), RGBA (rgba(255, 0, 0, 0.5)), HSL veya HSLA değerleri kullanılarak ayarlanabilir.
[CODE title="rgb format"]color: rgb(0, 153, 0);[/CODE]
[CODE title="rgba format"]color: rgba(204, 113, 153, 0.7);[/CODE]
[CODE title="Hexadecimal Notation"]color: #ff5e62;[/CODE]
[CODE title="HSLA"]color: hsla(120, 50%, 70%, 0.8);[/CODE]
HTML:
<html>
<head>
<style>
.hex-example {
background-color: #FF5733; /* Hexadecimal color */
}
.rgb-example {
color: rgb(255, 0, 0); /* RGB color */
}
.rgba-example {
color: rgba(0, 255, 0, 0.5); /* RGBA color with transparency */
}
.hsl-example {
color: hsl(120, 100%, 50%); /* HSL color */
}
.hsla-example {
color: hsla(120, 100%, 50%, 0.3); /* HSLA color with transparency */
}
</style>
</head>
<body>
<div class="hex-example">This div has a Hexadecimal background color.</div>
<div class="rgb-example">This text is in RGB red.</div>
<div class="rgba-example">This text is in RGBA green with 50% transparency.</div>
<div class="hsl-example">This text is in HSL green.</div>
<div class="hsla-example">This text is in HSLA green with 30% opacity.</div>
</body>
</html>
Kod Örnekleriyle CSS Renklerinin Kullanımı
CSS renkleri, bir web sayfasının tasarımında ve işlevselliğinde hayati bir rol oynar. Aşağıda, CSS renklerinin yaygın kullanım örnekleri ve bu örneklere ait açıklamalar bulunmaktadır:
1. Arka Plan Renkleri (background-color)
Bir öğenin arka plan rengini ayarlamak için background-color komutunu kullanabilirsiniz. Genellikle bölümler, div'ler, üstbilgiler, altbilgiler vb. için kullanılır.
- background-color: #FF5733;Parlak kırmızı-turuncu bir arka plan ekler.
- #FF5733ing: 20px;[/B](Bu özellik renkten bağımsızdır, öğeye iç boşluk sağlar.)
2. Metin Rengi (color)
Bir öğenin içindeki metnin rengini color özelliği ile belirlersiniz.
- color: rgb(255, 0, 0);Metni kırmızıya ayarlar.
- font-size: 20px;(Bu özellik renkten bağımsızdır, metni büyütür.)
3. Kenarlık Rengi (border)
Öğelerin etrafına çerçeve (kenarlık) eklerken rengini de belirleyebilirsiniz.
- border: 5px solid rgba(0, 255, 0, 0.5);Yarı saydam (0.5 alpha değerli) yeşil bir kenarlık ekler.
- padding: 10px; ve margin: 10px;(Bu özellikler renkten bağımsızdır, sırasıyla iç ve dış boşluk ekler.)
4. Hover Efektleri (Sözde Sınıf ile)
Bir öğenin üzerine fare ile gelindiğinde rengini değiştirmek için :hover sözde sınıfı kullanılır.
:hover { background-color: hsl(120, 100%, 50%); }Farenin üzerine gelindiğinde arka planı parlak yeşile (hsl(120, 100%, 50%)) dönüştürür.
HTML:
<html>
<head>
<style>
.bg-example {
background-color: #FF5733; /* Red-Orange background */
padding: 20px;
color: white;
}
</style>
</head>
<body>
<div class="bg-example">This div has a warm background color!</div>
</body>
</html>2. Metin Renkleri
Renk özelliği, metne renk uygulamak için kullanılır. Okunabilirlik için metin ile arka plan arasında iyi bir kontrast sağlamak önemlidir.
Kod:
<html>
<head>
<style>
.text-example {
color: rgb(255, 0, 0); /* Red text */
font-size: 20px;
}
</style>
</head>
<body>
<p class="text-example">This text is in red.</p>
</body>
</html>3. Kenarlık Renkleri
Bir öğenin kenarlığına renk uygulamak için border özelliğini kullanabilirsiniz. Genellikle düğmeler, kartlar veya form girdilerinde görünür dış hatlar oluşturmak için kullanılır.
HTML:
<html>
<head>
<style>
.border-example {
border: 5px solid rgba(0, 255, 0, 0.5); /* Semi-transparent green border */
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="border-example">This div has a semi-transparent green border.</div>
</body>
</html>4. Hover Efektleri
Kullanıcı bir öğenin üzerine geldiğinde rengini değiştirmek için :hover sözde sınıfını kullanın ve tasarımınıza etkileşim katın.
HTML:
<html>
<head>
<style>
.hover-example {
background-color: #4CAF50; /* Green background */
color: white;
padding: 20px;
text-align: center;
cursor: pointer;
}
.hover-example:hover {
background-color: #45a049; /* Darker green on hover */
}
</style>
</head>
<body>
<div class="hover-example">Hover over me to change the background color!</div>
</body>
</html>5. Gölgeler ve Metin Efektleri
Öğelerin etrafına gölge eklemek için box-shadow'u veya metne gölge ekleyerek derinlik ve vurgu oluşturmak için text-shadow'u kullanabilirsiniz.
HTML:
<html>
<head>
<style>
.shadow-example {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
color: #FF5733;
font-size: 30px;
}
.box-shadow-example {
box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.3);
padding: 20px;
background-color: #FFF;
}
</style>
</head>
<body>
<p class="shadow-example">This text has a shadow effect.</p>
<div class="box-shadow-example">This div has a box shadow.</div>
</body>
</html>6. Degradeler
CSS, arka plan özelliğini kullanarak degradeler oluşturmanıza olanak tanır. Degradeler, iki veya daha fazla renk arasında yumuşak bir geçiş sağlayabilir.
HTML:
<html>
<head>
<style>
.gradient-example {
background: linear-gradient(to right, #FF5733, #33FF57);
padding: 40px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="gradient-example">This div has a linear gradient background.</div>
</body>
</html>CSS'de Renk Biçimleri
Renk Biçimi
Açıklama
Renk Adları
Basitlik için önceden tanımlanmış renk adlarını (örneğin kırmızı, mavi, yeşil) kullanın.
Onaltılık (Hex) Kodlar
Renkleri altı basamaklı onaltılık kodlar kullanarak tanımlayın (örneğin #FF5733).
RGB (Kırmızı, Yeşil, Mavi)
Renkleri RGB değerleri kullanarak tanımlayın (örneğin, rgb(255, 0, 0)).
RGBA (Kırmızı, Yeşil, Mavi, Alfa)
RGB'yi bir alfa (şeffaflık) değeri ekleyerek genişletin (örneğin, rgba(255, 0, 0, 0,5)).
HSL (Ton, Do#FF5733, Parlaklık)
Renkleri HSL değerleri kullanarak tanımlayın (örneğin, hsl(120, %100, %50)).
HSLA (Renk Tonu, Doygunluk, Parlaklık, Alfa)
HSL'yi şeffaflık için bir alfa değeri ekleyerek genişletin (örneğin, hsla(120, %100, %50, 0,5)).
- Katılım
- 26 Tem 2023
- Konular
- 450
- Mesajlar
- 6,325
- Çözüm
- 28
- Online süresi
- 2mo 26d
- Reaksiyon Skoru
- 3,410
- Altın Konu
- 133
- Başarım Puanı
- 249
- MmoLira
- 44,667
- DevLira
- 12
Eline sağlık
- Katılım
- 24 Ağu 2017
- Konular
- 4,295
- Mesajlar
- 16,377
- Çözüm
- 19
- Online süresi
- 6mo 16d
- Reaksiyon Skoru
- 6,854
- Altın Konu
- 708
- Başarım Puanı
- 439
- MmoLira
- 91,978
- DevLira
- 12
Paylaşım için teşekkürler