CSS Dersleri
Daha önce kolon yüksekliklerini eşitlemek için Aksak Kolonlar(Faux Column) yazımda bir çözüm önerisi vardı. Bu çözümlere bir tane daha ekliyorum. CSS Renk Geçişleri (Gradients) yazısında renk geçişlerinden bahsetmiştik. Renk geçişlerini tanımlarken genelde yüzdesel tanımlasak ta aslında piksel'de kullanabiliyoruz. Bu kullanım bize aksak kolonların çözümünü sağlıyor. Peki renk
CSS Dersleri
:before ve :after sözde sınıfları tanımlandığı elemanla ilişkili ve alt eleman olarak eklenir, isimlerinden de anlaşılacağı gibi içeriğin başına ve sonuna eklenirler. Kullanım alanlarını gördükçe ne kadar faydalı seçiciler olduğunu daha iyi anlayacağız. Bu makalede özellikle kullanım alanlarına değineceğim. Daha önce bir çok sayfada kullandığım ve sitemde örneklerini verdiğim bu
CSS Dersleri
CSS'de sorun olan noktalardan biridir dikeyde elemanları ortalamak. Farklı çözüm önerileri sunulmuştur. Bende daha önce yazmıştım bir tane. CSS ile Dikey Ortalama CSS3 ile birlikte bu soruna bazı çözümler üretildi. Benim burada anlatacağım transform ile üretilen çözüm. Kod çok basit; {% highlight css %} .dikey-ortala { position: relative; top: 50%; transform:
CSS Dersleri
Herkesin dilinde olan responsive web tasarımı nedir? Farklı çeviri önerileri var, ben Uyumlu web çevirisini beğendim ve bundan sonra Uyumlu web diye kullanacağım. Uyumlu web; kısaca farklı çözünürlükler için tasarlanan ve kodlanan web sayfalarına denebilir. Burada şöyle bir yanlış anlaşılma var; farklı araçlar için değil farklı çözünürlükler için sayfa üretmeye
CSS Dersleri
Daha önce CSS3 seçicileri kısmında biraz anlattım. Burada biraz daha detay bilgi vereceğim. :last-child seçicisi bir html seçicisi ile birilikte çalışıyor. Yani HTML'de p, h3, li gibi html seçicileri kullanmalıyız. {% highlight css %} ul li:last-child a{ border-right:none; } {% endhighlight %} peki biz bunu farklı elemanlar için kullanbilirmiyiz? Evet Evrensel
CSS Dersleri
CSS'in güzelliklerinden birisi seçicilerinin gücüdür. Ben burada bunlardan birinin ipucunu göstermek istiyorum. Normalde bir iş yaparken aradan bir elemanın o atamanın dışında kalması için :not seçicisini kullanıyoruz. Peki birden fazla değil seçicisi kullanabilirmiyiz ve nasıl? Evet kullanabiliriz işte örnek Kaynak * http://stackoverflow.com/questions/5684160/multiple-not-selector
CSS Dersleri
Bu özellikler blok-level ve yerine konulabilir element(örneğin resim) içerik alanının asgari / azami genişliğini tanımlar. max-width margin, padding ve kenarlıkları içermez. width değeri daha geniş olsa bile max-width değerini aşamaz. Bu ilginç bir kuraldır. Ancak min-width değeri eğer max-width değerinden büyükse bu değeri uygular, yani min-width değeri baskındır. min-width ve
CSS Dersleri
z-index kullanımı; tek kişi ile çalışılan ve daha basit yapılı sitelerde pek sorun çıkarmıyor. Ama çok kişinin çalıştığı ve büyük boyutlu projelerde farklı kişilerin tanımladığı z-index değerleri birbirini eziyor ve sorunlara neden oluyor. z-index sorunları nedeni ile sitemizde gözükmeyen veya belli durumlarda gözükmemesi gereken alanların görünmesi gibi görsel sorunlara neden
CSS Dersleri
Sitemizde özel yazı tiplerini kullanmak için kullandığımız @font-face bize çok güzel imkanlar sağladığı kesin. Bir sorunu var bu özelliğin kod bloku çok uzun ve karışık. Daha önce yazdığım font-face kullanımı yazısının üzerinden çok zaman geçti. Bir çok tarayıcı bu listeden düştü. En son ie8 düştü. {% highlight css %} @font-face { font-family: '
CSS Dersleri
Tartışmayı @muratcorlu açtı. :D Daha doğrusu bir makale üzerinden bu konuyu tartışmaya başladık. Sonra twitter’da paylaştım konuyu, @ademilter konuyu tartışmak için bir platform açalım orada tartışalım önerisinde bulundu. Biraz düşündükten sonra google dokümanların bu konuda biçilmiş kaftan olduğunu düşündüm. Sonra konu atıl kaldı ta ki şimdiye kadar. Bu gün
CSS Dersleri
Bildiğiniz gibi CSS3 modülleri halen geliştirilmeye devam ediyor. Bu modüllerden değişikliğe uğrayanlar oluyor. Flex modülü değişikliğe uğrayan modüllerden birisi. Daha önce yazdığım CSS3 Esnek Kutu Yerleşimi(Flexible Box Layout) makalemde anlattığım esnek kutu özelliği bu özelliğin ilk standartlaşmış hali idi. Daha sonra iki kere daha değişti bu modül. * display:box
CSS Dersleri
CSS'in web'in görselliğini tek başına karşılama hedefi ve bu yönde bize kazandırdığı yöntemler biz kod yazarlarının elini güçlendiriyor. CSS3 ile bunu daha çok hissetmeye başladık. CSS 3'ün hayatımıza girmesi ile birlikte daha az resim işleme programı(Photoshop) kullanıyoruz. Bir çok görsel işlevi CSS özellikleri