CSS Dersleri
Temmuze 2019'da güncellendi. zingat.com'un satılık ve kiralık arama sonuç sayfalarını kodlarken her bir kutunun belirli yüksekliği olduğu için gelen başlığın harita açıldığında altında kalan metinlerin üzerine binmesi sorununu haletmek için Murat'la bu metni 2 satır ile sınırlandırmalıyız dedik. En güzel çözüm CSS ile
CSS Dersleri
Şimdiye kadar okuduğum en iyi uyumlu(responsive) web kaynağı. İlk önce pdf'ini okudum, sonra baktım güzel kitap basılısını sipariş ettim. 1 hafta sonra geldi. Okumam uzun sürdü :) Her bölümü 2 kere okuyup ilerlediğim için okuma sürem uzadı. Tabi İngilizce okuma becerimin kısıtlı olmasının da bunda etkisi var. Kitap
CSS Dersleri
Artık her projemizde @font-face kullanıyoruz. Kullanırken bazı sorunlar yaşıyoruz ve bu sorunlara çözümler üretiyoruz. Bu makalenin konusu da bu sorunlardan birini çözüyor. Hemen meseleye girelim. Bir @font-face tanımı yapalım. Ben burada daha kısa olsun diye woff2 yapıyorum ama siz Woff2 ve font-face tanımını iki satıra indirmek yazımdaki ilk kodu kullanın.
CSS Dersleri
Uzun süredir İnternet Explorer için düzeltme yazmamıştım. Ne güzel dünya. Gerçi bu bir düzeltme midir bilemedim. Uzatmadan hemen sorunu ve çözümü yazayım. Sorun: İnternet Explorer 10 ve üzeri sürümlerinde metin girdi alanlarında (input text) alanlarına kullanıcı bir şeyler yazınca otomatik olarak input'un sağında silmek için bir X butonu
CSS Dersleri
Yaklaşık 6 sene önce bu başlığa yakın bir başlık ile bir makale yazmışım. Yatay ve Dikeyde Ortalı Alanlar Oluşturmak yeni gelen özellikler ile bu kodu daha basit nasıl yapabilirim diye bakınırken flexbox özelliği aklıma geldi. Peki flexbox ile bu işi nasıl yaparım. HTML kodu aynı olsun; {% highlight html %} Fatih Hayrioğlu&
CSS Dersleri
İlk kodlanan web sitelerinde içerik herhangi bir işlemden geçmeden direk kullanıcıya sunuluyordu. Düz metin ve resimlerin olduğu bir doküman gibi. Zamanla düz dokümanlardan farklı olarak web sayfaları (kullanıcının gördüğü alan değerli bir alan olduğu için) kullanıcıya bilgi verirken içeriği önceliklendirmeye başladık. Önemli içerikler sayfa ilk açıldığında yüklenirken önem sırasında arkada
CSS Dersleri
There'll be woff2 support in Safari 10.https://t.co/CYy2Y4uIBY#webfonts Good news! Also Font Loading! ❤️ IndexedDB! ShadowDOM!August 11, 2016 Twiiter'da bu gönderiyi görünce font-face tanımını yenileyelim yazısında yenilediğim font-face tanımını acaba iki satıra indirebilirmiyim dedim içimden. Woff formatı özel yazı tiplerinin kullanımının yayılması
CSS Dersleri
İlk makalede genel ızgara yapısı ve bootstrap ızgara yapısının ana elemanlarından bahsettim. Bu makalede bootstrap ızgara yapısının detaylarına değineceğim. Farklı yükseklikte kutular için satır yapısını koruma Kutular float:left ile yan yana dizildiğinde kutulardan birinin yüksekliği fazla ise satır yapısı bozulur. Aşağıdaki örneği büyük pencere açınız. Görüldüğü gibi yüksekliği fazla
CSS Dersleri
Mobilde her kilobaytın hesabı yapıldığı için ve masaüstüne göre nispeten daha yavaş bağlantılar nedeniyle uyumlu web çalışmalarında performan daha fazla önem kazanıyor. Tasarım icabı mobilde gizlenecek alanlardaki artalan resimleri kaldırmamız bize avantaj sağlayacaktır. {% highlight css %} .logo { background: url(logo.png) 0 0 no-repeat; } @media (max-width: 979px) { .logo { display: none; } } {% endhighlight
CSS Dersleri
iOS Safari'de karşılaştığım bir sorundu çözümüde çok basit paylaşayım hemen. iOS input elementine yaptığımız CSS tanımlarını uygulamıyor. Webkit'in form elemanları konusunda bazı takıntıları var. Normalde aşağıdaki gibi görünmesi gereken buton; {:height="40px" width="400px"} Böyle görünüyor {:height="27px" width="
CSS Dersleri
Sayfa Planını Izgara Sistemi ile Oluşturmak Izgara ( Grid ) sistemleri sitemizin belli standarda uygun ve hızlı bir şekilde sayfa planını oluşturmamıza yarayan sistemlerdir. Bu sistemlerin uygulaması tasarımdan başlar. Tasarımcı bu sisteme uygun bir site çıkarır. Kod yazarken bizde bu yapıyı uygularız. Bu durum maalesef tasarımcı, arayüz geliştirici arasındaki koordinasyon eksikliğinden çok
CSS Dersleri
background-attachment özelliğinden çok öncelerden bahsetmiştim. Benim bahsettiğimde iki değer alıyordu; scroll ve fixed değerleri. Ancak bunlara CSS3 ile birlikte yeni bir değer daha eklenmiş; local değeri. Gerçi ekleneli bayağı olmuş. (2009) Benim yazdığım ilk makalede şöyle tanımlamışım bu özelliği "background-attachment özelliği zemine eklenen resmin sayfa ile scroll etmesini veya