inspiremedia.kz сайтындағыдай меню жасаймыз (Javascript-сіз) CSS3-те. (екінші бөлім)

Бірінші бөлім мұнда

Жазбаны жалғастырайын, бүгін біз шеңбердің ішіне сурет пен мәтінді салып, ховер эфектін жазатын боламыз.

Қазір біздің шеңберіміздің түрі мынадай.


Енді шеңбер ортасына сурет салу керекпіз, тек суретті орналастыруды сонша әңгіме қылып отырсың ба дерсіңдер, бірақ бұл жерге қарапайым растрлық сурет салғым келіп отырған жоқ, қазір мына шеңберді қанша үлкейтсең сонша үлкейе береді сапасы өзгермейді. Ал растрлық сурет салсам үлкейткен сайын суреттің түрі бұзыла бастайды. Мысалы:

Бірінші суреттегі біздің векторный элементіміз, екінші суретте растр.


Жасап жатқан менюімізге растр қосқым келген жоқ, сондықтан w3c ойлап шығарған арнайы веб үшін жасалған svg векторлық форматындағы суреттерді қолданатын болатынмын…

SVG иконкаларды қолмен жазбаймыз, әзірге мына жерден өзімізге керегін жүктеп алып қолдана берейік. Тегін!
Иконканы жүктегеннен кейік, архивтен шығарып, хтмл құжат орналасқан жерге салып қоямыз.

Құжатқа орналастыру
Жалпы құжатқа svg суретті кәдімгі суретті орналастырғандай src="" атрибуты арқылы img тегіне, немесе css-те background-image url арқылы қоюға болады, бірақ ол әдістер ескі браузерлерде, ескілеу браузерлердің көбінде ашыла бермейді, svg кодын тіке құжаттың денесіне жазып қоюға да болады, бірақ ИЕ оны қолдамайды, не қалды сонда? ИЕ қолданушылары мүлдем суретті көре алмайды ма...

Ощм көп әңгімені қояйық, бас қатыра бермей svg суретті object тегі арқылы орналастырып тыныш отырамыз.

Неге object? Браузер түсінбейтін, қосымша модульдер мен плагиндерді талап ететін нысандарды орналастыруға арналған арнайы object тегін svg суретті орналастыруға қолдансақ та болады.

Кешегі html құжатымызды еске түсірейік, суретті shenber_2 классы бар тегтің ішіне орналастырамыз.

<div class="shenber_1">
	<div class="shenber_2">
                <o bject data="icon.svg" width="30" height="30" class="svg"> </object> 
		<div class="shenber_3"></div>
	</div>
</div>

Енді осы суретті CSS-те ортаға орналастырамыз.

.svg {
	position: absolute;
	top: 7px;
	left: 7px;
}

Мәтін үшін тағы бір тег саламыз, .text деп класс береміз

<div class="shenber_1">
	<div class="shenber_2">
            <o bject data="icon.svg" width="30" height="30" class="svg"> </object>
            <div class="text">Бірінші</div>
            <div class="shenber_3"></div>
        </div>
</div>

Стильдері мыналар:

.text {
	color: #FFF; //түсі ақ
	font-size: 11px; // көлемі он бір пиксел
	font-family: Tahoma; // Тахома шрифті
	text-decoration: none; // мәтіндік стильдер (ортасынан сызу, астын сызу) берілмесін
	cursor: pointer; // курсорды элементке апарғанда сілтемеге барғандағыдай курсор өзгереді 
	width: 60px; // блок ұзындығы
	position: absolute; // позициялары
	top: 54px;// координаталары
	left: -8px;// координаталары
	text-align: center; // мәтін блоктің ішінде ортасынан туралансын
}

Бұл өзгертулерден кейін бірдің меню элементі мынадай болып өзгереді


Осымен біздің элемент стильдері аяқталған сияқты, енді бұл элементке сілтеме ілу керек, негізі блок элеменнердің сыртын сілтемемен қоршауға болмайды делінген дейді мыс, бірақ кім көріп жатыр дейсің соны :)) shenber_1 классы бар дивті link классы бар сілтемемен қоршаймыз.

<a href="#" class="link"> //міне мынау
	<div class="shenber_1">
		<div class="shenber_2">
			<o bject data="icon.svg" width="30" height="30" class="svg"> </object>
			<div class="text">Бірінші</div>
			<div class="shenber_3"></div>
		</div>
	</div>
</a>

Қуып кетпесін деп мынадай стильдерді беріп қояйық, сақтықта қорлық жоқ

.link {
	display: block;
	border: none;
	width: 60px;
	height: 75px;
}

Сілтеме дайын, енді тез тез қарапайым ховерлерді жазып тастайық.

Ескерту: Бұл жазбада css3-тің анимациялық мүмкіндігін қолданбаймын. Және ховер эфектіміз түпнұсқасынан өзгешелеу болады.

Ховерді анықтап алайық, егер элемент ховер болса, онда мәтінге көлеңке беріп, shenber_2 элементтің ішкі көлеңкесінің түсін аққа өзгерт дейтін боламыз.

.link:hover .text{
	text-shadow:#ffffff 0px 0px 15px;
}
.link:hover .shenber_2 {
	box-shadow:inset 0px 0px 5px #ffffff;
		-webkit-box-shadow:inset 0px 0px 5px #ffffff;
		-moz-box-shadow:inset 0px 0px 5px #ffffff
}

Енді Элементке тінтуірді апарсақ мынадай болып өзгеретін болады.


Бүгіндікке осы жерден аяқтай салайық, келесі жазбада ең болмағанда ИЕнің сегізінші нұсқасында радиустары мен иконканың суреті көрінетіндей етіп бірдеңелер жазып көретін боламыз.

p/s: object тегіне редактор қосымша параметрлерін жазып жібермес үшін «o bject» деп бөліп жаздым

Үшінші бөлім >>>