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,
Haberler
CSS3 ile gelen yeni özellikleri tararken ilginç ve güzel bir özellik ile karşılaştım. pointer-events özelliği. SVG ile birlikte uzun süredir kullanılan bu özellik CSS3 ile birlikte HTML elemanlarında uygulanıyor. Farenin işlevini yerine getirip getirmeyeceğini belirlemek için kullanılır. Örneğin bir menüde mevcut sayfayı gösteren menü elemanının tıklanma olayını kaldırabiliriz. pointer-event özelliği
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
CSS Dersleri
Daha önce CSS ile Kutu modeli, sorunları ve çözümleri adlı makalede de yazdığımız gibi yeni nesil tarayıcılar ve ie’nin garip(quirk) modundaki kabul farklı idi. Bu genelde hep ie’nin bir sorunu olarak görülse de aslında bir kabul idi ve genelden ayrıldığı için ie’nin bir sorunu olarak tanımlanıyordu.