Hemen her tasarımda kullanılan detaylar için küçük CSS ipuçları…

Metinlere gölge vermek

Özellikle yakın renklerdeki arka plan ve metinler için kullanıldığında işimize çok yarayacak bir özellik.

text-shadow: 2px 2px 2px #000;

CSS ile metinlere blur efekti vermek

Bu basit CSS kodu ile metinlere transparanlık ve gölge vererek blurlanmış şekilde görünmelerini sağlıyoruz.

.blur{  
color: transparent;  
text-shadow: 0 0 3px rgba( 0, 0, 0, 0.5);  
}

Site açılışına yükleniyor ibaresi eklemek

Bu CSS kodunu body etiketine ekleyerek site açılırken yüklendiğini belli eden gif’ler ekleyebiliriz.

body:before {
    content: url(images/hover3.gif);
    display:none;
}

Gradient metinler oluşturmak

HTML5 ile gelen yeniliklerden bir tanesi de metinlere geçişli renk efekti uygulamak, aşağıdaki kod parçası ile yapabiliyoruz.

h1 {
  font-size: 20px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Imajlara opacity vermek

Güncel tüm browserlarda çalışan bu özelliği sadece yoğun kullanımından ötürü ie8 ve öncesine göre ayrı bir kod yazarak düzenleyebiliyoruz.

img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

Birden çok arka plan kullanmak

Ara yüz kodlamasında işimizi oldukça kolaylaştıran bu özellik ile birden çok arka plan atıyoruz, arka planların konumlarını da belirleyerek iç içe div yazmaktan kurtuluyoruz.

#Multiple-Backgrounds {
width: 500px;
height: 250px;
background: url(decoration.png) left top no-repeat, url(ribbon.png) right bottom no-repeat, url(old_paper.jpg) left top no-repeat;
}

Internet Explorer’da kullanılan textarea’larda ki scrool’ları silmek

IE her zamanki gibi ek kodlara ihtiyaç duymakta.

textarea {
overflow:hidden;
}

Bizi Facebook üzerinden takip ederek güncellemelerden haberdar olabilirsiniz…
Facebook sayfamız: https://www.facebook.com/renklisayfatasarim

SVG bir çeşit vektör imaj formatıdır. Kullanımı oldukça kolay olan SVG web sitelerinde çeşitli avantajlar sağlamaktadır. Bunlardan tek görselin farklı boyutlarda ve renklerde kullanımını bu makalede öğrenebilirsiniz.

SVG nedir?

Tam adı Scalable Vector Graphics (Ölçeklenebilir Vektör Grafikleri) olan bu format Adobe Illıustator ile üretilmektedir.

Neden SVG kullanmalıyım?

Bu sorunun cevabını birkaç madde ile özetlersek:

• Küçük dosya boyutuna sahip olması,
• Büyük kullanımlarda vektörel yapısından ötürü düzgün görünmesi,
• Retina display ekranlarda başarılı görünümü,
• Etkileşim ve filtreler ile tasarım yapılırken kod desteği ile kontrol edilebilmesi.

SVG ile çalışmaya başlamak

Adobe Illustrator ile herhangi bir çizim yapıyoruz. Bu dosyayı kaydederken seçeneklerden SVG formatını seçiyoruz ve aşağıdaki gibi aşağıdaki seçeneklere göre kaydediyoruz.

<img> etiketi ile SVG’nin kullanımı

<img src="bulut.svg" alt="bulut isimli görsel">

Bu kullanımda dosya boyutunuz ne ise onu alacaktır, dosya boyutunu ayarlamayı css dosyasından aşağıdaki şekilde yapabilirsiniz.

See the Pen pbsFB by ozgur ozcirpan (@renklisayfa) on CodePen

SVG formatında browser desteği

Başta Internet Explorer kullanıcıları olmak üzere çok sayıda internet kullanıcısı güncel olmayan browser kullanmakta, güncel olmayan browser’ların desteklemediği SVG için alternatif kullanım şu şekilde.


<img src="bulut.svg" onerror="this.onerror=null; this.src='bulut.png'">


Background Image olarak SVG kullanımı

bulut-bg isimli bir CSS class oluşturarak içine SVG dosyamızı background olarak atıyoruz, ayrıca background-size ile de arka plandaki svg dosyamızın boyutunu belirleyebiliyoruz, arka plan ile ilgili tüm CSS kodları SVG içinde kullanılabilinmektedir.

Buradan kullanım örneğine bakabilirsiniz.

See the Pen fbsEj by ozgur ozcirpan (@renklisayfa) on CodePen

Browser Desteği

SVG desteklemeyen browser’lar için arka planda SVG kullanmak “no-svg” class’ı ile mümkün, aşağıdaki örnekte olduğu gibi CSS dosyamızı oluşturursak, bu sorunu aşabiliriz.


.bulut-bg {
background: url(bulut.svg) no-repeat top left;
background-size: contain;
}

.no-svg .bulut-bg {
background-image: url(bulut.png);
}


SVG dosyasını CSS ile optimize etmek

SVG formatının en önemli diyebileceğimiz özelliği onun farklı renklerde kullanımıdır, özellikle ikonlarda kullanılabilecek bu özellik ile aynı ikonu tasarımdaki renklere göre farklı alternatiflerde kullanabilirsiniz.

Bunun için HTML, dosyasının içerisinde SVG konutunu kullanacağız. Bu komutu almak için CHROME’dan destek alabiliriz. Elinizdeki SVG dosyasını CHROME ile açıp, kodları görüntülerseniz orada “SVG” ve “PATH” etiketlerini görebilirsiniz. Bu kodu kopyalayarak SVG’yi kullanacağınız HTML dosyasına yapıştırmanız yeterli.

HTML dosyasını tamamladıktan sonra CSS ile renk vermek için “FILL” class’ını kullanacağız.

Son işlem ise HTML dosyasındaki “PATH” etiketine oluşturduğumuz class’ı atamak.

Aşağıda örneğini görebilirsiniz.

See the Pen rvmCs by ozgur ozcirpan (@renklisayfa) on CodePen

Bizi Facebook üzerinden takip ederek güncellemelerden haberdar olabilirsiniz…
Facebook sayfamız: https://www.facebook.com/renklisayfatasarim