Neler yeni

Evde Kal Türkiyem 💕

Korona virüs ve sebep olduğu COVID-19 hastalığından kendinizi ve çevrenizdekileri korumak için, T.C. Sağlık Bakanlığı'nın yayınladığı 14 Kural'a uymanızı önemle rica ederiz.

Daha Fazlası

UzmanYazar Sponsorluk 🎭

Öneri, istek, görüş, reklam ve sponsorluk, anlaşmaları hakkında bilgi almak için, iletişim sayfamızı kullanabilirsiniz.

Daha Fazlası

Forum Kuralları! 📨

Uzmanazar | kendine özgü kuralları olan, sınırsız özgürlük vaat etmeyen, akla her gelenin söylenmesinin ve isteyenin dilediği gibi davranmasının söz konusu olmadığı bir ortamdır.

Daha Fazlası

CSS Örnekleri

Katılım
7 Mart 2021
Mesajlar
89
Tepki Puanı
79
Puanı
3
Yaş
45
Konum
Turkey
Web
uzmanyazar.net
Eğitim
Lise
İlgi Alanı
Java
Cinsiyet
Takım
lIr3ry
Medeni
DisPVx
Bu yazıda CSS ile bir <div> etiketini stil özelliklerini kullanarak adım adım değiştireceğiz. Bu yazıda hem CSS Örnekleri olması hemde CSS dersi için adım adım bir referans sağlayacaktır. En basit örneklerden ve en basit seçicilerden başlayıp daha karmaşık ve zor örneklere kadar bir çok örnek bulacak ve uygulayacaksınız.
CSS kodlarını yazarken aşağıdaki HTML belgesini referans alarak CSS kodlarını yazdım. Eğer sizde kodları uygulamak isterseniz. Aşağıdaki HTML belgesinin <style> etiketini her örnek için güncelleme yapmanız gerekecektir.
Kod:
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Örnekler</title>
        <style>
           /*tüm stil kodlarını bu kısımda yazacağız*/
        </style>
    </head>
    <body>
        <!-- buradaki div etiketinin stilini değiştireceğiz. -->
        <div id="kutu1" class="kutu">
            <h2>KUTU 1</h2>
        </div>
        <div id="kutu2" class="kutu">
            <h2>KUTU 2</h2>
        </div>       
        
    </body>
</html>
Css Örnekleri
Örnek 1: <div> etiketlerinin yazı rengini kırmızı olarak değiştirin. (Yazı rengi için color özelliği kullanılır.)

Kod:
<style> 
    div{
        color:red;
    }
</style>
Örnek 2: <div> etiketlerinin yazı rengini beyaz, arkaplan rengi kırmızı yapın.( arkaplan rengi background-color ile verilir)
Kod:
<style> 
    div{
        color:white;
        background-color: red;
    }
</style>
Örnek 3: <div> etiketlerinin yazı rengini beyaz, arkaplan rengini kırmızı, kutu genişliğini 200px, kutu yüksekliğini 150px olarak değiştirin. (genişlik için width, yükseklik için height özelliği kullanılır
Kod:
<style> 
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
    }
</style>
Örnek 4: Yukarıdaki kodlara ek olarak yazı fontunu sans şerif yapın
Kod:
<style> 
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        font-family: sans-serif;
    }
</style>
Örnek 4: Yukarıdaki css özelliklerine ek olarak <div> etiketinine yukarıdan ve sağdan 5px kaydırılmış mavi renkte gölge ekleyin
Kod:
<style> 
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        box-shadow: blue 5px 5px;
    }
</style>
Örnek 5: Yukarıdaki kodlara ek olarak eklenen gölgenin 10px sonra bulanıklaşmasını sağlayın.
Kod:
<style> 
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        box-shadow: blue 5px 5px 10px;
    }
</style>
Örnek 6: Yukarıdaki kodlara ek olarak <div> içindeki yazının yatay olarak ortalanmasını sağlayın. (yazıyı yatayda ortalamak için text-aling özelliği kullanılır
Kod:
<style> 
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        box-shadow: blue 5px 5px 10px;
        text-align: center;
    }
</style>
Örnek 7: Yukarıdaki kodlara ek olarak yazıyı dikeyde ortalayın. (Nesneleri yatayda ortalamak CSS ile kolayken dikeyde ortalamak için flex nesneleri yada mevcut yükseklik bilinyorsa line-hegiht değeri mevcut yükseklik olarak ayarlanarak yapılıyor.
Kod:
<style> 
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        box-shadow: blue 5px 5px 10px;
        text-align: center;
        line-height: 150px; /* height ile aynı girilir*
    }
</style>
Örnek 8: class değeri kutu olan etiketlerinin yazı rengini beyaz, arkaplan rengini kırmızı, kutu genişliğini 200px, kutu yüksekliğini 150px olarak değiştirin. (Bir nesneyi class seçici kullanarak seçmek için class adının başına . (nokta) işareti konulur.
Kod:
<style> 
    .kutu{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
    }
</style>
Örnek 9: id değeri kutu2 olan etiketin yazı rengini beyaz, arkaplan rengini kırmızı, kutu genişliğini 200px, kutu yüksekliğini 150px olarak değiştirin. (Bir nesneyi id seçici kullanarak seçmek için id adının başına # (diyez) işareti konulur. Ayrıca her sayfada aynı id değerinden ikincisi olamaz
Kod:
<style> 
    #kutu1{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
    }
</style>
Örnek 10: <div> etiketlerinin yazı rengini beyaz, arkaplan rengini kırmızı, kutu genişliğini 200px, kutu yüksekliğini 150px olarak ayarlayıp kutuların yan yana gelmesini sağlayın. ( etiketlerin yan yana gelmesi için bir çok farklı yöntem bulunmakta fakat bu örnek nesnelerin soldan sağa doğru dizmek için float:left seçeneğini kullanabilirsiniz.
Kod:
<style> 
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        float:left;
    }
</style>
Örnek 11: <div> etiketlerinin yazı rengini beyaz, arkaplan rengini kırmızı, kutu genişliğini 200px, kutu yüksekliğini 150px , kutular arasındaki boşluğu 10px yapıp kutuların yan yana gelmesini sağlayın. (Nesnelerin arasında boşluk bırakmak için margin değeri kullanılır. tekli, ikili ve dört değerli kullanımı mevcuttur. En yaygın kullanımı margin:yukarıdan sağdan alttan soldan; şeklidedir.
Kod:
<style> 
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        float:left;
        margin:10px;
    }
</style>
Kod:
<style> 
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        float:left;
        margin:10px 3px 5px 3px;
    }
</style>
Örnek 13: Yukarıdaki gibi biçimlendirilmiş <div> etiketinin iç boşluğunu 25px olarak ayarlayın. (İç boşluk için padding kullanılır. Ayrıca box-model ilkesine göre nesne nesnenin ölçüleri verilen genişlik yada yükseklik değeri + çerçeve + iç boşluklar olarak ayarlanır.)

genişlik: 200px(width)+25px(padding sol)+25px (padding sağ)
yükseklik: 150px(height)+25px(padding üst)+25px (padding alt)
Kod:
<style> 
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        float:left;
        margin:10px 3px 5px 3px;
        padding:25px;
    }
</style>
Örnek 14: Yukarıdaki gibi biçimlendirilmiş <div> etiketinin çerçevesini siyah renkte 2px kalınlığında solid deseninde yapın. (Çerçeve için border özelliği kullanılır ve üç değeri aynı anda girilebilir.

genişlik: 200px(width)+25px(padding sol)+25px (padding sağ) + 2px(çerçeve sol) +2px çerçeve sağ)
yükseklik: 150px(height)+25px(padding üst)+25px (padding alt) + 2px(çerçeve üst) +2px çerçeve alt)
Kod:
<style> 
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        float:left;
        margin:10px 3px 5px 3px;
        padding:25px;
        border: #000000 solid 2px;
    }
</style>
Örnek 15: Yukarıdaki gibi biçimlendirilmiş <div> etiketinin toplam genişliği witdth ve height içinde kullanılan değerler olmasını sağlayın. (genişlik 200px yükseklik 150px)
Yukarıdaki gibi biçimlendirilmiş <div> etiketine vermiş olduğumuz width yada height değerleri ile border ve padding değerleri nesnenin toplam genişlik değerini oluşturduğunu daha önceki örneklerde açıklamıştım. Burada istersek verdiğimiz width yada heigth değerlerini toplam genişlik yada yükseklik olarak ayarlayabiliriz. Bunun için box-sizing özelliğini kullanarak verilen değerleri sabitleyebiliriz.
Kod:
<style> 
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        float:left;
        margin:10px 3px 5px 3px;
        padding:25px;
        border: #000000 solid 2px;
        box-sizing: border-box;
    }
</style>
Örnek 16: Yukarıdaki kodlara ek olarak #kutu2 nesnesini 45 derece sola doğru çevirin
Kod:
<style> 
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        float:left;
        margin:10px 3px 5px 3px;
        padding:25px;
        border: #000000 solid 2px;
        box-sizing: border-box;
    }
    #kutu2{
        transform: rotate(-45deg);
    }
</style>
Örnek 17: Yukarıdaki kodlara ek olarak #kutu1 içinde yazıya siyah gölge ekleyin.
Kod:
<style> 
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        float:left;
        margin:10px 3px 5px 3px;
        padding:25px;
        border: #000000 solid 2px;
        box-sizing: border-box;
    }
    #kutu2{
        transform: rotate(-45deg);
    }
    #kutu1{
        text-shadow:black 3px 3px 2px; /* renk x y bulanıklık*/
    }
</style>
Yukardaki Uygulamalardan Farklı Olarak

Örnek 18: CSS Tablo Biçimlendirme Örneği
Kod:
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Örnekler</title>
        <style> 
            #personel {
            border-collapse: collapse;
            width: 100%;
            background-color: #ecf0f1;
            font-weight: bold;
            }
 
            #personel td, #personel th {
            padding: 8px;
            }
 
            #personel th {
            background: #3498db;
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            color: #fff;
            }
 
            #personel td{
            color:#2c3e50;
            }
        </style>
    </head>
    <body>
       <table id="personel">
        <tr>
            <th>Sıra</th>
            <th>Ad</th>
            <th>Soyad</th>
            <th>Yaş</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Asuman</td>
            <td>Göldağ</td>
            <td>29</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Ünlüsoy</td>
            <td>Mansur</td>
            <td>49</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Cansen</td>
            <td>Karaburun</td>
            <td>84</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Ülküsel</td>
            <td>Özkahraman</td>
            <td>73</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Funda</td>
            <td>Sığırcı</td>
            <td>38</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Edibe</td>
            <td>Farımaz</td>
            <td>89</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Uluer</td>
            <td>Akgül</td>
            <td>38</td>
        </tr>
        <tr>
            <td>8</td>
            <td>Tarımer</td>
            <td>Zımba</td>
            <td>60</td>
        </tr>
        <tr>
            <td>9</td>
            <td>Şule</td>
            <td>Alaca</td>
            <td>66</td>
        </tr>
        <tr>
            <td>10</td>
            <td>Hafız</td>
            <td>Bayduz</td>
            <td>38</td>
        </tr>
    </table>       
        
    </body>
</html>
Örnek 19: CSS buton örneği
Kod:
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Örnekler</title>
        <style> 
            button.ornek {
            -webkit-transition: all 0s ease-out;
            -moz-transition: all 0s ease-out;
            -o-transition: all 0s ease-out;
            -ms-transition: all 0s ease-out;
            transition: all 0s ease-out;
            height: 35px;
            display: block;
            font-family: Arial, "Helvetica", sans-serif;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-align: center;
            text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
            padding: 4px 20px 0;
            margin: 10px auto;
            left: 30px;
            position: relative;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            border-radius: 5px;
            border: solid 1px #2E4476;
            background: #3B5999;
            -webkit-box-shadow: 0px 5px 0px 0px #2E4476;
            box-shadow: 0px 5px 0px 0px #2E4476;
            }
            button.ornek:active {
            top: 3px;
            -webkit-box-shadow: 0px 2px 0px 0px #2E4476;
            box-shadow: 0px 2px 0px 0px #2E4476;
            }
        </style>
    </head>
    <body>
        <button class="ornek">Beğen!</button>
    </body>
</html>
Örnek 20: CSS HTML Form Örneği
Kod:
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Örnekler</title>
        <style> 
            #form-alan{
            width: 600px;
            margin-top: 25px;
            }
 
            #form-alan input, #form-alan textarea {
            padding: 5px;
            width: 471px;
            font-family: Helvetica, sans-serif;
            font-size: 1.4em;
            margin: 0px 0px 10px 0px;
            border: 2px solid #ccc;
            }
 
            #form-alan textarea {
            height: 90px;
            }
 
            #form-alan textarea:focus, #form-alan input:focus {
            border: 2px solid #900;
            }
 
            #form-alan input[type="submit"] {
            width: 100px;
            float: right;
            border:3px solid #2980b9;
            background: #fff;
            color:#2980b9;
            }
 
            label {
            float: left;
            text-align: right;
            margin-right: 15px;
            width: 100px;
            padding-top: 5px;
            font-size: 1.4em;
            }
        </style>
    </head>
    <body>
        <div id="form-alan">
 
            <form method="post" action="#">
            <label for="Ad">Ad:</label>
            <input type="text" name="Ad" id="Ad" />
 
            <label for="Soyad">Soyad:</label>
            <input type="text" name="Soyad" id="Soyad" />
 
            <label for="Email">Eposta:</label>
            <input type="text" name="Email" id="Email" />
 
            <label for="Mesaj">Mesaj:</label><br />
            <textarea name="Mesaj" rows="20" cols="20" id="Mesaj"></textarea>
 
            <input type="submit" name="kaydet" value="Kaydet" />
            </form>
        </div>
    </body>
</html>

 
Katılım
7 Mart 2021
Mesajlar
4
Tepki Puanı
4
Puanı
2
Konum
İstanbul
Web
balikhobim.com
İlgi Alanı
balık avı
Bu yazıda CSS ile bir <div> etiketini stil özelliklerini kullanarak adım adım değiştireceğiz. Bu yazıda hem CSS Örnekleri olması hemde CSS dersi için adım adım bir referans sağlayacaktır. En basit örneklerden ve en basit seçicilerden başlayıp daha karmaşık ve zor örneklere kadar bir çok örnek bulacak ve uygulayacaksınız.
CSS kodlarını yazarken aşağıdaki HTML belgesini referans alarak CSS kodlarını yazdım. Eğer sizde kodları uygulamak isterseniz. Aşağıdaki HTML belgesinin <style> etiketini her örnek için güncelleme yapmanız gerekecektir.
Kod:
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Örnekler</title>
        <style>
           /*tüm stil kodlarını bu kısımda yazacağız*/
        </style>
    </head>
    <body>
        <!-- buradaki div etiketinin stilini değiştireceğiz. -->
        <div id="kutu1" class="kutu">
            <h2>KUTU 1</h2>
        </div>
        <div id="kutu2" class="kutu">
            <h2>KUTU 2</h2>
        </div>      
       
    </body>
</html>
Css Örnekleri
Örnek 1: <div> etiketlerinin yazı rengini kırmızı olarak değiştirin. (Yazı rengi için color özelliği kullanılır.)

Kod:
<style>
    div{
        color:red;
    }
</style>
Örnek 2: <div> etiketlerinin yazı rengini beyaz, arkaplan rengi kırmızı yapın.( arkaplan rengi background-color ile verilir)
Kod:
<style>
    div{
        color:white;
        background-color: red;
    }
</style>
Örnek 3: <div> etiketlerinin yazı rengini beyaz, arkaplan rengini kırmızı, kutu genişliğini 200px, kutu yüksekliğini 150px olarak değiştirin. (genişlik için width, yükseklik için height özelliği kullanılır
Kod:
<style>
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
    }
</style>
Örnek 4: Yukarıdaki kodlara ek olarak yazı fontunu sans şerif yapın
Kod:
<style>
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        font-family: sans-serif;
    }
</style>
Örnek 4: Yukarıdaki css özelliklerine ek olarak <div> etiketinine yukarıdan ve sağdan 5px kaydırılmış mavi renkte gölge ekleyin
Kod:
<style>
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        box-shadow: blue 5px 5px;
    }
</style>
Örnek 5: Yukarıdaki kodlara ek olarak eklenen gölgenin 10px sonra bulanıklaşmasını sağlayın.
Kod:
<style>
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        box-shadow: blue 5px 5px 10px;
    }
</style>
Örnek 6: Yukarıdaki kodlara ek olarak <div> içindeki yazının yatay olarak ortalanmasını sağlayın. (yazıyı yatayda ortalamak için text-aling özelliği kullanılır
Kod:
<style>
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        box-shadow: blue 5px 5px 10px;
        text-align: center;
    }
</style>
Örnek 7: Yukarıdaki kodlara ek olarak yazıyı dikeyde ortalayın. (Nesneleri yatayda ortalamak CSS ile kolayken dikeyde ortalamak için flex nesneleri yada mevcut yükseklik bilinyorsa line-hegiht değeri mevcut yükseklik olarak ayarlanarak yapılıyor.
Kod:
<style>
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        box-shadow: blue 5px 5px 10px;
        text-align: center;
        line-height: 150px; /* height ile aynı girilir*
    }
</style>
Örnek 8: class değeri kutu olan etiketlerinin yazı rengini beyaz, arkaplan rengini kırmızı, kutu genişliğini 200px, kutu yüksekliğini 150px olarak değiştirin. (Bir nesneyi class seçici kullanarak seçmek için class adının başına . (nokta) işareti konulur.
Kod:
<style>
    .kutu{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
    }
</style>
Örnek 9: id değeri kutu2 olan etiketin yazı rengini beyaz, arkaplan rengini kırmızı, kutu genişliğini 200px, kutu yüksekliğini 150px olarak değiştirin. (Bir nesneyi id seçici kullanarak seçmek için id adının başına # (diyez) işareti konulur. Ayrıca her sayfada aynı id değerinden ikincisi olamaz
Kod:
<style>
    #kutu1{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
    }
</style>
Örnek 10: <div> etiketlerinin yazı rengini beyaz, arkaplan rengini kırmızı, kutu genişliğini 200px, kutu yüksekliğini 150px olarak ayarlayıp kutuların yan yana gelmesini sağlayın. ( etiketlerin yan yana gelmesi için bir çok farklı yöntem bulunmakta fakat bu örnek nesnelerin soldan sağa doğru dizmek için float:left seçeneğini kullanabilirsiniz.
Kod:
<style>
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        float:left;
    }
</style>
Örnek 11: <div> etiketlerinin yazı rengini beyaz, arkaplan rengini kırmızı, kutu genişliğini 200px, kutu yüksekliğini 150px , kutular arasındaki boşluğu 10px yapıp kutuların yan yana gelmesini sağlayın. (Nesnelerin arasında boşluk bırakmak için margin değeri kullanılır. tekli, ikili ve dört değerli kullanımı mevcuttur. En yaygın kullanımı margin:yukarıdan sağdan alttan soldan; şeklidedir.
Kod:
<style>
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        float:left;
        margin:10px;
    }
</style>
Kod:
<style>
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        float:left;
        margin:10px 3px 5px 3px;
    }
</style>
Örnek 13: Yukarıdaki gibi biçimlendirilmiş <div> etiketinin iç boşluğunu 25px olarak ayarlayın. (İç boşluk için padding kullanılır. Ayrıca box-model ilkesine göre nesne nesnenin ölçüleri verilen genişlik yada yükseklik değeri + çerçeve + iç boşluklar olarak ayarlanır.)

genişlik: 200px(width)+25px(padding sol)+25px (padding sağ)
yükseklik: 150px(height)+25px(padding üst)+25px (padding alt)
Kod:
<style>
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        float:left;
        margin:10px 3px 5px 3px;
        padding:25px;
    }
</style>
Örnek 14: Yukarıdaki gibi biçimlendirilmiş <div> etiketinin çerçevesini siyah renkte 2px kalınlığında solid deseninde yapın. (Çerçeve için border özelliği kullanılır ve üç değeri aynı anda girilebilir.

genişlik: 200px(width)+25px(padding sol)+25px (padding sağ) + 2px(çerçeve sol) +2px çerçeve sağ)
yükseklik: 150px(height)+25px(padding üst)+25px (padding alt) + 2px(çerçeve üst) +2px çerçeve alt)
Kod:
<style>
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        float:left;
        margin:10px 3px 5px 3px;
        padding:25px;
        border: #000000 solid 2px;
    }
</style>
Örnek 15: Yukarıdaki gibi biçimlendirilmiş <div> etiketinin toplam genişliği witdth ve height içinde kullanılan değerler olmasını sağlayın. (genişlik 200px yükseklik 150px)
Yukarıdaki gibi biçimlendirilmiş <div> etiketine vermiş olduğumuz width yada height değerleri ile border ve padding değerleri nesnenin toplam genişlik değerini oluşturduğunu daha önceki örneklerde açıklamıştım. Burada istersek verdiğimiz width yada heigth değerlerini toplam genişlik yada yükseklik olarak ayarlayabiliriz. Bunun için box-sizing özelliğini kullanarak verilen değerleri sabitleyebiliriz.
Kod:
<style>
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        float:left;
        margin:10px 3px 5px 3px;
        padding:25px;
        border: #000000 solid 2px;
        box-sizing: border-box;
    }
</style>
Örnek 16: Yukarıdaki kodlara ek olarak #kutu2 nesnesini 45 derece sola doğru çevirin
Kod:
<style>
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        float:left;
        margin:10px 3px 5px 3px;
        padding:25px;
        border: #000000 solid 2px;
        box-sizing: border-box;
    }
    #kutu2{
        transform: rotate(-45deg);
    }
</style>
Örnek 17: Yukarıdaki kodlara ek olarak #kutu1 içinde yazıya siyah gölge ekleyin.
Kod:
<style>
    div{
        color:white;
        background-color: red;
        width: 200px;
        height: 150px;
        float:left;
        margin:10px 3px 5px 3px;
        padding:25px;
        border: #000000 solid 2px;
        box-sizing: border-box;
    }
    #kutu2{
        transform: rotate(-45deg);
    }
    #kutu1{
        text-shadow:black 3px 3px 2px; /* renk x y bulanıklık*/
    }
</style>
Yukardaki Uygulamalardan Farklı Olarak

Örnek 18: CSS Tablo Biçimlendirme Örneği
Kod:
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Örnekler</title>
        <style>
            #personel {
            border-collapse: collapse;
            width: 100%;
            background-color: #ecf0f1;
            font-weight: bold;
            }

            #personel td, #personel th {
            padding: 8px;
            }

            #personel th {
            background: #3498db;
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left;
            color: #fff;
            }

            #personel td{
            color:#2c3e50;
            }
        </style>
    </head>
    <body>
       <table id="personel">
        <tr>
            <th>Sıra</th>
            <th>Ad</th>
            <th>Soyad</th>
            <th>Yaş</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Asuman</td>
            <td>Göldağ</td>
            <td>29</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Ünlüsoy</td>
            <td>Mansur</td>
            <td>49</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Cansen</td>
            <td>Karaburun</td>
            <td>84</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Ülküsel</td>
            <td>Özkahraman</td>
            <td>73</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Funda</td>
            <td>Sığırcı</td>
            <td>38</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Edibe</td>
            <td>Farımaz</td>
            <td>89</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Uluer</td>
            <td>Akgül</td>
            <td>38</td>
        </tr>
        <tr>
            <td>8</td>
            <td>Tarımer</td>
            <td>Zımba</td>
            <td>60</td>
        </tr>
        <tr>
            <td>9</td>
            <td>Şule</td>
            <td>Alaca</td>
            <td>66</td>
        </tr>
        <tr>
            <td>10</td>
            <td>Hafız</td>
            <td>Bayduz</td>
            <td>38</td>
        </tr>
    </table>      
       
    </body>
</html>
Örnek 19: CSS buton örneği
Kod:
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Örnekler</title>
        <style>
            button.ornek {
            -webkit-transition: all 0s ease-out;
            -moz-transition: all 0s ease-out;
            -o-transition: all 0s ease-out;
            -ms-transition: all 0s ease-out;
            transition: all 0s ease-out;
            height: 35px;
            display: block;
            font-family: Arial, "Helvetica", sans-serif;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-align: center;
            text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
            padding: 4px 20px 0;
            margin: 10px auto;
            left: 30px;
            position: relative;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            border-radius: 5px;
            border: solid 1px #2E4476;
            background: #3B5999;
            -webkit-box-shadow: 0px 5px 0px 0px #2E4476;
            box-shadow: 0px 5px 0px 0px #2E4476;
            }
            button.ornek:active {
            top: 3px;
            -webkit-box-shadow: 0px 2px 0px 0px #2E4476;
            box-shadow: 0px 2px 0px 0px #2E4476;
            }
        </style>
    </head>
    <body>
        <button class="ornek">Beğen!</button>
    </body>
</html>
Örnek 20: CSS HTML Form Örneği
Kod:
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Örnekler</title>
        <style>
            #form-alan{
            width: 600px;
            margin-top: 25px;
            }

            #form-alan input, #form-alan textarea {
            padding: 5px;
            width: 471px;
            font-family: Helvetica, sans-serif;
            font-size: 1.4em;
            margin: 0px 0px 10px 0px;
            border: 2px solid #ccc;
            }

            #form-alan textarea {
            height: 90px;
            }

            #form-alan textarea:focus, #form-alan input:focus {
            border: 2px solid #900;
            }

            #form-alan input[type="submit"] {
            width: 100px;
            float: right;
            border:3px solid #2980b9;
            background: #fff;
            color:#2980b9;
            }

            label {
            float: left;
            text-align: right;
            margin-right: 15px;
            width: 100px;
            padding-top: 5px;
            font-size: 1.4em;
            }
        </style>
    </head>
    <body>
        <div id="form-alan">

            <form method="post" action="#">
            <label for="Ad">Ad:</label>
            <input type="text" name="Ad" id="Ad" />

            <label for="Soyad">Soyad:</label>
            <input type="text" name="Soyad" id="Soyad" />

            <label for="Email">Eposta:</label>
            <input type="text" name="Email" id="Email" />

            <label for="Mesaj">Mesaj:</label><br />
            <textarea name="Mesaj" rows="20" cols="20" id="Mesaj"></textarea>

            <input type="submit" name="kaydet" value="Kaydet" />
            </form>
        </div>
    </body>
</html>

Eline sağlık abi.
 

Konuyu Okuyan Kullanıcılar

Uzman Yazar Reklam Alani