Background İmajın Üzerine Gradient Overlay

CSS3 ve pseudo özelliklerin 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”]
<div class="imaj">
<div class="overlay"></div>
</div>
[/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”]
<div class="imaj">
<div class="overlay"></div>
</div>
[/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]

CSS Uzunluk/Ölçü Birimlerini Ne Zaman Kullanmak Gerekir ?

CSS3‘ün de hayatımıza girmesiyle CSS uzunluk veya ölçü birimlerini ne zaman, nerede kullanmak gerektiğini karıştırır duruma geldik. Bir sayfa üzerinde öyle çok birim kullabilir ki, bizi sınırlandıran sadece tasarım olsa gerek.

Aşağıda ne zaman, hangi CSS uzunluk/ölçü birimini kullanacağınızı açıklamaya çalışacağım:

Pixels (px)

Kullanabileceğiniz alanlar; border, sabit genişlikteki tasarımlarda hemen hemen çoğu yazı elementinde, gölgelerde, responsive tasarım yaparken @media içerisinde … diye bir çok noktaya örnek verebiliriz.

Kullanmamanızı gereken alanlar; typography diyebiliriz. Eğer ki CSS reset kullanıyorsanız, orada base font-size’ı belirlerken kullanılabilir.

Percentage (%)

Kullanabileceğiniz alanlar; responsive development yaptığınızda imaj veya konteynırınızda diye örnek verebiliriz.

Kullanmamanızı gereken alanlar; typography diyebiliriz. Eğer ki CSS reset kullanıyorsanız, orada base font-size’ı belirlerken kullanılabilir.

em, ex

Kullanabileceğiniz alanlar; typography, typography ile ilgili element pozisyonlarında ( mesela padding, margin gibi değerler ) veya büyük yapılı bir site yapımı sırasında sistem komplexleşirse em ve ex arasındaki ince çizginin de ayrıca bilinmesi gerekir ki bun bir başka yazıda ele almak çok daha doğru olur.

Points ve Picas

Kullanabileceğiniz alanlar; yazıcı çıktısı almak istediğiniz zamaman oluşturduğunuz CSS’lerde.

Kullanmamanızı gereken alanlar; her yer.

rem

Kullanabileceğiniz alanlar; em ve ex’e göre biraz daha sağlam gerçi ama aynı alanlarda kullanılıyorlar. @media yazımı sırasında kullanabilirsiniz.

Kullanmamanızı gereken alanlar; eğer ki IE8 ve daha önce versiyonları da destekliyorsanız kullanmamanız gerekmekte veya CSS fixleri ile bu durumun üzerinden gelebilirsiniz. 

Viewport (vh & vw)

Kullanabileceğiniz alanlar; responsive typography, bu iş için biçilmiş bir kaftan diyebiliriz. Dikkat etmeniz noktalardan birisi de her responsive genişlik için davrandığı durumu gözlemlemek gerekebilir.

Kullanmamanızı gereken alanlar; her ne kadar bu iş için biçilmiş kaftan desem de, çok yeni olduğundan IE8 ve daha önce versiyonlarda sıkıntılı olabilir veya CSS fixleri ile bu durumun üzerinden gelebilirsiniz.

Inches (in) ve Centimeters (cm)

Kullanabileceğiniz alanlar; yazıcı çıktısı almak istediğiniz alanların CSS değerlerinde. Özellikle de sayfa margin’lerinde kullanılabilir.

Kullanmamanızı gereken alanlar; başka yerde kullanmayınız.

Character (ch)

Kullanabileceğiniz alanlar; aslında pek kullanmadım. İnternetten araştırdığıma göre “monospaced font” kullanımı diyor . Browser desteğine de dikkat etmek gerekir.

Grid (gd)

Kullanabileceğiniz alanlar; deneysel arayüzler olmakla birlikte şu an sadece IE 10 ve üzeri desteği mevcut. 

 

Yukarıda saydığım birimlere ekleme veya çıkarmalarda bulunabilir, sizler de fikirlenizi belirtebilirsiniz.

iOS Scroll Problemi

Geçen yıllara nazaran geçtiğimiz her yıl, mobil aygıtlar ile web sitelerimize daha çok ziyaretçi geldiğinin farkındasınızdır. Bugün izlediğim 1dakika 24 saniyelik bu video sizleri sıkmadan anlatacaktır da … Mobil aygıtlar devreye girince, yazdığımız kodları daha dikkatli yazmak, sadece PC browser’lerinde değil de çeşitli mobil aygıtlardan ( iPad, iPhone … ) da bakmak gerekmekte.

overflow: auto Sorunsalı

Web sayfalarına nazaran, iOS tabanlı mobil cihazlardaki scroll mekanizması farklı işliyor. iOS üzerinde, aşağıya doğru sayfayı kaydırmak istediğimizde hızlıca aşağıya inen sayfa, inmek istediğimiz noktada otomatik olarak yavaşlıyor ve kullanıcının gözünde güzel bir etki yaratıyor. Neyse …

overflow değeri sizlerin de bildiği üzere, konteynır içerisinde bulunan bir element, eğer o konteynır boyutlarını aşıyorsa scroll çıkarıyor. Her şey güzel çalışırken iOS tabanlı mobil aletlerde scroll sıkıntı yaratıyormuş meğersem. Sorunun çözümü ise çok basit:

[code lang=”css”]
overflow-y: scroll;
[/code]

Yukarıdaki değer ile bu sorunu kolaylıkla aşıyoruz.

“-webkit-overflow-scrolling: touch” Özelliği

Yukarıda bahsettiğim iOS tabanlı tarayıcılarda smooth bir şekilde, scroll’un kayması ve sonuna doğru yavaşlaması için CSS‘de bize yardımcı olabilecek kod ise:

[code lang=”css”]
-webkit-overflow-scrolling: touch;
[/code]

Opacity Sorunu: Transparan ve Transparan Olmayan Elementler

Çoğu zaman tasarımlarda transparan elementlerle karşılaşırız. Peki bu elementleri imaj olarak mı kesmek gerekir yoksa CSS yardımıyla oluşturmak gerekir ? CSS ile oluşturmak için temel opacity / transparan kodlarından yardım alırız. Genellikle buton veya kutusal tasarımlarda yarı transparan, arka planın görüldüğü elementleri kolaylıkla entegre ederiz. Ama bir dakika … Buton veya kutuya opacity değerlerini verdiğimizde kutu veya buton içerisindeki yazı / imaj’ların da mı opacity’si değişiyor. Eeee, sadece kutunun değişmesini nasıl sağlayacağız ?

Transparan Bir Kutu Oluşturalım

[code lang=”css”]
<div class="kutu">
<h2>9. ve 10. Sınıfta</h2>
<h3>Anlamadığın konu kalmasın!</h3>
</div>
[/code]

Kutuyu biraz da CSS ile şekillendirecek olursak:

[code lang=”css”]
width: 351px;
height: 236px;
opacity: 0.5;
background: #000;
border: 2px solid #166ca3;
[/code]

Her şeyin tıkırında çalışmasını beklerken kutumuz transparan oluyor, yazıyı da okumada güçlük çekiyoruz. Bu beklediğimiz bir sonuç değildi. Her şey tıkırında çalışması gerekirken, çalışmadı !

Şimdi Hack Zamanı

Neden böyle çaışacağını açıklayacak olursak, bildiğiniz üzere child-element ilişkisi yüzünden en baştaki div’e uygulanan css değerleri, doğal olarak div’in child’ları olan h2 ve h3 elementlerine de uygulanmış oldu. Bu da kutu ve içerisindeki her şeyi transparan yaptı. Peki, h2 ve h3 elementleri div’in içerisinde olmasa ne olurdu ?

Sizin de bildiğiniz üzere, bir element’in başka bir elemt ile aynı alanda bulunması onun child’i olacağı anlamına da gelmiyor. Tam bu noktada CSS‘in nimetlerinden faydalanma vaktidir. Bizim h2 ve h3 elementlerimizi div’imizin üzerine taşırsak bu sorunu hallederiz:

[code lang=”css”]
<h2>9. ve 10. Sınıfta</h2>
<h3>Anlamadığın konu kalmasın!</h3>
<div class="kutu"></div>
[/code]

Kutunun tam üzerine geitirip pozisyonlamak için de CSS‘in yardımını kullanalım:

[code lang=”css”]
h2 {
position: relative;
top: 0;
left:0
}
h3 {
position: relative;
top: 20px;
left:0
}
[/code]

SASS ve Dosya Organizasyonu

SASS ile çalışmanın güzel yanlarından birisi de organize bir yapı oluşması olsa gerek. Önceden, bir sayfa üzerine farklı farklı CSS dosyalarını eklemek hem yönetimi zor, hem de performans açısından ( birden fazla HTTP requesti ) zararlı bir yöntemdi. SASS‘la birlikte birçok farklı bölümleme ile stilleri düzenleyebilecek duruma geliyorsunuz.

Peki SASS ile Bölümleme Ne Demek ?

Bölümleme de neyin nesi diye soracak olursanız, kaynak dosyamızda:

If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file.

İşte bu kolaylık yardımıyla main.scss adı altında bir dosya oluşturabilir, içerisine de istediğiniz kadar bölüm ekleyebilirsiniz. Kendi projemden örnek verecek olursam, anime, mixins, fontface, media, responsive başlıkları altında bir çok küçük scss dosyam mevcut. Eğer responsive yapı ile ilgili bir hata olduğunda direk responsive dosyam üzerinde değişiklik yapıp sorunu halledebiliyorum:

[code lang=”css”]
sass/
_variables.scss
_mixins.scss
_variables.scss
_normalize.scss
_boilerplate.scss
_media.scss
_responsive.scss
[/code]

Eğer yeni bir *.scss dosyası eklemek istersek, hemen aşağıda bulunan main.scss’imize ekliyoruz:

[code lang=”css”]
/*!
* Vitamin v0.1
*
* Copyright 2013 Vitamin
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world by @phyesix
*/

// Core variables and mixins
@import "variables";
@import "mixins";

// HTML5 Boilerplate
@import "normalize";
@import "boilerplate";

// Grid System
@import "inGrid";
@import "anime";
@import "fontface";
[/code]

Çalıştığınız proje boyutu arttıkça doğal olarak böyle ayırarak her bir özellik için spesifik noktalara çok daha kolay ve hızlı bir şekilde gidip zaman kazanabiliyorsunuz. 10.000 satır css dosyasında bir yazının fontunu değiştirmek istediğimizde öyle tek tek aramak yerine direk fontface dosyamızın içerisinde değişikliği yapıp sorunu halletmek ise, paha biçilemez.