CSS Renkleri
Görünümdeki değişiklikler, sitenin çekiciliğini ve okunabilirliğini artırmak için, renkler ve diğer tasarım öğeleriyle oynanabilir ve optimize edilebilir.
- 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.
rgb format:
color: rgb(0, 153, 0);
rgba format:
color: rgba(204, 113, 153, 0.7);
Hexadecimal Notation:
color: #ff5e62;
HSLA:
color: hsla(120, 50%, 70%, 0.8);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>This div has a Hexadecimal background color.</div>
<div>This text is in RGB red.</div>
<div>This text is in RGBA green with 50% transparency.</div>
<div>This text is in HSL green.</div>
<div>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>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>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>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>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>This text has a shadow effect.</p>
<div>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>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)).
