CSS: Seçiciler (31 ~ 41)

CSS’de seçicilere kaldığımız yerden devam ediyoruz.. Bu dersimizde aşağıdaki seçicileri öğreneceğiz;

  • X:focus
  • X:active
  • X:lang(Y)
  • :root
  • X:empty
  • X:target
  • X:enabled
  • X:disabled
  • X:valid
  • X:invalid
  • ::selection

CSS’de seçicilere kaldığımız yerden devam ediyoruz..
(1~10) Seçicilerine ulaşmak için tıklayın.
(11~20) Seçicilerine ulaşmak için tıklayın.
(21~30) Seçicilerine ulaşmak için tıklayın.

31) X:focus

Seçilen X nesnesine odaklandığında işlem yapmak için kullanılır.

/*
 * Input nesnesine odaklandığında
 * arkaplan regini sarı yapar
 */
input:focus {
    background-color: yellow
}

Tarayıcı DesteğiIE8+, Firefox, Chrome, Safari, Opera

32) X:active

Aktif olan X nesnelerini seçmek için kullanılır.

/*
 * Linkle tıklandığında
 * arkaplan regini sarı yapar
 */
a:active {
    background-color: yellow
}

Tarayıcı DesteğiIE5+, Firefox, Chrome, Safari, Opera

Not: IE5-IE7 sürümlerinde çalışıyor ancak sadece link nesnesi için çalışıyor.

33) X:lang(Y)

X nesnelerinde lang niteliği Y ile başlayanları seçmek için kullanılır.

/*
 * p nesnelerinde lang niteliği tr ile başlayanları
 * seçer ve arkaplan rengini kırmızı yapar
 */
p:lang(tr) {
    background-color: red
}

Tarayıcı DesteğiIE8+, Firefox, Chrome, Safari, Opera

34) :root

Bu seçici &lthtml> etiketi üzerinde işlem yapmamızı sağlar. Kısaca ana nesneyi seçmek için kullanılır.

/*
 * sayfanın arkaplan rengini
 * kırmızı yapar
 */
:root {
    background-color: red
}

Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera

35) X:empty

Hiçbir nesne ve karakter bulundurmayan X nesnelerini seçmek için kullanılır.

/*
 * İçerisinde hiçbir nesne, karakter olmayan
 * divleri seçer ve yükseklik vererek
 * arkplan rengini sarı yapar
 */
div:empty {
    height: 30px;
    background-color: yellow
}

Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera

36) X:target

Hedef olan X nesnelerini seçmek için kullanılır.

/*
 * id'si test olan div nesnesi hedeflendiğinde
 * arkplan rengini sarı renk yapar
 */
#test:target {
    background-color: yellow
}

Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera

37) X:enabled

X form nesnelerinde seçilebilir/yazılabilir olanları seçmek için kullanılır.

/*
 * input nesnelerinde seçilebilir olanların
 * sonrasında gelen labellere arkaplan uygular
 */
input:enabled + label {
    background-color: #eee
}

Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera

38) X:disabled

X form nesnelerinde pasif (işlem yapılamaz) olanları seçmek için kullanılır.

/*
 * Pasif olan input nesnelerinden sonra gelen label
 * nesnelerini seçer ve arkaplan rengini kırmızı yapar
 */
input:disabled + label {
    background-color: red
}

Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera

39) X:valid

X nesnelerinde istenilen formata uyan nesneleri seçmek için kullanılır.
(Sadece form nesneleri için geçerlidir)

/*
 * Geçerli formatta veri girilmiş
 * input nesnelerine işlem yapar
 */
input:valid {
    background-color: green
}

Tarayıcı DesteğiIE10+, Firefox, Chrome, Safari, Opera

40) X:invalid

X nesnelerinde istenilen formata uymayan nesneleri seçmek için kullanılır.
(Sadece form nesneleri için geçerlidir)

/*
 * Geçersiz formatta veri girilmiş
 * input nesnelerine işlem yapar
 */
input:invalid {
    background-color: red
}

Tarayıcı DesteğiIE10+, Firefox, Chrome, Safari, Opera

41) ::selection

Seçilen ifadelerin (arkplan ve yazı renginde) değişiklik yapmak için kullanılır.

/*
 * p nesnelerinde seçilen yazıların
 * arkaplan rengini değiştirir
 */
p::selection {
    background-color: yellow
}
/* firefox için (-moz) ön eki gereklidir */
p::-moz-selection {
    background-color: yellow
}

Tarayıcı DesteğiIE9+, Firefox (-moz), Chrome, Safari, Opera

CSS: Seçiciler (21 ~ 30)

CSS’de seçicilere kaldığımız yerden devam ediyoruz.. Bu dersimizde aşağıdaki seçicileri öğreneceğiz;

  • X:nth-child(n)
  • X:nth-last-child(n)
  • X:nth-of-type(n)
  • X:nth-last-of-type(n)
  • X:only-child
  • X:only-of-type
  • X:first-child
  • X:last-child
  • X:first-of-type
  • X:last-of-type

CSS’de seçicilere kaldığımız yerden devam ediyoruz..
(1~10) Seçicilerine ulaşmak için tıklayın.
(11~20) Seçicilerine ulaşmak için tıklayın.
(31~41) Seçicilerine Ulaşmak İçin Tıklayın.

21) X:nth-child(n)

X nesneleri içerisinde N.yi seçer.

/*
 * Li nesneleri içinde ikincisini
 * seçer ve regini kırmızı yapar
 */
ul li:nth-child(2) {
    color: red
}

Tarayıcı DesteğiIE9+, Firefox 3.5+, Chrome, Safari, Opera

22) X:nth-last-child(n)

X nesneleri içerisinde sondan N.yi seçer.

/*
 * Li nesneleri içinde sondan 1.yi
 * seçer ve regini mavi yapar
 */
ul li:nth-last-child(2) {
    color: blue
}

Tarayıcı DesteğiIE9+, Firefox 3.5+, Chrome, Safari, Opera

23) X:nth-of-type(n)

X nesnelerinde n.yi seçmek için kullanılır. :nth-child’dan farkını öğrenmek için videoya göz atın.

/*
 * Div içerisindeki 2. spanları
 * seçer ve rengini kırmızı yapar
 */
div span:nth-of-type(2){
    color: red
}

Tarayıcı DesteğiIE9+, Firefox 3.5+, Chrome, Safari, Opera

24) X:nth-last-of-type(n)

:nth-of-type ile aynıdır.. Tek farkı sondan başlayarak nesneleri seçmesidir..

/*
 * Div içerisindeki sondan 1. spanları
 * seçer ve rengini kırmızı yapar
 */
div span:nth-last-of-type(2){
    color: red
}

Tarayıcı DesteğiIE9+, Firefox 3.5+, Chrome, Safari, Opera

25) X:only-child

X nesnesi sadece bir tane olanları seçer.. Ancak onun dışında farklı bir nesne bile olmaması gerekir.. Yoksa seçmeyecektir.

/*
 * div içinde bir tane p etiketi (tek nesne) var ise
 * onu seçer ve arkaplan rengini sarı yapar
 */
div p:only-child {
    background-color: yellow
}

Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera

26) X:only-of-type

:only-child seçicisinin aksine, X nesnesi sadece bir tane olan nesneleri seçer.. Farklı nesnelerin olması bu durumu etkilemez..

/*
 * div içinde bir tane p etiketi var ise
 * onu seçer ve arkaplan rengini sarı yapar
 */
div p:only-of-type {
    background-color: yellow
}

Tarayıcı DesteğiIE9+, Firefox 3.5+, Chrome, Safari, Opera

27) X:first-child

İlk X nesnesini seçmek için kullanılır.

/*
 * İlk li nesnesini seçer ve
 * rengini kırmızı yapar
 */
ul li:first-child {
    color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

28) X:last-child

Son X nesnesini seçmek için kullanılır.

/*
 * Son li nesnesini seçer ve
 * rengini kırmızı yapar
 */
ul li:last-child {
    color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

29) X:first-of-type

İlk X nesnesini seçmek için kullanılır. :first-child seçicisinden farklı olarak, tipi eşleşen ilk nesneyi seçer.

/*
 * Divler içinde ilk p nesnesini
 * seçer ve rengini kırmızı yapar
 */
div p:first-of-type {
    color: red
}

Tarayıcı DesteğiIE9+, Firefox 3.5, Chrome, Safari, Opera

30) X:last-of-type

Son X nesnesini seçmek için kullanılır. :last-child seçicisinden farklı olarak, tipi eşleşen son nesneyi seçer.

/*
 * Divler içinde son p nesnesini
 * seçer ve rengini kırmızı yapar
 */
div p:last-of-type {
    color: red
}

Tarayıcı DesteğiIE9+, Firefox 3.5, Chrome, Safari, Opera

CSS: Seçiciler (11 ~ 20)

CSS’de seçicilere kaldığımız yerden devam ediyoruz.. Bu dersimizde aşağıdaki seçicileri öğreneceğiz;

  • X[Y=’Z’]
  • X[Y*=’Z’]
  • X[Y^=’Z’]
  • X[Y$=’Z’]
  • X[Y~=’Z’]
  • X:checked
  • X::before ve X::after
  • X:hover
  • X:not(Y)
  • X::first-letter ve X::first-line

CSS’de seçicilere kaldığımız yerden devam ediyoruz..
(1~10) Seçicilerine Ulaşmak İçin Tıklayın.
(21~30) Seçicilerine Ulaşmak İçin Tıklayın.
(31~41) Seçicilerine Ulaşmak İçin Tıklayın.

11) X[Y=’Z’]

X Nesnelerinde y niteliği z’ye eşit olan nesneleri seçmek için kullanılır.

/*
 * title niteliği test'e eşit olan linkleri
 * seçip yazı rengini kırmızı yapar
 */
a[title='test'] {
    color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

12) X[Y*=’Z’]

X Nesnelerinde Y niteliğinde Z ifadesi geçen nesneleri seçmek için kullanılır.

/*
 * title niteliğinde 'test' ifadesi geçen
 * linkleri seçip yazı rengini mavi yapar
 */
a[title*='test'] {
    color: darkblue
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

13) X[Y^=’Z’]

X Nesnelerinde Y niteliği Z ile başlayan nesneleri seçmek için kullanılır.

/*
 * href niteliği 'http' ile başlayan
 * linkleri seçip yazı rengini kırmızı yapar
 */
a[href^='http'] {
    color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

14) X[Y$=’Z’]

X Nesnelerinde Y niteliği Z ile biten nesneleri seçmek için kullanılır.

/*
 * href niteliği '.net' ile biten linkleri
 * seçip yazı rengini kırmızı yapar
 */
a[href$='.net'] {
    color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

15) X[Y~=’Z’]

X Nesnelerinde Y niteliğinde Z ifadesi geçen nesneleri seçmek için kullanılır. X[Y*=’Z’] seçicisinden farklı olarak Z ifadesi doğrudan bir ifade ise seçilir.. Yani “test” ifadesi geçen nesneleri seçeceksek “testettik” ifadesi içeren bir nesneyi bu seçici ile değil X[Y*=’Z’] seçicisi ile seçebiliriz.

/*
 * Title niteliğinde 'test' ifadesi geçen
 * linkleri seçip rengini kırmızı yapar
 */
a[title~='test'] {
    color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

16) X:checked

X form nesnelerinde seçili olanları seçmek için kullanılır.

/*
 * tipi radio olan inputlarda seçili olandan sonra
 * gelen labeli seçip arkaplan rengini sarı yapar
 */
input[type=radio]:checked + label {  
   background-color: yellow
}

Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera

17) X::before ve X::after

Nesnenin öncesine ve sonrasına bir şeyler eklemek için kullanılır.

/*
 * Liste etiketlerinin öncesine
 * - ifadesini ekler
 */
ul li::before {
    content: '-'
}

/*
 * Liste etiketlerinin sonrasına
 * -son- ifadesini ekler
 */
ul li::after {
    content: ' -son- '
}

Tarayıcı DesteğiIE8+, Firefox, Chrome, Safari, Opera

18) X:hover

Seçilen nesnenin üzerine fare geldiğinde işlem yapılması için kullanılır.

/*
 * Link nesnesinin üzerine fare ile
 * geldiğinde arkaplan rengini sarı yapar
 */
a:hover {
    background-color: yellow
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

19) X:not(Y)

:not seçicisi, değilse anlamına gelmektedir.. Yani bir div seçsin ama sınıfı test değilse gibi..

/*
 * Sınıfı erbilen olan ama id'si test olmayan
 * div nesnelerini seçer ve arkaplan rengini sarı yapar
 */
.erbilen:not(#test) {
    background-color: yellow
}

Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera

20) X::first-letter ve X::first-line

X nesnesinin ilk harfini seçip işlem yapmak için ::first-letter,
X nesnesinin ilk satırını seçip işlem yapmak için ::first-line kullanılır.

/*
 * div nesnesinin ilk harfinin
 * boyutunu 30px yapar
 */
div::first-letter {
    font-size: 30px
}

/*
 * div nesnesinin ilk satırının
 * arkaplan rengini sarı yapar
 */
div::first-line {
    background-color: yellow
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

CSS: Seçiciler (1 ~ 10)

HTML sayfasında nesneleri seçmek için CSS’de bir çok seçici bulunmaktadır.. Sırasıyla tüm bu seçicileri öğreneceğiz ancak bölümler halinde öğreneceğiz.. Bu bölümde aşağıdaki seçicileri öğreneceğiz;

  • * (Evrensel Seçici)
  • #X (ID “Tekil” Seçici)
  • .X (Sınıf Seçici)
  • X Y (Torun Seçici)
  • X (Basit Seçici)
  • X:link ve X:visited (Sözde Sınıf Seçicileri)
  • X + Y (Bitişik Seçici)
  • X > Y (Çocuk Seçici)
  • X ~ Y
  • X[Y] (Nitelik Seçici)

HTML sayfasında nesneleri seçmek için CSS’de bir çok seçici bulunmaktadır.. Sırasıyla tüm bu seçicileri öğreneceğiz ancak bölümler halinde öğreneceğiz.. Bu bölümde aşağıdaki seçicileri öğreneceğiz;

1) * (Evrensel Seçici)

Tüm nesneleri seçmek için kullanılır.

/*
 * tüm nesneleri seçer ve rengini kırmızı yapar
 */
* {
     color: red
}

.. ya da bir nesne içerisindeki tüm nesneleri seçmek için ..

/*
 * divlerden sınıfı erbilen olan divin içindeki tüm nesneleri
 * seçer ve yazıların altını çizer
 */
div.erbilen * {
     text-decoration: underline
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

2) #X (ID “Tekil” Seçici)

Id niteliği x’e eşit olan nesneleri seçmek için kullanılır.

/*
 * erbilen id'li paragrafı seçer ve rengini kırmızı yapar
 */
p#erbilen {
     color: red
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

3) .X (Sınıf Seçici)

Class niteliği x’e eşit olan nesneleri seçmek için kullanılır.

/*
 * erbilen sıınflı a nesnesini seçer ve rengini mavi yapar
 */
a.erbilen {
     color: blue
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

4) X Y (Torun Seçici)

X nesnesinde bulunan Y nesnelerini seçmek için kullanılır.

/*
 * test sınıflı nesne içerisinde bulunan
 * a nesnesini seçip arka plan rengini sarı yapar
 */
.test a {
     background-color: yellow
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

5) X (Basit Seçici)

Herhangi bir niteliği olmayan doğrudan X nesnesini seçmek için kullanılır.

/*
 * a nesnelerini seçip alt çizgilerini kaldırır
 */
a {
     text-decoration: none
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

6) X:link ve X:visited (Sözde Sınıf Seçicileri)

Daha önce tıklanmamış linkler üzerinde işlem yapmak için :link seçicisi kullanılır.
Ziyaret edilen (tıklanan) linkler üzerinde işlem yapmak için ise :visitedseçicisi kullanılır.

/*
 * Tıklanmamış a nesnelerini seçip
 * arkaplan rengini sarı yapar
 */
a:link {
     background-color: yellow
}
/*
 * Ziyaret edilmiş a nesnelerini seçip
 * arkaplan rengini mor yapar
 */
a:visited {
     background-color: purple
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

7) X + Y (Bitişik Seçici)

X nesnesinden hemen sonra gelen Y nesnesini seçmek için kullanılır.

/*
 * ul nesnesinden hemen sonra gelen p nesnesini
 * seçer ve yazı rengini kırmızı yapar
 */
ul + p {
     color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

8) X > Y (Çocuk Seçici)

X Y (Torun Seçici) den farklı olarak, X > Y (Çocuk Seçici) doğrudan X nesnesinin içinde bulunan Y çocuk nesnelerini seçmek için kullanılır.

/*
 * Sınıfı liste olan ul içinde bulunan
 * li çocuk nesnelerini seçip kenarlık ekler
 */
ul.liste > li {
     border: 1px solid #ddd
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

9) X ~ Y

X + Y (Bitişik Seçici)’den farklı olarak bu seçici, X nesnesinden sonra gelen tüm Y (ebeveyn) nesnelerini seçmek için kullanılır.

/*
 * ul nesnesinden sonra gelen p (ebeveyn) nesnelerini
 * seçer ve renklerini kırmızı yapar
 */
ul ~ p {
     color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

10) X[Y] (Nitelik Seçici)

X nesnesine ait Y niteliği bulunan nesneleri seçmek için kullanılır.

/*
 * a nesneleri içerisine title niteliği 
 * bulunanları seçip rengini kırmızı yapar
 */
a[title] {
     color: red
}

Tarayıcı DesteğiIE7+, Firefox, Chrome, Safari, Opera

(11~20) Seçicilerine Ulaşmak İçin Tıklayın.
(21~30) Seçicilerine Ulaşmak İçin Tıklayın.
(31~41) Seçicilerine Ulaşmak İçin Tıklayın.

CSS: Giriş

İlk CSS derslerimi 2011 yılında 14 bölümlük bir seri halinde hazırlamıştım.. Ancak aradan uzun bir zaman geçti ve bir çok şey gelişti, değişti.. Bu sebepten dolayı dersleri yeniden çekmeye karar verdim.. Bu ilk dersimizde ise aşağıdaki sorulara cevap bulacağız;

  • CSS Nedir?
  • CSS Dosyası Nasıl Oluşturulur?
  • CSS Dosyası HTML Sayfasına Nasıl Çağrılır?
  • HTML Sayfasında Inline CSS Nasıl Yazılır?
  • CSS’in Genel Yapısı
  • CSS’de Açıklama Satırı
  • CSS Hataları Hakkında
Okumaya devam et “CSS: Giriş”

Özel radio ve checkbox Butonları Hazırlamak (css/jquery)

Çoğu zaman css’e döktüğümüz tasarımlarda özel radio ve checkbox butonları olmakta. Buda bizim işimizi zorlaştırmakta.. En azından bir çoğumuzun diyelim ???? Hal böyle olunca bu checkbox ve radio butonlarını nasıl özelleştirebiliriz, kendimize göre düzenleyebiliriz bunu sizlere göstermek istedim.. Yararlı olması dileğiyle..

Kaynak Dosyalar

İndirmek İçin Tıklayın

Düzeltme;

radio ve checkbox’ları bir arada kullanabilmek için label’lere class atamamız gerekiyor.. Label içinde checkbox varsa class’ı checkbox, radio ise class’ı radio yaptıktan sonra css dosyalarındaki kodlarıda buna göre düzenlerseniz sorun düzelecektir.. İndireceğiniz örnek dosyalarda ben bu işlemi yaptım, inceleyebilirsiniz.

Css’de gt ve lt seçicileri

Normal şartlarda jquery’de olan gt ve lt seçicileri css’de bulunmuyor.. Ancak css kullanarakta bu işlemleri yapmamız mümkün.. Bu yazımda sizlere bunu göstereceğim.

gt seçicisi

jQuery’de :gt() seçicisi girilen indis değerinden büyük indise sahip nesneleri seçmemizi sağlar.. Yani 5 tane listemiz olduğunu düşünürsek ilk 3’ü hariç diğerlerine işlem yapmak istediğimizde şöyle bir kod uygularız;

$("ul li:gt(2)").css("color","red");

Canlı Demo: http://codepen.io/tayfunerbilen/pen/EjftH

Şimdi bunun aynısını css ile yapalım;

ul li:nth-of-type(3) ~ li {
  color: red
}

Canlı Demo: http://codepen.io/tayfunerbilen/pen/pBdGg

lt seçicisi

jQuery’de :lt() seçicisi girilen indis değerinden küçük indise sahip nesneleri seçmemizi sağlar. Yani 5 tane listemiz olduğunu düşünürsek ilk 3’üne işlem yapmak için şöyle bir kod uygularız;

$("ul li:lt(3)").css("color","red");

Canlı Demo: http://codepen.io/tayfunerbilen/pen/Abdmp

Şimdi bunun aynısını css ile yapalım;

ul li {
  color: red
}
ul li:nth-of-type(3) ~ li {
  color: #000
}

Canlı Demo: http://codepen.io/tayfunerbilen/pen/bKtcH

Evet gördüğünüz gibi, css’de birazcık hile ile bu işlemleri yapabildik ???? Gerçi lt olayı tam anlamıyla sağlıklı çalışmıyor ama yinede ilerisi için ne olur bilinmez ????

Not: ~ ve :nth-of-type(n) seçicileri css3 seçicileri olduğu için sadece modern tarayıcılar desteklemektedir. Gerçi biraz araştırdım ~ ie7 ve üzeri destekliyormuş, onuda ekleyeyim ek olarak ????

CSS ile Dikey Ortalama

Bazen yüksekliği değişken olan bir nesnenin içerisindeki değerleri dikey olarak ortalamamız gerekir.. Normal şartlarda vertical-align ile dikey ortalama yapabilsekte değişken yükseklikte bu işe yaramıyor.. Hal böyle olunca işe yaraması ve her tarayıcıda çalışabilmesi için neler yapmamız gerektiğini kısaca inceleyelim.

Nasıl Yapacağız?

Kapsayıcı nesnemize display: table verip o nesneyi tablo yapacağız.. Daha sonra dikey olarak ortalayacağımız nesneye ise display: table-cell deyip vertical-align: middle ile dikey olarak ortalama işlemimizi gerçekleştireceğiz.. Bunu yapmadığımız taktirde vertical-align görevini doğru olarak yerine getiremiyor.

Hadi Yapalım

<!DOCTYPE>
<html>
<head>
	<title>css dikey ortalama</title>
	<meta charset="utf-8" />
	<style type="text/css">
	.box {
		width: 500px;
		height: 300px;
		background: #111;
		color: #fff;
		display: table
	}
	.box p {
		display: table-cell;
		vertical-align: middle;
		text-align: center
	}
	</style>
</head>
<body>

<div class="box">
	<p>
		burası ortalanacak..
	</p>
</div>

</body>
</html>

Evet artık modern tarayıcılarda dikey ortalama işlemimizi gerçekleştirdik.. Ancak bu şekilde IE8+ üzerinde çalışacaktır.. IE7- ve alt sürümleri için ise (eğer uyumlu hale getirmek istiyorsanız) html yapımızda değişiklik css kodlarımızda ilave yapmamız gerekecek..

IE7 ve alt sürümleri için fix

CSS özelliklerinin IE7 ve alt sürümlerde çalışması için özellik başına #işareti getirilmesi yeterlidir.. # yerine _ işareti getirilir ise IE6 ve alt sürümleri için geçerli bir işlem olur. Bizim sorunumuz IE7 ve alt sürümleri için olduğundan # işareti koyacağız.. Öncelikle html yapımızı şöyle değiştireceğiz;

<div class="box">
	<p>
		<span>
			burası ortalanacak..
		</span>
	</p>
</div>

Gördüğünüz gibi fazladan bir span nesnesi ekledik.. Şimdi geldik css kodlarımızda ki eklemelere;

.box {
	width: 500px;
	height: 300px;
	background: #111;
	color: #fff;
	display: table;
	#position: relative
}
.box p {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	#position: absolute;
	#top: 50%;
	#width: 100%
}
.box p span {
	#position: relative;
	#top: -50%
}

İlk olarak kapsayıcı nesneye position: relative verdik ki içerisindeki nesnelere absolute uyguladığımızda dışarıya kaçmasın. Daha sonra nesne içindeki ilk nesnemize (yani paragraf nesnemize) pozisyon değerleri uyguladık. Ve onun içindeki span nesnesine de tekrar pozisyon değerleri uygulayıp doğru bir sonuç aldık.. Ekstra olarak pozisyon özelliği uyguladığımız için paragraf nesnesi genişliğini içeriğe göre şekillendireceğinden yatay ortalama geçersiz kalıyordu.. Bunu da genişliğini 100% vererek çözdük.

CSS’de Arkaplan Saydamlığı

Bildiğiniz gibi css’de nesneye opacity verdiğimizde, nesnenin içindekilerle birlikte saydamlığı değişiyor.. Ama genelde bize lazım olan, arkaplanın saydamlaşmasıdır.. Bunun için görsel oluşturmakta biraz mantıksızca.. Yine css kullanarak daha basit bir yol ile bu işlemi kolayca yapabiliriz..

Nasıl?

:before ile nesnenin öncesine boş bir içerik ekletip genişlik ve yükseklikdeğerlerini 100% yaptıktan sonra, position değerini absolute yapıp z konumunu -1 yapmalıyız.. Daha sonra nesne öncesine eklettiğimiz içeriğin kapsayıcı nesne içinde kalması için, kapsayıcı nesneye position relativedeğerini vermeliyiz.

Peki ya RGBA?

Normal şartlarda renk şeffaflığı için rgba kullanılabilir.
(Bkz: http://codepen.io/tayfunerbilen/pen/HLGif)
Ancak bu işlem sadece arkaplan rengi için değil, aynı zamanda arkaplan resmi ya da arkaplandaki herhangi bir şey için geçerli olduğundan, rgba bunun yerini tutmuyor ne yazık ki 🙂