CSS3 ve **pseudo özellikler**in hayatımıza girmesi ile daha kolay kod yazmaya başladık. Bu yazıyı yazmadan önce herhangi bir imaja ekstradan div ekleyerek bunu çözüyordum. Örnek verecek olursam:

[code lang=“css”]

[/code] [code lang=“css”] .imaj { width: 100%; height: 100%; background: url(‘/img/imaj.jpg’) center center no-repeat; background-size: cover; position: relative; } .overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: linear-gradient(to bottom right,#002f4b,#dc4225); opacity: .6; } [/code]

Şimdi ekstradan eklediğimiz ‘div’imizi silip ( overlay class’ına sahip olan div )  onun yerine :after pseudo elementi yardımıyla aynı şeyi gözlemleyebileceğiz. Eeee, bunu neden yapıyoruz ki ne olacak diye soracak olanlara da aslında daha az HTML elementleri veya class tanımlamalarıyla uğraşmak yerine tek çatı altında düzenli olarak toplayarak kodumuzun daha güzel görünmesini sağlıyoruz. Şimdi son halini örnek verecek olursam:

[code lang=“css”]

[/code] [code lang=“css”] .imaj { width: 100%; height: 100%; background: url(‘/img/imaj.jpg’) center center no-repeat; background-size: cover; position: relative; } .imaj:after { content: ”; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom right,#002f4b,#dc4225); opacity: .6; } [/code]

Hele hele SASS kullanıyorsanız tadından yenmeyecek hale geliyor:

[code lang=“css”] .imaj { width: 100%; height: 100%; background: url(‘/img/imaj.jpg’) center center no-repeat; background-size: cover; position: relative;

&:after { content: ”; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom right,#002f4b,#dc4225); opacity: .6; } } [/code]