CSS kullanarak şekiller oluşturmak

Güncelleme: CSS3 ile birlikte aşağıdaki liste ve stiller güncellendi

CSS stillerini kullanarak web sayfalarına çeşitli şekiller ekleyebiliriz.

Aşağıdaki listede kullanabileceğiniz birçok şekil bulunmakta;

#square { width: 100px; height: 100px; background: red; }

#rectangle { width: 200px; height: 100px; background: red; }

#circle { width: 100px; height: 100px; background: red; border-radius: 50%; }

#oval { width: 200px; height: 100px; background: red; border-radius: 100% / 50%; }

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }

#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; }

#triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent; }

#triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent; }

#triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; }

#triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; }

#triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; }

#triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent; }

#star-six { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; } #star-six:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: “”; top: 30px; left: -50px; }

#pacman { width: 0px; height: 0px; border-right: 60px solid transparent; border-top: 60px solid red; border-left: 60px solid red; border-bottom: 60px solid red; border-top-left-radius: 60px; border-top-right-radius: 60px; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; }

#talkbubble { width: 120px; height: 80px; background: red; position: relative; border-radius: 10px; } #talkbubble:before { content:””; position: absolute; right: 100%; top: 26px; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid red; border-bottom: 13px solid transparent; }

Kaynak: Shapes of CSS

Windows Phone 8 Tema Renkleri

Windows Phone 7‘de eksik bulduğumuz konulardan biri tema renklerindeki azlık idi. Windows Phone 8‘de eski tema renklerinde değişiklikler var ve yeni tema renkleri ile birlikte gelerek Windows Phone 7‘deki eksiği kapatıyor.

MSDN‘de yer alan Themes for Windows Phone sayfasında Windows Phone 7 ve Windows Phone 8‘deki tema renklerine göz atabilirsiniz.

MSDN‘deki sayfada renk kodlarında hata yakaladığım için Windows Phone 8 ile gelen tema renklerini aşağıda veriyorum;

Windows Phone 8 Renkler

LINQ ipucu - 1

Aldığı int parametre üzerinde çeşitli işlemler yapan ve elde ettiği sonucu geriye döndüren Hesapla() isminde bir method‘umuz var;

public int Hesapla(int Rakam) { ///parametre üzerinde gerçekleştirilen işlemler return Rakam; }</pre>

Hesapla() method’unu çağıran aşağıdaki YapilacakIsler1() method‘u olsun;

public IEnumerable<int> YapilacakIsler1(IEnumerable<int> Rakamlar)
{
    var Sonuc = new List<int>();

    foreach (var r in Rakamlar)
    {
        Sonuc.Add(Hesapla(r));
    }

    return Sonuc;
}

YapilacakIsler1() method’unu, yield anahtar kelimesini kullanarak, IEnumerable<T> tipinde değişken oluşturmaya gerek kalmayacak şekilde değiştirebiliriz;

public IEnumerable<int> YapilacakIsler2(IEnumerable<int> Rakamlar)
{
    foreach (var r in Rakamlar)
    {
        yield return Hesapla(r);
    }
}

Hatta, LINQ Expression yazarak IEnumerable<T> tipindeki listedenin tüm elemanlarını Hesapla() method’una parametre olarak gönderebiliriz;

public IEnumerable<int> YapilacakIsler3(IEnumerable<int> Rakamlar)
{
    return Rakamlar.Select(r => Hesapla(r));
}

Son olarak, LINQ Select method’una Lambda Expression yerine, Hesapla() method’unu parametre olarak verebiliriz;

public IEnumerable<int> YapilacakIsler4(IEnumerable<int> Rakamlar)
{
    return Rakamlar.Select(Hesapla);
}


Yukarıdaki sadeleştirme *devrimsel* bir yenilik olmasa da, kodun daha *derli-toplu* olmasını sağlayacaktır.

Ağustos 2012 - Microsoft Yaz Okulu İstanbul Semineri

Her sene üniversitelerin yaz tatiline girmesiyle Microsoft tarafından bir Yaz Okulu etkinliği gerçekleştiriliyor.

Bu yıl ben de Microsoft Yaz Okuluna eğitmen olarak katıldım.

Üçüncü seminerimi İstanbul Microsoft Ofisinde XNA Oyun Programlama konusunda verdim.

İstanbul Yaz Okulu öğrencilerine, beni sabırla dinledikleri için teşekkür ediyor, özverili katılımlarından dolayı da tebrik ediyorum.

Engin Polat hakkında

Chief Architect, Microsoft RD, Microsoft MVP

Ada ve Ege'nin babası ;)

Kategoriler

İstatistik

Makale Adedi: 458

Creative Commons Lisansı