CSS'te Text Shadow ve Box Shadow

CottonCandy · 22 Eyl 2016

Bu dersimizde css ile yazı efekleri öğreneceksiniz basit ve pratik olmak için günde 2 3 kez tekrarlayın

Not : lütfen emeğe saygı açısından "Teşekkür" et butonuna basın

CSS3 ile gelen en güzel yeniliklerden biri text-shadow ve box-shadow özellikleridir. Bu iki özellik CSS'in çığır açan teknolojilerinden biridir

Kod:

#maxigamerz.com CottonCandy {
    width: 720px;
    padding: 20px;
    height: 110px;
    position: relative;
    margin: 15px auto;
    background-color: gainsboro;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 24px;
    color: skyblue;
}

HTML kodlarımız ise bu şekilde.

Kod:

<div id="[B]maxigamerz.com CottonCandy[/B]">
    <p>CSS3 ile TEXT-SHADOW</p>
</div>

Görüntü :

text-shadow

text-shadow dilimizde metin gölgesi anlamındadır. Şimdi nasıl kullanılacağına bakalım.

Kod:

[B]
#maxigamerz.com {
    width: 720px;
    padding: 20px;
    height: 110px;
    position: relative;
    margin: 15px auto;
    background-color: gainsboro;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 24px;
    color: skyblue;
    text-shadow: 1px 1px black;
}[/B]

text-shadow adlı yeni bir özellik atadım ve değerini 1px 1px black şeklinde yazdım. Burada ilk yazdığımız 1px metnin yataydaki gölgesi, ikinci
yazdığımız 1px ise dikeydeki gölgesidir. black ise gölgenin rengidir. Şimdi çıktımıza bakalım.

Görüldüğü gibi metnimize gölge verdik. Metin daha okunaklı hâle geldi.

Kod:

#maxigame2 {
    width: 720px;
    padding: 20px;
    height: 110px;
    position: relative;
    margin: 15px auto;
    background-color: gainsboro;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 24px;
    color: skyblue;
    text-shadow: 1px 1px 4px black;
}

Burada eklediğimiz 4px değeri gölgeye blur efekti katar. Gölgenin keskinlikten uzaklaşıp bulanıklaşmasını sağlar.

Görüldüğü gibi blur efekti başarılı bir şekilde metnimize eklendi.

Kod:

#maxigame3 {
    width: 720px;
    padding: 20px;
    height: 110px;
    position: relative;
    margin: 15px auto;
    background-color: gainsboro;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 24px;
    color: skyblue;
    text-shadow: 1px 4px 4px black;
}

Daha derin bir gölge efekti için gölgeyi dikey eksende biraz daha fazla uzatmalısınız. Bu kullanıcıda bir derinlik etkisi hissi uyandıracaktır.

Çıktımız ise bu şekilde.

Kod:

#maxigame4 {
    width: 720px;
    padding: 20px;
    height: 110px;
    position: relative;
    margin: 15px auto;
    background-color: gainsboro;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 24px;
    color: skyblue;
    text-shadow: 0 0 1px maroon;
}

text-shadow'un en güzel özelliklerinden biri bu yeni teknik ile gölge dışında da bazı güzel efektlerin yapılabilmesidir. Örneğin; metnimize bir renk efekti verelim. Bunun için gölgeyi 0 0 ile merkezde konumlandırıyorum ve 1px'lik blur etkisi veriyorum. Rengini de bordo olarak belirliyorum.

Görüldüğü gibi harflerimizin sınır kısmına bordo bir renk etkisi verildi.

Kod:

#maxigame156 {
    width: 720px;
    padding: 20px;
    height: 110px;
    position: relative;
    margin: 15px auto;
    background-color: gainsboro;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 24px;
    color: skyblue;
    text-shadow: 1px 1px rgba(0,0,0,.5);
}

Gölgenin rengine şeffaflıkta katabilirsiniz. Örneğin; ilk örneğimizdeki gölgenin rengini %50 oranında şeffaflaştıralım.

Bu şekilde bir şeffaflık etkisi vermiş olduk.

Benim en sevdiğim CSS3 özelliklerinden bir olan ve hemen hemen her tasarımımda kullandığım bir özelliktir. box-shadow dilimizde kutu gölgesi anlamına gelmektedir ve div gibi iki boyutlu nesnelere gölge efekti vermek için kullanılır.

Kod:

#maxi-1 {
    width: 720px;
    height: 300px;
    position: relative;
    margin: 25px auto;
    background-color: gainsboro;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 24px;
}

Şeklinde kodlarımız olsun.

Kod:

#maxi-1-1 {
    width: 720px;
    height: 200px;
    position: relative;
    margin: 25px auto;
    background-color: gainsboro;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 24px;
    line-height: 120px;
    border: 20px solid black;
    border-radius: 24px;
}
#maxi-1-2 {
    width: 720px;
    height: 200px;
    position: relative;
    margin: 25px auto;
    background-color: gainsboro;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 24px;
    line-height: 200px;
    box-shadow: 0 0 0 20px black inset;
    border-radius: 24px;
}
#maxi-1-2 {
    width: 720px;
    height: 200px;
    position: relative;
    margin: 25px auto;
    background-color: gainsboro;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 24px;
    line-height: 200px;
    box-shadow: 0 0 0 20px black;
    border-radius: 24px;
}

Bir kaç kutu efekti daha verecem resim eklemiyorum deneyerek görebilirsiniz.

HTML:

#Maxigame-CottonCandy-1 {
    width: 720px;
    height: 300px;
    position: relative;
    margin: 25px auto;
    background-color: gainsboro;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 24px;
    box-shadow: 4px 4px 4px black;
}

!-- CottonCandy Maxigame.org -->

#Maxigame-CottonCandy-2 {
    width: 720px;
    height: 300px;
    position: relative;
    margin: 25px auto;
    background-color: gainsboro;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 24px;
    box-shadow: -4px -4px 4px black;
}
!-- CottonCandy Maxigame.org -->

#Maxigame-CottonCandy-3 {
    width: 720px;
    height: 300px;
    position: relative;
    margin: 25px auto;
    background-color: gainsboro;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 24px;
    box-shadow: 4px 4px 4px 10px black;
}

!-- CottonCandy Maxigame.org -->

#Maxigame-CottonCandy-4 {
    width: 720px;
    height: 300px;
    position: relative;
    margin: 25px auto;
    background-color: gainsboro;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 24px;
    box-shadow: 0 0 10px 2px black;
}

!-- CottonCandy Maxigame.org -->

#Maxigame-CottonCandy-5 {
    width: 720px;
    height: 300px;
    position: relative;
    margin: 25px auto;
    background-color: gainsboro;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 24px;
    box-shadow: 4px 4px 4px maroon;
}
!-- CottonCandy Maxigame.org -->

#Maxigame-CottonCandy-6 {
    width: 720px;
    height: 300px;
    position: relative;
    margin: 25px auto;
    background-color: gainsboro;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 24px;
    box-shadow: 4px 4px 4px rgba(0,0,0,.5);
}

!-- CottonCandy Maxigame.org -->

#Maxigame-CottonCandy-7 {
    width: 720px;
    height: 300px;
    position: relative;
    margin: 25px auto;
    background-color: gainsboro;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 24px;
    box-shadow: 0px 0px 18px 1px mediumpurple;
    border-radius: 26px;
}

!-- CottonCandy Maxigame.org -->

#Maxigame-CottonCandy-8 {
    width: 720px;
    height: 300px;
    position: relative;
    margin: 25px auto;
    background-color: gainsboro;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 24px;
    box-shadow: 0 0 10px black inset;
}

!-- CottonCandy Maxigame.org -->

#Maxigame-CottonCandy-9 {
    width: 720px;
    height: 300px;
    position: relative;
    margin: 25px auto;
    background-color: gainsboro;
    text-align: center;
    font-family: Arial, Verdana, sans-serif;
    font-size: 24px;
    border-radius: 46px;
    box-shadow: 0 0 30px black inset, 0 0 10px 4px black;
}

!-- CottonCandy Maxigame.org -->

CSS'te Text Shadow ve Box Shadow

CottonCandy

Atlas Evren

Benzer Konular

Sosyal Ağlarla Paylaş