CSS ile Üzerine Gelince Dönen Resim

css-ile-donen-resimBildiğiniz gibi artık web tasarımında perspektif planlama yapabiliyoruz. Ayrıca transform tanımıyla da tasarımlarımızı istediğimiz yönde çevirebiliyoruz. Bu teknikler önceleri Flash desteğiyle yaptığımız animatif etkileşimleri HTML5 ve CSS3 ile çok daha hızlı ve performanslı yapmamızı sağlıyor. Daha önceleri de bol bol konuştuğumuz geçiş efektleri sayesinde bu animasyonları daha yumuşak hale de getirebiliyoruz.

Bu dersimizde bütün bu teknikleri bir arada kullanarak güzel bir hover efekti oluşturduk.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku


CSS veya jQuery ile Açılan/Kapanan Div

jQuery & CSS3 Toggle

Gelişen ve yenilenen web tasarımı dilleri sayesinde Toggle, yani fareyle etkileşim kurulduğunda gözüken, etkileşim kesildiğinde kaybolan elemanlar hazırlamak fazlasıyla kolay. Artık, eskiden olduğu gibi bu işlemi yapmak için sayfalarca JavaScript veya Action Script yazmamıza da gerek kalmıyor.

Bu makalemizde Adobewordpress ailesi olarak size iki adet açılıp/kapanan div örneği hazırlayacağız. Bunlardan birisi sadece CSS ile çalışacak, diğeri ise jQuery desteği ile işleyecek. (daha&helliip;)

Devamını Oku

Sayfa açılışında div’in en altı nasıl gösterilir?

Otomatik overflow öğenin alt kısmına odaklanmaBir tasarım üzerine son sürat çalışırken karşınıza küçük bir engel çıkar ve saatlerinizin boş yere uçup gitmesine sebep olur. Bu makalenin çıkış noktası da bu minik sorunlardan birinin çözümü ile alakalı.

Web sayfanız açıldığında overflow tanımlı bir öğenizin kaydırma çubuğunun (scroll) en altta olmasını istiyorsanız doğru makaledesiniz.

Örneğin bir chat sistemi hazırladığımızı varsayalım. Yeni yazılan mesajlar bir div’in içerisine otomatik olarak ekleniyor. Yukarıdan aşağıya doğru eskiden güncele bir listeleme yapılıyor. Kullanıcılar bu chat sistemine girdiğinde o div’in en üstündeki eski mesajı değil, en alttaki güncel mesajı görüntülemeli. İşte sizlerle birlikte hazırlayacağımız JavaScript kodu da tam olarak bu işlevi görüyor. (daha&helliip;)

Devamını Oku

Sadece CSS ile Göster/Gizle Buttonu

CSS DersleriDivlerin veya herhangi bir elemanın görünürlüğünü açıp kapatmak için JavaScript ile birkaç satır kod karalamanız gerekmekte. Fakat bu makalemizde size küçük bir sır vereceğiz.

Bildiğiniz gibi form öğesi olan checkbox‘ın işaretlenip işaretlenmediğini CSS ile denetleyebiliyoruz. Kafanızda bir ampul yandı mı? Hadi konuyu biraz detaylandıralım.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

HTML5 ile Ne Değişti?

HTML5HTML5‘in ayak sesleri duyulduğunda çok sert bir geçiş sürecinin bizi beklediğiniz düşünmüştük. Fakat korkulan olmadı. Eski elemanlara sağlanan destek yavaşça kesildi ve HTML5’in yenilikleri yerlerini teker teker aldı.

Bu makalemizde HTML5’in beraberinde getirdiği elemanları ve tarihin tozlu sayfalarına gömülecek olan eski kod birimlerini konuşacağız.

İşte karşınızda ilk ve tek tam liste! (daha&helliip;)

Devamını Oku

CSS ile Etiketlenmiş (Ribbon) Kutu

Merhaba arkadaşlar, önceden GIF veya PNG yardımıyla zar zor hazırlayıp hizaladığımız etiketli kutucuklar (ribbon boxes) artık CSS ile çok kolay!

Border kod satırının hünerleri ile etiketimizi, birkaç gölge efekti ile de dikkat çekici tasarımlar hazırlayabiliriz. Tabi uyumlu renk tonları da bu işin küçük sırrı.

Sizin yapmanız gereken kutunun içine yazacağınız yazıyı ve etiket ismini belirlemek, bu kadar…

(daha&helliip;)

Devamını Oku

Divleri Ortalamak

Web tasarımcılarının en çok canını sıkan konulardan birine el atıyoruz. Sayfanın dikey ve yatay olarak tam ortasına div yerleştirmek artık sizler için çocuk oyuncağı olacak.

Yapmamız gereken tek şey <html> tagını tablo, <body> tagını da tablo hücresi olarak tanımlamak.  Böylece sıradan bir vertical-align:middle kodu ile işlemimizi tamamlamış oluyoruz.

Sayfanızın ortasına bir div oluşturacağınızı varsayarak örnek hazırlayalım.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku