Reset CSS Kullanımı

Eric Meyer’in reset.css’ini kullanıyorum. Ancak bazı kısımları hatalı, mesela gitmiş strong’u em’yi sıfırlamış ne eğik yazılıyor ne kalın.. Ee ne anladım o işten 😀 Eric reyiz bize yanlış yaptı, bende onun reset.css’ini biraz düzenledim. Böylesi daha tatlı oldu.

Not: Mevcut tüm reset.css’lere aşağıdaki bağlantıdan ulaşabilirsiniz.
http://www.cssreset.com/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, select, textarea, button,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
    text-decoration: none;
}
img {
    border: 0;
}
:focus {
    outline: 0;
}
.clear {
    clear: both;
}

CSS Grayscale Özelliği (Tüm Tarayıcılarla Uyumlu)

CSS ile bir nesnenin görünümünü gri tonda yapabilmemiz mümkün. Aslında gri ton bu özelliğin sadece bir değeri 🙂 Her neyse, lazım olur diye bende bloğumda paylaşıyorum.. Örneğin resme grayscale özelliğini vermek için graysale adında bir class ekleyelim. Daha sonra css’de bu class’ı tanımlayalım.

.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Android için Firefox */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

kullanırken ise şöyle kullanıyoruz.

<img src="images/logo.png" class="grayscale" alt="" />

Grayscale olan bir nesneyi tekrar eski haline getirmek istersekte kodlarımız şöyle olacak;

.grayscale.disabled {
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
   -webkit-filter: grayscale(0%);
}

yani nesneye disabled classınıda ekledik mi kaldırmış oluyoruz 🙂

teşekkürler: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html

CSS ile Çevirme (Flip) Animasyonu Yapalım

Fare ile üzerine geldiğimizde yatay ya da dikey olarak çevrilen ve ön arka yüzleri olan animasyonları nasıl yapacağımızı bu derste öğreneceğiz. Yararlı olması dileğiyle..

İlk olarak html yapımızı oluşturalım;

<div class="flipper">
    <div class="flip-content">
    
        <!-- ön yüzü -->
        <div class="front">
          ön yüzü 🙂
        </div>
    
        <!-- arka yüzü -->
        <div class="back">
          arka yüzü 🙁
        </div>
    
    </div>
</div>

İlk olarak nesnelerimize genişlik ve yükseklik verelim;

.flip-content, .front, .back {
     width: 300px;
     height: 300px
}

Şimdi ise dönüş hızını ayarlayalım;

.flip-content {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative
}

ön ve arka yüze position değerleri verelim, daha sonra dönüş esnasında arka yüzü gizleyelim;

.front, .back {
     position: absolute;
     top: 0;
     left: 0;
     backface-visibility: hidden;
     background-color: #eee
}

Ön yüzün önde durması için z-index değerini artıralım;

.front {
     z-index: 1
}

arka yüzü y ekseninde 180 derece döndürelim;

.back {
     transform: rotateY(180deg)
}

Ve şimdi nesnenin üzerine geldiğimizde ön yüzü gizleyip arka yüzü ön plana çıkartalım;

.flipper:hover .flip-content {
     transform: rotateY(180deg)
}

Son olarak daha iyi bir dönüş için perspektifini ayarlayalım;

.flipper {
    perspective: 1000px
}

İşte bu kadar 🙂 Demoya göz atabilir, kaynak dosyaları indirip inceleyebilirsiniz.Not: Tarayıcı uyumluluğu için prefixleri eklemeyi unutmayın. Tek tek uğraşmak yerine prefixfree eklentisini kullanabilirsiniz;
https://leaverou.github.io/prefixfree/

Dikey Çevirme

Eğer yatay değilde dikey olarak çevirmek isterseniz aşağıda şekilde değiştirmeniz yeterli;

.back {
    transform: rotateX(180deg)
}
.flipper:hover .flip-content {
    transform: rotateX(-180deg)
}

Eksi değerini kaldırırsanız tam tersi dikey çevirme olacaktır.

IE7 Float Sorunu ve Çözümü

Bu sorunla bir çok kez karşılaştım.. Sorun nesneye verdiğimiz float’tan kaynaklı olarak kaymaya yol açıyor. Önce bir örnek göstereyim..

Html kodlarımız;

<div class="test">
	Tayfun Erbilen: <img src="resim.jpg" alt="" height="60" />
</div>

CSS kodlarımız;

.test {
	width: 200px;
	border: 1px solid #ddd;
	overflow: hidden;
	padding: 10px
}
.test img {
	float: right
}

Sonuç;

Çözüm

Çözüm basit. Float uyguladığımız nesneyi başa alacağız.. Yani yazıdan öncesine ekleyeceğiz. Yani;

<div class="test">
	<img src="resim.jpg" alt="" height="60" /> Tayfun Erbilen:
</div>

Ve sonuç;

Evet bir sorunun daha üstesinden gelmiş olduk 🙂 IE ile bol dertli günler.

CSS ile Yazı Seçimini Engellemek (user-select)

Eğer touch ekranlar için CSS kodlaması yapıyorsanız, böyle bir sorunla karşılaşabilirsiniz.. Özellikle makinalar dandik ve kullanan kişilerde bu işi bilmeyenlerden ise gereksiz tıklamalar ile nesne içerisindeki değerleri seçeceklerdir.. Bunun olmasını önlemek için CSS imdadımıza yetişiyor.. Tüm modern tarayıcılarda ve IE10 olmak üzere ön ekler ile birlikte kullanıldığında herhangi bir sorunla karşılaşmıyorsunuz.. Bu işlem için user-select değerini none yapmamız yeterli.

Tüm elemanlara uygulamak için gerekli CSS kodu;

*:not(input):not(textarea) {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none
}

Ya da bazı belli başlı elemanlara uygulamak için onlara unselectable adında bir sınıf atayabilir ve bu sınıf için bu kod tanımlamalarını yapabilirsiniz;

.unselectable {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none
}

IE9 ve Altı İçin Çözüm

CSS ile bir çözümünü bulamadım.. Ancak html niteliği ve javascript ile çözümleri mevcut.. Seçilemez olmasını istediğiniz nesneye unselectable=”on” eklemeniz yeterli olacaktır.

<div unselectable="on">
bu yazı artık ie9 ve altı için seçilemez hale geldi!
</div>

Ya da javascript ile yapmak istersek setAttribute() ile niteliği ekleyebiliriz.

<div id="nesne">
bu yazı artık ie9 ve altı için seçilemez hale geldi!
</div>
<script type="text/javascript">
document.getElementById("nesne").setAttribute("unselectable", "on");
</script>

Evet işte bu kadar, artık nesneler içerisindeki yazılar seçilemez oldu 🙂

IE7 z-index Hatası ve Çözümü

IE7’ye uygun tasarımlar dökmeye çalışıyorsanız, bu tarz sorunlarla muhakkak karşılaşıyorsunuzdur.. Bir türlü z konumunu yükselttiğiniz değer bir diğer nesnenin üzerine çıkmıyordur.. Bu sorunun sebebi z-index verdiğiniz nesnenin üst nesnelerinden birisine position uygulamanızdan kaynaklıdır. Yani bu mantıkla baktığımızda IE7 z-index uygulanacak nesnenin üst nesnelerinde position olmasını kabul etmiyor. Küçük bir örnek vermek gerekirse;

Burada hakkımda menüsünün üzerine gelince açılan bir alt menüsü mevcut.. Şuan tüm tarayıcılarda arama kutusu açılan menünün üzerine çıkmış durumda.. Şimdi z-index değerini açılan ul nesnesine verelim.. Örneğin z-index: 1 ekleyip deneyelim;

Evet şuan IE7 hariç diğer tüm tarayıcılarda (muhtemelen) açılır menü yukarıya çıktı. Ancak IE7’de ne hikmetse hala altta 🙂 Bunun sebebi en başta da dediğim gibi ul’nin üst nesnesi olan li’de position değeri olmasından kaynaklanıyor. Burada li’nin position değerini silemeyeceğimize göre ul’ye verdiğimiz z-index değerini li’ye vermemiz gerekecek. Yani IE7 ve diğer tarayıcılar için uyumlu hali;

Bir başka iğrenç IE hatasında görüşmek üzere 🙂

CSS calc() Fonksiyonu

Bilmeyenler için css‘de özellikle modern dökümler yaparken çokça kullandığım calc() fonksiyonundan bahsetmek istiyorum..

Nedir?

Css’de matematik hesapları yapmak için kullanılır.. İçerisinde değerler toplanabilir, çıkartılabilir, bölünebilir, çarpılabilinir..

Nerede, Ne İçin Kullanılır?

Aslında kullanım yeri çook fazladır.. Öyle ki bu css fonksiyonunu sonradan keşfetmem bile benim için üzücü oldu 🙂 En basit örnek vermek gerekirse.. Sağ ve Sol adlı iki nesnemiz olsun.. Sağ bölümün genişliği sabit, sol bölümün ise yüzdeli.. Buna göre bu 2 nesneyi kolayca nasıl yanyana getirebiliriz? Elbette cevap belli .

Birkaç Basit Örnek Kullanımı

div {
    width: calc(100% - 200px); /* 100%'ün 200px küçüğü */
}
a {
    font-size: calc(2 * 15px);
    /* önek kullanımı */
    font-size: -webkit-calc(2 * 15px)
}

Tarayıcı Desteği

Internet Explorer – IE9 ve üzerisi için geçerlidir.
Firefox – 15.0 sürümünden öncesi için -webkit- öneki ile birlikte kullanılıyor. Ancak 15.0 sonrası için kullanılmasına gerek yok. (Not: Şuanki sürümü 24.0 siz düşünün)
Chrome – 25.0 sürümünden öncesi için -webkit- öneki ile birlikte kullanılıyor. Ancak 25.0 sonrası için kullanılmasına gerek yok. (Not: Şuanki sürümü 30.0 siz düşünün)
Safari – 6.0 ile birlikte kullanılmaya başlanıldı. Ancak -webkit- öneki olmak şartıyla. Şuan 7.0 sürümünde önek olmadan kullanılabilinir.
Opera – 15.0 sürümü ile birlikte geldi. Önek olmadan kullanılabilinir.
Daha fazla tarayıcı desteği için tıklayın!

Dış Kaynaklar

Şunlarada bakmanızda fayda var;
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
http://www.w3.org/TR/css3-values/#calc

IE7’de Overflow Hidden Sorunu

Bu sorunla bir çok kez karşılaştım.. Hep bir şekilde çözdüm ancak sorunun tam olarak neden kaynaklandığını ve nasıl çözdüğümü bir türlü bulamıyordum.. Neyse ki bu gece buna bir son verdim ve adam akıllı sorunu anladım, çözdüm ve mutluyum  Şimdi bu sorun nasıl oluşuyor önce ondan bahseseyim..

Sorun nasıl oluşuyor?

Normal şartlarda kapsayıcı nesneye overflow: hidden verdiğinizde belirlediğimiz genişlik ve yükseklikten taşan her şeyi gizlemesi gerekir.. Bir yere kadar bu şekilde gizleniyor.. Ancak kapsayıcı nesne içindeki nesnelerden herhangi bir tanesine position tanımı yapılırsa.. İşte o zaman işin rengi değişiyor! O zaman taşınca gizlemesi gereken ie, gizlemekten vazgeçiyor.. Bu sorun IE7 ve muhtemelen alt sürümleri için geçerli.. IE8‘de böyle bir sorun yok.

Çözümü nedir?

Çözümü basit, overflow: hidden verdiğimiz kapsayıcı dive birde position: relative tanımı yapmamız yeterli.. Böylece taşan position tanımlı bir nesne bile olsa gizlenecektir. Kısaca şöyle bir kod yapımız olduğunu düşünürsek;

<div class="box_container">
    <div class="box"></div>
</div>

Bunun ie7 ve alt sürümlerinde gizlenmeyen css kodları şöyledir;

.box_container {
    width: 300px;
    height: 100px;
    overflow: hidden;
    border: 1px solid green
}
.box {
    width: 100px;
    height: 200px;
    border: 1px solid red
}

Ve çözümü ise .box_container’a position: relative tanımını yapmaktır. Yani;

.box_container {
    width: 300px;
    height: 100px;
    overflow: hidden;
    border: 1px solid green;
    position: relative
}
.box {
    width: 100px;
    height: 200px;
    border: 1px solid red
}

Ve işte hepsi bu kadar! ie7 ve alt sürümlerinde çalışan demosuna aşağıdan ulaşabilirsiniz..