CSS ile Kalp Çizmek

Arkadaşlar sizinle bugün CSS3 ile bir kalp çizelim.

İlk önce html dosyamızı oluşturup Body nin içine bir div etiketi oluşturalım. Classı kalp olsun. Sonra css dosyamızı oluşturup html dosyasına çağıralım.

<!DOCTYPE html>
<html>
	<head>
		<title>CSS Kalp</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div class="kalp"></div>
	</body>
</html>

 

Şimdi css dosyamızı kodlamaya başlayalım. Div etiketini bulunduğu pozisyona göre değiştirmek için position: relative yapalım.

Yüksekliği 170px yapalım.

Genişliği 200px yapalım.

Dışarıdan 20px boşluk verelim.

.kalp{
	position: relative;
	width: 200px;
	height: 170px;
	margin: 20px;
}

div etiketinden önce ve sonra işlem yapabilmek için before, after tanımlayalım.

Pozisyonunu absolute yapalım. Diğer nesnelerden bağımsız olsun.

Yükseliği 160px, Genişliği 100px olan iki nesne oluşturalım.

Arkaplanını kırmızı yapalım.

.kalp{
	position: relative;
	width: 200px;
	height: 170px;
	margin: 20px;
}

.kalp:after,
.kalp:before{
	content: "";
	position: absolute;
	height: 160px;
	width: 100px;
	background-color: red;
}

İki şekil arka arkaya olduğu için birmiş gibi görünüyor.

SnapCrab_No-0087

Birinci şekli sola yaslayalım. Diğer şekli soldan 100px genişlik kadar boşluk bırakalım.

.kalp{
	position: relative;
	width: 200px;
	height: 170px;
	margin: 20px;
}

.kalp:after,
.kalp:before{
	content: "";
	position: absolute;
	height: 160px;
	width: 100px;
	background-color: red;
}

.kalp:before{
	left: 100px;
}

.kalp:after{
	left: 0px;
}

SnapCrab_No-0088

Birinci şekli döndürmek için başlangıç noktasını alt, sağ noktayı referans olarak alalım ve sağa 45 derece açıyla döndürelim. İkinci şekli döndürmek için ise alt sol noktayı referans alalım ve sola doğru 45 derece açıyla döndürelim. Net görebilmek için border verelim.

.kalp{
	position: relative;
	width: 200px;
	height: 170px;
	margin: 20px;
}

.kalp:after,
.kalp:before{
	content: "";
	position: absolute;
	height: 160px;
	width: 100px;
	background-color: red;
	border: 1px solid #000;
}

/* birinci şekil */
.kalp:after{
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);

	-webkit-transform-origin: 100% 100%;
	transform-origin: 100% 100%;

	left: 0px;
}

/* ikinci şekil */
.kalp:before{
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);

	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
	
	left: 100px;
}

SnapCrab_No-0089

Üst köşe kenarlarını yuvarlak yapalım ve kenarlığı kaldıralım.

.kalp{
	position: relative;
	width: 200px;
	height: 170px;
	margin: 20px;
}

.kalp:after,
.kalp:before{
	content: "";
	position: absolute;
	height: 160px;
	width: 100px;
	background-color: red;
	border-radius: 50px 50px 0 0;
}

/* birinci şekil */
.kalp:after{
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);

	-webkit-transform-origin: 100% 100%;
	transform-origin: 100% 100%;

	left: 0px;
}

/* ikinci şekil */
.kalp:before{
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);

	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
	
	left: 100px;
}

SnapCrab_No-0090

 

Sağlıcakla kalın, Hayırlı günler…