27 Ocak 2015 Salı

Haftanın Ücretsiz Web Teması #18

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.


Ücretsiz Web Teması #18 : SB Admin


Özellikler


  1. Responsive

  2. HTML5 ve CSS3 ile hazırlanmış

  3. Flot and morris.js jQuery chart kullanıyor

  4. Bootstrap

  5. Birden çok layout barındırıyor.

  6. Kolaylıkla değiştirilebilir

  7. Tamamen ücretsiz

 


DEMO  DOWNLOAD


Kullanım & Lisanslama


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.




Haftanın Ücretsiz Web Teması #18

26 Ocak 2015 Pazartesi

Google Material Design Örnekleri

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.


material design balraj chana


Alarm Arayüzü


Ehsan Rahimi de aynı Balraj gibi bir alarm arayüzü çalışmış.


material design ehsan rahimi


Kullanıcı Profili Arayüzü


Dmytro Prudnikov şık bir profil kartı konsepti ile bizlerle.


material design dmytro prudnikov


Material Design Animasyon Örnekleri


Jovie için Material Design


Jovie birden fazla Material Design konsepti oluşturdu. İşte o şık animasyonlar :


material design jovie brett


material design 2 jovie brett


material design 3 jovie brett


material design 4 jovie brett


Listenin devamı için sonraki sayfaya göz atın.



Geçişler


material design transition


Hesap Makinesi


material design calculator


Ölçeklendirme


material design resizing


İkon Animasyonu


material design icon animation


NYT Material Design


material design newyork times


Lokasyon


material design location


Web Örnekleri


Adobewordpress ailesi olarak Material Design konulu onlarca web örneği hazırladık. Onlara göz atmak isterseniz sizi buraya alalım.




Google Material Design Örnekleri

25 Ocak 2015 Pazar

Haftanın İlham Kaynakları #7

Haftaya ilham kaynakları ile başlıyoruz.



26.01.2015 için ilham kaynakları


İşte bu hafta sizin için seçtiğimiz şık çalışmalar.


graphicriver


graphicriver



huffington post


huffington post



Caroline Grohs


caroline grohs



UltraLinx


UltraLinx



tessel supply


tessel supply



Roderick


Roderick



lamosca


lamosca



Javiay Jaen


javiay jaen



baubauhaus


baubauhaus



ikko tanaka


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.



Haftanın İlham Kaynakları #7

20 Ocak 2015 Salı

Haftanın Ücretsiz Web Teması #17

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.


Ücretsiz Web Teması #17 : Landed


Özellikler


  1. Responsive

  2. HTML5 ve CSS3 ile hazırlanmış

  3. Birden çok layout barındırıyor.

  4. Kolaylıkla değiştirilebilir

  5. Tamamen ücretsiz

 


DEMO  DOWNLOAD


Kullanım & Lisanslama


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.




Haftanın Ücretsiz Web Teması #17

19 Ocak 2015 Pazartesi

Haftanın İlham Kaynakları #6

Haftaya ilham kaynakları ile başlıyoruz.



19.01.2015 için ilham kaynakları


İşte bu hafta sizin için seçtiğimiz şık çalışmalar.


grapheine


grapheine



user


user



Sergiu Naslau


sergiu naslau



Anna Pateras


anna pateras



Kate Goins


kate goins



thenewblack


thenewblack



sumo


sumo



calmack


calmack



makethemwonder


makethemwonder



Anne Selby


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.



Haftanın İlham Kaynakları #6

15 Ocak 2015 Perşembe

jQuery ile Kırık Resimleri Onarın

broken image 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


ÖRNEĞİ GÖRÜNTÜLE


jQuery Image Fixer


Bu pluginimiz kırık linklerinizi yönetmenizi sağlar. Özetleyecek olursak


  1. Kırık linklerinizi çalışan bir görselle değiştirir.

  2. İlgili ekranın görsel raporunu konsola bildiri olarak düşürür.


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.


  1. complete : görsel yüklenmesinin tamamlandığını gösterir.

  2. 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.



$(document).ready(function()
brokenImages();
);

İyi çalışmalar.



jQuery ile Kırık Resimleri Onarın

14 Ocak 2015 Çarşamba

HTML5 Bildirimleri

html5 notification HTML5‘in getirdiği kolaylıkları konuşmaya devam ediyoruz. Bugünün konusu da Push Notification diye tanımlanan, tarayıcı merkezli bildirimler olacak.


Popüler web görüntüleyicilerin de desteğini yavaş yavaş almaya başlayan HTML5 bildirimleri artık bizim de gündemimizde.


ÖRNEĞİ GÖRÜNTÜLE


HTML5 Bildirimleri


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 :


  1. dir: Bildirinin akış yönü. Auto, rtl(soldan sağa) veya ltr(sağdan sola) olarak tanımlanabilir.

  2. body: Bildiri içeriği.

  3. lang: Bildiride kullanılan dili belirtiyoruz.

  4. tag: Bildiriyle ilişkilendirmek istediğimiz id’yi etiketliyoruz.

  5. 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.



setTimeout(function()
notification.close();
,2000);

Milisaniye cinsinden bildirinin gözükme süresini belirtiyoruz.


Kullanıcıdan bildirim göstermek için izin isteme


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.



HTML5 Bildirimleri

12 Ocak 2015 Pazartesi

Haftanın Ücretsiz Web Teması #16

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.


Ücretsiz Web Teması #16 : Ex Machina


Özellikler


  1. Responsive

  2. HTML5 ve CSS3 ile hazırlanmış

  3. Birden çok layout barındırıyor.

  4. Kolaylıkla değiştirilebilir

  5. Tamamen ücretsiz

 


DEMO  DOWNLOAD


Kullanım & Lisanslama


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.




Haftanın Ücretsiz Web Teması #16

11 Ocak 2015 Pazar

Haftanın İlham Kaynakları #5

Haftaya ilham kaynakları ile başlıyoruz.



12.01.2015 için ilham kaynakları


İşte bu hafta sizin için seçtiğimiz şık çalışmalar.


Non Static


not static



deadfix


deadfix



aunatural


aunatural



Polly Lindsay


Polly Lindsay



Phil Jones


phil jones



Yevgeniya Glova


Yevgeniya Glova



Boggs Industries


Boggs Industries



Ida Frosk


Ida Frosk



Anne Passchier


Anne Passchier



Virginie Morgand


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.



Haftanın İlham Kaynakları #5

5 Ocak 2015 Pazartesi

Haftanın Ücretsiz Web Teması #15

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.


Ücretsiz Web Teması #15 : Basic


Özellikler


  1. Bootstrap

  2. Responsive

  3. Freelance kullanımlar için birebir

  4. HTML5 ve CSS3 ile hazırlanmış

  5. Anasayfa ve kontak sayfası bulunuyor

  6. Kolaylıkla değiştirilebilir

  7. Tamamen ücretsiz

 


DEMO  DOWNLOAD


Kullanım & Lisanslama


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.




Haftanın Ücretsiz Web Teması #15

CSS ile Kendi Fare İmlecinizi Oluşturun

css cursor 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.


css cursor custom


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.




CSS ile Kendi Fare İmlecinizi Oluşturun

4 Ocak 2015 Pazar

Haftanın İlham Kaynakları #4

Haftaya ilham kaynakları ile başlıyoruz.



05.01.2015 için ilham kaynakları


İşte bu hafta sizin için seçtiğimiz şık çalışmalar.


Dave Prince


Dave Prince



World Wildlife Fund


World Wildlife Fund



Trendlander


Trendlander



think


think



leslie


leslie



Iris Van Herpen


Iris Van Herpen



Homedit


Homedit



etsy


etsy



dvartworks


dvartworks



AndreaCostantini


Andrea Costantini


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.



Haftanın İlham Kaynakları #4