Haftalık
haftalik-ucretsiz-tema-5

Haftanın Ücretsiz Web Teması #5

SeeFolio bireysel kullanımlar için uygun bir ücretsiz web teması. HTML5 ve CSS3 ile hazırlanmış bu responsive tasarım flat renklerle süslenmiş.

Ayrıca Bootstrap ile hazırlanmış olması da kolay yönetilebilir ve değiştirilebilir olmasını sağlıyor. (daha&helliip;)

Devamını Oku


jquery-iki-resim-arasindaki-farklar

JavaScript ile 2 Resim Arasındaki Farkı Bul

Dergi ve gazetelerin bilmece sayfalarında yer alan ve fazlasıyla dikkat isteyen “İki resim arasındaki 7 farkı bulun” türü bulmacaları hatırlar mısınız? Genellikle kısa bir göz gezdirmeyle 6 fark bulunur ancak her halükarda sonuncusu biraz uğraştırırdı.

Psikoloji bilimi bu bulmacaları, özellikle çocuklarda dikkat ve algıyı yönetme açısından faydalı göstermekte.

Bu makalemizde, seçtiğimiz iki resim arasındaki farkları JavaScript ile saniyeler içerisinde bulan bir kod öbeği paylaşacağız.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

web-accordion-collapsible

Responsive Akordiyon (Collapsible)

Bu makalemizde hem metin hem de görsel içeriklerinizi şık bir şekilde sunmanızı sağlayan akordiyon tasarımı hazırlayacağız. Bu yapı açılabilir/kapanabilir (collapsible) diye de isimlendirilmekte.

HTML5 elemanlarını CSS3 ve jQuery desteğiyle şekillendireceğimiz bu tasarım aynı zamanda liquid yapıda. Yani tüm taşınabilir cihazlara (responsive design) uyum gösteriyor.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Google Material Design Menu

material design menu Google Material Design MenuGoogle‘ın ses getiren tasarım trendi Material Design üzerine konuşmaya devam ediyoruz. Bugün Bennett Feely tarafından CSS ile hazırlanan menü örneğini sizlerle paylaşacağız.

Bennett’in örneği Material Design’ın estetik ve animatif tarafını başarılı bir şekilde yansıtmakta.

Web öğelerinin sadece spesifik kısımlarını CSS ile göstermemizi sağlayan clip-path tanımı da bu tasarımda faydalı bir şekilde kullanılmakta.

Eğer hazırsanız başlayalım.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Haftalık
haftalik-ucretsiz-tema-4

Haftanın Ücretsiz Web Teması #4

Bu hafta sizlerle Colorlib tarafından hazırlanan Dazzling temasını paylaşıyor olacağız. Türkçede göz ‘kamaştırıcı’ anlamına gelen Dazzling isminin hakkını veriyor.

Yeşil tonlamaların hakim olduğu tasarımda klasik bir blog yapısı Bootstrap altyapısıyla destekleniyor. Barındırdığı şık footer tasarımı da koyu tonlamalarıyla bütünlüğü koruyor. (daha&helliip;)

Devamını Oku

css-modal

Sadece CSS ile Modal Yapımı

Web tasarımının klasikleşmiş popup yapıları yerlerini modallara bıraktılar. Sayfa değişimine gerek kalmadan ve yeni sekme açmadan çalışan modal öğeleri web kullanıcılarına büyük kolaylıklar sağlamakta.

İnternette karşılaştığımız neredeyse tüm modal tasarımları da jQuery desteğiyle hazırlanmakta. Ancak gelişen teknolojiler yeni teknikleri de beraberinde getirmekte.

CSS3‘ün :checked selector tanımı sayesinde hiçbir JavaScript kütüphanesine ihtiyaç duymadan hem basit hem de performanslı modal yapısı oluşturabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

css3ps

CSS3PS : PSD to CSS Converter

Web tasarımı ile uğraşanlar bilir, Photoshop ile çizilmiş tasarımları CSS‘e dökmek zor bir zanaattir. Bu yüzden birçok tasarımcı hazırladığı PSD dosyalarını CSS’e çevirmesi için profesyonel destek almak zorunda kalır. Kaybedilen zaman ve para da cabası.

İşte bu aşamada yardımımıza koşan onlarca Photoshop eklentisi mevcut. Bugün, bu listenin en çok dikkat çekenlerinden birini sizler için inceleyeceğiz.

CSS3PS, Photoshop’un CS3 ve sonraki versiyonlarda çalışan, katmanları otomatik olarak CSS kodlamasına çeviren bir eklenti. Ücretsiz bir şekilde kullanabileceğiniz bu eklenti sayesinde PSD to CSS çeviri işlemleriniz fazlasıyla hız kazanacak!

(daha&helliip;)

Devamını Oku

Adobewordpress Gururla Sunar : awTooltip

awTooltip Adobewordpress Gururla Sunar : awTooltipWeb tasarımında yer alan en küçük tasarım tiplerinden olan Tooltip öğeleri aslında gözüktüğü kadar basit yapılı değiller. Birçok Tooltip eklentisi büyük bir JavaScript koduyla birlikte fonksiyonel bir hale bürünmekte. Peki ya bütün bu yapıyı minimalize etmek mümkün değil mi?

Adobewordpress sizler için gücünü CSS‘den alan bir Tooltip yapısı hazırladı.

Karşınızda awTooltip

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku