CSS Renk İsimleri

CSS Colors

Web tasarımında hex, rgb veya kelime bazlı renk tanımlamaları yapabiliyoruz. Özellikle işin CSS kısmında color, background-color, border-color, text-shadow ve türevi onlarca tanımlama içerisinde bu renk kalıplarını kullanabiliyoruz. Bu makalemizde tüm renk tanımlamalarını kod satırlarıyla birlikte paylaşacağız.

17 standartlaşmış renk tanımlaması, 123 sonradan eklenen olmak üzere toplam 140 adet renk tanımlamamız mevcut. Söz konusu standart tanımlamalar şu şekilde : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

Birlikte listeyi genişletelim. (daha&helliip;)

Devamını Oku


Dreamweaver’ın kod panelini renklendirelim!

Dreamweaver Theme

Kod yazarken sağladığı avantajlar ve kolaylıklar sebebiyle Dreamweaver günümüz en popüler editörlerinden birisi. Programın temel tasarımı gri ve beyaz tonlamalarından oluşmakta. Adobe‘un bu renk tercihleri, başında saatler geçiren kişiler için özel olarak seçilmekte. Odak kaybı ve göz yorucu olabilecek tüm işleme ve renklendirmeler her güncelleme ile azaltılıyor.

Hal böyleyken Adobewordpress olarak sizlere alternatif bir Dreamweaver CS6 kod paneli teması sunmak istedik. (daha&helliip;)

Devamını Oku

WordPress’in yönetici panelini renklendiriyoruz!

Admin Color Schemer

2013 yılında gelen radikal güncellemeler sadece WordPress’in altyapısını değil, arayüzünü de büyük oranda değiştirdi.

Bildiğiniz gibi yönetici panelinde (wp-admin) bulunan Kullanıcılar > Profiliniz alanında artık daha fazla arayüz renklendirme seçeneği mevcut. Fakat çeşitliliği arttırmak istediğimizde WordPress kendi renklendirmemizi yapmamıza izin vermiyor. Özellikle her yazarına farklı arayüz sunmak isteyen WordPress kullanıcıları bu isteklerini resmi forumlarda dillendirmekte. Çözüm mü? Gayet basit.

Bu makalemizde sizlere Wp-admin’i nasıl özgün bir şekilde renklendirebileceğinizi anlatacağız. (daha&helliip;)

Devamını Oku

CSS ile Yumuşak Geçişli Arka Planlar

CSS3’ün gradient özelliği ile dikkat çekici arka planlar hazırlamak mümkün.
CSS Awesome Gradient
Renk geçişleri için genelde büyük boyutlarda JPG ve PNG dosyaları kullanılır. Bu da web sayfanızın aşırı yavaşlamasına sebep olabilir. CSS Gradient sayesinde oluşturacağımız renk geçişleri performans açısından görsel dosya formatlarından fazlasıyla önde.

Şimdi ilk bu yeni özelliği tanıyalım, sonra ise birkaç kaliteli örnek üzerinde çalışalım. (daha&helliip;)

Devamını Oku

Photoshop ile Renkli Yazı Efekti

Rainbow Text Effect

Bu makalemizin konusu renkli bir yazı efekti. Photoshop ile birkaç dakikada hazırlayabileceğiniz bu yazı tasarımı sunumlarınız için gayet şık bir tercih olabilir.

Başlayalım

Photoshop’u açtıktan sonra istediğimiz boyutlarda yeni bir çalışma alanı oluşturuyoruz. Ben 690×235 piksel boyutlarında çalışacağım. Açtığımız yeni çalışma alanının arkaplan rengini siyah olarak ayarlayabilirsiniz. Burası sizin tercihiniz.

 

(daha&helliip;)

Devamını Oku

CSS ile Basılabilen 3 Boyutlu Buttonlar


CSS ile birçok button hazırladık. Fakat yukarıda gördükleriniz basılma hissiyatını en çok verenler.

Box-Shadow ile hem 3 boyut hem de basılma efekti oluşturacağız. Yani buttonu tasarlarken bir yandan da hover için alt yapı oluşturmuş oluyoruz. Bu şu demek oluyor; 50% daha hızlı yüklenen buttonlar ve aynı oranda artan performans.

“Bu makalede hazırlayacağımız buttonlar performans-tasarım açısından en iyiler listemde.”

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

CSS Gradient Arkaplan ve Performans

CSS in background kod satırı içerisinde desteklenen onlarca arka plan türü var. Bu yazımda ise gradient (renk geçişlerini) türünü konuşacağız.

Görsel sıkıştırma üzerine konuştuğumuzda renk geçişleri içeren bir objenin dosya boyutunun yüksek olduğundan bahsetmiştik. Hele ki bu görsel zıt tonlamalar arasında geziyorsa onu yayınlamak hem sunucunuzu hem de ziyaretçinizi fazlasıyla rahatsız eder.

CSS ise bunu farklı bir yolla yapıyor. Rengin atanması ve gradient olarak arka plana yerleşmesi kişinin siteyi ziyaret ettiği bilgisayarda işlenmekte ve bant genişliğini rahatsız etmemekte. (daha&helliip;)

Devamını Oku