Bilimin Rengi: CSS3 Geçişleri

CSS3 ile kullanıcıların web siteleri artık daha güzel bir hal aldı.Bu özellikler ile göze güzel gözükecek bir çok tasarım yapabilirsiniz ve asıl önemli olanı bunların çok basit kodlarla yapabiliyor olmamızdır.
Şimdi sizlere bunlardan 8 basit olanını göstereceğiz. Basit olduğuna bakmayın sonuçları gerçekten etkileyici olacaktır. Tabi doğru kullanılırsa.

Bunun için bir div etiketi oluşturalım ve şu şekilde düzenleyelim:::

<!DOCTYPE html>
<html>
<head>
 <title>CSS3 Geçişler</title>
 <meta charset="utf-8"> 
        <style type="text/css">
        </style>
</head>
<body>
    
    <div></div>
    
</body>
</html>

Şimdi bir class (sınıf) oluşturalım ve div etiketi içerisine ekleyelim.

<!DOCTYPE html>
<html>
<head>
 <title>CSS3 Geçişler</title>
 <meta charset="utf-8"> 
        <style type="text/css">
        
        .gecis
        {
            
            width:500px;
            height:300px;
            
            background:#27292d;
            color:#fff;
           
            font-weight:900;
            font-size:54px;
            
            text-align:center;
            line-height:298px;
            
            transition:all 0.5s ease;
            
        }
        
        </style>
</head>
<body>
    
    <div class="gecis"></div>
    
</body>
</html>

Buradaki "transition" Türkçe anlamı ile "geçiş" demektir. Geçiş şeklini, hızını, nasıl yavaşlayacağını gibi özelliklerin yer aldığı bölümdür.
Bundan sonrası bir sınıf daha oluşturacağız ve bu sınıf imlecin üzerine gelmesi ile nasıl bir tepki göstereceğini belirtir. Şimdi o 8 adet geçişimizi anlatmaya başlayalım.

1- Kenarlık Değişimi

.kenarlık:hover
        {
            box-shadow: inset 0 0 0 35px #f87e7e;
        }

Kenarlık

2- Renk Değişimi

.renk:hover
        {
            background: #59a4cc;
        }

Renk Değişimi

3- Opaklık Değişimi

.opaklik:hover
        {
            opacity:0.9;
        }

Opaklıkğı Değiştirme

4- Büyütme

.buyutme:hover
        {
        -webkit-transform: scale(1.2);
 -ms-transform: scale(1.2);
 transform: scale(1.2);
        }

Büyütme

5- Küçültme

.kucultme:hover
        {
        -webkit-transform: scale(0.8);
 -ms-transform: scale(0.8);
 transform: scale(0.8);
        }

Küçültme

6- Döndürme

.dondurme:hover
        {
        -webkit-transform: rotateZ(-10deg);
 -ms-transform: rotateZ(-10deg);
 transform: rotateZ(-10deg);
        }

Döndürme

7- Şekil Dönüşümü (Yaprak Şekli)

.sekil:hover
        {
 border-top-left-radius: 300px;
 border-top-right-radius: 5px;
 border-bottom-right-radius: 300px;
 border-bottom-left-radius: 5px;
        }

Şekil Dönüşümü

8- 3D Görünümü

.ucd:hover
        {
 box-shadow:
        3px 3px #53a7ea,
        4px 4px #53a7ea,
        5px 5px #53a7ea;
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
        }

3D Görünümü

Şimdi bunları bir araya toplayalım.

CSS Kodları: Bir klasör içine style.css dosyasını oluşturup alttaki kodları yazıyoruz.

.gecis
        {    
    width:500px;
    height:300px;
            
    background:#27292d;
    color:#fff;
           
    font-weight:900;
    font-size:54px;
            
    text-align:center;
    line-height:298px;
            
    transition:all 0.5s ease;
   
 margin: 0 auto;     
    }
.kenarlık:hover
        {
    box-shadow: inset 0 0 0 35px #f87e7e;
    }
.renk:hover
        {
    background: #59a4cc;
    }
.opaklik:hover
        {
    opacity:0.9;
    }
.buyutme:hover
        {
    -webkit-transform: scale(1.2);
 -ms-transform: scale(1.2);
 transform: scale(1.2);
    }
.kucultme:hover
        {
    -webkit-transform: scale(0.8);
 -ms-transform: scale(0.8);
 transform: scale(0.8);
    }
.dondurme:hover
        {
    -webkit-transform: rotateZ(-10deg);
 -ms-transform: rotateZ(-10deg);
 transform: rotateZ(-10deg);
    }
.sekil:hover
        {
 border-top-left-radius: 300px;
 border-top-right-radius: 5px;
 border-bottom-right-radius: 300px;
 border-bottom-left-radius: 5px;
    }
.ucd:hover
        {
 box-shadow:
    3px 3px #53a7ea,
    4px 4px #53a7ea,
    5px 5px #53a7ea;
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
    }

HTML Kodları: Aynı klasör içerisine istediğiniz bir isinde, örneğin index.html dosyasını oluşturuyorsunuz ve aşağıdaki kodları kopyalayıp yapıştırıyorsunuz. Eğer web siteniz için yapıyorsanız bunları zaten anlatmama gerek yoktur.

<!DOCTYPE html>
<html>
<head>
 <title>Geçişler</title>
 <meta charset="utf-8"> 
 <link href='style.css' rel='stylesheet' type='text/css'>
</head>
<body style="margin: 0; padding: 0; text-align: center;">
    
        <div class="gecis kenarlık">Kenarlık</div> <br>
        <div class="gecis renk">Renk Değişimi</div> <br>
 <div class="gecis opaklik">Opaklıkğı Değiştirme</div> <br>
 <div class="gecis buyutme">Büyütme</div> <br>
 <div class="gecis kucultme">Küçültme</div> <br>
 <div class="gecis dondurme">Döndürme</div> <br>
 <div class="gecis sekil">Şekil Dönüşümü</div> <br>
 <div class="gecis ucd">3D Görünümü</div> <br>
 
</body>
</html>

Yok ben hazır istiyorum derseniz onuda yaptık. Bu linkten dosyaları indirebilirsiniz.

Sayfalar

7 Mayıs 2014 Çarşamba

CSS3 Geçişleri

3 yorum: