CSS3′ün gelmesi birçok yeniliği beraberinde getireceğe benziyor. Çoğu kullanıcının hali hazırda duymuş olmasına rağmen henüz tüm tarayıcılar tarafından desteklenmediği için çok fazla gözle görülür örnek yok. Var olan örneklere aşağıda değinmeden önce göze çarpan en önemli özelliklerden biri tasarım yaparken neredeyse artık resim kullanmayacağımız olması. İstediğimiz çoğu şeyi CSS3 sayesinde yapıyor olacağız. Mesela menü butonları yaparken resim kullanırız çünkü oval yada kenarlı falan yapmak isteriz bu yüzden CSS kendisi yeterli gelmez. Resim kullanmakta takdir edersiniz ki çok fazla siteyi yorduğu için en azından CSS’e nazaran, CSS3 bu açıdan çok işlevsel olacağa benziyor. Hatta internette gördüğüm yorumlardan biriside photoshopla kapışacak seviyeye geleceğinden bahsetmişlerdi. Örneklere geçersek;

Rounded Corners ( Oval köşe yapımı)
Web tasarımında oval köşe kullanımı çok yaygındır. Malasef CSS3 öncesine kadar bu işlemi resim kullanarak yapıyorduk. Bu da siteye ekstra bir yoğunluk katıyor, sayfaların boyutları büyüyor ve sitenin geç açılmasına sebep oluyordu.

CSS’de border-radius özelliğini kullanarak kolaylıkla oval köşe oluşturabilirsiniz. Tabi bunun Webkit tarayıcılarda ve firefox’da çalışabilmesi için -moz-border-radius ve -webkit-border-radius kullanmamız gerekmektedir.

.rounded-corners {
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}

Shadows (Gölge efekti verme)
Website hazırlarken gölge efekti vermenin ne kadar zor olduğunu hatırlarsınız? Box-shadow özelliği ile birlikte gölgeli kutular yapmak artık çok kolay!

CSS’de ise text-shadow özelliğini kullanarak birşeyler yapmaya çalışıyorduk. Şimdi box-shadow özelliğinin nasıl kullanıldığını görelim

box-shadow: 1px 1px 7px #2D1D1D;

Sizinde göreceğiniz üzere 4 farklı değer alıyor. bunlardan ilki yatay derinliği, ikincisi dikey derinliği, üçüncüsü ise gölge derinliğini ve son olarak sonuncusu ise gölgenin rengini tanımlar.
Border-radius özelliğinin kullanımında olduğu gibi , burada da -moz ve -webkit- önekleri kullanmamız gerekiyor.

box-shadow: 1px 1px 12px #2D1D1D;
-moz-box-shadow: 1px 1px 12px #2D1D1D;
-webkit-box-shadow: 1px 1px 12px #2D1D1D;

Transparency with RGBA and Opacity (RGBA ve Saydamlık verme)
Saydamlık değerlerine bakacak olursak 0 ile 1 arasında değer alabildiğini görürüz. Eğer 0 olursa tamamen şeffaf eğer 1 olursada tamamen saydam olmayan elde edilmiş oluyor. Örnek verecek olursak da kutuyu yarı saydam yapmak istiyorsak %50 şeffaflık vermek istiyoruz ki bu da 0.5′e tekabül eder. Şu şekilde yazılır;

opacity: 0.5;

Peki ya artalan resmini saydam yapmak istiyorsam ne olacak? Meraklanmayın RGBA ile yapabilirsiniz!

RGB CSS’in zaten eski versiyonlarında kullanılıyordu. Sırasıyla red (kırmızı), green (yeşil), blue (mavi) değerlerini alıyordu. RGBA ise A ile genişletilmiş hali olup A ise alpha’dan geliyor manasıda şeffaflık. Şu şekilde kullanabilirsiniz;

background: rgba(156, 87, 88, 0.5);

Kutunun rengi falan aynı kalıyor, sadece bu özellik artalan resmine etki ediyor. Ayrıca gölge efekti de saydamlıktan etkilenmiyor.

Border Images (Kenarlık Resimleri)
Border images özelliği CSS3′ün yeni özelliklerinden biri. Eskiden kenarlık yapmak istediğimizde resim kullanıyorduk ama CSS3 sayesinde istediğimiz şekilde yükseklik, genişlikler verebileceğiz. Kullanımı hakkında dah fazla bilgi almak isterseniz Border-image: using images for your border adlı yazıyı okuyabilirsiniz.

Bu yazımızda çok az örnekten bahsedebildik, ama bunlar sayesinde çok güzel şeyler ortaya çıkabilir. CSS3 bize daha fazlasını sunmaktadır, deneyin siz de neler yapabileceğinizi göreceksiniz.
Kaynak

CSS Drive – Hem temel hem de gelişmiş optimizasyon modülü mevcut. Testlerimde herkes ikisini de kullandım gelişmiş de sadece birkaç tane daha seçenek koymuşlar o kadar. Aracı kullabilmeniz için Css kodunuzu direkt yapıştırabiliyorsunuz, upload etme şansınız ne yazık ki yok. 3 tane sıkıştırma seçeneğiniz var bunlardan “normal” seçmeniz daha makul, diğerleri tekrar düzenleme esnasında sıkıntı oluşturabilir.

CSS Compressor – Size neleri sıkıştırabileceğine dair seçenekler sunmuş. Güzel ve basit bir arayüze sahip. Ciddi manada çok hızlı çalışıyor ve sonuçları kolayca gösteriyor. Ayrıca size bir mesaj kutusunda nerelerde değişiklik yapmanız gerektiğine dair bilgi veriyor.

CSS Optimizer – Bu araç test sonuçları arasında en iyisi olarak kabul edileblir. Kulanımı en kolay olan denilebilir. Ayrıca css dosyanızı ister bilgisayarınızdan yükleyin, ister manuel olarak isterseniz direkt url adresini yazabilirsiniz. Ayrıca sitede neden optimize etmemiz gerektiğinden baya bahsedilmiş ve bazen çıkan sonuçların okunabilir olmadığından bu yüzden değişiklikleri her zaman orijinal dosya üzerinden yapıp daha sonra sıkıştırıp sunucuya yüklememiz önerilmiş. Tavsiye edilir!

Clean CSS – Arayüz açısından en beğendiğim bu oldu. Ayrıca çok iyi çalışıyor ve birçok dil seçeneği mevcut. Ancak türkçe dil seçeneği henüz eklenmemiş. Sonuçların renkli olması ve sıkıştırma esnasında baya seçenek sunmasından dolayı kullanılabilitesi yüksek.

PHP Insider – Kullanım açısından en basiti ise bu araç. Sadece 2 tıkla sıkıştırma işlemini gerçekleştirebiliyorsunuz. Ancak malasef ki gelişmiş seçenekleri mevcut değil.

SevenForty – Bu araç da iyi sonuçlar veriyor. Dezavantajlarından birisi siteye sadece css dosyanı upload edebiliyorsun. Ayrıca çok basit sıkıştırma seçenekleri sunuyor.

Lottery Post – Testlerdeki en basit ve etkili ikinci araçtır.  Çok güzel sonuçlar veriyor ancak sıkıştırma seçeneği yok ama çok güzel arayüzü var, css kodunuzmu manuel olarak yapıştırabiliyorsunuz. Ayrıca araç JavaScript içinde çalışabiliyor.

Arantius – Bu araç diğer güzel sıkıştırma yapanlardan biri. Çok fazla seçeneği olmamasına rağmen aşırı derecede hızlı. Deneyerek nasıl çalıştığını görebilirsiniz.

Flumpcakes – Test sonuçlarına göre en kötüsü bu araçtır. Css kodunuzu gene de optimize eder, azaltır ancak default ayarları sonucu yapılan sıkıştırma diğerlerine nazaran yeterli gelmez. Burada da Css kodunuzu ister direkt yapıştırın ister bulunduğu yerin url’sini yazın.

Şimdi Buton’a çift tıklayarak aşağıdaki kodları yazalım.

protected void Button1_Click(object sender, EventArgs e){

Response.Redirect("default2.aspx?bilgi=" + TextBox1.Text);// TextBox1 deki bilgiyi alarak default2.aspx sayfasına yönlendirir.

}

Burada textBox1 içindeki değeri alıp bunu query string içinde default2.aspx sayfasına taşıyoruz.

Şimdi default2.aspx sayfasına çift tıklayarak page_load olayına gidelim. Ve aşağıdaki kodları yazalım.

protected void Page_Load(object sender, EventArgs e)

{

string gelen= Request.QueryString["bilgi"].ToString(); //QueryString içerisindeki bilgi isimli değeri okuyoruz ve bunu bir string değişkene atıyoruz.

Response.Write(gelen); // QueryString'den aldığımız gelen bilgiyi sayfaya yazdırıyoruz.

}

Bu kodla da default.aspx sayfasından query string ile yolladığımız bilgi değerini okuyup bunu sayfaya yazdırıyoruz. F5 ile projeyi çalıştırıp deneyin. Textbox1 içine yazdığınız değerin default2 sayfasına yazılmış olduğunu göreceksiniz.

Şimdi de birden fazla değeri nasıl yolayacağımıza bakalım. Bu sefer buton’un click olayına aşağıdaki kodları yazalım.

protected void Button1_Click(object sender, EventArgs e)

{

Response.Redirect("default2.aspx?bilgi=" + TextBox1.Text + "&bilgi2=" + TextBox2.Text); // TextBox1 ve TexBox2 deki bilgileri alıp default2.aspx sayfasına yönlenir.

}

Gördüğünüz gibi iki farklı değeri query stirng ile taşıdık. texBox1 içine yakup, textBox2 içinde de buğra yazdığımızı varsayarsak sorgu şu şeklde oluyor:

default.aspx?bilgi=yakup&bilgi2=bugra
Burdaki & karakteri iki farklı bilgiyi birleştirmek için kullanılır. O halde kaç farklı bilgi gönderirsek ona göre aralara & karakteri koymalıyız.

Default2.aspx sayfasının page_load olayına bu sefer aşağıdaki kodları yazalım.

protected void Page_Load(object sender, EventArgs e)

{

string gelen = Request.QueryString["bilgi"].ToString(); //QueryString içindeki bilgi isimli değeri okuyoruz.

string gelen2 = Request.QueryString["bilgi2"].ToString(); // QueryStrin içindeki bilgi2 isimli değeri okuyoruz.

Response.Write(gelen+" "+gelen2);

}

Gördüğünüz gibi gelen iki farklı bilgiyi de isimlerini kullanarak okuyoruz. Farklı bir yöntem olarak da index kullanıp okuyabiliriz.

string gelen = Request.QueryString[0].ToString(); //QuerStringg içindeki ilk değeri okur.string gelen2 = Request.QueryString[1].ToString(); //QueryString içindeki ikinci değeri okur.

Ayrıca bir de Response.Redirect(); metodu yerine Server.Transfer(); metodunu da kullanabiliriz. Bu metod kullanıldığında tarayıcı bir sayfaya yönlendirilirken tarayıcının url adresini değişmez. Yani QueryString içinde yolladığınız bilgiler de gözükmez.

Server.Transfer("default2.aspx?bilgi=" + TextBox1.Text);

Çalıştırdığınızda göreceksiniz ki url adresi /default.aspx olarak gözükmektedir.

QueryString hakkında bilgilerimiz bukadar. ASP.NET için ilk konulardn olduğu için en basit dizeyde anlatmaya çalıştım. İnşallah faydalı olur.

1-) Class ve ID leri aşırı kullanmayın
Yeni başlayanlar sayfada bulunan her elemente class ve ID ekliyorlar. Bu hem gereksiz hem de CSS’nin kullanım amacını toptan iptal etmiş oluyor. Class ve ID lerin aşırı kullanımı sadece stil sayfanızın kalabalıklaşmasına neden olmayıp ayrıca gereksizdir. Aşağıda bu bahsettiğimle alakalı örnek bulabilirsiniz.

Yanlış Örnek:

<div id="container" class="container">
  <p class="heading"><strong class="extrastrong">Welcome</strong></p>
  <p class="link1"><a href="#" class="link">Home</a></p>
  <p class="link2"><a href="#" class="link">About</a></p>
  <p class="link3"><a href="#"> class="link"Services</a></p>
  <p class="link4"><a href="#"> class="link"Contact</a></p>
</div>

Doğru Örnek:

<div id="container">
    <h1>This is a heading</h1>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
</div>

2-) İnline stilini kullanmayın
HTML sitenizi biçimlendirirken sıralı (inline) stilini kullanmayın. Bu özellik de her elemente ayrı ayrı uygulanmak zorunda. Ayrıca CSS yi harici olarak çağırarak tek dosya üzerinden çalışmak varken neden bu kadar kendimizi zorlayalım ki ?
Yanlış Örnek:

<p style="color: #fff; font-size: 2em;">This is a sentence.</p>

Doğru Örnek:

<p>This is a sentence.</p> 

/*Harici Stil Dosyası*/
p { color: #fff; font-size: 2em; } 

3-) Absolute position’ı kötüye kullanmayın
Absolute position’ın doğru kullanımını öğrenmek gerekiyor. Örneğin sayfadaki her elemente absolute position uygulanmamalı. Efektive olarak nasıl kullanılabileceği öğrenilmeli, çünkü bu uygulama CSS için önemlidir.

4-) Hatasız ve dağınık olmamasına özen gösterin
Eğer CSS’niz hatasız ve düzenli olursa bu hem arama motorları için iyidir ayrıca diğer geliştiriciler tarafından daha rahat geliştirilebilir veya düzenlenebilir. Hataları düzeltmek için W3C doğrulamasını kullanabilirsiniz. Mesela Mac ve PC lerde Dreamweaver programı kullanılarak da hatalar kontrol edilebilir.

5-) Her yerde DİV etiketi kullanmayın
Yeni başlayanların yaptığı en büyük hatalardan biri de CSS’nin her yerinde div etiketi kullanmasıdır. Bu durumun sebeblerinden birisi de table’dan div’e geçmedir. Kesinlikle div etiketi kullanmayın demiyorum ancak sayfanın her elementinde kullanılmamalı. Örneğin bir paragraf etiketi ile “p” div etiketi “div” yer değiştirmemelidir.
Yanlış Örnek:

<div id="container">
    <div id="nav">
                <ul id="navlist">
                        <li>Home</li>
                        <li>About</li>
                        <li>Services</li>
                        <li>Contact</li>
                </ul>
    </div>
        <div id="heading"></div>
            <div id="news">News</div>
            <div id="stories">Stories</div>
</div> 

Doğru Örnek:

<div id="container">
    <ul id="navlist">
            <li>Home</li>
            <li>About</li>
            <li>Services</li>
            <li>Contact</li>
    </ul>
        <h1>Heading</h1>
            <p id="news">News</p>
            <p id="stories">Stories</p>
</div> 

Kaynak

Açıklama
Aldığı dizinin tüm elemanlarını toplayıp bu değeri döndürür.

Örnek

<?php
   $dizi = array(7, 14, 21, 28);
   echo array_sum($dizi);
?>

Yukarıdaki örneğin çıktısı: 70

———————————————————————————————

array_search(mixed $value,array $dizi)

Açıklama
Aldığı ilk parametre, 2. parametredeki dizide yer alıyorsa o değerinin dizideki indisini döndürür.

Örnek

<?php
   $dizi = array(7, 14, 21, 28);
   echo array_search(21,$dizi)."<br>";
   echo array_search(7,$dizi);
?>

Yukarıdaki örneğin çıktısı:
2
0

———————————————————————————————

array_unique(array $dizi)

Açıklama
Aldığı parametredeki dizide tekrar eden değerleri göstermeden döndürür.

Örnek

<?php
   $dizi = array(7, 14, 7, 21, 28, 28);
   $yeni=array_unique($dizi);
   foreach($yeni as $key)
        echo $key." ";
?>

Yukarıdaki örneğin çıktısı:
7 14 21 28

———————————————————————————————
array_pop(array $dizi)

Açıklama
Aldığı parametredeki dizideki son elemanı döndürür.

Örnek

<?php
   $dizi = array(7, 14, 21, 28);
   echo array_unique($dizi);
?>

Yukarıdaki örneğin çıktısı: 28

———————————————————————————————
count(array $dizi)

Açıklama
Aldığı parametredeki dizideki eleman sayısını döndürür.

Örnek

<?php
   $dizi = array(7, 14, 21, 28);
   echo count($dizi);
?>

Yukarıdaki örneğin çıktısı: 4

———————————————————————————————

array_reverse(array $dizi)

Açıklama
Aldığı parametredeki dizinin elemanlarini tersini döndürür.

Örnek

<?php
   $dizi = array(1, 2, 3, 4);
   $yeni=array_reverse($dizi);
   foreach($yeni as $key)
        echo $key." ";
?>

Yukarıdaki örneğin çıktısı: 4 3 2 1

———————————————————————————————
array_push(array $dizi,miexd $value)

Açıklama
Aldığı ilk parametredeki dizinin sonuna, 2. parametredeki değeri ekler.

Örnek

<?php
   $dizi = array(1, 2, 3, 4);
   array_push($dizi,48);
   foreach($yeni as $key)
        echo $key." ";
?>

Yukarıdaki örneğin çıktısı: 1 2 3 4 48

———————————————————————————————

array_merge(array $dizi1, array $dizi2)

Açıklama
Aldığı iki diziyi birleştiririr.

Örnek

<?php
   $dizi1 = array(1, 2, 3, 4);
   $dizi2 = array(5, 10, 15, 20);
   $birlesim=array_merge($dizi1,$dizi2);
   foreach($birlesim as $key)
        echo $key." ";
?>

Yukarıdaki örneğin çıktısı: 1 2 3 4 5 10 15 20

———————————————————————————————

array_diff(array $dizi1, array $dizi2)

Açıklama
Aldığı ilk paramatredeki dizinin 2. dizide olmayan elemanları döndürür. Yani 1. dizinin 2. diziden farkını döndürür.

Örnek

<?php
   $dizi1 = array(1, 2, 3, 4);
   $dizi2 = array(1, 3, 5, 9);
   $fark=array_diff($dizi1,$dizi2);
   foreach($fark as $key)
        echo $key." ";
?>

Yukarıdaki örneğin çıktısı: 2 4

———————————————————————————————

array_intersect(array $dizi1, array $dizi2)

Açıklama
Aldığı 2 parametredeki dizilerin ortak elemanlarını döndürür.

Örnek

<?php
   $dizi1 = array(1, 2, 3, 4);
   $dizi2 = array(1, 3, 5, 9);
   $kesisim=array_intersect($dizi1,$dizi2);
   foreach($kesisim as $key)
        echo $key." ";
?>

Yukarıdaki örneğin çıktısı: 1 3

———————————————————————————————

array_shift(array $dizi)

Açıklama
Aldığı parametredeki dizinin ilk elemanını silerek döndürür.

Örnek

<?php
   $dizi = array(1, 2, 3, 4);
   array_shift($dizi);
   foreach($dizi as $key)
        echo $key." ";
?>

Yukarıdaki örneğin çıktısı: 2 3 4

———————————————————————————————

Açıklama
Aldığı  string değişkenin tüm harflerini küçük karaktere çevirir.

Örnek

<?php
echo strtolower("DENEME");
?>

Yukarıdaki örneğin çıktısı:    deneme

———————————————————————————————

strtoupper(string $string)

Açıklama
Aldığı  string değişkenin tüm harflerini büyük karaktere çevirir.

Örnek

<?php
echo strtoupper("Deneme");
?>

Yukarıdaki örneğin çıktısı:  DENEME

———————————————————————————————

ucfirst(string $string)

Açıklama
Aldığı  string değişkenin ilk harflerini büyük karaktere çevirir.

Örnek

<?php
echo ucfirst("dENEME");
?>

Yukarıdaki örneğin çıktısı:    DENEME

———————————————————————————————

str_repeat(string $string, int $multiplier)

Açıklama
İlk parametre olarak aldığı  string değişkenini ikinci parametre de girilen integer sayı kadar tekrar eder.

Örnek

<?php
echo str_repeat("+-",5);
?>

Yukarıdaki örneğin çıktısı:    +-+-+-+-+-

———————————————————————————————

strlen(string $string)

Açıklama
Aldığı  string değişkenin uzunluğunu integer olarak döndürür.

Örnek

<?php
echo strlen("Türkiye");
?>

Yukarıdaki örneğin çıktısı:    7

———————————————————————————————

trim(string  $string)

Açıklama
Aldığı  string değişkende başta ve sonraki boşlukları siler.

Örnek

<?php
$kelime=" İstanbul";
echo trim($kelime);
?>

Yukarıdaki örneğin çıktısı:    İstanbul

———————————————————————————————

is_string(mixed  $var)

Açıklama
Parametre  olarak aldığı değişken string ise true,  değilse false döndürür.

Örnek

<?php
$var="10";
if (is_string($var))
echo "var string bir değişkendir";
else
echo "var string bir değişken değildir";
?>

Yukarıdaki örneğin çıktısı:   var string bir değişkendir.
NOT: Örnekte "10" ne kadar sayi gibi gözüksede çift tırnak içinde olduğu için string olarak algılanır.

———————————————————————————————

strrev(string  $string)

Açıklama
Parametre  olarak aldığı string değişkeni tersine çevirir.

Örnek

<?php
echo strrev("hello");
?>

Yukarıdaki örneğin çıktısı:   olleh

———————————————————————————————

str_pad(string $string, int $length, mixed $pad_type)

Açıklama
İlk aldığı string parametre değerine ikinci parametre olarak girilen sayıya tamamlanıncaya kadar üçüncü  girilen değer  eklenir.

Örnek

<?php
echo str_pad("merhaba",10,"+");
?>

Yukarıdaki örneğin çıktısı:   merhaba+++

———————————————————————————————

substr(string $string, int $start, [int $length])

Açıklama
String olarak aldığı parametrenin belirtilen indisinden başlayarak gene belirtilen uzunlukta alınmasını sağlar.

Örnek

<?php
echo substr("merhaba",0,3)."<br>";
echo substr("merhaba",2)."<br>";
?>

Yukarıdaki örneğin çıktısı:    mer
rhaba
Burada ilk ekran çıktısında 0. indisten itibaren 3 harfi yazdırıldı. İkincisinde iste uzunluk verilmediği için 2.  indisten itibaren geriye kalan yazdırıldı.

———————————————————————————————

strpos(string $string, mixed $var)

Açıklama
String olarak aldığı parametrenin içinde ikinci parametre olarak girilen değer varsa o değerin hangi indiste olduğunu döndürür. Eğer 2. parametredeki değer 1. parametrede yer almıyorsa birşey geri  döndürmeyecektir.

Örnek

<?php
echo strpos("alanya","n")."<br>";;
echo strpos("alanya","a")."<br>";;
?>

Yukarıdaki örneğin çıktısı:     3
0

NOT: Örnekte olduğu gibi aranan değer birden fazla bulunuyorsa ilk değerin bulunuğu indis yazılır.