#Мұрт - CSS3 мүмкідіктерін пайдалана отырып, мұрт жасаймыз :{

Жұмыста отырып, біршама видеоларды сайтқа салып, соның жүктеліп болғанын күтіп, дәптеріме бірдеңелер шимайлап отырып, көзімді ашып қалсам, мынандай бірдеңе сызып тастаппын.

Өөөө, мынау рас па? Шығаруға болады ма екен мынаны? Шимайыма сенбей, фотошопта тағы бір сызып көрдім.

Жасауға әбден болатын сияқты, видеоларым әлі жүктеліп жатыр екен, осы арада тез тез нотпатымды ашжверіп html мен css-те жасап тастадым. Шықты!

Түсінбегендерге, біздің алгоритміміз шамамен былай болмақ:


Енді код:
HTML-де бізге БЕС тег қажет. Ия, бір мұрт үшін БЕС тег көптеу әрине, бірақ уақымды алып, псевдоэлементтердің түбіне түскім келген жоқ, сондықтан, БЕС тег қолданамыз.

<div id="murt_box">
<div id="murt_left"></div>
<div id="murt_left_1"></div>
<div id="murt_right"></div>
<div id="murt_right_1"></div>
</div>

Ары қарата кеттік, алдымен #murt_box элементін ортаға орналастырып адламыз, бұл біздің мұрт орналасқан контейнет болады.

#murt_box {
	position: relative;
	width: 100px;
	margin: 100px auto;
}

Енді мұрттың бір жағын шығарып аламыз, #murt_left-тен бастайық.

#murt_left {
	width: 52px;
	height: 52px;
	background-color: #000;
	position: absolute;
	top: 100px;
	border-radius: 50%;
}

«Осы элементтің алдына» деген псевдоэлемент қолданамыз

#murt_left:before{
	content: '';
	position: absolute;
	background-color: #000;
	width: 210px;
	height: 210px;
	border-radius: 50%;
	right: -38px;
	bottom: -11px;
	z-index: -1;
}

«Осы элементтен кейін» деген тағы псевдоэлемент қолданамыз

#murt_left:after{
	width: 220px;
	height: 220px;
	background-color: #fff;
	content: '';
	position: absolute;
	top: -212px;
	left: -67px;
	z-index: -1;
	-webkit-transform: rotate(-48deg);
	-moz-transform: rotate(-48deg);
	-o-transform: rotate(-48deg);
	transform: rotate(-48deg);
}

#murt_left_1 тегі біздің мұрттың керек емес жерлерін жасырып тұруға арналған.

#murt_left_1{
	position: absolute;
	background-color: #fff;
	width: 153px;
	height: 153px;
	border-radius: 50%;
	left: -129px;
	bottom: -137px;
}

ВУОЛЯЯЯ!!!


Дәол осындай ретпен, келесі #murt_right, #murt_right_1 элементтеріне де жазып шығамыз.

#murt_right {
	width: 52px;
	height: 52px;
	background-color: #000;
	position: absolute;
	top: 100px;
	left: 70px;
	border-radius: 50%;
}

#murt_right:before{
	content: '';
	position: absolute;
	background-color: #000;
	width: 210px;
	height: 210px;
	border-radius: 50%;
	left: -38px;
	bottom: -11px;
	z-index: -1;
}

#murt_right:after{
	width: 220px;
	height: 220px;
	background-color: #fff;
	content: '';
	position: absolute;
	top: -212px;
	right: -67px;
	z-index: -1;
	-webkit-transform: rotate(48deg);
	-moz-transform: rotate(48deg);
	-o-transform: rotate(48deg);
	transform: rotate(48deg);
}
#murt_right_1{
	position: absolute;
	background-color: #fff;
	width: 153px;
	height: 153px;
	border-radius: 50%;
	right: -151px;
	bottom: -137px;
}

Нәтижесі мынадай болып шықты, анимациядағыдан өзгешелеу әрине, бірақ өзім ұқсаттым.


Бұл посттан біз нені үйрендік? )))
border-radius — элеменнің радиусын өзгертуге арналған.
transform: rotate() — элементті трансформациялау, бұру
:before — псевдоэлемент, «элементтің алдында» дегенді білдіреді. (content свойствосымен қатар қолданылады)
:after — псевдоэлемент, «элементтен кейін» дегенді білдіреді. (content свойствосымен қатар қолданылады)

Демосы мына жерде. http://hosting.users.kz/mysal/murt.html