Yıldızlarla Yükleniyor Animasyonu (Spinner)

yildiz spinner loading Yıldızlarla Yükleniyor Animasyonu (Spinner) Web sayfanızdaki yüklenme işlemlerinizin uçuşan yıldızlardan oluşan bir animasyonla süslenmesini ister misiniz? Georgi tarafından hazırlanan bu şık tasarım sayesinde bir canvas öğesini JavaScript ile süsleyebilir, bu yapıyı oluşturabilirsiniz.

Hazırsanız yıldızlardan oluşan yükleniyor animasyonunu birlikte oluşturalım.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku


Haftalık
haftalik-ucretsiz-tema-8

Haftanın Ücretsiz Web Teması #8

Flex, Templatemo tarafından hazırlanmış, şık ve büyük bir slider ile başlayıp minimalist yapıda devam eden responsive bir web şablonu. Trial, portfolio, our team ve contact gibi alanları da barındıran tasarım flat renkleri başarıyla taşıyor. Bootstrap’le de desteklenmiş olması, biz tasarımcıların yapacağı revizyonları hızlandırıyor.

Bu hafta scrollspy ve sticky header gibi güncel tasarım trendlerini başarılı bir şekilde uygulayan Flex isimli temayı sizler için inceliyor olacağız.

Aradığınız şık ve kullanışlı bir tasarım ise Agency sizin için doğru tercih olabilir! (daha&helliip;)

Devamını Oku

CSS ile Responsive Dropdown Menu

css dropdown responsive menu CSS ile Responsive Dropdown MenuSadece CSS kodlarıyla açılabilir (dropdown) ve mobil uyumlu menü hazırlanabilir mi? Birkaç sene öncesine kadar bu işi JavaScript desteği olmadan yapmak hayalden öteye geçemezdi. Ancak bugün, CSS3’ün gelişen tanımlarıyla web tarafında neredeyse herşey mümkün!

Ayrıca aç/kapa düğmesiyle bu menüyü taşınabilir cihazlara özel stilize de edebiliyoruz. Evet, yanlış duymadınız. Aç/kapa işlemini bile sıradan bir checkbox öğesini selector gibi kullanarak CSS ile hazırlıyoruz.

Bu makalemizde sadece CSS kodları yazarak responsive yapıda bir dropdown menü hazırlayacağız. Sadece kod tarafında değil, önyüzde de basitliğe yönelerek bu tasarımı yapacağız.

Örneği görüntüleyerek derse başlayabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

HTML5 ile Resimlere Before After

html5 resim before after HTML5 ile Resimlere Before AfterHTML5 ile resimlerinizin önceki ve sonraki hallerini gösterebilirsiniz. Bu işlemi range inputuyla süsleyerek kaydırma çubuğuyla before/after işlemi uygulayabiliyoruz.

Özellikle fotoğrafçılık ve fotoğraf manipülasyonu üzerine yayın yapan blog yazarları, bu makalemiz sizleri hedef alıyor. Makalenin devamına göz atmadan önce örneği görüntülemenizi öneririz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Bootstrap Material Design

bootstrap materialdesign Bootstrap Material DesignGoogle’ın yeni nesil kullanıcı dostu tasarım prensipleri ile Twitter’ın CSS kütüphanesini bir arada kullanmaya ne dersiniz?

Material Design‘ı mobil ortamda yeni yeni görmeye başlamışken web tarafında işler daha hızlı ilerliyor. Web geliştiricileri günden güne yeni Material Design elemanları paylaşırken şimdi de Bootstrap tarafında hareketlenmeler yaşanmaya başladı. FezVrasta, GitHub sayfasında paylaştığı bu web önyüzüyle son günlerde fazlasıyla popüler. (daha&helliip;)

Devamını Oku

JavaScript Kütüphanesi ile Etkileşimli Parçacıklar

js particles JavaScript Kütüphanesi ile Etkileşimli ParçacıklarParticles.JS, birden çok etkileşimli parçacığı oluşturan bir JavaScript kütüphanesi.

Kullanıcılarınızın ilgisini çekebilecek bu partikül yapısı birçok JavaScript kütüphanesinin aksine web sayfanızda ağır bir performans kaybına sebep olmuyor.

Örneği görüntüleyerek başlayabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Haftalık
haftalik-ucretsiz-tema-7

Haftanın Ücretsiz Web Teması #7

Bu hafta daha detaylı ve sert renklere sahip bir temayla sizlerleyiz. Agency, isminden de anlaşılacağı gibi küçük iş tipleri ve ajanslar için kullanılabilecek şık bir web sunumu. Tek sayfalık yapıda hazırlanmış yapı gücünü ve fonksiyonelitesini Bootstrap’den alıyor.

Aradığınız şık ve kullanışlı bir tasarım ise Agency sizin için doğru tercih olabilir! (daha&helliip;)

Devamını Oku

jquery-scroll-down

jQuery ile Scroll ve Arkaplan İlişkisi

jQuery‘nin scrollTop tanımı ile birlikte web sayfalarındaki kaydırma çubuğununun seviyesini numerik olarak yakalayabiliyoruz. Hal böyleyken bu yapıyı niye CSS3 ile ilişkilendirip şık tasarımlar hazırlamayalım ki?

Bu dersimizde aşağıya scroll edildikçe büyüyen ve bulanıklaşan arkaplan tasarımı yapacağız. İşlevsellik yükünü jQuery, tasarım yükünü de CSS sırtlayacak. Hazırsanız başlayalım.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Haftalık
haftalik-ucretsiz-tema-6

Haftanın Ücretsiz Web Teması #6

Verti, HTML5 ve CSS3 ile hazırlanmış minimalist yapıdaki bir web teması. Gri noise bir arkaplan üzerine açık renklerden kurulu tasarım büyük puntolu yazı ve köşeleri yumuşatılmış resimlerle şık bir görüntü oluşturuyor.

Sadece, hızlı ve geliştirilebilir bir tasarıma ihtiyacınız varsa HTML5up’ın hazırladığı Verti tam sizlik! (daha&helliip;)

Devamını Oku