Son 2 makalede başlıkları biraz SEO amaçlı yazdım gibi oldu ama yazacak daha mantıklı bir şeyler bulamadım. Biliyorsunuz #frontend serisine başladık ve 2. haftamızda benime çok severek takip ettiğim egghead.io’nun ana sayfasını sıfırdan html ve css yazarak kodladık.
Bu serinin amacı yeni başlayanlara bir şeyler öğretmek, bilenlerin bilgilerini pekiştirmek ve flex’i sevdirmek. Belki ilerisi için grid ile bir şeyler yapmaya başlayabiliriz.
Derste yazılan kodların kaynak dosyasını da paylaşıyorum, takıldığınız yerde açıp bakarsınız. Beleşe getirmeyin, az yapmaya uğraşın 🙂
Merhaba dostlar, CSS Flex makalesi hazırladığım konumda flex örneği verirken bir sohbet arayüzü hazırlamıştım. Daha sonra bunu bir seri haline getirmeye karar verdim ve henüz kaç haftadan oluşacağına karar vermediğim bir seriye başladım. İlk haftada ise bu sohbet arayüzünü sıfırdan başlayanlar için birlikte html ve css kodlarını yazdık. Güzel bir seri başlangıcı oldu, yeniye hitap ettiği için SASS kullanmıyorum ve çok zorlanıyorum ancak yine de eğlenceli oldu. Bakalım siz aynı keyfi alacak mısınız 🙂 İyi seyirler dilerim.
Ayrıca derste hazırlanan içeriğin kaynak kodlarını da sizlerle paylaşmak istiyorum, takıldığınız yerlerde açıp bakabilirsiniz hatalarınıza.
Bu yazımda sizlere CSS Flex modülü ile ilgili tüm kullanımları, ipuçlarını göstermek istiyorum. Bu yazının sonunda CSS Flex nedir, nasıl kullanılır, nerelerde kullanılır gibi sorularınıza yanıt bulabileceksiniz. Hazırsanız başlayalım 🙂
Flex Yapısı Nedir?
Boyutları bilinmeyen-dinamik alanları daha kolay yönetmek için W3C bize al abicim sana flex, istediğin gibi alanını yönet demiş. Hatırlarsınız, eskiden öğeleri sağa-sola dayamak için float kullanır, dikey ortalamak için css’e takla attırırdık. Ancak flex yapısı ile, artık kapsayıcıya ve içindeki öğelerine esneklik getirebiliyoruz.
Flex’i kullanmamızın en büyük sebebi, esnek yapıları kolayca yönetmek için. Çünkü yapıya esneklik verdiği için, yatay ve dikey hizalarda nasıl görüneceğini, öğelerin kendi içinde hizalanmalarını ve sırasını belirlemek gibi güzel özellikleri bulunuyor. Ayrıca tüm çözünürlüklerde ve cihazlarda daha hızlı ve esnek bir yapı kullanmak için, flex bizim tamda ihtiyacımız olan şey.
Flex genel anlamıyla bir CSS özelliğinin adı değil, yapının adıdır. Dolayısı ile flex yapısı altında hem kapsayıcı (container) için hemde içindeki öğeler (items) için birden fazla flex özelliği bulunmaktadır. Bu makalede hepsini incelemeye ve anlamaya çalışacağız.
Burada olayımız input:checked + .popup kısmında. Bu sayede checked olduğunda ondan sonra gelen popup divini açabiliyoruz. Ayrıca kapatma işlemleri vs. de yine label üzerinden yapılabiliniyor. Daha detaylı anlatım ve aşağıdaki örneğin yapımı için videoya gözatmayı unutmayın ^^
Genelde javascript kullanarak yaptığımız bu örneği tamamen CSS ile nasıl yapabileceğimizi videolu olarak anlattım.
Kısaca olaydan bahsedecek olursak, burada kullandığımız tipi checkbox olan input’lardır. Ve css’de input’un checked olduğunu anlayabildiğimiz için checked olduğu zaman input’tan sonra gelen divi açıp kapatabiliyoruz.
Dersin detayları videoda yer alıyor, ben direk demoyu koyayım buraya ^^
Genelde alışveriş sitelerinde bir şapka beğenirsiniz bunun kırmızısı mavisi vs. nasıl olur diye diğer renklerine bakarsınız. Müşteri olarak pek ilgilenmeyiz ancak bunu kod tarafında yapmak istersek, her renk için ayrı resim mi eklememiz gerekir? Ya da her renk için o üründen bulunması mı? Peki ya müşteri kendi rengini seçip o rengin o üründe nasıl göründüğünü görmek isterse? İşte bu noktada CSS’te mix-blend-mode özelliği devreye giriyor 🙂
Yapmanız gereken, renklendirmek istediğiniz ürünün beyaz bir versiyonuna sahip olmak. Örneğin bu koltuğu ele alalım.
Illustrator ya da https://editor.method.ac/ bu adrese girerek pen tool ile koltuğun beyaz bölümlerini seçelim. Ve herhangi bir renkte bu şeklin SVG formatında kodlarına sahip olalım.
Ve artık yapmamız gereken, orijinal resim ile bu svg’yi üst üste getirmek. Önce HTML’i oluşturalım.
mix-blend-mode ile iki html etiketinin renklerini birbirine karıştırdık ve ortaya şöyle harika bir görüntü çıktı;
Artık renk kodunu değiştirerek istediğiniz her rengi belirleyebilirsiniz, üstelik çizgileri kırışıklıkları gölgeleri vb. hiçbir şey orjinalliğini yitirmeden bunu yapabilirsiniz.
CSS’de prefers-color-scheme sorgusu ile web sayfanıza giren kişinin açık renk m yoksa koyu renk mi görmek istediğini anlayabilir ve buna göre renge duyarlı bir web sayfası geliştirebilirsiniz. İşletim sisteminde koyu modu kullanan birisi girdiğinde siteniz koyu, açık modu kullanan birisi girdiğinde ise siteniz açık renkte gözükebilir.
Kullanımı ise şöyle;
// karanlık modu seçenler için
@media(preferes-color-scheme: dark){
}
// açık modu seçenler için
@media(prefers-color-scheme: light){
}
Bunu kullanarak basit bir arkaplan değiştirme örneği yapacak olursak;
Herkese merhaba, bu yazımda sizlere CSS’de native olarak değişkenlerin kullanımını anlatmak istiyorum. Değişkenlere başlamadan önce sizlere bir sözde sınıftan bahsetmek istiyorum.
:root
:root sözde sınıfı, en üst düzey ebeveyn öğesini temsil eder. Yani bir html sayfada bu html etiketi anlamına geliyor. Fakat css’in kullanım alanlarının artmasıyla örneğin svg ve xml’de kullanılırken, :root sözde sınıfı başka bir öğeyi temsil ediyor olabilir.
Örnek bir değişken tanımlaması
Genelde değişkenleri tanımlarken başına iki tane tire işareti koyulması gerektiği söyleniyor. Ancak ben tiresizde denediğimde çalışıyordu, yine de ayırt edici olması adına başına iki tire koyarak :root içerisinde global bir değişen tanımlayalım.
:root { --color: green; }
Değişkenlerin kullanımı
Değişkenleri kullanırken var() fonksiyonunu kullanacağız. Örneğin yukarıdaki değişkeni bir etiketin rengi olarak belirlemek istersek;
h3 { color: var(--color); }
Local olarak değişken tanımlamak
:root içerisinde biz global olarak değişkenimizi tanımladık. Yani orada tanımlanan değişken sayfanın tamamında kullanılabilirdi. Ancak local olarak belli bir scope’u kapsayacak şekilde oluşturmak istersek, html etiketini seçip değişkeni oluşturuyoruz.
.box { --color: blue; }
Artık .box divinin içinde kullanılan değişken değer olarak maviyi alacak. Çünkü local tanımı bu şekilde yapmış olduk.
jQuery ile Değişkenlerin Değerini Değiştirmek
Genelde jQuery kullandığımız için bundan da bir örnek vermek istiyorum. Örneğin yukarıda oluşturduğumuz renk değişkenini jquery ile dinamik olarak ayarlamak istersek;
Bildiğiniz gibi mobil için ayrı ayrı css kodları yazmak durumundayız, çünkü mobil tarayıcılar henüz her özelliği desteklemediği gibi, sadece mobil tarayıcılar için özelliklerde mevcut. Hal böyle olunca, yazarken dikkat edilmesi gereken bazı durumlar oluyor. Bu makalede en temel problem olan kaydırma problemini ele alacağız.
Nedir bu problem dersenizde, aşağıdaki gif’e gözatalım;
Hal böyle olunca kayma hassaslığı yok, ios cihazlarda boncuk boncuk kayar normalde. İşte kaymaya bu ivmeyi kazandırmak için css’de ufak bir kod eklemek gerekiyor. Yani kısaca;
Amaç basit, input’un içine bir label yerleştiriyor, tıklayınca animasyonlu olarak onu yukarıya kaydırıyor. Eğer input’a yazı yazılırsa label yukarıda kalmaya devam ediyor ve label’ın texti değiştiriyor. Ve bunun için bir sürü kod yazması gerekmiş eklentiyi yazan arkadaşın.
Bende bu örneği sadece CSS ile nasıl yapacağımı göstermek istedim.
