SB Admin David Miller tarafından Bootstrap ile hazırlanmış bir admin template. Klasik Bootstrap 3 üzerine jQuery ile katılmış fonksiyonelite bu tasarımı güçlü ve kullanışlı kılıyor. Ayrıca içerisinde barındırdığı back-end uygulamalarda işinizi fazlasıyla kolaylaştıracak.
Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.
Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.
Önümüzdeki salı, yeni web temasıyla görüşmek üzere!
Google‘ın Android Lollipop ile hayatımıza giren tasarım trendi üzerine konuşmaya devam ediyoruz. Bugün Material Design animasyon örneklerinden birkaç tanesine göz atacağız. Daha önce de “Instagram, Material Design ile Tasarlansaydı?” konusunda benzer bir animasyon izlemiştik.
İşte karşınızda birbirinden etkileyici Material Design örnekleri…
Takvim & Planlama Arayüzü
Balraj Chana tarafından Adobe After Effects ile hazırlanan alarm arayüz konsepti.
Alarm Arayüzü
Ehsan Rahimi de aynı Balraj gibi bir alarm arayüzü çalışmış.
Kullanıcı Profili Arayüzü
Dmytro Prudnikov şık bir profil kartı konsepti ile bizlerle.
Material Design Animasyon Örnekleri
Jovie için Material Design
Jovie birden fazla Material Design konsepti oluşturdu. İşte o şık animasyonlar :
Listenin devamı için sonraki sayfaya göz atın.
Geçişler
Hesap Makinesi
Ölçeklendirme
İkon Animasyonu
NYT Material Design
Lokasyon
Web Örnekleri
Adobewordpress ailesi olarak Material Design konulu onlarca web örneği hazırladık. Onlara göz atmak isterseniz sizi buraya alalım.
İşte bu hafta sizin için seçtiğimiz şık çalışmalar.
graphicriver
huffington post
Caroline Grohs
UltraLinx
tessel supply
Roderick
lamosca
Javiay Jaen
baubauhaus
ikko tanaka
Kullanım & Lisanslama
Kullanılan tüm görseller sahiplerine aittir. Eklenmiş başlıklar, ilgili görsellerin sahiplerini belirtmektedir. Tüm haftalık ilham kaynakları paylaşımlarını buradan görüntüleyebilirsiniz.
Landed HTML5up tarafından geliştirilmiş responsive bir web teması. Koyu renklerin hakim olduğu temada dikkat çekici birçok geçiş animasyonu yer almakta.
Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.
Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.
Önümüzdeki salı, yeni web temasıyla görüşmek üzere!
İşte bu hafta sizin için seçtiğimiz şık çalışmalar.
grapheine
user
Sergiu Naslau
Anna Pateras
Kate Goins
thenewblack
sumo
calmack
makethemwonder
Anne Selby
Kullanım & Lisanslama
Kullanılan tüm görseller sahiplerine aittir. Eklenmiş başlıklar, ilgili görsellerin sahiplerini belirtmektedir. Tüm haftalık ilham kaynakları paylaşımlarını buradan görüntüleyebilirsiniz.
Web sayfanızdaki kırık linkleri jQuery desteğiyle bulabilir, bir başka görselle değiştirebilirsiniz. Böylece ziyaretçilerinizin çalışmayan resimlerle karşılamamış olursunuz. İnternette, web sayfanızdaki kırık görselleri size bildiren yüzlerce araç mevcut. Ancak bu işlemi birkaç satır kod yazarak daha hızlı ve kolay bir şekilde yönetebilirsiniz.
İşte karşınızda Adobewordpress tarafından geliştirilen bir diğer jQuery plugini : jQuery Image Fixer
Bu pluginimiz kırık linklerinizi yönetmenizi sağlar. Özetleyecek olursak
Kırık linklerinizi çalışan bir görselle değiştirir.
İlgili ekranın görsel raporunu konsola bildiri olarak düşürür.
Bu plugin üzerinde çalışmak isterseniz CodePen sayfamıza göz atabilirsiniz.
jQuery ile kırık resimler nasıl bulunur?
Resimlerin çalışıp çalışmadığını kontrol etmek için birçok yöntem kullanabiliriz. Ancak söz konusu JavaScript kodları ve jQuery kütüphanesi olunca 2 ayrı metodun arkasına sığınacağız.
complete : görsel yüklenmesinin tamamlandığını gösterir.
naturalWidth : görselin özgün genişliğini alır. Eğer 0 veya undefined ise resim kırık olabilir.
Hal böyleyken bu 2 yapıyı içeren bir for each döngüsü bize yetecektir.
Başlamadan önce
Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.
Fonksiyonumuzun ismi brokenImages() olsun.
Yukarıda da bahsettiğimiz gibi complete ve naturalWidth tanımlarını içeren bir for ile başlıyoruz.
function brokenImages() /* Ekrandaki toplam resim sayısını bulalım */ var totalimg = $("body").find("img").length; var brokenimg = 0; $('img').each(function() ); console.log('Toplamda '+ totalimg +' resim var ve bunların '+ brokenimg +' tanesi çalışmıyordu. Hepsi onarıldı!');
Bu kadar!
İşlemi uygulamak istediğiniz sayfalarda fonksiyonu çağırmanız yeterli olacaktır.
Diğer bütün HTML5 yenilikleri gibi bildirimler de basit bir şekilde kullanılabiliyor. Bir script elemanı içerisinde tanımlanabilen kod özgünleştirme öğeleriyle birlikte de çalıştırılabiliyor.
Temel yapı şu şekilde :
var notification=new Notification('Bildiri Başlığı', body:'Bildiri mesajı buraya gelecek.' );
body alanı bahsettiğimiz özgünleştirme öğelerinden sadece birisi. Devamı ise şu şekilde :
dir: Bildirinin akış yönü. Auto, rtl(soldan sağa) veya ltr(sağdan sola) olarak tanımlanabilir.
icon: Bildirinin yanında gözükmesini istediğimiz görselin URL’ini giriyoruz.
Bunlara ek olarak event handler listesi de şöyle : onclick, onshow, onerror, onclose
Bildirimler sadece belirli bir süre gözüksün
Uzun süre ekranda asılı kalan bildirimler kullanıcının dikkatini dağıtacaktır. Dolayısıyla bildirimleri belirli bir süre sonra gizlemek isteyebilirsiniz. Bu durumda da aşağıdaki kodu kullanmanız yeterli olacaktır.
Bildirimleri yayınlamadan önce kullanıcı onayı almak gerekebiliyor. Bu işlem için de aşağıdaki kod öbeği içerisinde bildirimlerinizi listelemeniz yeterli olacaktır.
Notification.requestPermission(function(permission) //bildirimlerinizi burada gösterin );
Destekleyen Tarayıcılar
HTML5 bildirileri Chrome 22 ve Firefox 22 tarafından desteklenmekte. Mobil tarafta ise sadece Firefox tarafından sınırlı kapsamda destek bulmakta. Ancak ilerleyen günlerde bu liste büyük bir ivmeyle genişleyecektir.
Ex Machina geniş banner alanları, birden çok sayfa tasarımları ve responsive yapısıyla şık ve kullanışlı bir web teması. Turuncu, gri ve beyaz renklerinin başarılı uyumundan ortaya çıkan bu tasarımı Ex Machina’yı haftanın teması yapıyor.
Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.
Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.
Önümüzdeki salı, yeni web temasıyla görüşmek üzere!
İşte bu hafta sizin için seçtiğimiz şık çalışmalar.
Non Static
deadfix
aunatural
Polly Lindsay
Phil Jones
Yevgeniya Glova
Boggs Industries
Ida Frosk
Anne Passchier
Virginie Morgand
Kullanım & Lisanslama
Kullanılan tüm görseller sahiplerine aittir. Eklenmiş başlıklar, ilgili görsellerin sahiplerini belirtmektedir. Tüm haftalık ilham kaynakları paylaşımlarını buradan görüntüleyebilirsiniz.
Basic, Bootstrap kütüphanesiyle hazırlanmış responsive bir web teması. İşlerinizi ve kişisel paylaşımlarınızı listeleyebileceğiniz 2 sayfalık tema daha çok freelance çalışanlara hitap ediyor.
Estetik yapısı ve modern çizgisi Basic’i bu haftanın teması yapıyor.
Adobewordpress’te her hafta binlerce tasarım arasından seçilip paylaşılan tüm temalar ücretsizdir. Kişisel ve kurumsal işleriniz için rahatlıkla kullanabilirsiniz. Ayrıca istediğiniz şekilde de değiştirebilirsiniz.
Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.
Önümüzdeki salı, yeni web temasıyla görüşmek üzere!
Web sayfanızda kendi hazırladığınız bir resmi fare imleci olarak kullanmak ister misiniz? CSS’in cursor tanımı ile bunu yapmak mümkün. Hem de gayet basit.
Detaylar için makalemizin devamına göz atabilirsiniz.
CSS Cursor
CSS’in cursor tanımı sayesinde birçok fare imlecini istediğimiz şekilde kullanabiliyoruz. Bir örnekle bu yapıyı tanıyalım. Daha sonra tüm varyasyonları gözden geçirelim. Son olarak da custom cursor oluşturalım.
İlk olarak fare imlecini değiştireceğimiz bir eleman oluşturalım.
<p>Burada uzun bir paragraf olduğunu varsayalım.</p>
Şimdi de fareyle bu paragrafın üzerine gelindiğinde farklı bir imleç çıkaralım.
pcursor:pointer
Böylece paragrafın üzerine gelindiğinde, pointer imleci, yani linklerde çıkan el işareti gözükecektir. Geriye kalan diğer fare imleçlerini de hatırlayalım.
Kendi fare imlecimizi web sitemize ekleyelim.
Yine CSS’in cursor tanımını kullanıyoruz. Aynı arkaplan tanımlar gibi fare imleci tanımlayacağız.
cursor: url('resim URL'),auto;
Bu kadar basit. Şimdi de son olarak Codepen üzerinde sizler için hazırladığımız örneği görüntüleyelim.
İşte bu hafta sizin için seçtiğimiz şık çalışmalar.
Dave Prince
World Wildlife Fund
Trendlander
think
leslie
Iris Van Herpen
Homedit
etsy
dvartworks
AndreaCostantini
Kullanım & Lisanslama
Kullanılan tüm görseller sahiplerine aittir. Eklenmiş başlıklar, ilgili görsellerin sahiplerini belirtmektedir. Tüm haftalık ilham kaynakları paylaşımlarını buradan görüntüleyebilirsiniz.