21 Nisan 2013

Css 3 İle Çoklu Kolonlar yapma

Sayfamızda uzun metinler bulunabilir. Bu metinler uzadıkça kullanıcının sayfada aşağıya doğru kayması gerekir. Fakat metin uzunluğu fazlasıyla uzun olduğunda kullanıcıda sayfada aşağıya doğru indikçe sıkılmaya başlar ve yazdığınız içerik ne kadar önemli olursa olsun ziyaretçinize istediğinizi tam olarak anlatamamış olursunuz.

Bunu engellemek için Css 3 ile metinlerimizi tek bir kolan halinde aşağıya doğru inmesini engelleyerek kullanıcımızı sıkmamış ve görsel olarak da hoş bir tasarım elde etmiş oluruz. 




Burada Css kodlarına Width değeri eklersek kolonlarımızı eklediğimiz bu değer içinde böler. Eğer Kolanlarımıza bir Width değeri vermek istersekte column-width değeri vererek her bir kolonumuzun  genişlik değerini belirlemiş olabiliriz.

Kolonlar arası aralığı belirlemek için ise column-gap değeri vererek istediğimiz aralıkta olmasını sağlıyoruz. column-gap değerinin en güzel tarafı ise son kolonun sonuna bu değeri otomotik olarak eklememesidir.

Kolonlarımız arasına çizgi eklemek için ise column-rule değerini ekliyoruz. Column-rule değerinin çalışması border değerindeki gibi aynıdır. Örnek olarak column-rule: 3px solid #000 (çizgi kaç px kalınlığında olacağı, çizgi dolgusunun tipi ve rengi olarak).

0 yorum:

Yorum Gönder

© 2013 iPRESS. All rights resevered. Designed by Templateism