CSS Dersleri

CSS Dersleri

~  "Genel Kardeş Seçicisini"  Cümle İçinde Kullanalım

Okul yıllarına döndüm bir an. Türkçe derslerinde bir atasözü veya deyim verip bunu cümle içerisinde kullanın diye sorular çıkardı. Normalde kullanmadığımız veya az kullandığımız atasözü veya deyimleri biz genç dimağlara öğretmek adına sorulurdu bu sorular. CSS’de de benzer şekilde nadiren kullandığımız özellikler var. İşin özüne gelelim. Ben şimdiye kadar

By Fatih Hayrioğlu

CSS Dersleri

CSS3 Metin Özellikleri

* word-wrap özelliği * text-wrap * text-stroke * text-align (yeni değerler) * text-align-last * text-overflow * text-rendering * hanging-punctuation word-wrap özelliği CSS3 word-wrap özelliği diğer CSS3 özelliklerinden farklı olarak tüm tarayıcılar(IE dahil) tarafından desteklenmektedir. **Yapısı :**word-wrap: (değer) Aldığı Değerler: normal | break-word\ Başlangıç değeri: normal\ Uygulanabilen elementler: Tüm Elemanlara\ **Kalıtsallık:**Var {: .cssozelliktanimi} word-wrap özelliği

By Fatih Hayrioğlu

CSS Dersleri

ie7 Renk Geçişi Sorunu ve Çözümü

CSS3 artık bazı özellikleri ile hayatımıza giriyor, tabi kod yığını halinde girse de güzel sonuçları gördükçe kod yığını sorununu dert etmiyoruz. Tabi sorunlardan bir taneside İnternet Explorer desteklememesi. Daha önce İnternet Explorer için çözüm üretmiş olduğumuz box-shadow özelliğinianlatmıştık. Her şey buraya kadar güzel, ancak geçenlerde bir sorunla karşılaştım ve sizlerle

By Fatih Hayrioğlu

CSS Dersleri

CSS3 background-origin ve background-clip özellikleri

background özelliklerini anlatırken background tanımlarının içerik ve padding alanının ardalanını etkilediğini söylemiştik. CSS2.1’de tanımladığımız ardalan resimleri içeriği ve padding uygulanan alanları kapsıyor. CSS3 ile birlikte buradaki kabul değişti. Artık kenar çizgileride dahil edilebiliyor veya içerik alanı ile sınırlandırılabiliyor. Bize bu imkanı CSS3’ün background-clip ve background-origin özellikleri sağlıyor.

By Fatih Hayrioğlu

CSS Dersleri

Webkit Tabanlı Tarayıcılar(Chrome ve Safari) İçin Düzeltme(Hack) Sorunu ve Çözümü

Genelde tarayıcı düzeltmelerini ie için yaparız. Ancak bu sefer Chrome için bir düzeltme yapmam gerekti(Chrome’un line-height ile olan sorun) araştırdım ve media sorgusu ile bir düzeltme kodu buldum. {% highlight css %} @media screen and (-webkit-min-device-pixel-ratio:0) { .arama { background-color: #FF0000; } #solAlan {color: #0000FF;} } {% endhighlight %} Şeklinde bir kod işimi gördü, ancak

By Fatih Hayrioğlu

CSS Dersleri

CSS3 Esnek Kutu Yerleşimi(Flexible Box Layout)

Bu yazı eski bir standarttan bahsetmektedir. Yenisi Yenilenmiş Flex(Esnek Kutu) Modülü CSS asıl çıkışını kazanmasında sayfa yerleşimini CSS ile ayarlamaya başladığımızda yaptı. CSS3 ile birlikte bize daha avantajlı sayfa yerleşimi özellikleri sunmayı gaye edinen W3C bizlere işimiz kolaylaştıracak Esnek Kutu Yerleşimi Modülünü sunmaktadır. Sayfa yerleşimini yaparken genelde float/clear

By Fatih Hayrioğlu