OW Debug - Notice
Message: Trying to access array offset on value of type null
File: /home/romarekl/public_html/sosyallift.com/ow_plugins/forum/controllers/topic.php
Line: 136
CSS'te Text Shadow ve Box Shadow Forum | Sosyallift©
Loading...
 
tr
Whordark
Whordark Şubat 2 '17
CSS'te Text Shadow ve Box Shadow

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

#deneme {

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;

}

Şeklinde CSS değerlerine sahip olduğumuz varsayalım.

<div id="deneme">

<p>CSS3 ile TEXT-SHADOW</p>

</div>

HTML kodlarımız ise bu şekilde.

CSS3 ile TEXT-SHADOW

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

text-shadow

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

#deneme2 {

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;

}

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.

CSS3 ile TEXT-SHADOW

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

#deneme3 {

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.

CSS3 ile TEXT-SHADOW

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

#deneme4 {

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.

CSS3 ile TEXT-SHADOW

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

#deneme5 {

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: 001px 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.

CSS3 ile TEXT-SHADOW

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

#deneme6 {

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.

CSS3 ile TEXT-SHADOW

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

box-shadow

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.

#deneme7 {

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.

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

#deneme8 {

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 black;

}

box-shadow özelliğini yazdıktan sonra text-shadow'da olduğu gibi yatayda ve dikeyde 4px'lik bir kaydırma işlemi yapıyorum ve gölgemin rengini ekliyorum.

Görüldüğü gibi box-shadow özelliği div'imize başarılı bir şekilde eklendi.

#deneme9 {

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;

}

İlk iki 4px değerinden sonra yazdığım 4px değeri ise gölgenin bulanıklık (blur) değeri. Böylece gölgemi daha çekici hâle getirmiş oldum.

Ve işte çıktımız. İlkinden daha güzel oldu.

#deneme9a {

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;

}

Gölgeyi ters istikamette kaydırmak istersek yatay ve dikey eksen değerlerinin başına - (eksi) ifadesini koymamız yeterli.

Bu şekilde gölgeyi ters bir şekilde kaydırabililriz. Bu teknik text-shadow'da da geçerlidir.

#deneme10 {

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;

}

10px yazdığım dördüncü değer ise gölgenin dağılma (spread) değeridir.

Güzel olmadı fakat dağılma (spread) etkisini görün diye böyle bir şey yaptım.

#deneme11 {

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: 0010px 2px black;

}

Burada ise gölgenin konumunu merkeze aldım. 10px'lik blur etkisi ve 2px'lik dağılma etkisi verdim.

Bir öncekine nazaran gölgemiz şimdi daha anlamlı hâle geldi.

#deneme12 {

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;

}

text-shadow'da olduğu gibi box-shadow'da da gölgenin rengini değiştirebiliriz.

Gölgemizin rengini bordo yaptık.

#deneme13 {

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);

}

Aynı şekilde gölgemizin renginin şeffaflığı ile oynayabiliriz.

Gölgemizin rengine %50 şeffaflık verdim.

#deneme13a {

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;

}

box-shadow'un en güzel kullanım şekillerinden biri de border-radius değeri ile birlikte kullanılmasıdır.

Görüldüğü gibi gölge efekti div'imize başarılı bir şekilde uygulandı.

#deneme14 {

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: 0010px black inset;

}

Son değer olarak yazdığımız değer olan inset, iç gölge efekti vermek için kullanılır.

div'imizin gölge konumunu ortaladık. 10px'lik bulanıklık verdik ve gölgemizi iç gölge olarak belirledik. Böylece div'imize bir derinlik hissi kattık.

#deneme15 {

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: 0030px black inset, 0010px 4px black;

}

Gölge efektinin ikili kullanımı da mevcuttur. İkili etkiyi katabilmek için box-shadow değerlerini virgül ile ayırmamız yeterli. Öncelikle div'ime 46px'lik border-radius değeri verdim. Daha sonra 30px blur ile bir iç gölge; 10px blur ve 4px spread etkisi ile dış gölge verdim. Böylece div'ime üç boyut etkisi kattım.

Görüldüğü gibi div'im üç boyutluymuş gibi görünüyor.

#deneme16 {

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;

}

#deneme17 {

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: 00020px black inset;

border-radius: 24px;

}

#deneme18 {

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: 00020px black;

border-radius: 24px;

}

Burada ise border ile box-shadow arasındaki farkı görebilirsiniz. border verdiğim div'de metni hizalamak box-shadow'a göre daha zor. Bunu line-height değerinden anlayabilirsiniz.

border

box-shadow inset

box-shadow

Görünürde bir fark olmamasına rağmen border her zaman genişliğe etki eder. Bu da bize tasarımda teknik sorunlar yaşatır. box-shadow'da ise böyle bir sorun yoktur.

#deneme19 {

width: 200px;

height: 200px;

position: relative;

margin: 25px auto;

background-color: white;

text-align: center;

font-family: Arial, Verdana, sans-serif;

font-size: 24px;

line-height: 200px;

box-shadow: 0045px black inset, 0010px 4px black;

border-radius: 50%;

cursor: pointer;

transition: all .4s ease-in-out;

}

#deneme19:hover {

box-shadow: 0015px black inset, 005px 2px black;

}

Bu örneğimizde ise 200x200px ebatında bir top etkisi yaptım. Div'in topa benzeyebilmesi için border-radius değerine 50% vermemiz yeterli. Daha sonra ikili box-shadow ve transition değerleri ile topun üzerine gelince oluşacak gölge efektini belirledim. Siz yaratıcılığınızı konuşturarak ikili box-shadow değerleri ile düğme (button) yapabilirsiniz.

Kaynak:http://zinzinzibidi.com/web_tasarim/css3/css_te_text_shadow_ve_box_shadow

Paylaş: