CSS Dersleri
Firefox 12 ile birlikte gelen Sessiz Güncelleme Özelliği bana bu yazıyı yazmak için ilham verdi. Artık tarayıcı farklılığının sorununun sonu göründü. Chrome bu özelliği ilk getiren tarayıcı ve diğerlerini peşine taktı sürüklüyor. İnternet Explorer’ında bu yönde bir tercih yapacağını duyurması(şimdilik Avusturalya ve Brezilya’da) ile birlikte gelecek için
CSS Dersleri
CSS3 özellikleri hayatımıza girmeye başladı. Artık projelerimizde CSS3 renk geçişini, metin gölgelendirme(text-shadow), kutu gölgelendirme(box-shadow) kullanabiliyoruz. Kullandıkça görüyoruz ki yeni özellikler güzel ancak eklemek için biraz daha fazla kod yazmak gerekiyor ve bazı durumları oluşturmak için bazı araçlar gerekiyor. Örneğin CSS Gradient Generator vs. gibi Benzer bir durum kutu
CSS Dersleri
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
CSS Dersleri
İkonlar web aleminde kendi iyi bir yer bulmuş öğelerdir. Şimdiye kadar ikonları html sayfalarına resimler ile ekledik. İlk başta tek tek eklerken daha sonra css sprite metodu ile tek resim dosyası içine tüm ikonları ekleyip background-position yardımı ile kullandık. Bu yöntemlerin kendice avantajları olduğu kadar resim işleme ve düzenleme işlemleri
CSS Dersleri
CSS kenar çizgileri kullanımı bir çoğumuz için çok basit bir iştir. Ancak yanına bir çizgi daha konduğu zaman kara kara düşünürüz ne yapalımda bu işin altında kalkalım diye. Resim kullanırız genelde sorunu halletmek için. Burada basit bir yol ile bu işi nasıl yapacağımızı anlatacağım. Çoklu kenar çizgisi uygulanacak eleman relative
CSS Dersleri
İlk olarak Facebook’un popup ve lightbox olarak uyguladığı, en azından benim orada gördüğüm bir uygulama idi. Benzer bir uygulamayı yapmak için kodları yazdım. Daha önce bahsettiğim rgba tanımı ile bu iş çok basit olacaktı. {% highlight css %} #popup{ position: absolute; top: 90px; left: 40%; border: 10px solid rgba(0,0,
CSS Dersleri
* 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
CSS Dersleri
Yazı tipi özellikleri her ne kadar CSS2.1 standartlarında olsada tipografik birçok ihtiyacı karşılamadığı zamanla görüldü. En büyük sorun kullanıcının bilgisayarında olmayan yazı tiplerini kullandığımızda bu yazı tiplerini resim olarak kullanmak zorunda olmamızdı veyahut sIFR veya cufon gibi çözümler üretilse dahi bunlar yan yol ile çözüm üretmektir. Bu sorunu @font-face
CSS Dersleri
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
CSS Dersleri
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.
CSS Dersleri
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
CSS Dersleri
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