Konular

Pseudo - Classes Kullanımları

Konu hakkında üç farklı örnek

 Örnek1 : Html Kodu

www.dijitalders.com
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link rel="stylesheet" type="text/css" href="stilim6.css" />
</head>
<body>

<div id="kutu1">Bu birinci kutu</div>

<div class="kutu2">Bu ikinci kutu</div>

<div class="kutu3">Bu ikinci kutu</div>

</body>
</html>

Yukardaki uygulamaya ait CSS kodu: stilim6.css 

#kutu1 { color:#ffff00; background-color:#FF3366; margin:10px; width:100px; height:50px; padding:20px; }

#kutu1:hover { color:#ffff00; background-color:#00CCCC; margin:10px; width:100px; height:50px; padding:20px; }

div.kutu2 { color:#ffff00; background-color:#00CC66; margin:10px; width:100px; height:50px; padding:20px; }

div.kutu2:hover { color:#ffff00; background-color:#00CCCC; margin:10px; width:100px; height:50px; padding:20px; }

.kutu3 { color:#ffff00; background-color:#00CC66; margin:10px; width:100px; height:50px; padding:20px; }

.kutu3:hover { color:#ffff00; background-color:#00CCCC; margin:10px; width:100px; height:50px; padding:20px; }

 

www.dijitalders.comÖrnek 2: HTML Kodu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="stilim2.css" />
</head>

<body>

<div class="kutu">Süper CSS</div>
<div class="kutu">Harika CC</div>
<div class="kutu">Hayret CSS</div>

</body>

</html> 

  Yukardaki uygulamaya ait CSS kodu sitilim2.css

*{ cursor:default }

.kutu { width:300px; height:60px; color:#ffffff; font-family:Impact; font-size:24pt; border:10px solid #CCCC00; margin:10px; text-align:center; padding-top:20px; background-color:#CC9900 }

.kutu:hover { width:300px; height:60px; color:#ffffff; font-family:Impact; font-size:24pt; border:10px solid #CCCC00; margin:10px; text-align:center; padding-top:20px; background-color:#00CC99; cursor:pointer; }

 

Örnek3: HTML Kodu

www.dijitalders.com<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" type="text/css" href="stilim.css" />
</head>
<body>

<form class="benimform">

<input type="text" name="ad" /><br />
<input type="text" name="soyad" /> <br />
<textarea name="adres" style="width:150px; height:50px" /></textarea><br />

<input type="button" value="Yolla" />

</form>

</body>
</html>

  Yukardaki uygulamaya ait CSS kodu sitilim.css

.benimform input, .benimform textarea { border:5px solid #FF3366 }
.benimform input:hover, .benimform textarea:hover { border:5px solid #FFCC33; background-color:#CCFF33 }

.benimformum input[type="button"] { border:2px solid #8AB800 }
.benimformum input[type="button"]:hover { border:2px solid #6633FF }

 

 

Yorumunuzu Ekleyin

Div ile Bölümler Oluşturmak

Div tagı yardımı ile sayfalı %40 ve %60 şeklinde ikiye bölüp içerisine iki farklı içerik yerleştirme ile ilgili bir çalışma

73,818 Okunma 2 Yorum 04/11/2008 16:41:55 31/05/2014 16:44:34

CSS ile Menü Yapımı

CSS'in menü yapımına etkileri

53,225 Okunma 1 Yorum 13/07/2007 17:53:23 28/12/2018 21:20:47

CSS ile Dikey Menü Yapımı

Web sitelerinin vazgeçilmez öğelerinde biridir menüler. Menüler kullanıcının oluşturduğumuz sayfalara hızlı erişimini sağlar. Bir çok site de Ürünler, İletişim, Hakkımızda vb. bölümlerini menü öğesi olarak görürüz. Bu makalede sırasız listeler()ve CSS yardımı ile menü yapımını anlatacağız. CSS ile yapılan menüler esnek, kolay düzenlenebilir, güzel görünen ve rollover efekti uygulana bilen menülerdir

29,463 Okunma Henüz yorum yapılmamış 01/08/2007 13:27:12

Renkli Form Yapımı

CSS yardımı ile renkli form kutucuklarının nasıl yapıldığına bir örnek

23,630 Okunma Henüz yorum yapılmamış 10/07/2007 03:35:08

CSS ve Clip

20,117 Okunma Henüz yorum yapılmamış 13/07/2007 20:15:21 28/05/2014 20:18:55

CSS ve Tablolar

19,594 Okunma Henüz yorum yapılmamış 13/07/2007 14:44:46

CSS ve Overflow

16,786 Okunma Henüz yorum yapılmamış 13/07/2007 14:42:26

CSS Animasyon Örnekleri

Bir kaç faydalı cssle yapılan animasyon örneği...

1,442 Okunma Henüz yorum yapılmamış 27/06/2019 10:59:51 27/06/2019 11:21:00

Yükleniyor...