Öncelikle CSS 3 özellikleri kullanabilmek için bir takım şeylere dikkat etmemiz gerekiyor.
Bunlardan bir tanesi CSS 3’ün her tarayıcıda çalışmıycak olması. Her tarayıcı CSS 3 özelliklerini destek vermediği için çok özel şeyler kullanmamaya çalışmak gerekiyor.
Bir diğer dikkat edilmesi gereken şey ise dökumanımızın HTML 5 tipinde olması gerekiyor. Yani kod satırlarında en üst sırada <!DOCTYPE html> in olması demek. Bu kod dökumanımızda olmaz ise HTML 5 ve CSS 3’ün verdiği nimetlerden faydalanamayız. Bu hususlar dikkate alındığına göre teknikleri inceleyelim.

  • Listeleri Şekillendirmek

Kurmuş olduğumuz web sitelerinde listelerle çalışırken her satırın farklı görünmesini isteyebiliriz.

Örneğin: Bir listemiz var, ve bu listemizde  çok fazla satır var. Ve bu satırların her birinin çok daha fazla kolay ayırt edilebilmesini isteyebiriz. Dolayısıyla bir satırın rengi mavi iken diğer satırın rengi yeşil olsun vs. gibi özellikleri yapmak için CSS 3 ile birlikte  gelen özelliği kullanabiliriz.

Öncelikle listemizi hazırlayalım.

<!DOCTYPE html>
<html>
<head>
<title>Emre Kalaycı CSS 3 Gelişmiş Teknikler<⁄title>
<⁄head>
<body>
<ul>
<li 5>HTML 5<⁄li>
<li 3>CSS 3<⁄li>
<li>Javascript<⁄li>
<li>PHP<⁄li>
<li>MySQL<⁄head>
<li>Photoshop<⁄li>
<li>Illustrator<⁄head>
<⁄ul>
<⁄body>
<⁄html>

Listemizi hazırladıktan sonra stili hazırlamaya başlayabiliriz.

body{
background-color: #621e2a /*Ayırt edebilmek için arka planı değiştirelim. */
}

ul {
list-style: square; /*Liste biçiminin kare olmasını sağlar. */
}

ul li {
width: 200px;
height: 22px;
font-size: 18px;
}

ul li:nth-child(odd){ /*Bu stille listemizin ilk satırını ayarlıyoruz. */
background-color: #49d1e2;
}

ul li:nth-child(even) { /*Bu stille listemizin ikinci satırını ayarlıyoruz. */
background-color: #5de349
}

/*NOT: Bir satır mavi diğer satır yeşil bir satır mavi diğer satır yeşil */

Çıkan sonuç söyle olacaktır:
EmreKalaycı

  • Gölge Efekti Oluşturmak

Gölge efekti oluşturmak da oldukça basit. Öncelikle stilimizi oluşturalım.Bir önceki tasarıma ekleme yapalım.

ul li {
box-shadow: 5px 5px 5px #000;

-webkit-box-shadow: 5px 5px 5px #000;

-moz-box-shadow: 5px 5px 5px #000;

}

Ayrıca bir metine gölge vermek isterseniz, text-shadow özelliğini kullanabilirsiniz.

Bunlar ne anlama geliyor?

İlk 5px “X” koordinatındaki değeri,
İkinci 5px “Y” koordinatındaki değeri,

Üçüncü 5px ise “Erime” değeridir.

-webkit-  /*Chrome ve Safari için */

-moz- /*Mozilla Firefox için  */

Genelde tarayıcı farklılıklarını bu şekilde düşünebilirsiniz. -moz- ve -webkit- özelliklerini yazmazsak efektimiz bu tarayıcılarda görünmeyecektir. Dolayısıyla her tarayıcı için gölge efekti oluşturduk.

Çıkacak sonuç:
EmreKalaycı

  • Yuvarlak Köşeler Oluşturmak

Tasarımlarımızda yuvarlak köşeler oluşturmak çoğu zaman güzel ve estetik sonuçlara ulaşmamızı sağlar. Nasıl mı yapacağız? Oldukça basit.

Stilimizi oluşturuyoruz. Bu sefer resim de deneyelim. Siz dökümanınıza resim ekleyin ve deneyin!

img {
border-radius:  10px;

-webkit-border-radius:  10px;

-moz-border-radius:  10px;

}

Her tarayıcı için uyumlu bir “yuvarlak köşe” özelliği yapmış olduk.

Çıkan sonuç:
EmreKalaycı

Yorum atmayı unutmayın!

Facebook'dan yorumla