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
Genel
Başta kendim için not almak amacıyla başladığım blog sonraları bu iş ile ilgilenen kişlerin başvurduğu bir site haline geldi, son yıllarda yazı sayısı azalsa da hayatına devam ediyor. 10 seneye 600 küsür yazı ve bunlardan çıkan 2 kitap sığdırdım. Yazı yazmak kendim açısından da öğretici oluyor. Ne kadar az yazıyorsam
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="
Genel
Her ne kadar son zamanlarda etkisini kaybetse de Internet Explorer testi hayatımızın bir gerçeği. Benim gibi MacOs kullananlar için veya Linux kullananlar için bu testleri yapmak bir eziyet halini alıyor. Ben uzun süredi Virtualbox üzerinde kurulu Windows'lar ile bu sorunu halletmekteyim. Bugün tekrar kurarken bunu yazmalıyım dedi. Sırası
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
iPhone'da yazdığım bir kodun çalışmadığını gördüm. Aşağıdakine benzer bir selectbox'ın ilgili option'ununu seçmek için kullandığım bir kod parçası. {% highlight javascript %} $('#mySelect') .find('option') .filter(function() { return this.text == $('#selectedRejectReason').val(); }).attr('selected', true) {% endhighlight %} Sorunun çözümü
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
{: .resimler-sagda} jquery'nin gelişmiş arayüz elemanları kütüphanesi jquery-ui yüksek boyutuna rağmen tercih edilen bir kütüphanedir. Ben yüksek boyutundan dolayı kullanmasam da bazen ihtiyacımı en iyi gören kütüphane olduğunda tercih ederim. Kullanacağımız arayüz elemanına özel Jquery-ui'ı indirebiliyoruz. jQuery-ui indirme sayfasında gerekli elemanları seçip indir dediğimizde jquery-ui çekirdek kodu
Arayüz geliştiriciler neredeyse kod yazdığı editörleriyle geçirdiği zaman kadar veya daha fazla tarayıcı konsollarında zaman geçiriyor. Tabi bu gibi durumlarda konsolların yeteneklerini öğrenmek işimizi kolaylaştırıyor. Sizlere dün yaşadığın bir sorunu ve güzel bir çözümü anlatmaya çalışacağım. Bir yerden sonra console.log ile konsola bastığım değerler arasından bazı değerleri ayırt etmek
CSS Dersleri
Açıklama satırlarının önemini tekrar anlatmaya gerek yok. Bir çok zaman unuttuğumuz veya iki kelime ile geçiştirdiğimiz açıklama satırları takım çalışmaları ve uzun süreli projelerin olmazsa olmazı. Yani tüm projelerin :) Sass CSS'in açıklama satırı kullanımını aynen destekler. {% highlight sass %} /* Programcının kodu * okuyup anlayamacağı * noktalarını yazalım */ .yildiz display: block {% endhighlight
CSS Dersleri
Sass'ın temel yazım kurallarından biriside iç içe (nested) kullanımdır. CSS ile kod yazarken girintiler çok önemli değildir. Biz daha iyi bir düzen için girintileme yapıyorduk ama bu girintiler CSS için bir şey ifade etmiyordu. Sass'ta ise girintilerin bir anlamı ve işlevi var. CSS ile kod yazarken