Haftanın Ücretsiz Web Teması #1

Bugünden itibaren her salı günü yeni web temasıyla sizlerle olacağız.

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.

 

Özellikler

1. Responsive


2. HTML5 ve CSS3 ile hazırlanmış


3. Kolaylıkla değiştirilebilir


4. Tamamen ücretsiz

 

DEMO  DOWNLOAD

---

 

Tüm haftalık web teması paylaşımlarını buradan görüntüleyebilirsiniz.

Haftanın Ücretsiz Web Teması #1

WordPress'i Yavaşlatan Eklentileri Bulun

WordPress 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!

Eklentiler sitemi yavaşlatıyor!

Bu cümleyi ilk kuran siz değilsiniz. WordPress sitenize kurduğunuz her eklenti kendi PHP kodlarını eklemekle kalmaz, yerli yersiz CSS ve JavaScript kodları da ekler. Bu da sitenizin açılış hızında gözle görülür yavaşlamalara sebep olabilir. Bu sorunun tek çözümü kullandığınız eklentilerin sayısını azaltmak. P3 de dahil hiçbir WordPress eklentisi bu sorunu aşmanızı sağlamaz. Sadece bu yolda size yardımcı olabilir.

Plugin Performance Profiler

P3, kötü yapılandırılmış eklentileri tespit etmenize yardımcı oluyor. Böylece yavaş çalışan eklentileri kaldırıp sitenizin hızlanmasını sağlayabilirsiniz.

Eklenti sıradan bir ziyaretçi gibi sitenize giriyor ve ekranları geziyor. Bu esnada yüklenen diğer eklentiler tarafından yüklenen JavaScript, CSS gibi dosyalar hesaplanıyor, SQL için yapılan sorgular toplanıyor. Böylece sonuç grafiksel olarak da sunuluyor. Ayrıca yaptığınız tüm taramalar saklanıyor, zaman içerisindeki hız değişimleri görüntülenebiliyor.

Sitenizde kullandığınız eklentiler dışında hız / performans testinde site açılma süresi, tema yüklenme süresi, bellek kullanımı ve MySQL sorguları gibi istatistikleri de tutmakta.

P3 nasıl kurulur?

Eklenti tamamıyla ücretsiz.

WordPress’e eklentilerin nasıl kurulduğunu kısaca hatırlayalım.

1. Dosyayı indirin ve zip içerisinden çıkarın.


2. Eklenti klasörünü FTP aracılığıyla ‘/wp-content/plugins/’ dizinine upload edin,


3. WordPress admin panelinizden Eklentiler alanına gidip eklentiyi etkinleştirin.

Download Adresi : P3 Profiler

WordPress'i Yavaşlatan Eklentileri Bulun

CSS ile Linklerinize Animasyonlu Hover

Klasik altı çizgili yazıları animatif hale getirmeye ne dersiniz? CSS3’ün after tanımlamasıyla birlikte bu işlemi yapmak mümkün.

Bu dersimizde linklerimiz için şık bir hover efekti hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

Linklere animatif altı çizgili efekti nasıl verilir?

Sadece CSS kodu yazacağız. HTML tarafında yapmamız gereken bir düzenleme yok.

CSS Kodları

İlk olarak linklerimize satır yüksekliği, inline-block yapısı tanımlayalım.

a 
	line-height: 1;
	display: inline-block;
	color:#ffeb3b;
	text-decoration:none;

Daha sonra varsayılan after tanımını düzenleyelim. Burada çizgiyi 0 piksel yapalım ki hover olmadığı sürece gözükmesin. Ayrıca geçiş efektini (transition) de bur kısımda tanımlayacağız.

a:after 
	display: block;
	content: "";
	height: 2px;
	width: 0%;
	background-color: #ffeb3b;
	transition: width .3s ease-in-out;

Şimdi de üzerine gelindiğinde veya focus olunduğunda çizgiyi 100% genişliğe uzatalım.

a:hover:after,
a:focus:after 
	width: 100%;

Bu kadar basit.

a:after içerisindeki yükseklik ve a’ya verdiğimiz line-height yazı boyutunuza göre değişiklik gösterebilir.

İyi çalışmalar.

CSS ile Linklerinize Animasyonlu Hover

WordPress SEO'ya 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?

WordPress SEO’ya otomatik meta keyword ekletmek

WordPress SEO’da sayfalar,yazılar ve kategoriler için otomatik olarak meta keyword eklemek aslında hiç zor değil. Zaten eklentinin içerisinde olan özellikleri ve detayları bu 3 alan için de kullanmak yeterli. Nasıl mı?

WordPress sitenizin wp-admin alanına giriş yapın ve soldaki menüden SEO sekmesini tıklayarak Başlıklar & Metalar seçimini yapın. Açılan pencerede “use meta keywords” seçimini yapın. Daha sonra Yazı Türleri sekmesine geçin.

Yazılara meta keyword ekleme

Bu eklenti sayesinde yazılarınıza custom keyword girmeniz mümkün. Ancak bunları otomatikleştirmek istiyorsanız sizlere önerimiz yazılar için belirttiğiniz tagleri aynı zamanda meta keyword olarak da kullanmanız.

Bu işlemi yapmak için üstteki form öğesine aşağıdaki kodu yazmanı yeterli olacaktır.

%%focuskw%%, %%tag%%

Böylece odaklanılmış kelimeniz, sonrasında da yazı tagleriniz tüm makaleleriniz için meta keyword haline gelecektir.

Sayfalara meta keyword ekleme

Bildiğiniz gibi WordPress’te sayfalara tag girmiyoruz. Hal böyleyken WordPress SEO ile odaklanılmış kelime girmeniz çok önemli. Yine Yazı Türleri sekmesi altından Sayfalar alanına gidiyoruz.

Bu kısımda tavsiyemiz anasayfanız için daha önce belirlediğiniz keywordleri de kullanmanız. Sadece başına odaklanılmış kelimeyi ekleyerek.

%%focuskw%%, anasayfa keywordleriniz

Kategorilere meta keyword ekleme

Son olarak kategorilere de meta keyword ekleyelim. WordPress SEO kurulu sitenizde kategori düzenleme alanına geldiğinizde “Meta Anahtar Kelimeler” isimli form öğesini bulabilir, ilgili meta keywordlerin girişini yapabilirsiniz.

Peki ya yüzlerce kategoriniz var ve bütün bunlara el ile keyword girmek istemiyorsanız?

Taksonomiler sekmesine geçiyoruz ve

%%tag%%

yazıyoruz. Böylece her kategoriye, kategori adı otomatik olarak keyword atanıyor.

Google meta keyword desteklemiyor mu?

Evet. Uzun yıllar boyunca bol bol suistimal edilen anahtar kelimeler birkaç yıldır desteklenmiyor. Ancak Google dışındaki irili ufaklı birçok arama motoru hala keywordlere göz atmakta. Bunlardan bir tanesi de Yandex.

Google’ın ağzından da meta desteğinin kalktığını duymakta fayda var.

WordPress SEO'ya Keywordleri Otomatik Ekleme

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

Form ve Arkaplan etkileşimi nasıl yapılır?

Bu tasarımı oluşturabileceğimiz iki ayrı yöntem var. Sadece CSS ile (~) selectoru sayesinde hazırlayabiliriz. Ya da CSS’in işini jQuery’e yaptırabiliriz.

CSS ile yapmak hem daha kolay hem daha performanslı olduğu aşikar. Burada soru “CSS3’ün (~) selectoru eski versiyon tarayıcılarla çalışıyor mu?” şeklinde gelebilir. Cevabı da açık. jQuery ve (~) selectorunun tarayıcı desteği neredeyse aynı versiyonlarda geldi.

Sadece CSS ile Hazırlama

CSS3‘ün gelişimiyle yazılımın rolleri yavaş yavaş tasarım tarafından çalınır oldu. Bugün de aynı çerçeve içerisinde bile bulunmaya iki öğenin etkileşimini sağlayacağız. İşin keyifli tarafı da bunu 1 satır kodla yapacağız.

HTML Kodları

İlk olarak HTML kodlarımızı ekleyelim.

<label for="bir">Ad</label>
<input type="text" id="bir">
<label for="iki">Soyad</label>
<input type="text" id="iki">
<label for="uc">Adres</label>
<input type="text" id="uc">
<div class='background'></div>

CSS Kodları

İlk olarak background classını atadığımız öğeyi tasarlayalım. Onu tüm sayfayı kaplayacak ve bir tür body işlevi görecek hale getirmemiz gerekiyor.

.background 
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background-color: #212121; 
 z-index: -1;
 background-size: cover;
 transition: background-color .3s;

Şimdi inputlara hızlı bir tasarım yapalım.

input[type=text] 
 width: 250px;
 z-index: 10;
 border:0;
 background-color: rgba(255, 255, 255, 0.5);
 padding: 15px;

Peki ya inputlara focus olunduğunda ne olsun?

input[type=text]:focus 
 background-color: rgba(255, 255, 255, 1);
 outline: none;

Inputlar seçildiğinde rengini rgba ile beyaza çevirdik. Buraya kadar herşey tamam. Peki ya o sözünü ettiğimiz renkli arkaplanlar nerede? İşte şimdi CSS3’ün (~) selectorunu kullanma vakti. Her bir inputa focus olunduğunda .background‘ın alacağı stili belirliyoruz.

#bir:focus ~ .background 
 background-color: #ff9800;


#iki:focus ~ .background 
 background-color: #03a9f4;


#uc:focus ~ .background 
 background-color: #e91e63;

Son olarak inputları birbirinden ayıracak sıradan bir label atayalım.

labeldisplay:block; margin-top:50px;

Tasarımımız hazır. Aşağıda da aynı tasarımı jQuery ile yapmak isteyenler için bir çalışma hazırladık.

jQuery Desteğiyle Hazırlama

Üstteki HTML kodlarının aynısını kullanıyoruz. CSS tarafında da (~) selectorunun olduğu satırları siliyoruz.

.background 
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background-color: #212121; 
 z-index: -1;
 background-size: cover;
 transition: background-color .3s;


input[type=text] 
 width: 250px;
 z-index: 10;
 border:0;
 background-color: rgba(255, 255, 255, 0.5);
 padding: 15px;


input[type=text]:focus 
 background-color: rgba(255, 255, 255, 1);
 outline: none;


labeldisplay:block; margin-top:50px;

Web sayfanıza jQuery’i include ederek başlayın.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Daha sonra bu satırın altına ilgili kodlarımızı ekleyelim.

$("#bir").focusin(function() 
 $('.background').css("background-color","#ff9800");
);
$("#iki").focusin(function() 
 $('.background').css("background-color","#03a9f4");
);
$("#uc").focusin(function() 
 $('.background').css("background-color","#e91e63");
);
$("#bir, #iki, #uc").focusout(function() 
 $('.background').css("background-color","");
);

jQuery kodlarınızı </body>‘nin üstüne eklemeniz önerilir.

Kapanış

Bu makalemizde birçok başka tasarıma altyapı oluşturabilecek öğe etkileşimini konu aldık. Bir sonraki makalemizde görüşmek üzere hoşça kalın.

Formlarınızla Etkileşimli Dinamik Arkaplanlar

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

Apple‘ı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

Apple iOS8 benzeri checkbox tasarımı nasıl yapılır?

Çok fazla kod yazmayacağız belki ama bu işimizin kolay olacağı anlamına gelmiyor. Özellikle CSS tarafında biraz döktürmemiz gerekecek.

Hedefimiz olabildiğince üstteki tasarımı yakalamak. CSS kodlarımız ile başlayalım!

CSS Kodları

İlk olarak çerçeve niteliği görecek label elemanımızı hazırlayalım. Fare ile üzerine gelindiğinde pointer çıkmalı, taşmaları önlemesi için relative ve block yapıda olmalı, sınırları belli olmalı ve köşeleri oval yapıda olmalı.

label.iOS8 
 margin:150px auto;
 display: block;
 width: 65px;
 position:relative;
 height: 36px;
 border-radius: 18px;
 cursor: pointer;

Şimdi orjinal checkboxlarımızı görünmez yapalım.

.ackapa 
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;

Şimdi de tasarımımızın temelini oluşturacak arkaplan öğesini hazırlayalım.

.arkaplan 
 position: relative;
 display: block;
 height: inherit;
 background: #eceeef;
 border-radius: inherit;
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.10), inset 0 0 2px rgba(0, 0, 0, 0.15);
 -webkit-transition: 0.20s ease-out;
 transition: 0.20s ease-out;
 -webkit-transition-property: opacity background;
 transition-property: opacity background;


.arkaplan:before, .arkaplan:after 
 position: absolute;
 top: 50%;
 margin-top: -.5em;
 -webkit-transition: inherit;
 -moz-transition: inherit;
 -o-transition: inherit;
 transition: inherit;

Checkbox işaretlendiğinde arkaplan yeşil olmalı.

.ackapa:checked ~ .arkaplan 
 background: #42cc55;
 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);

Yuvarlak öğenin seçilmemiş halinin tasarımıyla devam edelim.

yuvarlak 
 position: absolute;
 top: 3px;
 left: 3px;
 width: 30px;
 height: 30px;
 background: white;
 border-radius: 30px;
 box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
 background-image: -webkit-linear-gradient(top, white 45%, #f0f0f0);
 background-image: linear-gradient(to bottom, white 45%, #f0f0f0);
 -webkit-transition: left 0.15s ease-out;
 transition: left 0.15s ease-out;

Checkbox işaretlendiğinde yuvarlak sağa yaklaşmalı.

.ackapa:checked ~ .yuvarlak 
 left: 32px;
 box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.1);

CSS kodlarımız bu kadar.

HTML Kodları

Aşağıdaki kodlarını body içerisinde checkbox’ın gösterileceği yere eklemeniz yeterli.

<label class="iOS8">
	<input type="checkbox" class="ackapa">
	<span class="arkaplan"></span>
	<span class="yuvarlak"></span>
</label>

iOS8 tasarım öğelerinin web tasarımındaki yeri

Birçok kod paylaşım sitesinde Apple’ın mobil cihazlar için ürettiği tasarımlar webe uyarlanmakta. Bu birlikte oluşturduğumuz tasarım da bu kervana katılmaya aday. Apple cihazlarda görmekten hoşnut olduğumuz öğeleri yorum alanında belirtebilirsiniz. Böylece günün birinde onları da HTML ve CSS ile yeniden şekillendiririz!

İyi çalışmalar.

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

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.

Orjinal Görsel

Başlayalım

İlk olarak neler yapmamız gerektiğini belirleyelim. Gerçekçi bir bulut efektine ihtiyacımız var. Sonrasında da bu bulutun belirli alanlarında ışığı arttırmalı ya da azaltmalıyız. Üzerine oval yapıda bir tasarım eklenmeli, içerisine de stratocumulus yazılmalı. Son olarak da biraz noise eklenerek görsel tamamlanabilir. Yavaş yavaş başlayalım.

Photoshop ile bulut hazırlayalım.

Photoshop ile bulut efekti hazırlamak gayet basit. Bu efekti daha önce de çok kez hazırladık.

İlk olarak File > New alanından veya CTRL+N kısayol tuşuyla bir çalışma alanı oluşturun. Bizim hazırlayacağımız örnek 1280×720 piksel boyutlarında olacak.

Daha sonra klavyenizin D tuşuna basarak siyah ve beyaz renk panelinin seçilmesini sağlayın. Şimdi bulutumuzu oluşturabiliriz.

Yukarıda bulunan menüden Filter > Render > Clouds alanına geliyoruz. Böylece Photoshop bizim için bir bulut filtresi (örneği üstte) oluşturacak. Şimdi hiç duraksamadan yeni bir layer oluşturuyoruz.

Oluşan yeni layer seçiliyken CTRL+F tuşlarına basıyoruz. Böylece bu layera da Clouds filtresi uygulanıyor. Layer penceresinde hiyerarşik olarak üstte olan (sonradan oluşturduğumuz bulut) layerın Normal olan Blend Mode değerini Overlay olarak değiştiriyoruz.

Böylece iki layer üstüste biniyor. Şimdi en önemli kısıma geldik. Overlay yaptığımız bu layera siyah ve beyaz fırçayla birkaç çizim yapacağız. Amacımız ışığın yönünü belirlemek ve yansımaları daha dikkat çekici kılmak.

250 piksellik ve %45 hardness değerine sahip bir fırça bu işlem için yeterli. İlk olarak siyah renkle birkaç yerde koyu gölgeler oluşturalım. Bu işlemi yaparken fırçanızın Opacity değeriyle de oynayabilirsiniz. Biz hazırlayacağımız örnekte orjinale sadık kaldığımız için sol alt başta olmak üzere köşelerde koyu tonlama hazırladık.

Şimdi aynı işlemi beyaz fırçayla yapalım. Renk panelinden beyazı seçip istediğimiz alanlarda ışığı çoğaltıyoruz.

Bulutumuz hazır!

Oval tasarım

Boyama işlemini yaptığımız en üstteki layerı seçin. Klavyenizin ALT tuşuna basılıyken layer penceresinin sağ üst kısmında bulunan ve aşağıyı gösteren liste ikonunu tıklayın, merge visible seçimini yapın. Bu işlem alttaki tüm layerlarınızı kapsayan bir kopya layeri birleştirilmiş halde oluşturur.

Şimdi oluşan bu layerı Edit > Transform > Flip Vertical alanına giderek çevirin. Şimdi ellipse tool aracı ile bir daire çizeceğiz.

Bu dairenin layerını, en son ters çevirme işlemi yaptığımız bulut layerının altına sürükleyelim. Daha sonra klavyemizin ALT tuşuna basılıyken layer penceresinde imlecimizi bu iki katmanın arasına doğru getirelim. İmleciniz aşağıyı gösteren bir kareye dönüşecek. İki layerın arasını tıklayın. Böylece üstteki ters çevrilmiş bulut sadece dairenin alanına uygulanacak.

Şimdi oval ve onun üzerindeki birleşik layerı CTRL tuşuna basarak seçelim.

Daha sonra CTRL+G tuşlarına basalım ve onları bir grup haline getirelim.

Oluşturduğumuz bu grubu sağ tıklayıp Duplicate Group diyelim ya da CTRL+J ile bu işlemi yapalım. Oluşan kopya grup seçiliyken Edit > Free Transform (CTRL+T) alanına gidelim ve küçültme işlemine başlayalım. Kopya grubu orjinal gruptan daha küçük olacak şekilde küçültelim. Bu işlemi yaparken CTRL ve ALT tuşlarına basmanız dengeli ve merkez odaklı bir küçültme yapmanızı sağlar.

Yukarıda yaptığımız ALT tuşuna basılıyken merge visible işlemini tekrarlıyoruz. Ancak bu sefer ALT tuşuna basmak zorunda değilsiniz. Tüm layerlar birleşecektir. Bu işlemden sonra da Filter > Noise > Add Noise alanına gidiyoruz.

2 piksellik bir efekt uygulayalım. Neredeyse herşey tamam. Yazıyı eklemek kaldı.

Yazının eklenmesi

Şimdi Type Tool aracıyla yazımızı ekleyelim. Yazıtipi ve boyutlandırması konusunda tercih sizin. Ancak biz Century Gothic isimli yazı tipini kalın halde ve 24 pt boyutunda kullandık.

Son olarak yazı layerının Normal olan Blend Mode değerini Overlay olarak değiştirin.

Sonuç

PSD dosyasını indir

Bu çalışmanın PSD halini aşağıdan indirebilirsiniz.

DOSYAYI İNDİR

Dosyayı yukarıdan indirebilirsiniz.

Photoshop ile Serbest Çalışma #2

CSS ile Material Design'ın Ripple Efekti

Google‘ın ses getiren tasarım trendi Material Design ile birlikte görmeye alıştığımız dalgalanma efektini CSS ve jQuery ile hazırlamak mümkün. Bu şık efekt kullanıcıya tıklama hissiyatını vermenin yeni yolu. Özellikle web sayfanızın mobil ekranlarında kullanmanızı önerebileceğimiz bu tasarımın örneğini aşağıdan görüntüleyebilirsiniz.

Bu dersimizde su dalgalanmasını andıran bir tıklama efekti hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

CSS ile dalgalanma efekti nasıl hazırlanır?

Bu efekt belirli bir bölgeyi etkileyecek şekilde hazırlanmalı. Bu işlem için de html elemanını tetiklemek en doğrusu. Bu yüzden HTML’i tablo yapısında gösterip 100% uzatsak jQuery’i besleyeceğimiz eleman hazırlanmış olur.

Daha sonra da ilk efekti, sonra efektin pozisyonlamasını, animasyonunu ve son olarak JavaScript kodlarını ekliyoruz. CSS kodlarımız ile başlayalım.

CSS Kodları

Yukarıda da dediğimiz gibi ilk olarak html öğesine 100% yükseklik ve tablo yapısı katalım.

html 
 display:table;
 height:100%;

Şimdi de dalgalanma efektini oluşturalım.

.dalgalanma 
 position: relative;
 overflow: hidden;
 -webkit-transform: translate(0);

.efekt 
 display: block;
 position: absolute;
 pointer-events: none;
 border-radius: 50%;
 transform: scale(0);
 z-index:9999;
 background: rgba(52, 152, 219,.7);
 opacity: 1;


.efekt.oynat 
 -webkit-animation: dalgalanma 2s cubic-bezier(0.165, 0.85, 0.45, 1);
 -o-animation: dalgalanma 2s cubic-bezier(0.165, 0.85, 0.45, 1);
 animation: dalgalanma 2s cubic-bezier(0.165, 0.85, 0.45, 1);

Şimdi de dalgalanma ismini verdiğimiz animasyonu hazırlayalım.

@keyframes dalgalanma 
 100% 
 opacity: 0;
 -webkit-transform: scale(2);
 -ms-transform: scale(2);
 -o-transform: scale(2);
 transform: scale(2);
 

@-webkit-keyframes dalgalanma 
 100% 
 opacity: 0;
 -webkit-transform: scale(2);
 -ms-transform: scale(2);
 -o-transform: scale(2);
 transform: scale(2);
 

@-moz-keyframes dalgalanma 
 100% 
 opacity: 0;
 -webkit-transform: scale(2);
 -ms-transform: scale(2);
 -o-transform: scale(2);
 transform: scale(2);
 

@-ms-keyframes dalgalanma 
 100% 
 opacity: 0;
 -webkit-transform: scale(2);
 -ms-transform: scale(2);
 -o-transform: scale(2);
 transform: scale(2);
 

@-o-keyframes dalgalanma 
 100% 
 opacity: 0;
 -webkit-transform: scale(2);
 -ms-transform: scale(2);
 -o-transform: scale(2);
 transform: scale(2);
 

jQuery Kodları

Şimdi HTML’in herhangi bir yeri tıklandığında başlatılacak fonksiyonu tamamlayalım.

$("html").click(function(e)
	var ripple = $(this);
	if(ripple.find(".efekt").length == 0) 
		ripple.append("<span class='efekt'></span>");
	

	var efekt = ripple.find(".efekt");

	efekt.removeClass("oynat");

	if(!efekt.height() && !efekt.width())
	
		var d = Math.max(ripple.outerWidth(), ripple.outerHeight());
		efekt.css(height: d/5, width: d/5);
	

	var x = e.pageX - ripple.offset().left - efekt.width()/2;
	var y = e.pageY - ripple.offset().top - efekt.height()/2;

	efekt.css(
		top: y+'px',
		left:x+'px'
	).addClass("oynat");
)

Şimdi işi biraz detaylandıralım.

Ripple efekti sadece mobil cihazlarda gözüksün ister misiniz?

Bu işlemi yapmak için birden fazla yol mevcut.

WordPress sitelerde

WordPress’in wp_is_mobile() tanımlaması sayesinde ripple efekti sadece mobil cihazlarda gösterebiliriz. Yapmanız gereken kodları bu tanım içerisinde göstermek.

<?php
if ( wp_is_mobile() ) 
	/* Kodlar buraya */

?>

jQuery ile mobil cihaz kontrolü

WordPress dışındaki tüm yapılarda mobil cihaz kontrolünü jQuery ile aşağıdaki şekilde yapabilirsiniz.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) 
	/* Kodlar buraya */

Material Design

Buraya küçük bir not düşelim. Material design hakkında ileriki günlerde bol bol konuşacağız.

İyi çalışmalar.

CSS ile Material Design'ın Ripple Efekti

Ücretsiz Fontlar #1 : Moderne Sans

Moderne Sans basit ve şık bir sans-serif yazı tipi. Marius Kempken, Moderne Sans’ı tasarlarken 1920’lerin tipografi eserlerinden eserlenmiş. İlk başta büyük karakterler için hazırlanmış font daha sonra küçük harf ve rakam desteği de kazanmış.

Moderne Sans

Bu yazı tipini ücretsiz olarak indirmek için aşağıdaki bağlantıyı kullanabilirsiniz.

DOSYAYI İNDİR

Önizleme

Ücretsiz Fontlar #1 : Moderne Sans

WordPress'te Yazılara "Yeni" İbaresi

WordPress’te yeni yayınlanmış ve ziyaretçilerinizin daha önce görüntülemediği yazılara “Yeni” ibaresi eklemek mümkün. Böylece hem kullanıcıları yeni içerikler hakkında bilgilendirmiş, hem de sayfa gösterimini olursunuz.

Bu makalemizde çerez desteğiyle ilk defa görülen makalelerin yanına “Yeni” ibaresi ekleyeceğiz.

Neden yeni yazılar önplana çıkarılmalı?

Sitenize belirli sıklıklarla giren ve bir şekilde geri dönen kullanıcılar genellikle en sadık takipçilerinizdir. Bu kişilere yeni içerikleri bildiriyor olmanız, onların site içi navigasyonunu kolaylaştırır, yeni içeriği görüntülemeye teşvik eder.

“Yeni” nasıl hazırlanır?

Temanızın function.php isimli dosyasını açın ve aşağıdaki kodları ekleyin.

function yeni_makale ( $title, $id ) 

add_filter( 'the_title', 'yeni_makale', 10, 2);

function yeni_makale_cookie() 
if ( is_admin() ) return;
$current = current_time( 'timestamp', 1);
setcookie( 'lastvisit', $current, time()+60+60*24*7, COOKIEPATH, COOKIE_DOMAIN );


add_action( 'init', 'yeni_makale_cookie' );

Bu kod web sayfanıza giren ziyaretçide lastvisit isimli çerezi arıyor. Eğer öyle bir çerez bulamazsa, ilgili çerez tarihini o anın tarihine eşliyor. Eğer öyle bir çerez varsa da o tarihten sonra yazılmış her makalenin yanına “Yeni” ifadesini ekliyor.

Tasarım için yeni-makale classını tanımladığınız öğeyi kullanmanız gerekmektedir.

Yani CSS kodlarınızı bu class üzerine yazabilirsiniz.

Biz Adobewordpress olarak pommiegranit tarafından hazırlanmış bu yapıyı kullanmaktayız.

Eğer üstteki tasarım hoşunuza gittiyse işte CSS kodları;

background: #feffdd;
padding: 4px;
border: 1px solid #eeefd2;
border-radius: 5px;
font-size: small;
color: #BEBFA9;

İyi çalışmalar.

WordPress'te Yazılara "Yeni" İbaresi

Sadece CSS ile Slider Yapımı

Haftada bir düzenli olarak “Slider yapımı hakkında daha fazla konu yazın!” şeklinde tehditkar mailler alıyoruz.

Hal böyle olunca oturup çalıştık, sizler için şık ve kolay hazırlanabilir bir slider tasarladık. Sadece CSS ile çalışan bu slider benzerlerinin aksine yazı ve üzerine gelince durma desteği de sunuyor. Böylece sıradan bir slider için web sayfamıza yüzlerce satır JavaScript yükü bindirmemiş oluyoruz.

Bu makalemizde sizlere CSS3‘ün animation tanımı sayesinde kusursuz bir slider hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

Sitenize Slider Ekleyin

Günümüz web trendlerinden biri olan sliderlar için yüzlerce alternatif internette gezmekte. Sadece Adobewordpress olarak biz bile bu konuyla alakalı 2 makale, 1 WordPress eklentisi yazdık. Bu da onların en yenisi.

Kolları sıvayıp kodlarımızı yazmaya başlayalım.

CSS Kodları

İlk olarak Adobewordpress Slider olarak isimlendirdiğimiz bu tasarımın dış çerçevesini oluşturalım. 800×330 piksellik bir sunum olacak şu haliyle.

.aw-slider

 width:800px;
 height:330px;
 overflow: hidden;
 position: relative;

Şimdi gösterilecek görsellerin boyutlarını ve yapısını belirleyeyim. Beraberinde de alt yazı açıklamalarını hazırlayalım.

.resim1, .resim2, .resim3, .resim4, .resim5

 position: absolute;
 width:800px;
 height:330px;


.aw-slider > div > a > span
 position:absolute;
 display:table; 
 background-color:black; 
 color:white; 
 right:0; 
 bottom:0; 
 padding:5px 10px;

Her bir resim 800px boyutunda olduğu için slideların her biri için +800px’lik bir left vermemiz gerekiyor.

.resim1left: 0;
.resim2left: 800px;
.resim3left: 1600px;
.resim4left: 2400px;
.resim5left: 3200px;

Bütün bu yapıları içinde barındıracak ve animasyonu oluşturacak division öğesini tanımlayalım. Örnekte 5 adet görsel kullandık diye 20 saniyelik bir animasyon oluşturduk. Ayrıca 800×5 piksellik bir görsel sunumumuz olduğu için de bu alanda genişlik değerimiz 3200px olarak ayarlı kalmalı. Animasyonumuzun adı da gecisler.

.aw-slider > div 

 width: 3200px;
 height: 330px;
 left:0px;
 position: absolute;
 -webkit-animation-duration: 20s;
 -webkit-animation-iteration-count:infinite;
 -webkit-animation-name: gecisler;
 -moz-animation-duration: 20s;
 -moz-animation-iteration-count:infinite;
 -moz-animation-name: gecisler;
 -ms-animation-duration: 20s;
 -ms-animation-iteration-count:infinite;
 -ms-animation-name: gecisler;
 animation-duration: 20s;
 animation-iteration-count:infinite;
 animation-name: gecisler;

Resimlerin üzerine geldiğinde netlikleri artsın, animasyon ise dursun.

.aw-slider > div img
 opacity: 0.9;
 filter: alpha(opacity=95);


.aw-slider > div img:hover
 opacity: 1;
 filter: alpha(opacity=100);


.aw-slider > div:hover
-webkit-animation-play-state:paused;
/* Bu CSS tanımı Chrome 4.0, IE10, Firefox 16, Safari 4, Opera 15 ve üstü versiyonlarda çalışmaktadır*/

Ve son olarak cross browser yapıda gecisler isimli animasyonumuzu tanımlayalım.

@-webkit-keyframes gecisler 

 0% left:0px;
 10% left:0px;
 20% left:-800px;
 30% left:-800px;
 40% left:-1600px;
 50% left:-1600px;
 60% left:-2400px;
 70% left:-2400px;
 80% left:-3200px;
 90% left:-3200px;

@-moz-keyframes gecisler 

 0% left:0px;
 10% left:0px;
 20% left:-800px;
 30% left:-800px;
 40% left:-1600px;
 50% left:-1600px;
 60% left:-2400px;
 70% left:-2400px;
 80% left:-3200px;
 90% left:-3200px;

@-ms-keyframes gecisler 

 0% left:0px;
 10% left:0px;
 20% left:-800px;
 30% left:-800px;
 40% left:-1600px;
 50% left:-1600px;
 60% left:-2400px;
 70% left:-2400px;
 80% left:-3200px;
 90% left:-3200px;

@keyframes gecisler 

 0% left:0px;
 10% left:0px;
 20% left:-800px;
 30% left:-800px;
 40% left:-1600px;
 50% left:-1600px;
 60% left:-2400px;
 70% left:-2400px;
 80% left:-3200px;
 90% left:-3200px;

JavaScript’in yükünü CSS sırtlayınca kodlar biraz uzuyor. Sırada HTML kodlarımız var.

HTML Kodları

Burada iş yükü çok az. Aşağıda biz bir köprü bağlantı kullanmadık ama siz slidelarınıza link verebilirsiniz.

<div class="aw-slider">
<div>
<a class="resim1"><img src="http://lorempixel.com/800/330/cats"><span>Kediler</span></a>
<a class="resim2"><img src="http://lorempixel.com/800/330/nightlife"><span>Gece Hayatı</span></a>
<a class="resim3"><img src="http://lorempixel.com/800/330/fashion"><span>Moda</span></a>
<a class="resim4"><img src="http://lorempixel.com/800/330/food"><span>Yemek</span></a>
<a class="resim5"><img src="http://lorempixel.com/800/330/technics"><span>Teknik</span></a>
</div>
</div>

Slide sayısını nasıl çoğaltırım?

Öncelikle HTML kodlarına yeni bir satır ekleyip sonraki numara ile isimlendirin (resim6). Daha sonra CSS tarafında bu yeni oluşturduğunuz görsele de ilgili classları tanımlayın. Animasyonunuzun olduğu kısma ise 0-90 arası uzanan sıralandırmayı her bir yeni slide için 2 satır daha arttırıp aradaki rakam farkını koruyun. Tabi şuan için 3200‘e ayarlı olan genişlik değerlerinizi de her bir resim için 800 piksel arttırmayı unutmayın.

CSS Slider

İlk bakışta uzun ve karmaşık bir makale gibi gözüküyor olabilir. Ancak web sayfanızın orta yerinde koca koca görselleri ziyaretçilere sunan bu tasarımların fonksiyonel ve hızlı çalışması gerekir. Sadece birkaç görsel hareket etsin, ilgi çeksin diye web sayfanıza onlarca CSS ve JavaScript dosyasını include ediyorsanız sayfa boyutunun epeyce artmasına sebep olursunuz.

Bir sonraki makalemizde görüşmek üzere, hoşçakalın.

Sadece CSS ile Slider Yapımı

WordPress'te Popüler Konuları Gösterme (Eklentisiz)

WordPress sitenizde ziyaretçilerinizin en çok ilgi gösterdikleri yazıları eklenti kullanmadan listelemek mümkün. Bu işlem için loop içerisinde bulunan ve en çok yorum alan konuları SQL‘den çekmek yeterli. Özetle, bu kodlama aynı zamanda en çok yorumlanan konuları da listelemeniz anlamına geliyor.

Hazırsanız başlayalım.

En çok yorumlanan konuları nasıl gösteririz?

İlk olarak temanızda bu listeyi göstermek istediğiniz alanı seçin. Temanızın bulunduğu dizindeki single.php, sidebar.php veya diğer dosyalardan listelemeyi yapmayı düşündüğünüzü açın ve aşağıdaki kodları ekleyin.

<h2>Popüler Konular</h2>
<ul>

 <?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5");
 foreach ($result as $post) 
 setup_postdata($post);
 $postid = $post->ID;
 $title = $post->post_title;
 $commentcount = $post->comment_count;
 if ($commentcount != 0) ?>
 <li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
 <?php echo $title ?></a> <?php echo $commentcount ?></li>
 <?php ?>

</ul>

SELECT sorgusunun sonundaki 5 rakamı, listelenecek konu sayısını belirtmekte. Bu alanı istediğiniz gibi değiştirebilirsiniz.

Yukarıdakine benzer bir sonuç elde edeceksiniz.

WordPress'te Popüler Konuları Gösterme (Eklentisiz)

Windows'a Mac OS Fare İmleçlerini Ekleyin

“Keşke kullandığım işletim sistemi Mac OS’un ve Windows’un beğendiğim özelliklerini bir arada barındırsa” dediğiniz oldu mu hiç? Özellikle tasarımla meşgul kişilerin cevabı yüksek ihtimal “Evet!” olacaktır.

Bu makalemizde, Mac OS’un fare imleçlerini Windows işletim sistemine ekleyeceğiz.

Windows’a Mac OS Fare İmleçleri

Kimi zaman estetik sebepler kimi zamanda alışkanlıklar sebebiyle bu iki işletim sisteminin imleçleri birbiriyle değiştiriliyor. Eğer siz de her iki işletim sistemini kullanan ve az da olsa bütünlük arayanlardansanız doğru yerdesiniz.

Aşağıdan Mac OS fare imleçlerini indirebilirsiniz.

DOSYAYI İNDİR

Dosyaların Zip Şifresi : adobewordpress.com

Şimdi de Windows’da fare işaretçilerinin nasıl değiştirildiğini hatırlayalım.

Windows’da fare imleçleri nasıl değiştirilir?

İlk olarak Denetim Masasına ulaşıyoruz. Başlat çubuğundan Denetim Masası yazısını tıklayarak bu işlemi yapabilirsiniz.

Sonrasında Fare seçeneğini tıklıyoruz. Açılan pencereden de İşaretçiler sekmesini tıklayarak fare imleçlerini görüntülüyoruz.

Bu bölümde değiştirmek istediğimiz işaretçiyi çift tıklayayarak yeni işaretçilerimizi tanımlıyoruz.

Bu kadar!

Windows'a Mac OS Fare İmleçlerini Ekleyin

WordPress'te Yazılara AdSense Reklamı Yerleştirme

WordPress sitenize AdSense reklamlarını otomatik olarak ekleyen yüzlerce eklenti mevcut. Ancak bazen bu reklamları yazının istediğimiz yerlerine, daha çok ilgi görecekleri yerlere serpiştirmek isteyebiliriz. Hal böyleyken otomasyonlardan ibaret tüm eklentiler beklentilerimizi karşılamıyor. Burada devreye WordPress’in shortcode desteği giriyor.

Bu makalemizde, “WordPress’te yazı içerisinde istediğim alana nasıl reklam eklerim?” sorusuna cevap arayacağız.

Yazı içerisinde istediğim alana nasıl reklam eklerim?

İlk olarak AdSense panelinizinden sitenize custom olarak eklemek istediğiniz reklamı seçin. Biz örneğimizde 728×90 boyutundaki reklam tipini kullanacağız. Örnek kod :

<script type="text/javascript">
google_ad_client = "ca-pub-ABC";
google_ad_slot = "12345678";
google_ad_width = 728;
google_ad_height = 90;
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

Google size üsttekine benzer bir reklam kodu verdi. Şimdi bu kodu WordPress temanıza eklemeniz gerekiyor. Şimdi function.php dosyasını açıyoruz ve aşağıdaki kodları ekliyoruz.

function adsense_728x90() 
return '<script type="text/javascript">
google_ad_client = "ca-pub-ABC";
google_ad_slot = "12345678";
google_ad_width = 728;
google_ad_height = 90;
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> '; 
 
 
add_shortcode('728x90', 'adsense_728x90');

Böylece makalelerimiz içerisinde her [728x90] yazdığımız alanda AdSense’in büyük afiş diye isimlendirdiği reklam tipi gösterilecek.

Reklam Yerleşimin Önemi

Web sayfanızdaki reklam yerleşimini otomatik olarak yönetmeniz iyi bir strateji sayılmaz. Makalelerinizdeki odak alanlarına uygun custom yerleşim yapmanız gelirlerinizin artmasına sebep olacaktır. Bu yüzden WordPress’te yerleşimi customize edebileceğiniz bu tekniği paylaşmak istedik. Belki aşağıdaki makalelerimize de bakmak istersiniz :

Sitenizden Para Kazanın : Google AdSense
Doğru reklam yerleşimi ile AdSense gelirinizi arttırın
AdSense’in Tıklama Başına Maliyet’i (TBM) nasıl arttırılır?

İyi çalışmalar.

WordPress'te Yazılara AdSense Reklamı Yerleştirme

Photoshop ile 3 Boyutlu Yuvarlak Buton

Bu dersimizde Photoshop ile 3 boyutlu yuvarlak butonlar hazırlıyoruz.

Photoshop 3 Boyutlu Yuvarlak Buton PSD Dosyası

Aşağıdan dersin PSD dosyasını indirebilirsiniz.

DOSYAYI İNDİR

Dosyayı yukarıdan indirebilirsiniz.

Video Dersler

Video derslerimizi takip etmek için YouTube kanalımıza abone olabilirsiniz.

Photoshop ile 3 Boyutlu Yuvarlak Buton

CSS ile Mobil Menü

Özellikle mobil uygulamalarda gördüğümüz açılıp kapatılabilir menü örnekleri artık web tarafında da fazlasıyla kullanılıyor. Minimalist tasarımın vazgeçilmezi haline gelen bu yapı, genellikle responsive web sitelerin mobil versiyonlarında navigasyon yükünü sırtlıyor.

Bu makalemizde CSS ve biraz da jQuery desteğiyle açılıp kapatılabilir şık bir menü tasarlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

Açılıp/Kapanır Menü

Bu menü yapısı, tasarımcıya içerik alanında yer kazandırdığı için fazlasıyla kullanışlı.

Yapımında sadece toggle işlemi için jQuery desteğine ihtiyaç duyacağız. İşin geriye kalan tüm kısımlarını HTML ve CSS kodlarıyla hazırlayacağız. İlk olarak HTML kodlarımızı yazarak işleme başlayalım.

HTML Kodları

Örnekte kullandığımız iconları siz de kullanmak istiyorsanız ilk olarak head içerisine Font Awesome‘ı tanıtın.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Daha sonra geriye kalan HTML kodlarımızı ekleyelim.

<div class="mobil-menu">
 <ul>
 <li><a href="#"><i class="fa fa-home"></i> Anasayfa</a></li>
 <li><a href="#"><i class="fa fa-comments"></i> Mesajlar</a></li>

 <li><a href="#"><i class="fa fa-graduation-cap"></i> Eğitim</a></li>
 <li><a href="#"><i class="fa fa-flask"></i> Deneyler</a></li>
 </ul>
</div>
<i class="ac-kapa fa fa-bars"></i>

CSS Kodları

Body elemanına yapmamız gereken birkaç tanım mevcut. Örneğin margin değerini sıfıra çekmemiz gerek. Böylece toggle butonu köşeye yapışacak. Overflow’u ise hidden olarak tanımlayalım, böylece de menü aktif edildiğinde sağa itilen ekran, istenmeyen bir scroll görünüme sebep olmayacaktır. Ve positionu da relative yaparak menünün diğer öğeleri de itmesini sağlayacağız.

body 
 left: 0;
 margin: 0;
 overflow: hidden;
 position: relative;
 background-color:#333

Şimdi menünün tasarımını yapalım.

.mobil-menu 
 background: #111111;
 left: -250px;
 height: 100%;
 position: fixed;
 width: 250px;


.mobil-menu ul 
 border-top: 1px solid #636366;
 list-style: none;
 margin: 0;
 padding: 0;


.mobil-menu li 
 border-bottom: 1px solid #222;
 line-height: 45px;
 padding-bottom: 3px;
 padding-left: 20px;
 padding-top: 3px;
 color:grey;
 text-decoration:none;
 transition:all .6s;


.mobil-menu li:hover 
 background-color:#000;
 color:white;


.mobil-menu li a
 color:inherit;
 text-decoration:none;

Ve son olarak toggle butonunu tasarlayalım.

.ac-kapa
 background-color:white;
 padding:12px 8px; 
 margin:50px 0;
 font-size:110%; 
 border-radius:0 6px 6px 0

jQuery Kodları

Body’nin bittiği yere, </body> tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Şimdi de bu satırın hemen altına açılıp kapanma fonksiyonunu ekleyelim.

var acikmi = 1;
$(".ac-kapa").click(function()
 if ( acikmi == 1 ) 
 $('.mobil-menu').animate(left: '0px', 200);
 $('body').animate(left: '250px', 200);
 acikmi = 2;
 else 
 $('.mobil-menu').animate(left: '-250px',200);
 $('body').animate(left: '0px', 200);
 acikmi = 1;
 
);

Bu kadar!

Kapanış

Biraz konu dışı olacak fakat artık makalelerimizde zorluk seviyesi gösterilmekte. Bu küçük yeniliği de makalenin altına sıkıştırmak istedik

İyi çalışmalar.

CSS ile Mobil Menü

CSS ile Loading Animasyonu (Spinner)

Dijital olan ve elektronik bir cihaz üzerinden çalışan her türden proje kısa da olsa “Yükleniyor…” animasyonuna ihtiyaç duyar. İşin web tarafında da CSS3‘ün gelişiyle GIF ve SWF animasyonlar rafa kaldırılarak yerlerini sadece CSS ile işleyen tasarımlar aldı. Ancak bu CSS kodları da bazen o kadar detaylı ve uzun oluyor ki sıradan bir GIF’den daha ağır çalışıyor.

Bu dersimizde sadece bir div ve birkaç satır CSS kodu ile dönen bir topaç (loading animasyonu) oluşturacağız.

ÖRNEĞİ GÖRÜNTÜLE

Nasıl yapılır?

Günümüz CSS ve HTML teknolojisi ile tasarlayabileceğiniz en basit yükleniyor animasyonunu yapmaya hazır mısınız? HTML kodlarımız ile başlayalım.

HTML Kodları

Sadece bir division ekliyoruz.

<div class="spinner"></div>

Bir şeyleri atlamadınız. HTML kodlarımız sadece bu kadar.

CSS Kodları

İlk olarak spinner öğesinin neye benzeyeceğini, ne büyüklükte olacağını ve dönüş hızını ayarlayalım.

.spinner
 width: 25px;
 height: 25px;
 border-radius: 100%;
 animation-name: spinner .7s linear infinite;
 -webkit-animation: spinner .7s linear infinite;
 -moz-animation: spinner .7s linear infinite; 

Bir kenarı 25 piksel olan bir kare hazırladık. Border-radius 100% tanımı ile de her kenarını yuvarladık. Sonrasında 7 saniyede çizgisel ve sonsuz olarak sürdüreceği spinner isimli bir animasyon ile eşleştirdik. Sırada stil detaylarımız ve pozisyonlamamız var.

.spinner:after
 position: absolute;
 content:'';
 width: 25px;
 height: 25px;
 border-radius: 100%;
 border-top:3px solid tomato;
 border-bottom:3px solid tomato;
 border-left:3px solid tomato;
 border-right:3px solid transparent;
 top: -3px;
 left: -3px;

Ve son olarak spinner isimli animasyonu ekleyelim.

@keyframes spinner
 from transform: rotate(0deg);
 to transform: rotate(360deg);


@-webkit-keyframes spinner
 from transform: rotate(0deg);
 to transform: rotate(360deg);


@-moz-keyframes spinner
 from transform: rotate(0deg);
 to transform: rotate(360deg);

Bu kadar!

CSS ile Loading Animasyonu (Spinner)

CSS ile Üzerine Gelince Dönen Resim

Bildiğiniz gibi artık web tasarımında perspektif planlama yapabiliyoruz. Ayrıca transform tanımıyla da tasarımlarımızı istediğimiz yönde çevirebiliyoruz. Bu teknikler önceleri Flash desteğiyle yaptığımız animatif etkileşimleri HTML5 ve CSS3 ile çok daha hızlı ve performanslı yapmamızı sağlıyor. Daha önceleri de bol bol konuştuğumuz geçiş efektleri sayesinde bu animasyonları daha yumuşak hale de getirebiliyoruz.

Bu dersimizde bütün bu teknikleri bir arada kullanarak güzel bir hover efekti oluşturduk.

ÖRNEĞİ GÖRÜNTÜLE

CSS3 ile üzerine gelince dönen resim nasıl yapılır?

Bu yapı için iki adet görsel hazırlayacağız. Örnekte bir adet resim bir adet yazı alanı oluşturduk. Yazı alanını border-radius ile aynı görselmiş gibi yuvarlak hale getirdik. Bu iki çerçeveyi de absolute şekilde pozisyonlayarak z-index ile hiyerarşik olarak sıraladık. Döndürülecek öğeleri, tetikleyici isimli ayrı bir çerçeve içerisine alarak tasarıma uyarladık.

HTML kodlarımız ile başlayalım.

HTML Kodları

Yukarıda da bahsettiğimiz gibi birbirini kapsayan iki adet çerçevemiz mevcut. Ayrıca onyuz ve arkayuz şekilde isimlendirilmiş yüzeylerimizde tasarım içerisinde yerini alıyor. Bu dizilimde HTML kodları şu şekli alıyor:

<div class="dondurulecekler">
 <div class="tetikleyici">
 <img src="http://www.adobewordpress.com/ads/logo300x300.png" class="onyuz">
 <div class="arkayuz">
 <h1>ADOBEWORDPRESS</h1>
 <hr>
 <p>Adobe program dersleri, WordPress, HTML5 ve CSS3 gibi güncel konuları ele alan Türkçe interaktif eğitim merkezi.</p>
 </div>
 </div>
</div>

Sırada bu kodları şekillendirmek var.

CSS Kodları

İlk olarak çerçevelerimizi ve üstlerine gelince aktifleştirilecek tanımlamaları hazırlayalım.

.dondurulecekler 
	perspective: 1000;


.dondurulecekler:hover .tetikleyici, .dondurulecekler.hover .tetikleyici 
	transform: rotateY(180deg);

Şimdi onyuz tasarımını yapalım.

.dondurulecekler, .onyuz
 width: 300px;
 height: 300px;


.onyuz 
	z-index: 2;
	transform: rotateY(0deg);

Sırada arkayuz tasarımı var. Burada her kenara 50 piksellik padding uyguladığımız için 300 piksel olan genişlik ve yüksekliği 100 düşürüyoruz.

.arkayuz 
 background-color:#5bc0de;
 border-radius:100%;
 text-align:center;
 color:white;
 width: 200px;
 height: 200px;
 padding:50px;
 box-shadow:inset 0px 0px 0px 5px #46b8da;
 transform: rotateY(180deg);

Tetikleyicimizi ve onyuz & arkayuz için ortak tanımları girelim.

.tetikleyici 
 transition: 0.4s;
 transform-style: preserve-3d;
 position: relative;


.onyuz, .arkayuz 
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;

Şimdi arkayuz isimli divisiondaki tasarımları stilize edelim.

.arkayuz h1
 margin:15px 0;
 font-size:20px;
 color:white;
 font-weight:700;


.arkayuz hr
 border:1px solid #46b8da;
 margin:15px 0;


.arkayuz p
 font-size:16px;
 color:white;
 line-height:170%;

Bu kadar.

Kapanış

Bu yapı daha önce hazırladığımız CSS ile SEO ve performans dostu harika resim açıklamaları” isimli makalemizin 2. versiyonu gibi oldu. Daha önce görmediyseniz ona da göz atmak istersiniz.

İyi çalışmalar.

CSS ile Üzerine Gelince Dönen Resim

WordPress'te Menülere Icon Ekleme

Görseller, metinlere kıyasla daha kolay hatırlanabilir tasarım öğeleridir. Örneğin dünyanın her yerinde tuvaleti ifade eden görsel aynıdır.

Ayrıca iconlar universal öğeler oldukları için yabancı sitelerde bile navigasyonu kolaylaştırırlar.

Bu makalemizde WordPress sitenizdeki menülere nasıl icon ekleyeceğinizi anlatacağız.

WordPress’te menülere icon ekleme

İlk olarak eklentiyi kuralım.

Kurulum

Eklenti tamamıyla ücretsiz.

WordPress’e eklentilerin nasıl kurulduğunu kısaca hatırlayalım.

1. Dosyayı indirin ve zip içerisinden çıkarın.


2. Eklenti klasörünü FTP aracılığıyla ‘/wp-content/plugins/’ dizinine upload edin,


3. WordPress admin panelinizden Eklentiler alanına gidip eklentiyi etkinleştirin.

Download Adresi : Menu Icons

Kullanım

Görünüm > Menüler alanından daha önce WordPress sitenize eklediğiniz menüleri görebilirsiniz.

Bu alandan herhangi bir menünün detayını görüntülediğimizde “Icon: Select icon” şeklinde bir seçenek görünür oluyor. Bu araç, menü öğesine bir icon atamamıza yardımcı oluyor.

Icon seçtiğimiz anda sağ tarafta bir önizleme penceresi görünür oluyor. Bu kısımda icon için pozisyon ve punto ayarlamalarını yapabiliyoruz. Ayrıca linklerin öncesine ve sonrasına icon eklememizi de bu alandan seçiyoruz. Bu kadar!

Eklenti Dashicons, Genericons ve Font Awesome icon setlerini içerisinde barındırıyor.

WordPress'te Menülere Icon Ekleme

WordPress'te Resimlere Filigran Ekleme

WordPress sitenizdeki görselleriniz başka siteler tarafından çalınıyor mu? O kadar emek harcayıp hazırladığınız illüstrasyonlar kaynak bile belirtilmeden başka sitelerde mi kullanılıyor?

Sadece bu kadar da değil. Başka siteler, sizin görsellerinizi çağırdığında yapılan işlemin bir kısmının da sizin sunucunuzun bant genişliğinden ödendiğini biliyor muydunuz?

Üzülmeyin. Size yapılan bu haksızlığa dur demek için makalemizin devamına göz atın.

Filigran nedir?

Filigran (watermark), kağıtlara işlenen, ışığa tutulduğunda gözüken resim ve yazılara denir. Bugün dijital ortamda olduğu gibi eskiden de kalpazanlığın önüne geçmek için kullanıldı. Daha güncel tanımıyla, görsellerin üzerine eklenen, genellikle şeffaf yapıdaki bir tip imza modelidir filigran. Görselin yapımcısını ya da ait olduğu kaynağı belirtir. Leonardo Da Vinci eğer Son Akşam Yemeği isimli tablosunun altına koca bir imza atmış olsaydı bu da günümüz dijital medyasında filigran olarak nitelendirilebilirdi.

Örnek filigran

Sağ üstteki siyah kutu Adobewordpress.com’un filigranıdır.

WordPress’te resimlere nasıl filigran ekleyebilirim?

WordPress’in Watermark isimli eklentisi sayesinde htaccess ve php işbirliğiyle görselleriniz üzerine otomatik olarak filigran ekleyebilirsiniz. Bu görsellerinizin orjinalinde hala eskisi gibi olacağı, ancak URL üzerinden erişildiğinde filigran ile gözükeceği anlamına geliyor. Yani sadece yeni yüklediğiniz görseller değil, eski görsellerinizin de üstüne filigran atılacak.

Bir diğer güzel özelliği ise eklentiyi pasifleştirdiğiniz anda herşey eskiye dönüyor.

Bu eklenti htaccess ile çalıştığı için FTP’nizin ana dizininde .htaccess dosyası yoksa oluşturmanız gerekiyor. Aynı şekilde Apache modülü olan “mod_rewrite” yapısının da aktifleştirilmiş olması gerekiyor. Biz bu makaleyi yazarken İngilizce, Fransızca ve İspanyolca dil seçeneklerine sahip olan eklentinin tek kötü özelliği sadece JPG formatlı görseller üzerinde işliyor olması. Ancak yapımcı, yakın zamanda diğer görsel formatlarının da filigran ile işlenebileceğini duyuruyor.

Kurulum

Eklenti tamamıyla ücretsiz.

WordPress’e eklentilerin nasıl kurulduğunu kısaca hatırlayalım.

1. Dosyayı indirin ve zip içerisinden çıkarın.


2. Eklenti klasörünü FTP aracılığıyla ‘/wp-content/plugins/’ dizinine upload edin,


3. WordPress admin panelinizden Eklentiler alanına gidip eklentiyi etkinleştirin.

Download Adresi : Watermark

WordPress'te Resimlere Filigran Ekleme