14 Mart 2007 Web’den seçme haberler

fatih.hayrioglu — Wed, 14 Mar 2007 12:16:21 +0000

50 adet Firefox eklentisi Link, 20 tanede burada sıralanmış. Link
EOGallery javascript ile hazırlanmış güzel bir resim galerisi örneği. Link
Javascript ve CSS yardımı ile Font kontrolü scripti. Link
71 Adet CSS ile yapılmış menü listesi linklerinin sıralandığı bir sayfa. Link
İnternet üzerindeki renk seçim araçlarının kısa açıklması ve linkleri. Link
Javascript ile yapılmış güzel örnekler(LightBox, Animasyonlu resim menü, Form Kontrolü, oval kenarlı kutular ve tablo filtreleme). Link
42 tane hazır aksak(faux) kolonlu CSS Planı örneği. Link
Margin kullandığımız bazı durumlarda web tarayıcıları arasındaki farklardan yakınırız. Bu hatayı gidermek için yazılmış güzel bir İngilizce makale. Link
WordPress’de spam’ı engellemek için 4 adım. Link
WordPress "Feed Styler" WordPress RSS beslemelerini düzenlemek için bir eklenti. Link
Firefox, IE derken şimdi de Opera kod yazarlarına yardımcı araç olarak “Opera Developer Tools” çıkardı. Link
Hasan Yalçın ilk WordPress temasını yaptı. Hayırlı uğurlu olsun. Link

CSS’de Kısaltmalar

fatih.hayrioglu — Wed, 19 Apr 2006 09:09:31 +0000

CSS; kodlama yaparken bizim bazı kısaltmaları kullanmamıza izin verir. Böylece hem fazla kod yığınından kurtulmuş oluruz, hemde sayfa boyutlarını en aza indirmiş oluruz.

1. Font

Normalde bir font tanımlarken 4 adet CSS kodu kullanılır:

    font-weight: bold;
    font-family: verdana, sans-serif;
    font-size: 11px;
    line-height: 15px;

Kısaltma olarak kullanlan kod ise tek satır:

font: bold 11px/15px verdana, sans-serif;

2. Background

Background tanımlarken 5 adet atama yapmamız gerekirken kısaltma kullanarak tek tanıma indirebilriz.

    background-color: #000;
    background-image: url(ard.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50px 50px;

Kısaltırsak:

background: { #000 url(ard.jpg) no-repeat fixed 50px 50px; }

3. Renkler(Hex-decimal)

CSS stillerinde renkler genelde hex-decimal renk kodu ile tanımlanır örneğin color: #ff0000; kırmızı. Renkler 6 karakterle gösterilsede bir çok renk(web tabanlı) 3 karakterin tekrarlanması ile oluşturulur. Örneğin, kırmızı’nın hex-decimal kodunun kısaltırsak color: #f00;. Buradaki her karakter hex-decimal koddaki iki karaktere karşılık gelmektedir. Mesela, beyaz renk kullanacağınızda, color: white; veya color: #ffffff; kulanımı önermeyiz. Kısaltılmış olanı color: #fff; kullanmanız daha avantajlıdır.

4. Border

Kenarklık tanımlamalarında her özellik için bir tanımlama yapılır. örnek olarak bir elementin üst kenarına atama yapmak için:

	border-top-width: 2px;
    border-top-style: dashed;
    border-top-color: #f00;

Kısaltırsak:

	border-top: 2px dashed #f00;

Bu özellikleri tüm kenarlara uygulmak için:

	border: 2px dashed #f00;

5. Margin ve Padding’ler

Margin ve paddingler de normal tanımlama şöyledir:

    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 20px;
    margin-left: 15px;

kıslatılmış hali:

margin: 10px 5px 20px 15px;

Burada öznitelikler sağdan başlayarak saat yönünde devam eder. Aşağıda çeşitli kısaltma yöntemleri birlikte verilmiştir:

4 Değer: (margin: 20px 15px 10px 5px;) birinci – üst, ikinci – sağ, üçüncü – alt, dördüncü – sol.

3 Değer: (margin: 20px 15px 10px;) birinci – üst, ikinci – sol ve sağ, üçüncü – alt.

2 Değer: (margin: 20px 15px;) birinci – üst ve alt, ikinci – sol ve sağ.

1 Değer: (margin: 10px;) birinci – üst, sağ, alt ve sol

6. Listeler

Liste tanılmalrında da kısaltmalar mümkündür

ul {
    list-style-type:square;
    list-style-position:inside;
    list-style-image:url(image.png);
}

Kısaltırsak;

ul li {
	list-style:square inside url(image.png);
}
/* burda özel bir durum vardır eğer resim yoksa yedek olarak square özelliği gösterilecektir.  */

7. Sıfır ’0′ ın Kısaltma olarak kullanılması

Kısaltmalarda son olarak ’0′ ın kullanımına değineceğiz. Normalde bir elemente değer ataması yapılırken değerin yanına birimi de yazılır(örn: 3px, 0.2em vd.), Ancak sıfır ’0′ için bu zorunlu değilidir.

padding:0;

Bu durumun bir istisnası mevcuttur oda yüzde değerlerinde atama yapılırken 0% olarak atama yapılmalıdır.

Fatih Hayrioğlu'nun not defteri » renk