Kategori Listesini Göster

CSS ile Kıvrılmış Kenar Efekti Yapımı


CSS ile Kıvrılmış Kenar Efekti YapımıCSS Dersleri ile ilgili içeriklerimize ara vermeden devam ediyoruz ve bugün gerçekten farklı bir konuyu işliyor olacağız. Bilirsiniz, bazı sitelerde kâğıt gibi kıvrılmış kenarlıklar vardır. Bu daha farklı bir görünüm elde edebilmemizi sağlar tasarımımızda. Gerek sitenizin Header bölümünde, gerek Image’lerinizde kullanabileceğiniz gibi, ana bölüme ait div içerisinde de kullanabilirsiniz. CSS ile kıvrılmış kenar efekti yapımını, şimdi sizlerle paylaşıyor olacağız. Faydalı olmasını diliyoruz…

AYRICA: CSS ile İki Renkli Kenarlık Yapımı

CSS ile Kıvrılmış Kenar Efekti Yapımı

1) Öncelikle ana div içerisine aşağıdaki kodu ekleyelim.

.anadiv {
position:relative;
}

2) Sonra ise “after” sınıfını kullanarak, efekti ekleyelim.

.anadiv:after{
content: "";
position: absolute;
top: 0%;
left: 0%;
width: 0px;
height: 0px;
border-bottom: 70px solid #eee;
border-left: 70px solid #444444;
-webkit-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
-moz-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
}

Örnek Görünüm

CSS ile Kıvrılmış Kenar Efekti Yapımı

  1. Yorum bulunmamaktadır.

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.
Yazı Etiketleri