CSS3 Жүрек

Ассалаумағалейкум, алдымен барлығыңызды бүгінгі "Қозы Көрпеш — Баян Сұлу" ғашықтар күнімен құттықтаймын :3 (үлгердім, он екіге әлі бес минут бар)
Енді, соның құрметіне демей ақ қояйын, ощм бүгін біз CSS3 мүмкіндіктерін қолдана отырып, жүрек формасын жасайтын боламыз. CSS3-дейтіндей бәлендей CSS3-тің супер мүмкіндіктері қолданылған жоқ, қарапайым, бәріне түсінікті түрде жасауды жөн көрдім.
Бір кездері хабрахабрдан көрген едім CSS3 арқылы жүрек формасын жасау жайындағы мақаланы, ол жерде :before, :after «псевдокластарын», content своиствосын қолданып жасаған екен, бірақ ол әзірге өзіме тым мудренный болып көрініп отыр.

Ал мееен, өйтіп қопыратпай қарапайыр екі блокты алып, сол екеуімен жұмыс жасайтын боламын.

Қалай қалай?

Қалай болғанда, оңай негізі, екі блокты аламыз, бірінің сол жағын, екіншісінің оң жағын дөңгелетеміз, сосын бірін 45градусқа, екіншісін -45градусқа қисайтамыз да, бір біріне жабыстыра саламыз, ВУОЛЯ! Түсінбедіңдер ма? Қысқасы төмендегі анимациядағыдай жасайтын боламыз.
Заманауи Веб Технологиялар: CSS3 Жүрек
Ия, айттым ғо оңай деп. Енді осының кодын жазайық.

Бірінші HTML, бұл жерде бізге үш блок керек, біріншісі қорап, жүрегімізді қоршап тұратын блок, негізі оны жазбаса да болады, бірақ мен жаздым, сосын соның ішіне екі блок.
<div class="zhurek">
	<div class="birinshi"></div>
	<div class="ekinshi"></div>
</div>


Енді стильдерін жазамыз, .zhurek блок біздің шекара болғандықтан, оны relative деп алдық, ұзындығын, биіктігін жазамыз, сосын сол блокты ортаға орналастырамыз.
.zhurek {
	position: relative;
	width: 100px;
	height: 70px;
	margin: 80px auto;
}


Енді ішіндегі екі блок, «Екі жарты — бір бүтініміз» :) алдымен екеуіне де таңдап алып, екеуіне де тиесілі ортақ қасиеттерін жазамыз
, .ekinshi {
	position: absolute; // абсолютті позицияланады
	width: 80px; // ұзындығы
	height: 50px; // биіктігі
	background-color: red; // түсі қызыл
}


Енді .birinshi блоктың сол жақ бұрыштарын дөңгелетіп, қырықбес градусқа бұрамыз.
.birinshi {
	border-top-left-radius: 25px; //жоғарғы сол жақ бұрышының радиусы
		-webkit-border-top-left-radius: 25px;  // Хром, Сафари браузерлері үшін арнайы
		-moz-border-top-left-radius: 25px; // Файрфокс браузері үшін арнайы
	border-bottom-left-radius: 25px;  // төменгі сол жақ бұрышының радиусы
		-webkit-border-bottom-left-radius: 25px;  // Хром, Сафари браузерлері үшін арнайы
		-moz-border-bottom-left-radius: 25px; // Файрфокс браузері үшін арнайы
	transform: rotate(45deg); // 45градусқа бұрып трансформациялау
		-moz-transform: rotate(45deg); // ЫЫЫЫЫЫЫ
		-ms-transform: rotate(45deg); // Файрфокс браузері үшін арнайы
		-webkit-transform: rotate(45deg); // Хром, Сафари браузерлері үшін арнайы
		-o-transform: rotate(45deg); // Опера браузері үшін арнайы
}


.ekinshi блоктың оң жақ бұрыштарын дөңгелетіп, қырықбес градус кері бұрамыз, сосын солға қарата 21 пиксель жылжытамыз.
.ekinshi {
	border-top-right-radius: 25px; //жоғарғы оң жақ бұрышының радиусы
		-webkit-border-top-right-radius: 25px;  // Хром, Сафари браузерлері үшін арнайы
		-moz-border-top-right-radius: 25px; // Файрфокс браузері үшін арнайы
	border-bottom-right-radius: 25px; // төменгі сол жақ бұрышының радиусы
		-webkit-border-bottom-right-radius: 25px; // Хром, Сафари браузерлері үшін арнайы
		-moz-border-bottom-right-radius: 25px; // Файрфокс браузері үшін арнайы
	transform: rotate(-45deg);
		-moz-transform: rotate(-45deg); // Файрфокс браузері үшін арнайы
		-ms-transform: rotate(-45deg); // ӨӨӨӨӨӨӨ
		-webkit-transform: rotate(-45deg); // Хром, Сафари браузерлері үшін арнайы
		-o-transform: rotate(-45deg); // Опера браузері үшін арнайы
	left: 21px; // сол жаққа 21px жылжытамыз
}


БООООЛДЫ! Жүрек дайын! Міне мына жерден қарауыңызға болады.

hosting.users.kz/mysal/zhurek.html


Ары қарата өздеріңіздің азғын қиялдарыңызға байланысты, бұл жүрекпен не істесеңіздер де :) Мысалы мына жердегідей етіп, Нұрлан Жанайдын орнына, осы жүректі жауғызып қойсаңыздар болады :)

8 пікір

yerbol89
hosting.users.kz/mysal/ Бұрышқа тышқанды апарып, отыра қалып егіліп жыладым. :)
Abylai
ностальжи ма? әлде ол папканың ішінде барлық мысал скрипттер ашық жатыр деген үмітің ақталмағанына ма?
Nurzhan97
уаааау, базар жоқ ұнады)
Korkem
Интернеттен біраз уақытқа алыстап қалып едім, талай қызықтан құр қалыппын ғой)
mairosh
Керемет екен:)
aseleka
сендей группаласым бар екени кандай бакыт десенши!!!
Тек тіркелген қолданушылар ғана пікір қалдыра алады.