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

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

Жасауға әбден болатын сияқты, видеоларым әлі жүктеліп жатыр екен, осы арада тез тез нотпатымды ашжверіп 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

БасқаНЕТтерде қызықты квест болып жатқанда, «миии күшті» деп оқып отыратын едім. Сосын осындайды неге өзім жасап көрмеске деп, өзімше бастағалы отырмын. Мынау енді алғашқы квестім болғандықтан қиын емес, қарапайым етіп жасадым. Бақылап көрейін, сіздерге ұнап жатса, кейін бұдан да күрделісін жасармын.

Ойын шарты былай. Сілтемеден архив файлды жүктеп аласыз. Ощм ақ сандыңтың ішінде көк сандық дегендей, архивтің ішінде архив бар, бес дәрежелі. Яғни бес архив бірінің ішіне бірі салынған. Әр архивті кілт сөз енгізу арқылы ғана аша аласыз. Кілт сол архивпен бірге келген файлдарда жасырылған. Сіздің мақсатыңыз, әр архивке дұрыс кілт сөзін тауып, соңына дейін жету.

Өтініш: Пікірге кілт сөзді жарияламауыңызды сұраймын. Талқылауға болады, бірақ жауабын жазып басқа біреудің кәйіпін бұзбаңыздар.

Ал кеттік! Мұрағатты мына жерден жүктеп аласыз.
hosting.users.kz/0.rar

Бұрын twitter лентасында instagram-ға жүктелген суреттер тікелей көрінетін еді. Ал қазір instagram-нан келген суреттерді көру үшін сілтемеден өтіп, instagram сайтынан ғана көре алмыз. Негізі ондай сұмдық жағдай емес, бірақ кейбіреулері кезінде шулап алған еді. "Instagram-ға салған суреттеріңізді twitter лентасына экспорттамаңыздар, бір сурет үшін басқа сайтты ашпаймын, суретті тіке twitter-ге жүктеңіздер, неге ашылмайды, бұрын жақсы еді, баяғыда сәбет үкіметінде басқаша еді, Цукерберг мал" деген сияқты біраз әңгіме айтылды.

Өмір қиын, баяғыда керемет еді деп жылана бермей, осы неге қосымша script ақрылы instagram суреттерін twitter лентасында көрінетіндей қылмасқа деп, twitter лентасын зерттеуге кірістім. Жалпы twitter веб құжаты қалай құрылған, қай тег қандай class-пен белгіленген, әр твитті қалай программалық жолмен таңдап алуға болады, тегтер қалай бір-бірінен ерекшеленіп тұр, instagram-нан келген суреттер қалай орналасқан, twitter-дің өзінде салынған суреттер қалай орналасқанын анықтап ұғып алу керек болды.

Ары қарата оқымаймын, дайын скриптті жүктеп алып өзім түсініп аламын десеңіздер мында өтіңіздер.

«Домбыра Party» деген бір өзі керемет бастама сияқты ғой! Анау Алматының жастары әр бейсенбі сайын кешкі жетіде Арбат деген жерде жиналып, домбыра тартады екен. Біздің Ақтауда теңіз жағасында осылай жасауға мүмкіндік бар ма?!

деп Маңғыстау фейсбукшыларының тобына Уайс Ерсайынұлы ағамыз екі үш күн бұрын тақырып қозғаған еді. Содан осы бейсенбі өткізейік деп келісіп, бәріміз ұйымшылдықпен Ақтау қаласында, Каспий теңізінің жағасында кешкі саған сегізде алғашқы Домбыра party-імізіді өткізіп жібердік.
Мүмкін басқа домбыра патиларға қатыспағандығымнан шығар, бірақ бұл домбыра пати меніңше керемет өткен сияқты. Енді әр бейсенбі, сағат 20:00-де, теңіз жағасында, Астана ойын сауық кешеніне қарсы аялдам жанында жиналатын болып келістік.
Суреттері міні.