Kullanışlı CSS Kodu Yazmanın 10 İpucu

CSS kısa adıyla bildiğimiz ve Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları olarak söylenebilen bu web teknolojisi sayesinde HTML haricinde de metin ve format biçimlendirme yapılabilmektedir. CSS ile yazı tipi, renk ve boyut gibi çeşitli biçimlendirmeler bir kez tanımlanarak HTML sayfası içerisinde gerektiği yerlerde çağırarak hem boyut tasarrufu sağlanabilir hem de yapılan iş daha pratik bir hâl alır. CSS kodlarının çıkış amacı yapılan işi kolaylaştırmak olmasına rağmen yazılan kodlar kullanışlı olmadığı takdirde işleri kolaylaştırmak yerine zorlaştırabilir ve hatta büyük bir proje üzerinde çalışıyorsanız işler içinden çıkılmaz bir duruma gelebilir. Bu tür durumlarla karşı karşıya kalmamak için baştan sona kullanışlı CSS kodları…

Devamını Oku ›

CSS ile Çok Katmanlı Açılır Menü Yapmak

Menüler, web sitelerin genelinin temel kısmını oluşturan unsurlardan birisidir. Böylesine önemli bir unsurun işlevselliği de hayli önemlidir. Standart menülerden ziyade daha çok katmanlı şekilde açılır menülere ihtiyaç duyulması durumunda bunu pratik bir şekilde çözmek için uygulanması gereken iki basit adım var. 1. Adım: HTML <nav class=”menu”> <ul class=”menu-ic”> <li><a href=”#”>Ana Sayfa</a></li> <li><a href=”#”>Hakkımızda</a></li> <li class=”ustmenu”><a href=”#”>Kategoriler</a> <ul class=”altmenu”> <li><a href=”#”>Cemal Süreya</a></li> <li><a href=”#”>Özdemir Asaf</a></li> <li><a href=”#”>Nazım Hikmet Ran</a></li> <li><a href=”#”>Mehmet Akif Ersoy</a></li> </ul> </li> <li><a href=”#”>İletişim</a></li> <li class=”ustmenu”><a href=”#”>Arşiv</a> <ul class=”altmenu”> <li><a href=”#”>2014</a></li> <li class=”ustmenu”><a href=”#”>2015</a> <ul class=”altmenu”> <li><a href=”#”>01/2015</a></li> <li><a href=”#”>02/2015</a></li> <li><a href=”#”>03/2015</a></li> </ul> </li> <li><a href=”#”>2016</a></li> </ul> </li> </ul>…

Devamını Oku ›

CSS ile Açılır Menü Yapımı

CSS kodlarını kullanarak açılır menü nasıl yapılır sorusunun cevabını bir örnekle anlatmaya çalışacağım. Checkbox ve radio butonlarını kullanarak 2 farklı açılır menü yapacağız. Bunlar bilinen adıyla toogle ve accordion olarak adlandırılan açılır menü stilleri. Anlatımı checkbox üzerinden yapacağım ve daha sonra radio şekline çevireceğiz. Haydi başlayalım… Öncelikle HTML kodlarımızı verelim: <section class=”acilir-menu”> <div> <input id=”c-m1″ name=”c-menu” type=”checkbox” /> <label for=”c-m1″>Menu 1</label> <article> <p>…</p> </article> </div> <div> <input id=”c-m2″ name=”c-menu” type=”checkbox” /> <label for=”c-m2″>Menu 2</label> <article> <p>…</p> </article> </div> … </section> HTML kodlarını ekledikten sonra aşağıdaki gibi bir görüntü oluşacaktır: Bu adımdan sonra artık stil dosyasını düzenlemeye başlıyoruz. Daha sonra açıklamalarını…

Devamını Oku ›
12
kod.gen.tr