Yaratıcı Tooltip Örnekleri

Günlük hayatta bir şeyleri açıklamak için notlar düşmek, oldukça kullanışlı bir yöntem olup internet sitelerinde de durum aslında buna oldukça benzer işlemektedir. İnternet sitelerinde de bu şekilde çalışmakta olan “tooltip” adı verilen ipuçları bulunmaktadır. Bazen bir bağlantının, bazen de bir butonun üzerine geldiğinizde size açıklama sunan bu araçlarla bilgisayar kullanımınız boyunca aslında oldukça sık karşılıyorsunuz. Günlük hayatta not kağıtları nasıl renk renk ve desen desen ayrılıyorsa tooltip araçları da aslında böyle renk renk ve desen desen ayrılmaktadır. Konu buraya kadar gelmişken Codrops tarafından oluşturulan bazı yaratıcı tool tip örneklerine bir göz atalım bakalım. Örneklere Göz Atmak İçin Tıklayın

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 ›

jQuery ile Kronometre Yapımı

Önceki makalelerim arasında jQuery ile Artan/Azalan Sayaç Yapımı mevcuttu fakat buna benzer farklı ihtiyaçlar için çözüm üretmekte zorlanananlar olabilir. Nitekim oldu da. Ben de farklı bir yöntem izleyerek yeni bir sayaç oluşturdum. Burada jQuery ile basit bir kronometre yapımını göreceğiz. Sonrasında siz dilediğiniz gibi şekillendirerek kullanabilirsiniz. Yapmış olduğumuz örnekte amacımız başlat butonuna bastığımızda sayacın arkaplanda çalışmaya başlaması ve durdur dediğimizde ise bize o anki sonucu göstermesi. Örneğe göz atalım bakalım bunu başarabilmiş miyiz. Demoda görüldüğü gibi bunu başarmışız fakat bu şekilde değil de sürekli gözüken bir kronometre istiyorsanız style.css dosyanıza eklemeniz gereken 2 kod bloğunu eklememeniz veya eklemişseniz silmeniz yeterli olacaktır. Dosyaları indirmek için…

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