Yeniler

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

CSS'de lightdark() fonksiyonuyla kolayca koyu / açık mod yazımı

Bir önceki yazımda bahsettiğim gibi CSS'in yeni özelliklerinin bazıları çığır açan özellikler, bazıları kulllanıcı deneyimini iyileştirme yönünde özellikler bazıları da lightdark() fonksiyonu gibi yazım kolaylığı sağlayan özellikler. lightdark() fonksiyonu mevcut uyumlu web yazımındaki büyük sorun olan aşağıdaki kullanımı daha anlaşılır ve düzenli hale getirmeye yarıyor. :root { color-scheme: light

By Fatih Hayrioğlu
Renk geçişli ve Hareketli kenar çizgileri

Renk geçişli ve Hareketli kenar çizgileri

İnternette gezerken gördüğüm kodu basit etkisi büyük örnekleri paylaşma yazılarıma devam ediyorum. Herhangi bir elemanın kenar çizgilerini birden fazla renk tanımlamak ve üstüne bunu hareketli yapma örneklerini çok gördüm. Bu yazıda bunu anlatmaya çalışacağım. Doğrusal renk geçişi örneği border-image: linear-gradient(to bottom right,#ffb56b,#ac255e) 1; border-image ve linear-gradient birlikte

By Fatih Hayrioğlu
CSS ile dinamik arka planlarda metin rengini otomatik değiştirtmek

CSS Dersleri

CSS ile dinamik arka planlarda metin rengini otomatik değiştirtmek

Durumu şöyle açıklayabilirim: Aslında başlıkta açıklamış gibiyim :) Değişen arka planların olduğu bir yapının üzerindeki metinlerin rengini dinamik değiştirmeyi göreceğiz. Böyle bir ihtiyacımız olmuştu daha önce bunu nasıl yaparız diye düşünüp çözemeyince farklı yollara başvurmuştuk. Hatırladığım dört örnek var. Kendilerini bulamasam da benzer örnekler üzerinden sorunları ve çözümlerini anlatmaya çalışacağım. Son

By Fatih Hayrioğlu
CSS ile animasyonlu altı çizili metinler yapmak

CSS Dersleri

CSS ile animasyonlu altı çizili metinler yapmak

Bu sıralar CSS ile yapabileceklerimiz konusunda codepen.io'da çok vakit geçiriyorum. Gördüklerimden güzel olanları burada paylaşmaya çalışıyorum. Bu yazıda animasyonlu altı çizli metinler yapmayı anlatmaya çalışacağım. Benim genelde basit ve kolay çözümler daha çok hoşuma gidiyor.  Çok eskilerde bu animasyonu genelde flash sitelerin menülerinde kullanıyorduk. Bu animasyonu yapmak

By Fatih Hayrioğlu
accent-color tanımı

CSS Dersleri

accent-color tanımı

HTML form elemanları genelde tarayıcıların belirlediği standart stiller ile gelir. Çoğu zaman projelerimizde standart gelen renkleri değiştirmek için farklı yollar izleriz. Son zamanlarda genel olarak appearance: none ile tarayıcı stillerini ve davranışlarını ezip ekstra div veya :before, :after sözde sınıflarını kullanarak stillendiriyoruz. Bu yöntemler ile özelleştirilen form elemanları tarayıcının bize

By Fatih Hayrioğlu
Yeni bakış alanı(viewport) değerleri

CSS Dersleri

Yeni bakış alanı(viewport) değerleri

Bakış Alanı Değerleri (View Port) konusunu 2013 yılında yazmıştım. Uzun süredir kullanılan birimler. Masaüstünde güzel bir şekilde çalışırken mobilde sorunları vardı. Telefonun ekranı sabit bir yükseklikte değil. İlk durumda adres çubuğu ve altta gezinme menüsünün olduğu durumlarda vh tanımı ihtiyacı karşılamıyordu. Çözüm için Javascript ile yan yollara sapıp hallediyorduk. CSS

By Fatih Hayrioğlu
Medya sorgularında aralıklı genişlik tanımlama

CSS Dersleri

Medya sorgularında aralıklı genişlik tanımlama

Responsive(uyumlu) web kodlarken en büyük yardımcımız olan medya sorguları hakkında güzel bir gelişme var. Responsive(uyumlu) web kodlarken kullandığımız minimum genişlik ve maksimum genişlik kullanımının sonuna geldik, zaten kullanırken de çoğu zaman kafa karışıklığına neden oluyorlardı. Artık javascript'te kullandığımız matematiksel işaretler yardımı ile genişlik sorgularını kullanabiliyoruz. Bu

By Fatih Hayrioğlu