CSS ÜÇ BOYUTLU YAZI ve YAZI ANİMASYON OLUŞTURMA

Bu yazıda css ile web sayfasındaki yazıyı 3 boyutlu yapan, text animasyonu oluşturan kodları vereceğiz.


Uygun yerlerde üç boyutlu yazı kullanmak web sayfalarına görsel güzellik katar. Standart bir 3D text oluşturma kodu;

text-shadow: 6px 6px 2px #7180f6;

şeklindedir.

Birinci parametre x yönündeki kayma miktarını, ikinci parametre y ekseni yönünde kayma miktarını, üçüncü parametre gölge dağınıklık miktarını ve dördüncü parametre gölge rengini verir.

Sağlıklı ve şık sonuç alabilmek için arial ve verdana gibi yazı tipleri kullanmak ve yazıyı kalın ve büyük yapmak gerekir.

Yazıya animasyon vermek için transition özelliği kullanılır.  

transition:all 1s ease-in 2s;

Birinci parametresi özelliği, ikinci parametre animasyon süresi üçüncü parametre animasyon biçimini, dördüncü parametre bekleme süresini belirler.

Webkit, ms, o ile başlayanlar tarayıcıların bazı sürümlerinin desteklememesi nedeniyle ve tarayıcı farklılarından dolayı kullanılır.


     
      <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .d3Text 
        {
            color: #061693;
            font-weight: bolder;
            font-size: 28pt;
            text-shadow: 6px 6px 2px #7180f6;
        }
        .d3Text2 {
            color: #061693;
            font-weight: bolder;
            font-family:Arial;
            font-size: 32pt;
            text-shadow: 4px 5px 1px #919397;
            -webkit-transition: all 1s ease-out;
            -moz-transition: all 1s ease-out;
            -ms-transition: all 1s ease-out;
            -o-transition: all 1s ease-out;
        }
            .d3Text2:hover 
            {
                position: relative;
                top: -5px;
                left: -5px;
                text-shadow: 1px 1px #ae0909, 2px 2px #ae0909,3px 3px #ae0909, 4px 4px #ae0909,
     5px 5px #ae0909, 6px 6px #ae0909;
            }
        .d3Text3 
        {
            color: #061693;
            font-weight: bolder;
            font-family: Arial;
            font-size: 32pt;
            text-shadow: 7px 7px #919397;
            transition:all 1s ease-in;
        }
            .d3Text3:hover 
            {
                -webkit-transform: scale(1.5);
                -moz-transform: scale(1.5);
                -ms-transform: scale(1.5);
                -o-transform: scale(1.5);
                text-shadow:9px 9px 0 #808080;
            }
            
            .D3div 
            {
                margin: 225px;
            }
    </style>
</head>
<body>
    <div class="D3div">
        <span class="d3Text">
            SANATSAL BİLGİ 3D METİN
        </span>
        <br />
        <br />
        <span class="d3Text2">
            SANATSAL BİLGİ 3D METİN
        </span>
        <br />
        <br />
        <span class="d3Text3">
            SANATSAL BİLGİ 3D METİN
        </span>
    </div>

</body>
</html>




SANATSAL BİLGİ

31/08/2016

  • YORUM YAZ
  • ADI SOYADI(veya nick)
  • YORUM


COPYRIGHT© HER HAKKI SAKLIDIR
Sitede Yer Alan Bilgi Belge Ve Materyallerin İzinsiz olarak Kopyalanması ve Alıntılanması Yasaktır

SANATSAL BILGI