En Sevdiğim Css 3 Özellikleri

Gelişen internet kullanımı ve web teknolojileriyle artık web sitelerini basit özelliklerle çok hoş görünümlere büründürebiliyoruz. Hayatımıza yeni giren CSS 3 ise gerçekten kendisine hayran bırakıyor. Öyle güzel kodlar var ki artık neredeyse resim göstermeden css 3 ile istediğimiz şeyleri yapabiliyoruz web sitelerimizde. Bende bugün bazı css 3 özelliklerini ve ne işe yaradıklarını bildiğim kadarıyla sizlere göstermeye çalışacağım. Eminim sizlerde bir çoğunu biliyorsunuzdur ama bilmediğiniz veyahut ismini duyduğunuz ama ne işe yaradığını bilmediğiniz kodlar olabilir:
CSS 3CSS3 aslında kendi içinde belli başlı bölümlere ayrılıyor. Benim bugün göstereceğim css 3 özelliklere çoğunlukla metin özellikli olacak. Hemen bakalım bu özelliklere:

Text Shadow:

Çoğunuzun bileceği gibi bu özellik yazılara gölge vermemizi sağlıyor. Örnek Örnek Kullanım;

.ornek-golge {text-shadow: #555 4px 4px 4px;}

Border Radius:

Bu özellik ise çerçeveyi ovalleştirmeye yarıyor. Benim bu web nimetlerini bilmediğim zamanlarda imdadıma hep roundpic sitesi yetişirdi. Bu sitede herhangi bir resmin köşelerini ovalleştirebiliyordunuz. Ama her istediğimiz resme bunu yapmak hem işkence hemde web sitesinin hızını etkileyecek bir unsurdu. Artık bu siteyi neredeyse hiç kullanmıyorum, bunun yerine border radius özelliği güzel bir çare oldu. Örnek Örnek Kullanım;

.ornek-ovallestirme {-webkit-border-radius: 10px 11px 12px 13px;-moz-border-radius: 10px 11px 12px 13px;border-radius: 10px 11px 12px 13px;}

Font Face:

Bu özellik çok popüler olan bir css 3 özelliği. Öyle ki cufon font yerine artık bu yöntem tercih ediliyor. Örnek Örnek Kullanım;

@font-face {
    font-family: 'Font Name';
    src: url('../font/fontismi-webfont.eot');
    src: url('../fonts/fontismi-webfont.eot?iefix') format('eot'),
         url('../fonts/fontismi-webfont.woff') format('woff'),
         url('../fonts/fontismi-webfont.ttf') format('truetype'),
         url('../fonts/fontismi-webfont.svg#webfontjSpbZQRv') format('svg');
    font-weight: normal;
    font-style: normal;}
h1 {font-family: 'Font İsmi', 'fallback font', serif;}

Transition:

Bu özellikte yine son dönemlerde sık çıkar oldu karşımıza. Bende dahil birçok web sitesinde görmek mümkün. Özelliği ise fare imleci üzerine geldikten kısa bir süre sonra kendini belli etmesi ve fare imlecini çektiğimizde yine kısa bir süre sonra belirginliğinin kaybolması. Tabi ki değerleri değiştirerek efektin uzunluğuu veya kısalığını ayarlayabilirsiniz. Bunun örneğini sitemin alt kısmındaki sayfalama kısmının üzerine geldiğinizde görebilirsiniz.Örnek Kullanım;

.ornek-transition {background-color: red;-webkit-transition: background-color linear .8s;-moz-transition: background-color linear .8s;-o-transition: background-color linear .8s;transition: background-color linear .8s;} .ornek-transition:hover {background-color: blue;}

Rotate:

Bu özellik ise belli bir çerçevenin yönünü değiştirmemize yarıyor. Örnek Örnek Kullanım;

.ornek-dondurme {-webkit-transform: rotate(-5deg);-moz-transform: rotate(-5deg);-o-transform: rotate(-5deg);-ms-transform: rotate(-5deg);transform: rotate(-5deg);

Multiple Column:

Bu özellikte yazdığınız yazıları alt alta değil de yan yana yazmanızı yazıyor. Ve yazı yazarken araya çekilen yazı hem düzgün bir görüntü hemde okunmayı kolaylaştırıyor. Örnek Örnek Kullanım;

.ornek-ayirma {-webkit-column-count: 3;-webkit-column-width: 75px;-webkit-column-gap: 20px;-webkit-column-rule: 1px solid #fff;-moz-column-count: 3;-moz-column-width: 75px;-moz-column-gap: 20px;-moz-column-rule: 1px solid #fff;-o-column-count: 3;-o-column-width: 75px;-o-column-gap: 20px;-o-column-rule: 1px solid #fff;column-count: 3;column-width: 75px;column-gap: 20px;column-rule: 1px solid #fff;}

Box Shadow:

Son özelliğimiz box shadow. Bu özellikte yaptığınız bir çerçevenin içine gölge veriyor. Örnek Örnek Kullanım;

.ornek-kutu-golge {-webkit-box-shadow: #000 5px 5px 10px 3px inset;-moz-box-shadow: #000 10px 10px 10px 3px inset; /* color, h-offset, v-offset, blur, spread */ box-shadow: #000 10px 10px 10px 3px inset; /* inset is optional */}

Şimdilik bu kadar olsun arkadaşlar. Bunlar daha hiçbir şey aslında. Ben en çok kullanılanları yazmak istedim. Bunun gibi niceleri var burada anlatamadığım. Kullanımını merak ettiğiniz veya sık kullanılan css 3 özelliklerini sizlerde burada paylaşabilirsiniz, kolay gelsin..

Bu yazıdan önce yazmış olduğum "Sorularla {mim}" başlıklı yazımı da okumanızı tavsiye ederim.

Herkese Merhabalar, ben Enes İLHAN. Gaziantep'te doğdum, Adana'da Büro Yönetimi ve Yönetici Asistanlığı bölümünü okudum ve 2012'de mezun oldum. Askerliğimi uzun dönem olarak, { acemiliği Ankara/Mamak'ta , usta birliğini ise Hatay/İskenderun'da } yapıp bitirmiş bulunmaktayım. Şimdi ise hayata atılmanın çabası içerisine girmiş bulunmakta olup iş bulma derdindeyim.

3 yorum

  1. Ahmet Çetintaş   •  

    Benim de severek kullandığım özellikler hepsi. Gerçekten güzel ve faydalı bir konu olmuş eline sağlık.

    • Enes ILHAN   •     Yazar

      Teşekkür ederim hocam. Öğrendikçe paylaşmaya devam edeceğim inşallah.

  2. kralizasyon   •  

    Transition ile ortaya çok güzel şeyler çıkabiliyor.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir