aikutto

Hardware, Software and Design

CSS3’te Renk Geçişi (Gradient) Nasıl Yapılır?

CSS3 ile birlikte gelen önemli özelliklerden biri de Gradient yani Renk Geçişleri… CSS3 öncesi renk geçişleri background-image ile yapılıyordu. CSS3 sonrasında ise yine background-image ile yapılıyor :). Önceden renk geçişini resim dosyasına kaydedip background-image: url(‘resim.jpg’) şeklinde çağırarak kullanmak gerekirken, artık CSS ile ifade edebiliyoruz. Gerisi web tarayıcımıza kalmış. Web tarayıcımız desteklediği sürece örneğin bir linkin arkaplan renginin yeşilden maviye geçiş yapmasını istiyorsak W3C (World Wide Web Consortium)’un standartlarına göre şu kodu kullanmamız gerekiyor;

a {
    background-image: linear-gradient(to bottom, #00FF00 0%, #0000FF 100%);
}

Read the rest of this entry »

Reklamlar
Yorum bırakın »

Less Css (lesscss) Nedir? Ne İşe Yarar?

Bu yazımda lesscss dinamik stylesheet dilinden bahsedeceğim. Lesscss CSS şablonu oluşturmak isteyenlerin işini büyük ölçüde azaltmakta. Adından da anlaşılacağı gibi daha az CSS kodu yazarak istediğimiz şablonu oluşturmamıza yardımcı oluyor.

Peki lesscss nasıl çalışıyor?
Lesscss’de yazdığımız bir kodun bir şekilde CSS’e derlenmesi gerekiyor. Bu, lesscss.org adresinde yayınlanan JavaScript dosyasıyla web browser üzerinde derlenip uygulanacağı gibi Node.js gibi sunucu tarafında da derlenerek CSS oluşturulabilir. İsterseniz SimpLess gibi araçları kullanarak lesscss dosyanızı CSS’e derleyebilirsiniz. Lesscss’in özelliklerinden fazla bahsetmedim ama yazının devamını okuduğunuzda ne kadar güzel özellikleri olduğunu göreceksiniz. Read the rest of this entry »

Yorum bırakın »