CSS

Etkili Birkaç CSS3 Özelliği

9 yıl önce
1 Yorum
yazan Hayri

Css web teknolojileri gerliştirmenin en kolay ve etkili yolu olduğunu biliyorsunuzdur. CSS3 ile gelen bir çok güzel özellik Photoshop gibi grafik programı kullanmadan yapmak mümkündür.
İşte bu yazıda bu etkili CSS özelliklerinin bir kaç tanesinden bahsedeceğim.

  • Border Radius

  • Box Shadow

  • Text Shadow

  • Çoklu Arkaplan

 

Bu özelliklerin her birini geçmişte Photoshop grafik programını kullanarak hazırlayabiliyordum. CSS3 ile HTML etiketlerine daha rahat müdahale edip  düzenlemek mümkün oluyor.

 

Unutmadan eski bazı tarayıcı sürümleri -webkit- , -moz-, -o- , -ms- ön eklerine ihtiyaç duymaktadır. Aşağıdaki örneklerin bazılarında eski tarayıcı sürümleri ile de uyumlu olması için önek tanımlaması yapılmıştır.( CSS özelliğinin sade kullanımını da önekli kullanımlardan sonra yazmanız doğru kullanım şekli olacaktır.)

[divider]

Border Radius #1

Destekleyen Tarayıcılar:

Safari: 3.2+
Firefox: 3.0+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

-webkit-border-radius: boyut;
-moz-border-radius: boyut;
border-radius: boyut;

 

Örnek:

  <style>
#kutu{
      -webkit-border-radius:10px;
      -moz-border-radius:10px;
      border-radius:10px;

     width: 100px;
     height: 100px;
    background: #e74c3c;
}
</style>



<div id="kutu"></div>
</div>

Screenshot_5

[divider]

Box Shadow #2

Destekleyen Tarayıcılar:

Safari: 3.2+
Firefox: 3.5+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

HTML etiketlerine gölge efekti vermek için CSS3 ile güzel bir özelliktir.

 

-webkit-box-shadow: çıtıntı_x çıkıntı_y bulanıklık renk;
-moz-box-shadow: çıtıntı_x çıkıntı_y bulanıklık renk;
box-shadow: çıtıntı_x çıkıntı_y bulanıklık renk;

Unutmadan tekrar belirtmek isterim. Bazı eski tarayıcı sürümleri için webkit ve moz öneklerini kullanmak gerekmektedir.

Gelelim Box Shadow (kutu gölge) özelliğinin kullanımına;

1.parametre: soldan gölgenin ne kadar uzakta olacağını gösterir.

2.parametre:üstten gölgenin ne kadar uzakta olacağını gösterir.

3.parametre: gölgenin bulanklığı ne kadar devam edeceğini gösterir.

4. parametre :gölgenin rengini göstermektedir.

-webkit-box-shadow: 5px 5px 10px #3C3741;
-moz-box-shadow: 5px 5px 10px #3C3741;
box-shadow: 5px 5px 10px #3C3741;

 

Örnek:

<style>
#kutu{
     -webkit-box-shadow: 5px 5px 10px #3C3741;
     -moz-box-shadow: 5px 5px 10px #3C3741;
     box-shadow: 5px 5px 10px #3C3741;

    -webkit-border-radius:10px;
   -moz-border-radius:10px;
    border-radius:10px;

   width: 100px;
   height: 100px;
   background: #e74c3c;
}
</style>

<div id="kutu"></div>
</div>

Screenshot_6

 

CSS Box Shadow özelliğinin ek bir parametre daha kullanarak gölgeyi dışarı yere içeri vermek mümkün olmaktadır. inset anahtar kelimesini kullanarak gölgeyi dışarı doğru değil içeri doğru vermek mümkündür. Yukarıdaki örneğe inset anahtar kelimesini ekleyerek aşağıdaki görüntüyü elde edebilirsiniz.

-webkit-box-shadow: 5px 5px 10px #3C3741 inset;
-moz-box-shadow: 5px 5px 10px #3C3741 inset;
box-shadow: 5px 5px 10px #3C3741 inset;

 

Screenshot_8

 

Son kullanım şekli olarakta CSS3 ile bir özelliğe birden fazla tanımlama yapmak mümkündür.  CSS3’ün bu özelliği ile birden fazla etiket kullana derdinden kurtulmuş oluyoruz. Şimdi gelelim yukarıdaki kutuya birden fazla nasıl gölge özelliği ekleyeceğimize bir bakalım.  Her yeni gölge özelliği eklemek için araya virgül kullanmamız gerekir. Yukarıdaki gölge özelliğinin aşağıdaki şekilde değiştirelim.

-webkit-box-shadow: 0 0 20px #333 inset, 
                  20px 15px 30px yellow, 
                  -20px 15px 30px lime, 
                  -20px -15px 30px blue, 
                  20px -15px 30px red;

-moz-box-shadow: 0 0 20px #333 inset, 
                20px 15px 30px yellow, 
                -20px 15px 30px lime, 
                -20px -15px 30px blue, 
                20px -15px 30px red;

box-shadow: 0 0 20px #333 inset, 
            20px 15px 30px yellow, 
           -20px 15px 30px lime, 
           -20px -15px 30px blue, 
           20px -15px 30px red;

Screenshot_9

 

Text Shadows #3

Destekleyen Tarayıcılar:

Safari: 3.2+
Firefox: 3.5+
Chrome: 3.0+
Opera: 10.1+
Internet Explorer: 10+

 

Text-shadow özelliği metindeki harflerin çevresine gölge efekti vermektedir.  Kullanımı box-shadow özelliğinde olduğu gibidir. Güzel olan şu her hangi bir önek kullanımına ihtiyaç duyulmaktadır.

text-shadow: çıtıntı_x çıkıntı_y bulanıklık renk;

 

Örnek:

<style>
#kutu{
 width: 500px;
 padding:50px;
 background: #fff;
}

#kutu h1{
 color: #fff ;
 text-shadow: 0 0 50px #333;
 font-size: 2em;
 font-family: sans-serif;
}
</style>

<div id="kutu">
  <h1>Oooo! Text Shadow</h1>
</div>

Screenshot_10

Box-shadow özelliğinde olduğu gibi birden fazla gölgeyi aynı anda kullanmak mümkündür.

 

text-shadow: 0 0 4px #ccc, 
          0 -5px 4px #ff3, 
         2px -10px 6px #fd3, 
       -2px -15px 11px #f80, 
         2px -18px 18px #f20;

Screenshot_11

 

Text Shadow ile Yapılmış Bir Kaç Güzel Efekt

Örnek 1:

<style>
#kutu{

width: 500px;
padding:50px;
background: #222;
}

#kutu h1{
color: rgba(0,0,0,0.6);
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
font-size: 2em;
font-family: sans-serif;
}
</style>

<div id="kutu">
<h1>YAZILIMBILISIM.NET</h1>
</div>

Screenshot_12

 

Örnek 2:

<style>
#kutu{

width: 600px;
padding:50px;
background: #fff;
}

#kutu h1{
color: rgba(0,0,0,0.6);
text-shadow: 3px 2px 0px #fff, 6px 5px 0px rgba(0,0,0,0.15);
font-size: 3em;
font-family: sans-serif;
}
</style>

<div id=”kutu”>
<h1>YAZILIMBILISIM.NET</h1>
</div>

 

Screenshot_13

 

Örnek 3:

<style>
#kutu{

width: 600px;
padding:50px;
background: #ecf0f1;
}

#kutu h1{
color: #fff;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
font-size: 3em;
font-family: sans-serif;
}
</style>

<div id="kutu">
<h1>YAZILIMBILISIM.NET</h1>
</div>

Screenshot_14

 

Örnek 4:

<style>
#kutu{

width: 600px;
padding:50px;
background: #ecf0f1;
}

#kutu h1{
color: #E8FFFF;
text-shadow: 0 1px 0 #ccc, 
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
font-size: 3em;
font-family: sans-serif;
}
</style>

<div id="kutu">
<h1>YAZILIMBILISIM.NET</h1>
</div>

Screenshot_15

 

Örnek 5:

<style>
#kutu{

width: 600px;
padding:50px;
background: #ecf0f1;
}

#kutu h1{
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
font-size: 3em;
font-family: sans-serif;
}
</style>

<div id="kutu">
<h1>YAZILIMBILISIM.NET</h1>
</div>

Screenshot_16

 

Örnek 6:

<style>
#kutu{

width: 600px;
padding:50px;
background: #453E4A;
}

#kutu h1{
color: #fff;
text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
font-size: 3em;
font-family: sans-serif;
}
</style>

<div id="kutu">
<h1>YAZILIMBILISIM.NET</h1>
</div>

Screenshot_17

 

Örnek 7:

<style>
#kutu{

width: 600px;
padding:50px;
background: #453E4A;
}

#kutu h1{
color: #fff;
text-shadow: -3px 3px 0px #00e6e6,
-6px 6px 0px #01cccc,
-9px 9px 0px #00bdbd;
font-size: 3em;
font-family: sans-serif;
}
</style>

<div id="kutu">
<h1>YAZILIMBILISIM.NET</h1>
</div>

Screenshot_18

Örnek 8:

<style>
#kutu{
padding:250px;
background: #3498db; 
}
h1 {
font-family:sans-serif; 
font-size: 5em;
color:#fff;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
</style>

<div id="kutu">
<h1>YAZILIMBİLİŞİM</h1>
</div>

Screenshot_23

 

[divider]

Çoklu Arkaplan

Destekleyen Tarayıcılar:

Safari: 3.2+
Firefox: 3.6+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

 

Birden fazla etiket kullanmadan çoklu arkaplan efektleri vermek CSS3 ile artık mümkün.  Bir etikete birden fazla arkplan kullanmak için sadece arkaplan değerlerini virgül ile eklemek gerekir.

background: url(resim1.png), url(resim2.png), -webkit-gradient(linear, left top, left bottom, from(#999), to(#333));
background: url(resim1.png), url(resim2.png),  -moz-linear-gradient(#999, #333);

CSS Gradient Kullanımı ile ilgili (w3school örnek)

 

Örnek 1:

<style>
#kutu{
padding:50px;
display: inline-block;
margin: 20px;

font-family: 'Lucida Grande', Arial, sans-serif;
font-size: 13px;

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

border: 1px solid rgba(0, 0, 0, 0.6);

background: -webkit-gradient(linear, left top, left bottom, from(#fbfcfb), to(#9d9e9d));
background: -moz-linear-gradient(#fbfcfb, #9d9e9d);
background-color: #c0c2c0;

text-shadow: rgba(255, 255, 255, 0.4) 0px 1px;

-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
box-shadow: rgba(255, 255, 255, 0.4) 0 1px;

}
</style>

<div id="kutu">
TIKLA
</div>

 

Screenshot_19

 

Örnek 2:

<style>
#kutu{
padding:50px;
display: inline-block;
margin: 20px;
font-size:2em;
color:#fff;
background: -webkit-gradient(linear, left top, left bottom, from(#bbbcbb), to(#959695));
background: -moz-linear-gradient(#bbbcbb, #959695);
background-color: #b7b9b7;
width: 100px;
}
</style>

<div id="kutu">
TIKLA
</div>

Screenshot_20

Örnek 3:

#kutu{
width: 500px;
height: 250px;
background-image: url(koyun.png), url(cayir.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}

 

Screenshot_21

İlginizi Çekebilir

Yorum Yap