CSS ile Etkileyici Gölge Efektleri

Merhaba arkadaşlar.

Daha önce öğrendiğimiz CSS gölge satırlarını bugün detaylandırıyoruz. Çıkış noktamız yine box-shadow, fakat bu sefer gölgelerde bile boyutlandırma işlemi yapacağız.

awesome css shadows CSS ile Etkileyici Gölge Efektleri

Bahsettiğimiz gibi ilk gölgelendirme yazımızda (görüntülemek için tıklayın) temel teknikleri konuşmuştuk. Sonrasında box-shadow kod birimi ile çoklu border sistemini öğrenmiştik. Aslına bakarsanız gölgelendirme üzerine birçok yazımız mevcut. Makalenin en altındaki ilgili konular alanına göz atabilirsiniz.

Şimdi yavaş yavaş başlayalım.
(daha&helliip;)

Devamını Oku


haftalik-ucretsiz-tema-1

Haftanın Ücretsiz Web Teması #1

Bugün sizlere HTML5 up tarafından hazırlanmış Parallelism temasını tanıtacağız. Parallelism, pek metin barındırmayan, fotoğraf ağırlıklı şık bir tema. Hem responsive hem de minimalist yapıya sahip bu tema özellikle fotoğraflardan oluşan içerikler için birebir. (daha&helliip;)

Devamını Oku

WordPress’i Yavaşlatan Eklentileri Bulun

wordpress performance WordPressi Yavaşlatan Eklentileri BulunWordPress siteniz yavaş mı açılıyor? Bunun sebebi eklentileriniz olabilir mi? Peki ya hangi eklenti sitenizi bu derece yavaşlatıyor?

Artık bu sorulara P3 eklentisi sayesinde cevap verebiliyoruz.GoDaddy tarafından geliştirilen WordPress eklentisi sitenizde kurulu olan tüm eklentilerin performans raporlarını hazırlayıp yavaşlamaya sebep olanları tespit etmenizi sağlıyor.

Hem de tamamen ücretsiz!

(daha&helliip;)

Devamını Oku

wordpress-seo-yoast-adobewordpress

WordPress SEO Kurulumu ve Ayarları

WordPress için yazılmış ve kullanmanızı bekleyen yüzlerce SEO eklentisi mevcut. Ancak bu kalabalık liste arasından bir tanesi dikkat çekiyor : ‘WordPress SEO’

Bu makalemizde büyük bir kitle tarafından kullanılan ve WordPress için yazılmış en iyi SEO eklentisi olarak gösterilen WordPress SEO (Yoast) eklentisini inceleyeceğiz.
(daha&helliip;)

Devamını Oku

WordPress SEO’ya Keywordleri Otomatik Ekleme

meta code tag WordPress SEOya Keywordleri Otomatik Ekleme Google‘ın anahtar kelimeleri önemsemediğini öğrendikten sonra birçok SEO eklentisi gibi Yoast’ın WordPress SEO‘su da keyword otomasyonu kapalı halde kurulmaya başladı.

Fark ettiyseniz keywordleri aktifleştirmemizi sağlayan checkbox’ın altında da “Meta keywordleri niye kullanmak istersin bilmiyorum ama gerçekten istiyorsan burayı işaretle.” yazmakta. Sizce de biri bütün bu SEO eklentilerine dünyadaki tek arama motorunun Google olmadığını hatırlatması gerekmiyor mu? (daha&helliip;)

Devamını Oku

google-material-design-large

Google’ın Yoğurt Yeme Şekli : “Material Design”

google io Googleın Yoğurt Yeme Şekli : “Material Design”Google, geçtiğimiz dönemde IO kapsamında Android için arayüz tasarımını açıkladı. Aslında buradaki Android filtresi sıradan bir maske. “Material Design” şeklinde isimlendirilen bu yeni trend sadece Android arayüzlerini değil, Chrome OS ve Google’ın tüm web servislerinde yer bulacak. Bu da teknolojiyle en ufak alakası olan herkesin Material Design’ı kullanacağı anlamına geliyor.

İlk bakışta Flat Design‘ın renklerini anımsatsa da herşey artık daha canlı. Tüm renkler açılmış. Beraberinde minimalist yapı korunmuş. Ayrıca bol bol kullanılan animasyon ve geçişler sayesinde bir ekranın gösterebileceğinden fazla içerik iç içe eklenmiş. Bu da kullanım kolaylığı konusunda dikkat çeken yeniliklerden birisi.

Sağlanan kullanıcı deneyimi de UX Awards tarafından gold price ile ödüllendirildi. Açıklama ise şu sözlerle başlıyor : “Çoklu ürün ~ platform için gerçekçi hisse sahip yüzeyler, kalınlaşmış grafik design ve işlevsel hareketlilik ile tasarıma yeni bakış açısı.

Peki ya Google ne diyor?

“Focus on the user and all else will follow.”

(daha&helliip;)

Devamını Oku

css-ile-renkli-arkaplan-form

Formlarınızla Etkileşimli Dinamik Arkaplanlar

Günümüz tasarımlarında uzun formlar wizardlar sayesinde adımlara bölünüyor, kendi içerisinde kategorize ediliyor ve basitleştiriliyor. Ancak wizard mantığı kullanım kolaylığı sunuyor gibi gözükse de aslında süreyi uzatıyor. Burada anahtar kelime ve çıkış noktası “dikkati yönetmek” olarak gösterilebilir. Öyleyse kullanıcıya uzun formların her bir inputuyla etkileşime geçen tasarımlar sunmak işe yarayabilir.

Bu makalemizde her form öğesiyle birlikte renk değiştiren arkaplan hazırlayacağız. Renklerimizi de Google‘ın yeni ve popüler tasarım trendi Material Design‘dan seçeceğiz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS ile iOS Benzeri AÇ/KAPA Düğmesi

ios8 switch css CSS ile iOS Benzeri AÇ/KAPA DüğmesiApple‘ın mobil cihazları için geliştirdiği iOS8‘in bol bol konuşulduğu bugünlerde Adobewordpress olarak biz de işletim sisteminin ayar ekranlarında kullanılan aç/kapa (switch) tasarımını CSS ile hazırlayacağız. Daha önceki checkbox tasarımlarımızda olduğu gibi bunda da input öğesini görünmez kılıp etrafına gizlediğimiz öğelerle uygulamak istediğimiz tasarımı çıkarmaya çalışacağız.

Bu makalemizde sadece CSS ile checkboxlarımızı stilize edeceğiz.

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

photoshop-serbest-calisma-2

Photoshop ile Serbest Çalışma #2

Uzun bir aradan sonra Photoshop ile yaptığımız serbest çalışmaların ikinci adımına geçiyoruz. Hepinizin bildiği birkaç hızlı adımla fotoğraf ve rötuş sanatçısı Matthieu Garnier‘in eserini sıfırdan Photoshop ile hazırlayacağız. Stratocumulus isimli bu çalışma oval yapıdaki bulutların üzerine atılmış ince oval bir katmandan ve beraberindeki stratocumulus kelimesinden oluşuyor.

Sözü geçmişken, stratocumulus, oval köşeli, koyu tonlar içeren ve diğerlerinin alt katmanlarında barınan bulutlara verilen latince bir isim. (daha&helliip;)

Devamını Oku