pillinetwork hesabınızla giriş yapın.

Sizi CSS3 İle Tanıştıracak 5 Teknik

CSS, websitelerini stillemek için iyi bilinen ve geniş kesimler tarafından kullanılan bir dildir. Halen üzerinde çalışılan üçüncü sürümü ile geliştiricilere zaman kazandıracak pek çok özellik CSS'ye dahil edilecektir. Her ne kadar sadece en modern tarayıcılar tarafından bu özellikler desteklense de, yakında geniş kesimler tarafından kullanılabilecek olan bu yeniliklerin neler olduğunu şimdiden görmek güzel. Bu rehberde size CSS3 ile hayatımıza girecek olan 5 tekniği göstereceğim.

1: Genel Biçimlendirme

\

Dersimize başlamadan önce gelin dersimiz süresince kullanacağımız genel biçimlendirmemizi oluşturalım.

XHTML'miz için aşağıdaki div elementlerine ihtiyacımız olacak.

  • #round, CSS3 kodu ile yuvarlak köşeler oluÅŸturmak için
  • #indie, her biri farklı oranlarda yuvarlak köşeler oluÅŸturmak için
  • #opacity, CSS3'ün saydamlık ile nasıl baÅŸa çıktığını göstermek için
  • #shadow, Photoshop kullanmadan nasıl CSS3 ile gölge efekti oluÅŸturulabileceÄŸini göstermek için
  • #resize, elementlerin boyutunu CSS3 ile nasıl deÄŸiÅŸtirebileceÄŸimizi gösterebilmek için.

Bunun için XHTML kodumuz şu şekilde olacaktır:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>An Introduction to CSS3; A Nettuts Tutorial</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="wrapper">

  <div id="round"> </div>

  <div id="indie"> </div>

  <div id="opacity"> </div>

  <div id="shadow"> </div>

  <div id="resize">

  <img src="image.jpg" width="200" height="200" alt="resizable image">

  </div> 

</div>

</body>

HTML belgemizde bazı yukarıdaki IDlere sahib bazı DIV elementleri oluşturduk. Şimdi de gelin temel CSS dosyamızı oluşturalım.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
body 	{	

background-color: #fff;

}



#wrapper {	

width: 100%;

height: 100%;

}



div {	

width: 300px;

height: 300px; 

margin: 10px;

float: left;

}

        

/*kodun geri kalan kısmı daha sonra buraya gelecek*/

Sizin de gördüğünüz üzere tüm div etiketlerine 300px genişlik ve yükseklik atadık. Ayrıca onların her birini kendi soluna yaslayarak (float: left), üzerindeki divlerle oynayabileceğimiz bir sayfa oluşturduk.

2: Yuvarlatılmış Köşeler (Rounded Corners)

\

Yuvarlatılmış köşeler oluşturmak bazen zor olabilir. İlk olarak imajları oluşturmalı, ardından o imajları arkaplan resmi olarak atayacağımız başka divler oluşturmalı vs... Gerisini biliyorsunuz.

Bu problem CSS3 ile, "border-radius" özelliği ile çözülmüş durumda. İlk olarak siyah bir div elementi oluşturacağız ve ona siyah renkli bir sınır atayacağız. Sınır atamamızın sebebi, daha sonra kullanacağımız border-radius özelliğinin işleyebilmesi için gerekli olması.

Bunu da şu şekilde yapacağız:

1
2
3
4
 
#round {      

background-color: #000;  

border: 1px solid #000;  

}

div'i oluşturduktan sonra sayfanızı yenileyin (refresh). Şimdi siyah renkli, kare ve yaklaşık 300px genişliğinde ve yüksekliğinde bir div görüyor olmalısınız. Gelin şimdi de yuvarlatılmış köşeler üzerinde çalışalım. CSS3 ile yuvarlatılmış köşeler sadece iki satır kodla oluşturulabilir. 

1
2
3
4
5
6
 
#round {      

background-color: #000;  

border: 1px solid #000;  

-moz-border-radius: 10px;  

-webkit-border-radius: 10px;   

}

Sizin de gördüğünüz üzere neredeyse birbirinin aynısı olan iki satır ekledik. Aralarındaki tek fark "-moz" ve "-webkit". -moz Mozilla Firefox'a, -webkit ise Safari/Google Chrome tarayıcları için gerekli.

HTML belgenizi yenileyin ve yumuşak görünümlü yuvarlatılmış köşelerin tadına varın. Şey, yumuşak görünümlü derken aslında sadece ve Firefox ve Safari'de buna ulaşabiliyorsunuz. Google Chrome'da köşelerin biraz daha keskin olduğunu göreceksiniz.

Kodumuza geri dönelim, "border-radius"'un bir değere ihtiyacı var. Bu değer köşenin keskinliğini belirtirken; daha büyük değer ise yuvarlatılmış köşeye işaret ediyor - tıpkı Photoshop'ta olduğu gibi. Bildiğim kadarı ile bu değer için herhangi bir üst sınır bulunmuyor.

3: Birbirinden Bağımsız Yuvarlatılmış Köşeler

\

Birbirinden bağımsız yuvarlatılmış köşeler, CSS2 ve öncesinde gününüzüm mahvolmasına sebep olabilir. Ne şans ki CSS3 bu sorunu çözüyor.

Bu özellik, yukarıdaki ile aşağı yukarı aynı. Yine border-radius değerini kullanıyor, ancak kodumuzu biraz değiştirmemiz gerekiyor:

1
2
3
4
5
6
7
8
 
#indie {      

background-color: #000;  

border: 1px solid #000;  

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

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

-webkit-border-top-left-radius: 10px;  

-webkit-border-bottom-left-radius: 10px;  

}

Kodumuza "topright" ve "bottomright" değişkenlerini dahil ettik; adından da anlaşılacağı üzere bu değerler div elementimizin sağ üst ve sol alt köşelerine işaret ediyor. Bu yeni özellikler ile sekme benzeri görünüme sahip elementler oluşturmanız mümkün.

Yukarıdaki özellikler ile birlikte ayrıca "topleft" ve "bottomleft" özelliklerini de kullanabilirsiniz.

4: CSS3 İle Saydamlığı (Opacity) Değiştirmek

\

Günümüzde saydamlık efektini oluşturabilmeniz için birkaç satırlık kod yazmanız gerekiyor ve bunlar da genel olarak standart CSS2'nin sunduklarının dışında özellikleri dahil etmek için bazı "hack"ler uygulamak zorunda bırakıyor bizi. Yine CSS3, bu işlemi çok basitleştiriyor.

Bu kod satırının hatırlaması çok kolay, sadece "opacity: değer;". Kolay değil mi?

Kodumuz ÅŸu ÅŸekilde olacak.

1
2
3
4
 
#opacity {    

background-color: #000;  

opacity: 0.3;  

}

5: CSS3 İle Gölge Efekti Oluşturmak

\

Photoshop üzerinde gölge efekti oluşturmak için yapmanız gerekenler incir çekirdeğini doldurmaz. Ancak bunu web uygulamalarınıza dahil etmek istediğinizde muhtemelen önce gölgeyi bir imaj olarak kaydetmek isteyecek, ardından onu arkaplan resmi olarak kullanmak isteyeceksinizdir. Daha fazlası değil! (En azından modern tarayıcılar için). Ne yazık ki şimdilik sadece Safari ve Chrome bu özelliği destekliyor.

Kod sadece bir satırdan oluşuyor, ancak biraz uzun ve 4 farklı değeri var!

1
 
-webkit-box-shadow: 3px 5px 10px #ccc;

İlk değer için, 3px kullandım. Bu değer gölge ile div elementi arasındaki yatay mesafeyi tanımlıyor. İkinci değerde ise 5px kullandım, bu da kutu ile gölge arasındaki yatay mesafeyi tanımlıyor.

Bir diğer px değeri olan 10px ise gölgenin radyanını (radius - yarıçap) belirliyor. Diğer bir deyişle gölgenin bulanıklığını (blur) ya da onun aşamalı renk değişikiğinin (gradyan - gradient) ne kadar "geniş" olacağını belirtiyor.

Son olarak kullandığımız son değer #ccc ise gölgenin rengini belirliyor. Bunun anlamı gölgemiz sadece gri olmak zorunda değil, dilersek #f00 kullanarak kırmızı renkli bir gölgemiz de olabilir.

Tüm yukarıdaki bilgiler ışığında kodumuzun son hali aşağıdaki gibi olacak.

1
2
3
4
5
 
#shadow {     

background-color: #fff;  

border: 1px solid #000;  

-webkit-box-shadow: 3px 5px 10px #ccc;  

}

Sizin de gördüğünüz üzere div elementine beyaz arkaplan rengi, siyah sınır ve açık gri gölge ekledim.

6: CSS3 İle Yeniden Boyutlandırmak

\

CSS'nin en son sürümü ile elementlerin boyutunu değiştirmek mümkün. Şimdilik bu özellik sadece Safari üzerinde çalışıyor.

Bu kod ile elementin sağ alt köşesinde küçük bir üçgenin belirmesini sağlamak mümkün. Daha sonra bu üçgeni sürükleyerek elementin boyutunu değiştirebilirsiniz. Kodumuz yine çok basit, sadece bir satır ve halihazırda bildiğiniz bazı elementler tarafından destekleniyor olabilir. Bu değerler "max-width", "max-height", "min-width" ve "min-height".

Kodumuz aşağıdaki şekilde olacak.

1
2
3
4
5
6
 
#resize {

background-color: #fff;

border: 1px solid #000;

resize: both;

overflow: auto;

}

Kodumuzda normal CSS'mize iki satır daha kod ekledim: "resize: both" ve "overflow: auto". Overflow içeren satır, yeniden boyutlandırmanın çalışabilmesi için gerekli ve herhangi bir tür overflow değeri içerebilir, yeter ki kodumuz orada olsun.

Kullandığımız bir diğer satır kod da "resize: both". Bu satır, elementimizin hem dikey (vertical) hem de yatay (horizontal) olarak (both) yeniden boyutlandırılabilmesinin önünü açıyor.

Sonuç

\

Bu makaleden ne öğrenmelisiniz? Önümüzdeki birkaç yıl içerisinde işlerimiz çok daha kolay olacak, web sayfaları çok daha hızlı yüklenecek ve ailenizle geçirebileceğiniz daha fazla zamanınız olacak! Her ne kadar şimdilik bu özelliklerin tüm tarayıcılarda doğru olarak çalışacağın beklemek doğru olmaz - ancak bir tarayıcıda yuvarlatılmış köşelerin görünmesi, diğerinde görünmemesinde yanlış olan hiçbir şey yok. Bunu bir yükseltme olarak ele alabilirsiniz.

CSS3 ile ilgili daha fazla bilgi almak için www.css3.info sitesini ziyaret edebilirsiniz.

Kaynak: nettuts

Spacer
Spacer
/* Etiketler: , , , , , , , , , , , */
/* pinkfloyd yazdı. 03 Ocak 2009 18:00. 11 yorum var */

Yorumlar

ie yine tüm hayallerimizi büyük bir kıvraklıkla tamamen alt üst edecektir. ie bunu hep yapıyor zaten.

Güzel makale teşekkürler.

/* porno sektörü | flash öldü | iphone temaları | winamp temaları | eczanede utanma arkadaş */
/* lazaronnie | 03 Ocak 2009 18:22 */

Aynen katılıyorum Aslında ie yeni sürümlerinde kapatıyor ama nedense millet hala xp ile default olarak gelen ieyi kullanmaya devam ediyor. Yine olan bize oluyor :D

/* alpcan1 | 04 Ocak 2009 13:50 */

ie7'de opacity için kodu aşağıdaki şekilde kullanmak yeterli.

#opacity {
    -moz-border-radius: 10px;
    -webkit-border-radius: 11px;
    opacity: 0.3;
    border: 1px solid #000;
    background: #000;
    color:#fff;
    filter:alpha(opacity=30);
    width:100%;
}

resim kullanmadan corner için ise şurada güzel bir makale var.

/* Short steps don’t work for major targets..! */
/* ezoryak | 07 Ocak 2009 09:37 */

css3 için çok beklemek lazım. İşimizi kolaylaştıraca bir sürü yenilik var ama insanlar halen ie6 kullanırken css3 özelliklerini kullanmak çok fevri olur :D

/* amatör ruhlu platform */
/* kadirgunay | 14 Ocak 2009 19:14 */

"altı" teknik

/* hasan tayyar beÅŸik */
/* sacrosancttayyar | 02 Åžubat 2009 00:48 */

Ya bu Microsoft neden ie nin bazı özelliklerini sürekli update ile sunmaz ki? Microsofttan daha gelenekçi bir teknoloji geliştiren bir firmadaha görmedim. Ben mac kullanıyorum rahatım. Sürekli güncel ve sorunsuz! Herkese tavsiye ederim...

/* aycsoft | 23 Åžubat 2009 21:59 */

evet microsoft gerçekten çirkeflik yapıyor. sp1, sp2, sp3 iki toplasam 1gb'a yakın update çıkarttı ama ie 6 hiç nasibini alamadı bunlardan. ee diycek ie7, ie8 çıkarttık. ama insan düşünür biraz. oranlara bakar ayıptır. ayrıca bende ie7 kurmuyorum çünkü kurması windows kurulumundan uzun sürüyor. 1 dk'da firefox opera kuruluyorsa sen ne kuruyorsun bir saat?

ayrıca blank sayfa açıyosunuz kasa kasa açıyo zaten bi tabı. bir de tab açıyorsunuz bağlanıyor diyor. nerye bağlanıyom microsoft söyle bana. boş sayfa açtım? yükleniyor desene.

/* daily news | Logmania | RockLies */
/* vectro | 25 Åžubat 2009 14:05 */

internet explorer yüzünden bir xhtmlden bir css den tiksinir oldum artık.
yaptığım bir taktik ise kullanıcılara modern tarayıcıları sitemin girişinde tavsiye etmem.
bilgilendirip yoketmek gerek bu ie'yi!

/* body {height:1.75cm;weight:73kg;color:dark-gray;font-family:istanbul;} */
/* earslan | 23 Nisan 2009 18:15 */

Sanırım en güzeli Yuvarlatılmış Köşeler olayı. Yakında sayfa yapımı için çok seyrek açılacak photoshop gibi programlar. Yoksa bir ben mi kaldım açan :)

/* ekaynak | 04 AÄŸustos 2009 16:25 */

bilgiler gerçekten çok faydalı heryerde kullanıbilecek teknikler var.makale için arkadaşa çok teşekkürler :)

/* kaan0489 | 03 Ekim 2009 17:42 */

güzel teknikler, insanı zorluyor.

/* senao */
/* emreyar | 07 Haziran 2011 00:31 */

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

son yorumlar

devamı »

arama

pillinetwork