Css ile Align , Opacity ve Shadow

Merhaba dostlar, bu dersimizde Css ile Align, Opacity ve Shadow özelliklerini öğreneceğiz. Şimdi dilerseniz ilk konumuz olan Align özelliği ile dersimize başlayalım.

Css Align – Yatay ve Dikey Hizalama

Daha çok yazıları ortalamak için kullanılır. Şimdi aşağıdaki kodumuzu inceleyerek yazı ortalamayı öğrenelim.

.ortala{
  text-align: center;
}

Yukarıda yer alan örnek kodumuzda text-align özelliğini kullanarak yazı ortalama işlemini gerçekleştirdik. Şimdi dilerseniz bir Html elementini ortalayalım. Bir div’imiz olsun bunu ortalayalım.

.divOrtala{
  margin: auto;
  width: 50%;
  border: 3px solid green;
}

Yukarıda blok seviyesinde olan Div elemanımızı margin özelliği ile ortaladık. Şimdi son olarak resim ortalamayı öğrenelim.

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Yukarıda yer alan kodu incelediğimizde img resimleri ortalama işlemi yaptık.

Css Opacity – Saydamlık

Css Opacity ise Html elementlerimize saydamlık vermek için kullanılır. Opacity özelliğimiz 0 ile 1 arası değer almaktadır. Şimdi aşağıda yer alan kodumuzu inceleyerek daha iyi anlayalım.

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1;
}

Yukarıda yer alan örnek kodumuzda Html resim elementime ilk olarak saydamlık özelliği verdik. Hemen ardından hover özelliği ekleyerek mouse resim üzerine geldiğinde verdiğimiz saydamlık özelliği kalkacaktır.

Css Shadow – Gölge

Css Shadow özelliğimiz ise yazılarımıza ve bazı Html elementlerimize gölge özelliği kazandırmaktadır. Text-shadow ve box-shadow olarak bu özelliği kullanabiliriz. Şimdi Aşağıda yer alan örnek kodumuzu inceleyelim.

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

Yukarıda text-shadow özelliğini kullanarak h1 düzeyindeki başlık elementimize gölge özelliği kazandırdık.

Box-shadow özelliğinin kullanımı da hemen hemen aynıdır. Şimdi aşağıdaki kodumuzu inceleyelim.

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

Yukarıdaki örnek kodumuzda görüldüğü gibi box-shadow kullanımı da text-shadow gibi aynıdır. Diğer bir derste görüşmek üzere.

Bir cevap yazın

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

Shares