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 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: 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.
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.
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: 0 0 10px 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: 0 0 10px 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: 0 0 30px black inset, 0 0 10px 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: 0 0 0 20px 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: 0 0 0 20px 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: 0 0 45px black inset, 0 0 10px 4px black;
border-radius: 50%;
cursor: pointer;
transition: all .4s ease-in-out;
}
#deneme19:hover {
box-shadow: 0 0 15px black inset, 0 0 5px 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.
Topun üzerine gelebilirsiniz.
Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.
Bu derslik de bu kadar. Diğer dersimizde CSS'te outline, animation, column, overflow, resize ve selection konularına değineceğiz.