Creative-Blog

Div Ozellikleri

Div Özellikleri Kullanımı

Merhaba arkadaşlar bugün bloğumuzda farklı bi anlatımla karşınızdayım. Aslında bunun gibi anlatımların çoğunu internetten aramayı bilenler için bulması oldukça basit. Ben sadece bi kaç basit şeyi göstermek amaçlı bu paylaşımı kendi siteme uyarlıyorum. Bedava-Sitem'de bulunan bir çok bu işe yeni başlamış kardeşlerimiz var özellikle onlar için bu oldukça yararlı olucağını düşünüyorum.

Neler mi var?
1- Div gölgelendirme. (Shadow)
2- Div tablosu yuvarlaklaştırma. (Radius)
3- Div saydamlaştırma. (Opacity)
4- Div zamanlama. (Transition)
5- Div yönü değiştirme. (Rotate)

Bunlar çoğu grafikerin sitesindeki divleri düzenlerken sitesini güzelleştirmek için kullandığı hazır kodlardan ibarettir. Basit olmalarına rağmen kullanılışlarına göre çok daha estetik bir site yapmanıza olanak sağlayacaktır. Uzun süredir aklıma gelmemişti düzgün bir paylaşım yapmak sonunda tamamen bana ait bir anlatımla div özellikleri Creative-Blog'ta. İsterseniz artık yavaş yavaş konu anlatına geçelim...

Not: Gözükmesini istediğiniz anlatımın üstüne gelebilirsiniz.

Div gölgelendirme (Shadow)

A) 4 Koşeye Gölge Vermek

Elimizde #Shadow1 adlı bir divimiz olsun.
Bu divin yazılımı; <div id="Shadow1">Yazı Gelecek</div>
şeklinde olur buna aşağıdaki gibi gölge vermek isterseniz aşağıdaki kodu css kodlamalarına eklemeniz yeterli olucaktır. Kodlardaki #555 kısmını değiştirirseniz gölgelendirmenin rengi değişir. Ayrıca pxlerle oynayıp gölgeyi büyütebilir yada küçüktebilirsiniz.

Shadow1

Css Kodu:

#Shadow1 {
-webkit-box-shadow: 0px 0px 8px 6px #555;
-moz-box-shadow: 0px 0px 8px 6px #555;
box-shadow: 0px 0px 8px 6px #555;
}

B) 1 Koşeye Gölge Vermek

Bu seferde elimizde #Shadow2 adlı bir divimiz olsun. Ve bununda sadece 1 köşesine gölge efekti verelim aşağıdaki örnekteki gibi. Bu kodumuzda renk verdiğimiz alanları; #555, #000 kısımlarını kendinize göre düzenliyeceksiniz. Ardından divinize renk boyut vs. gibi düzenlemelerde yapabilirsiniz.

Shadow2

Css Kodu:

#Shadow2 {
-webkit-box-shadow: 0 0 0 4px #555, 0 8px 6px #000;
-moz-box-shadow: 0 0 0 4px #555 0 8px 6px #000;
box-shadow: 0 0 0 4px #555, 0 8px 6px #000;
}

Div yuvarlaklaştırma (Radius)

A) 4 Köşeyi Yuvarlağımsı Yapmak

Elimizde #Radius1 divimiz olsun. Buna normal şekilde renk verip bıraktığımızda sivri kenarlı kare yada dikdörtgen elde ederiz. Fakat biz bu sefer aşağıdaki örnekteki yuvarlağımsı kenarlı bir div yapıcaz. Aşağıdaki css kodunu ekleyip renklemeyi kendinize göre ayarlayın.

Radius1

Css Kodu:

#Radius1 {
border-radius: 20px; /* Standart */
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Safari ve Chrome */
}

B) 2 Köşeyi Yuvarlağımsı Yapmak

Bu seferde elimizde #Radius2 adlı bir divimiz olsun. Biz bu sefer bunun her köşesini değil sadece üst köşelerini yuvarlağımsı yapıp altını olduğu gibi bırakıcaz diyelim bu seferde kodları aşağıdaki kullanmamız gerekir. Eğer sadece alt kısımlarını yuvarlağımsı yapıcaksak kodlartaki "top" kısımlarını "bottom" ile değiştirebilirsiniz.

Radius2

Css Kodu:

#Radius2 {
border-top-right-radius: 20px;
border-top-left-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-topleft: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
}

Div saydamlaştırma (Opacity)

A) Direk Saydamlaştırma

Elimizde #Opacity1 divimiz olsun. Eğer biz bu divi siyah yapar isek kapkaranlık olur değilmi? Fakat opacity kodu ile bu divi saydamlaştırırsak gayet cam gibi saydam bir divimiz olur örnekteki gibi. Aşağıdaki kodda rengi değiştirmek için #555 yazan alana kendi renk kodunuzu yazın. Opacity değerini düşürüp arttırmak için ise. "0.5" yazan değeri değiştirin. Eğere 5'i büyütürseniz saydamlık azalır, küçültürseniz saydamlık çoğalır. Bunun dışında divinizin boyutlarını kendiniz ayarlayın.

Opacity1

Css Kodu:

Opacity1 {
background-color: #555;
opacity: 0.5;
}

B) Üstüne Gelince Saydamlaştırma

Bu seferki divimiz #Opacity2 olsun. Bu divimiz diğerlerinden biraz farklılık yapmak istemiş. Ve sadece üstüne gelindiğinde saydam olucak. Aşağıdaki kodda da görüldüğü gibi 2 adımlı bir div olucak. #Opacity2:hover alanındaki; "Opacity:0.5" değerini değiştiririzseniz üstüne gelindiğinde saydamlaşma oranını ayarlayabilirsiniz.

Opacity2

Css Kodu:

#Opacity2 {
background-color: #555;
}

#Opacity2:hover {
background-color: #555;
Opacity: 0.5;
}

Div zamanlama (Transition)

A) Büyütme Zamanlaması

Elimizde #Transition1 adlı divimiz var. Biz bu divin üstüne geldiğimizde biraz yavaş hareketlerle büyümesini istiyoruz. Bunun için yeniden 2 aşamalı bi şekilde aşağıdaki koddaki gibi yapıcaz."0.7" süresi zamanlama salisesidir. Bunu istediğiniz zamanlamaya göre değiştirebilirsiniz. Scale(1.1) ise büyüme oranıdır ne kadar büyütmek isterseniz okadar sayıları büyültün. Bunların dışında #555 divin rengidir bunuda değiştirebilirsiniz.

Transition1

Css Kodu:

#Transition1{
background-color: #555;
-webkit-transition: -webkit-transform 0.7s ease-in-out;
-moz-transition: -moz-transform 0.7s ease-in-out;
-ms-transition: -ms-transform 0.7s ease-in-out;
-o-transition: -o-transform 0.7s ease-in-out;
transition: transform 0.7s ease-in-out;
}

#Transition1:hover {
background-color: #555;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: -webkit-transform 0.7s ease-in-out;
-moz-transition: -moz-transform 0.7s ease-in-out;
-ms-transition: -ms-transform 0.7s ease-in-out;
-o-transition: -o-transform 0.7s ease-in-out;
transition: transform 0.7s ease-in-out;
}

B) Renk Değiştirme Zamanlaması

Bu seferki divimiz #Transition2. Bu divimiz biraz renkli takılıyor aşağıdaki örnekteki gibi üstüne geldiğimizde yavaş yavaş renginin değişmesini istiyorsanız aşağıdaki kodu kullanın. #555 divinizin ilk andaki rengidir. #000 ise üstüne geldiğiniz andaki rengidir. Bunları istediğiniz şekilde değiştirebilirsiniz. "0.7" üsttede söylediğim gibi zamanlama süresidir.

Transition2

Css Kodu:

#Transition2 {
background-color: #555;
-webkit-transition: background-color 0.7s linear ;
-moz-transition: background-color 0.7s linear ;
-ms-transition: background-color 0.7s linear ;
-o-transition: background-color 0.7s linear ;
transition: background-color 0.7s linear ;
}

#Transition2:hover {
background-color: #000;
-webkit-transition: background-color 0.7s linear ;
-moz-transition: background-color 0.7s linear ;
-ms-transition: background-color 0.7s linear ;
-o-transition: background-color 0.7s linear ;
transition: background-color 0.7s linear ;
}

Div yönü değiştirme (Rotate)

A) Direk Yamultulmuş

Elimizde #Rotate1 adlı bir div var. Hepimiz biliriz ki divler genelde kare ve dikdörtgenken bile düzgün dururlar biz bunu biraz yamultalım dedik. Aşağıdaki kodu kullanarak divin yönünü değiştirebilirsiniz. "rotate(30deg)" döndürme açısıdır. 30'u büyültüp küçültüp divinizi farklı farklı döndürebilirsiniz. #555 ise divinizin rengidir kendinize göre ayarlayın.

Rotate1

Css Kodu:

#Rotate1 {
background-color: #555;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

B) Üstüne Gelince Yamulan

Bu seferki divimiz #Rotate2. Bu divin özelliği ise normalde çok düzgün duruyor gibi dursada üstüne geldiğimiz anda yamulucak olması. Aşağı kodu css kodlarımıza eklerken; "rotate(45deg)" yukardada söylediğim gibi yamulma oranı. "0.7" ise yamulmanın kaç saniyede gerçekleşmesini istediğimiz.

Rotate2

Css Kodu:

#Rotate2 {
background-color: #555;
-webkit-transition: -webkit-transform 0.7s ease-in-out;
-moz-transition: -moz-transform 0.7s ease-in-out;
-ms-transition: -ms-transform 0.7s ease-in-out;
-o-transition: -o-transform 0.7s ease-in-out;
transition: transform 0.7s ease-in-out;
}

#Rotate2:hover {
background-color: #555;
-webkit-transition: -webkit-transform 0.7s ease-in-out;
-moz-transition: -moz-transform 0.7s ease-in-out;
-ms-transition: -ms-transform 0.7s ease-in-out;
-o-transition: -o-transform 0.7s ease-in-out;
transition: transform 0.7s ease-in-out;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

Div Ozellikleri