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

Жұмыста отырып, біршама видеоларды сайтқа салып, соның жүктеліп болғанын күтіп, дәптеріме бірдеңелер шимайлап отырып, көзімді ашып қалсам, мынандай бірдеңе сызып тастаппын.
Блог - Abylai: #Мұрт - CSS3 мүмкідіктерін пайдалана отырып, мұрт жасаймыз :{
Өөөө, мынау рас па? Шығаруға болады ма екен мынаны? Шимайыма сенбей, фотошопта тағы бір сызып көрдім.
Блог - Abylai: #Мұрт - CSS3 мүмкідіктерін пайдалана отырып, мұрт жасаймыз :{
Жасауға әбден болатын сияқты, видеоларым әлі жүктеліп жатыр екен, осы арада тез тез нотпатымды ашжверіп html мен css-те жасап тастадым. Шықты!

Түсінбегендерге, біздің алгоритміміз шамамен былай болмақ:
Блог - Abylai: #Мұрт - CSS3 мүмкідіктерін пайдалана отырып, мұрт жасаймыз :{

Енді код:
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;
}


ВУОЛЯЯЯ!!!
Блог - Abylai: #Мұрт - CSS3 мүмкідіктерін пайдалана отырып, мұрт жасаймыз :{

Дәол осындай ретпен, келесі #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;
}


Нәтижесі мынадай болып шықты, анимациядағыдан өзгешелеу әрине, бірақ өзім ұқсаттым.
Блог - Abylai: #Мұрт - CSS3 мүмкідіктерін пайдалана отырып, мұрт жасаймыз :{

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

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