CSS3 Nedir? Gelen Yenilikler

CSS3 ile birlikte gelen border-radius, border-image, box-shadow, box-sizing, column, text-shadow, opacity, resize, transform özellikleri, kullanımı ve kodları yer alıyor.

CSS3 nedir?

CSS sürümlerinden biri olan ve içerisinde bir çok yenilikler ile birlikte gelen CSS3 sürümü ile ilgili bilgiler yer alıyor.

CSS nedir derseniz Cascading Style Sheets baş harflerinden meydan gelmiştir.

Dilimizdeki karşılığı ise Basamaklı Stil Şablonu – Basamaklı Biçim Şablonu anlamına gelmektedir.

CSS çeşitli (renk, yazı tipi, yazı boyutu, kenarlık gibi) stil tanımlaması yaparak HTML etiketlerinin nasıl görüneceğini belirlememizi sağlar.

CSS için Cascading yani basamaklı denilmesinin sebebi HTML etiketine basamak basamak ulaşılır olmasındandır.

Örneğin; CSS ile bölüm (<div>) içindeki paragrafa (<p>) stil tanımlamak için div > p veya div p söz dizimi ile paragrafa ulaşabilir ve stil uygulanır.

CSS’in en önemli avantajlarından birisi de HTML etiketlerine tek bir dosyadan stil tanımlama imkanı vermesidir.

CSS öncesinde her etikete etiket özellikleri ve ek HTML etiketi (<font>, <center> vb.) ile kısıtlı stil tanımlaması yapılıyordu.

Gelişen web teknolojileri ile birlikte CSS sürümleri meydana gelmiştir.

CSS 1, CSS 2, CSS 2.1 ve son sürüm olarak CSS3 kullanılmaktadır.

CSS3’ün çıkış nedeni ise akıllı telefon kullanımı ve sitelerin daha dinamik hale gelmesidir.

Siteleri dinamik yapmak için çeşitli JavaScript kütüphanesi ve eklentileri kullanılıyordu.

Fakat bu çözümler çoğu zaman çok zahmetli ve kolay olmayan geçici çözümlerdi.

Ayrıca mobil cihazların gelişmesi ile birlikte genişleyen ekran çözünürlüğü çeşitleri ekran boyutuna göre duyarlı tasarım (responsive) gerekliliği gibi nedenlerden CSS3 sürümü ortaya çıkmıştır.

CSS3 kendisinden önceki CSS sürümleri özelliklerini desteklemekte ve yeni özellikler sunmaktadır.

CSS3 ile gelen yenilikler

1. border-radius Kenar Yuvarlama

JavaScript kütüphane ve eklentileriyle yapılan kenar yuvarlama, oval kenar işlemi border-radius özelliği ile birlikte gelmiştir.

.

NOT: border-radius özelliği border-top-left-radius, border-top-right-radius, border-bottom-right-radius ve border-bottom-left-radius özelliklerinin kısaltmasıdır.

border-radius kullanımı

border-radius özelliğine bir değer verilmiş ise; dört köşeye de aynı değer uygulanır

border-radius: 20px;

İki değer verilmiş ise; ilk değer sol üst ve sağ alt köşeye; ikinci değer sağ üst ve sol alt köşeye uygulanır

border-radius: 20px 10px;

Üç değer verilmiş ise; ilk değer sol üst köşeye; ikinci değer sağ üst ve sol alt köşeye; üçüncü değer sağ alt köşeye uygulanır

border-radius: 20px 10px 30px;

Dört değer verilmiş ise; sol üst, sağ üst, sağ alt ve sol alt köşelere uygulanır.

border-radius: 10px 20px 30px 40px;

Oval kenar yapma

Kenarları oval yapmak için border-radius özelliğine eğik çizgi (/) ve oval değeri vererek yapabiliriz.

Bu özelliği kullanarak resimleri de oval yapabiliyoruz.

border-radius: 20px/50%;

Sadece yüzdelik değer vererekte kullanılabilir.

border-radius: 50%;

.

2. border-image Kenar Resimleri

CSS3 ile birlikte gelen yeniliklerden birisi de kenarlık verdiğimiz HTML elemanlarının etrafına resim eklemek için kullanılan border-image özelliğidir.

CSS3 border-image özelliği HTML etrafındaki standart sınırlar yerine bir resim belirlemenizi sağlar.

Özellik üç bölümden oluşmaktadır:

1. Kenarlık olarak kullanılacak görüntü
2. Görüntünün nereden kesileceği
3. Orta bölümün tekrarlanması veya genişletilmesinin seçilmesi

border-image özelliği resim alır ve dokuz bölüme dilimler.

Daha sonra köşeleri köşelere yerleştirir ve orta bölümler belirttiğiniz gibi tekrarlanır veya genişletilir.

Not: border-image özelliğinin çalışması için border özelliğinin de kullanılması gerekir.

Resmi oluşturup gerekli değerleri verdikten sonra orta bölümün tekrarlanması ve genişlemesini belirlemek için border-image-repeat özelliğine stretch, repeat, round değerlerinden birini verebiliriz.

border-image örnekleri

.

.

.

.

3. box-shadow Kutu Gölgelendirme

Basit bir gölge vermek için box-shadow özelliğine yatay gölge (5px) ve dikey gölge (10px) boyutu belirterek verebiliriz.

div {
    box-shadow: 5px 10px;
}

Oluşturduğumuz gölgeye renk verebiliriz.

div {
    box-shadow: 5px 10px grey;
}

Oluşturduğumuz ve renk verdiğimiz gölgeyi flu yapabilirsiniz.

div {
    box-shadow: 5px 10px 5px grey;
}

Birden fazla gölge eklemek için her eklediğiniz gölge özelliğini virgülle ayırmanız yeterli olacaktır.

div {
    box-shadow: 10px 5px 3px silver, -10px -10px 3px grey;
}

Denemeler yaparak farklı gölge efektleri verebilirsiniz.

4. box-sizing Kutu Boyutlandırma

Varsayılan olarak HTML elemanlarının genişlik ve yüksekliği şu şekilde hesaplanır.

width + padding + border = HTML elemanının genişliği

height + padding + border = HTML elemanının yüksekliği

Bir elemanın genişlik ve yüksekliğini belirlediğimizde eleman genellikle belirlediğinizden daha büyük görünür. (yükseklik ile genişliğine kenarlık (border) ve iç boşluk (padding) eklendiğinden dolayı)

<div class="div1">div1</div>
<div class="div2">div2</div>

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
}

Yukarıdaki iki <div> elemanının boyutları farklı olacaktır. (div2 elemanına iç boşluk eklendiğinden)

Bu sorunu genişlik ile yükseklikten iç boşluk ve kenarlık değerlerini çıkartarak çözüyorduk.

CSS3 box-sizing özelliğiyle artık kutu hesaplamasını biz belirleyebiliyoruz.

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

5. column Yazıyı Bölme

CSS3 column-* özellikleri yazıyı gazete ve dergilerdeki gibi çoklu sütunlara bölmemize sağlayan özellikleri içerir.

• column-count
• column-gap
• column-rule-style
• column-rule-width
• column-rule-color
• column-rule
• column-span
• column-width

Yazıyı sütunlara bölmek

Yazıyı sütunlara bölmek için column-count özelliği kullanılır.

div {
    column-count: 3;
}

Sütunlar arasında boşluk bırakmak

Sütunlar arasında boşluk column-gap ile belirlenir.

div {
    column-count: 3;
    column-gap: 40px;
}

Sütunlara kenarlık vermek

Sütunlara kenarlık verme işlemi CSS border özelliği ile aynı özelliği taşır.

Sütunlar arasındaki kenarlık stilini column-rule-style ile belirliyoruz.

div {
    column-count: 3;
    column-gap: 40px;
    column-rule-style: solid;
}

Sütunlar arasındaki kenarlık stili genişliğini column-rule-width ile belirleyebiliriz.

div {
    column-count: 3;
    column-gap: 40px;
    column-rule-style: solid;
    column-rule-width: 1px;
}

Sütunlar arasındaki kenarlık stili rengini column-rule-color ile belirleyebiliriz.

div {
    column-count: 3;
    column-gap: 40px;
    column-rule-style: solid;
    column-rule-width: 1px;
    column-rule-color: gray;
}

Tüm kenarlık özelliklerini column-rule ile tek satırda belirleyebiliriz.

div {
    column-count: 3;
    column-gap: 40px;
    column-rule: 1px solid gray;
}

Sütunlara başlık vermek

Sütunlara başlık vermek isteyebiliriz. Fakat verdiğimiz başlıklarda sütunlara bölünecektir.

Başlıkların sütunlara bölünmesini önlemek için column-span özelliğini kullanabiliriz.

h1 {
    column-span: all;
}

Sütun genişliğini belirlemek

Yazıyı sütunlara bölmenin diğer yöntemi ise column-width ile sütun genişliği belirlemektir.

div {
    column-width: 100px;
}

6. text-shadow Yazıya Gölge Vermek

Basit bir gölge vermek için text-shadow özelliğine yatay gölge (2px) ve dikey gölge (3px) boyutu belirterek verebiliriz.

h1 {
    text-shadow: 2px 3px;
}

Oluşturduğumuz gölgeye renk verebiliriz.

h1 {
    text-shadow: 2px 3px red;
}

Oluşturduğumuz ve renk verdiğimiz gölgeyi flu yapabilirsiniz.

h1 {
    text-shadow: 2px 3px 5px red;
}

Birden fazla gölge eklemek için her eklediğiniz gölge özelliğini virgülle ayırmanız yeterli olacaktır.

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Denemeler yaparak yazıya efekt verebilirsiniz.

7. opacity Saydamlık

CSS3 opacity özelliği 0.0 ile 1.0 arasında değer almaktadır.

div {
    opacity: 0.5;
}

CSS3 opacity özelliği daha çok resimler üzerinde kullanılmaktadır.

img {
    opacity: 0.5;
}

opacity efekti uygulamak

Resimlere şeffaflık verdikten sonra üzerine gelindiğinde şeffaflığı kaldırarak güzel bir efekt elde edebiliriz.

img {
    opacity: 0.5;
}

img:hover {
    opacity: 1.0;
}

Aşağıda yapmış olduğum örneği inceleyebilirsiniz.

.

8. resize Yeniden Boyutlandırma

CSS3 resize özelliği HTML elemanlarının yeniden boyutlandırmasına imkan vermektedir.

p {
    border: 2px solid;
    padding: 20px; 
    width: 300px;
    resize: horizontal;
    overflow: auto;
}

Aşağıdaki örnek kullanıcının yalnızca <p> elemanının yüksekliğini yeniden boyutlandırmasını sağlar.

p {
    border: 2px solid;
    padding: 20px; 
    width: 300px;
    resize: vertical;
    overflow: auto;
}

Aşağıdaki örnek kullanıcının yalnızca <p> elemanının yüksekliğini ve genişliğini yeniden boyutlandırmasını sağlar.

p {
    border: 2px solid;
    padding: 20px; 
    width: 300px;
    resize: both;
    overflow: auto;
}

9. transform Dönüşümler

CSS3 transform özelliği aldığı değere göre dönüşümleri 2 boyutlu dönüşüm ve 3 boyutlu dönüşüm olmak üzere ikiye ayırabiliriz.

2B Dönüşümler

• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()

Tüm yöntemlerin anlaşılır olması için aşağıdaki yapının üzerinde denemenizi tavsiye ederim.

div {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border: 1px solid black;
}

translate

translate yöntemi uygulanan elemanı bulunduğu konumdan aldığı değere göre (X ekseni, Y ekseni) başka konuma taşımak için kullanılır.

div {
    -ms-transform: translate(50px, 100px);
    -webkit-transform: translate(50px, 100px);
    transform: translate(50px, 100px);
}

NOT: X ve Y değerlerine negatif değerler (-50px, -100px) verebiliriz.

rotate

rotate yöntemi uygulanan elemanı saat yönünde veya saat yönünün tersi yönünde döndürür.

div {
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}

NOT: Değerin önüne eksi (-) ekleyerek saat yönünün tersi yönünde döndürebiliriz.

NOT 2: Döndürme için derece (deg) birimini kullanabileceğimiz gibi gradyan (grad), radyan (rad) ve döndür (turn) birimlerini kullanabiliriz.

scale

scale yöntemi uygulanan elemanı yeniden ölçeklendirmek (küçültmek, büyütmek) için kullanılır.

div {
    -ms-transform: scale(2, 3);
    -webkit-transform: scale(2, 3);
    transform: scale(2, 3);
}

NOT: Elamanı küçültmek için değerin önüne eksi (-) ekleyebiliriz.

NOT 2: Özelliğe iki değer verebileceğimiz gibi tek değer verebiliriz.

NOT 3: Özelliğe noktayla küsuratlı değer verebiliriz.

skewX

skewX yöntemi uygulanan elemanı X ekseninde eğmek (sağa, sola) için kullanılır.

div {
    -ms-transform: skewX(30deg);
    -webkit-transform: skewX(30deg);
    transform: skewX(30deg);
}

NOT: Değerin önüne eksi (-) eklersek elemanı ters yönde eğebiliriz.

skewY

skewY yöntemi uygulanan elemanı Y ekseninde eğmek (yukarı, aşağı) için kullanılır.

div {
    -ms-transform: skewY(30deg);
    -webkit-transform: skewY(30deg);
    transform: skewY(30deg);
}

NOT: Değerin önüne eksi (-) eklersek elemanı ters yönde eğebiliriz.

skew

skew yöntemi uygulanan elemanı X ve Y ekseninde eğmek (sağa, sola, yukarı, aşağı) için kullanılır.

div {
    -ms-transform: skew(20deg, 30deg);
    -webkit-transform: skew(20deg, 30deg);
    transform: skew(20deg, 30deg);
}

NOT: Değerlerin önüne eksi (-) eklersek elemanı ters yönde eğebiliriz.

matrix

matrix yöntemi 2B dönüşümlerin (ölçeklendirme, döndürme, taşıma, eğim verme gibi) tek yöntem üzerinden uygulaması için kullanılır.

Parametre sırası şu şekildedir.

matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)

div {
    -ms-transform: matrix(1, -0.5, 0, 1, 0, 0);
    -webkit-transform: matrix(1, -0.5, 0, 1, 0, 0);
    transform: matrix(1, -0.5, 0, 1, 0, 0);
}

NOT: Diğer yöntemlerde olduğu gibi değerlerin önüne eksi (-) eklersek elemanı ters yönde eğebiliriz.

Birden fazla dönüşüm uygulamak

Bazen HTML elemanına birden fazla dönüşüm yöntemi uygulamak isteyebiliriz.

Birden fazla dönüşüm uygulamak için matrix yöntemini kullanabiliriz.

Ancak matrix yöntemi çok karmaşık gelebilir.

Diğer bir yöntem eklediğimiz dönüşümler arasında boşluk bırakarak birden fazla dönüşüm uygulamaktır.

div {
    -ms-transform: translate(50px, 100px) rotate(20deg) scale(2, 3) skewX(30deg) skewY(30deg);
    -webkit-transform: translate(50px, 100px) rotate(20deg) scale(2, 3) skewX(30deg) skewY(30deg);
    transform: translate(50px, 100px) rotate(20deg) scale(2, 3) skewX(30deg) skewY(30deg);
}

2B dönüşümler tek başlarına kullanıldıklarında gereksiz gelebilir.

Kullanım alanlarının iyi anlaşılabilir olması için aşağıdaki örnekleri denemenizi tavsiye ederim.

div:hover {
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}

div:hover {
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
}

CSS3 transition özelliği ile kullanıldığında daha etkili sonuçlar verecektir.

div {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border: 1px solid black;
    transition: all 3s;
}

En baştaki yapının üzerinde sadece transition: all 3s; eklenmiştir.

div:hover {
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
}

Sizde farklı değerler vererek etkili sonuçlar elde edebilirsiniz.

3B Dönüşümler

• rotateX()
• rotateY()
• rotateZ()

Tüm yöntemlerin anlaşılır olması için aşağıdaki yapının üzerinde denemenizi tavsiye ederim.

div {
    width: 200px;
    height: 200px;
    background-color: yellow;
    border: 1px solid black;
}

rotateX

rotateX yöntemi uygulanan elemanı X ekseni etrafında çevirmek-döndürmek için kullanılır.

div {
    -webkit-transform: rotateX(50deg);
    transform: rotateX(50deg);
}

rotateY

rotateY yöntemi uygulanan elemanı Y ekseni etrafında çevirmek-döndürmek için kullanılır.

div {
    -webkit-transform: rotateY(80deg);
    transform: rotateY(80deg);
}

rotateY

rotateZ yöntemi uygulanan elemanı Z ekseni etrafında (saat yönünde) çevirmek-döndürmek için kullanılır.

2B dönüşümlerdeki rotate() yöntemi ile aynı işlevi yapar.

div {
    -webkit-transform: rotateZ(70deg);
    transform: rotateZ(70deg);
}

NOT: Değerin önüne eksi (-) ekleyerek saat yönünün tersi yönünde döndürebiliriz.

CSS3 transform 3B Dönüşümleri ile hazırlamış olduğum örnek aşağıda yer almaktadır.

.

10. font-face Özel Font Kullanımı

Arama motorlarına font, font indir gibi arama yaparak listelenen sitelerden beğendiğimiz bir yazı tipini indirin.

Fontlar çoğunlukla .tff uzantılı olarak geliyor.

Çoğu tarayıcı .tff formatını desteklemesine rağmen bazı tarayıcılar desteklememekte; ayrıca boyutları da yüksek olabiliyor.

Bundan dolayı W3C’nin desteklediği format olan .woff formatına çevirmemiz gerekiyor.

Font çevrim işlemini Font Face Generator ile yapıyoruz.

Kullanmak istediğimiz fontu yükledikten ve kullanımı onayladıktan sonra çevrilmiş halini CSS kodları ile indirebilirsiniz.

CSS font-face kullanımı aşağıdaki gibidir.

@font-face {
    font-family: 'Benim Fontum';
    src: url('benimfontum.woff');
}

NOT: Yazı tipinde birden fazla sözcük varsa tırnak içine almayı ve font dosyasının ismini küçük harflerle yazmaya dikkat edin!

Özel fontu site genelinde kullanmak için body etiketinin font-family özelliğine tanımladığımız fontun adını yazmamız yeterli olacaktır.

body {
    font-family: 'Benim Fontum';
}

Eğer istediğimiz bazı bölümlerde kullanacaksak da o bölüme ait etiketin font-family özelliğine tanımladığımız fontun adını yazmamız yeterli olacaktır.

.ustbolum {
    font-family: 'Benim Fontum';
}

Web sayfalarında özel font kullanımı her ne kadar güzel görünse de gereğinden fazla farklı font kullanmak sitenin yavaş açılmasına neden olacaktır.

11. blend-mode Arkaplan Harmanlama

CSS3 background-blend-mode birden fazla arka planı harmanlamak için kullanılır.

CSS3 mix-blend-mode sayfa içerisindeki HTML elemanlarının (paragraf, kenarlık vb.) sayfanın arka planı ile harmanlanması için kullanılır.

background-blend-mode kullanımı

background-blend-mode özelliğinin kullanılabilmesi için HTML elemanına birden fazla arka plan eklememiz gerekiyor.

body {
    background: blue url("https://unsplash.it/1499/1000");
}

Bu özelliği sadece sayfayın arka planına değil herhangi bir HTML elemanın arka planına da uygulayabiliriz.

p {
    background: blue url("https://unsplash.it/458/354");
}

Gerekli tanımlamaları yaptık şimdi background-blend-mode kullanımına geçelim.

body {
    background: blue url("https://unsplash.it/458/354");
    background-blend-mode: multiply;
}

Burada mavi renk ile resmin harmanlanmasını sağladım.

Siz isterseniz aşağıdaki gibi birden fazla resmin harmanlanmasını da sağlayabilirsiniz.

body {
    background: url("https://unsplash.it/1499/1000"), url("https://unsplash.it/458/354");
    background-blend-mode: multiply;
}

Başka bir örnek;

body {
    background: url("https://unsplash.it/1000"), url("https://unsplash.it/1499/1000");
    background-blend-mode: exclusion;
}

Buradan çeşitli blend-mode uygulamalarına da bakabilirsiniz.

mix-blend-mode kullanımı

mix-blend-mode özelliği background-blend-mode özelliğiyle benzerdir.

Arasındaki fark ise mix-blend-mode özelliği için herhangi bir arka plan gerekmemesi ve tüm HTML elemanlarına uygulanmasıdır.

body {
    background: url("https://unsplash.it/1000");
    text-align: center;
}
p {
    font-size: 300%;
    color: white;
    mix-blend-mode: exclusion;
}

mix-blend-mode örneği

.

Çeşitli mix-blend-mode örnekleri

.

Sizde farklı değerleri deneyerek farklı sonuçlar elde edebilirsiniz.

12. text-overflow Yazı Taşması

Detaylı bilgi için text-overflow Yazı Taşması yazısına bakabilirsiniz.

13. transition Geçiş Efektleri

Detaylı bilgi için transition Geçiş Efektleri yazısına bakabilirsiniz.

14. animation Animasyon Yapımı

Detaylı bilgi için animation Animasyon Yapımı yazısına bakabilirsiniz.

15. flexbox Esnek Kutu

Detaylı bilgi için flexbox Esnek Kutu yazısına bakabilirsiniz.

16. @media Medya Sorguları

Detaylı bilgi için media Sorguları yazısına bakabilirsiniz.

17. filter Filtre Efektleri

Detaylı bilgi için filter Filtre Efektleri yazısına bakabilirsiniz.

text-stroke Yazıya Kenarlık Verme

RGBA, HSLA – Yeni Renk Tanımlamaları

linear-gradients Doğrusal Geçiş

radial-gradients Radyal Geçiş

…

CSS3 Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.