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

Осы бір екі күн бойы ойланып жүрдім де, әй осы inspiremedia.kz сайтындағыдай менюді CSS3те жазып шығу гипотетический мүмкін сияқты деп бүгін әйдәәә, соны жазуға кірісіп кеттім, мәә сұмдық болды, енді жүз пайыз ұқсастық болмағанымен жобадан соғып жазатын боламын. Өзіме де пайдалы тәжірибе болды. Енді дос, сол меню қалай жазылғанын өзімше түсіндіріп көрмекпін, бұл жазбада CSS3-тің радиус, градиент, көлеңке мүмкіндіктері барынша кеңінен қолданылады. Және осы мүмкіндіктерін барынша кросбраузерлы қылып жасаудың жолын қарастырамыз.

Сонымен мынадай менюді жасайтын боламыз.


Ияяя қарапайым меню емес, градиенттің мұншама түрлісін css3-те жаза алар ма екенбіз, тәк кем дегенде анық білініп тұрған бес градент бар екен, міне мыналар.


Тәк сонымен бастап кетейік бірден. Қалай жазылғанын бірден емес, бір бірден түсіндіріп жазып көрмекшімін, сонымен. Бірінші бізге фонға қара түс керек, сосын бір шеңбер керек. Соны жазайық.

body-тегінің ішіне бір штук див элемент жазамыз. Және сол тегке shenber_1 деген class жазамыз.
<div class="shenber_1"></div>


body тегінің стильдері
body {
	margin: 0px;
	padding: 100px;
	background-color: #000; //фоны қара
}


Енді shenber_1 классы бар div-ті қорлаймыз. Түсін әзірге жәй ғана сұр түспен бояп, ұзындығы мен биіктігін 60px деп алайық.
.shenber_1 {
	width: 60px; // ұзындығы
	height: 60px; // биіктігі
	background: #949494; // фон түсі
	position: relative; // позициясы қатынасты (относительный), яғни ішіндегі тектер осы тектің аумағына қатынасты позицияланатын болады
}


Тегіміз мынадай болып өзгерді.


Енді оны дөңгелету керек, ол үшін css3-тің border-radius-ын қолданамыз, яғни 60x60 төртбұрышымыз шеңбер болу үшін олардың бұрыштарының дөңгелену радиусы 30 болу керек (әр бұрыштан отыз пиксел)

Жалғастырып жазамыз.
.shenber_1 {
	border-radius: 30px; //мінсіз болашақта тек осылай етіп жаза қойсаң жеткілікті болады
		-webkit-border-radius: 30px; //мынау ескі хром мен сафари браузері үшін арнайы
		-moz-border-radius: 30px; //мынау файрфокстың ескі нұсқалары үшін
}


ИЕ-ші? ИЕ-ге соңында жеке тоқталатын болмын.

Енді элементіміз мынадай болып дөңгеленді


Тәәәк, енді бұған мынадай градиент беруіміз керек.


CSS3-те градиентті арнайы radial-gradient() және linear-gradient() функциясы арқылы сипаттап, фонға беруге болады. Енді бізге керек градиент түрі ол шеңбер болып жәйілатын градиент, яғни radial-gradient();

Градент жазамыз
.shenber_1 {
	background: radial-gradient(30px 0px, circle, #FFF 0%, #CACACA 50%,#949494 51%,#949494 100%); /* W3C стандарты бойынша осылай жазылады, болашақта он жылдан кейін тек осылай жазып қойсаңдар жеткілікті болады*/
	background: -webkit-radial-gradient(30px 0px, circle, #FFF 0%, #CACACA 50%,#949494 51%,#949494 100%); /* ал әзірге әр браузердің әр нұсқасына арнайы осылай жазатын боламыз, мынау Chrome10+,Safari5.1+ үшін*/
	background: -webkit-gradient(radial, 30px 0px, circle, color-stop(0%,#FFF), color-stop(50%,#cacaca), color-stop(51%,#949494), color-stop(100%,#949494)); /* Chrome,Safari4+ мынау еескі хром мен сафари үшін */
	background: -moz-radial-gradient(30px 0px, circle, #FFF 0%, #CACACA 50%,#949494 51%,#949494 100%); /* FF3.6+ үшін*/
	background: -o-radial-gradient(30px 0px, circle, #FFF 0%, #CACACA 50%,#949494 51%,#949494 100%); /* Opera 11.10+ үшін */	
	background: -ms-radial-gradient(30px 0px, circle, #FFF 0%, #CACACA 50%,#949494 51%,#949494 100%); /* IE10+ нұсқасы үшін*/
}

ИЕ-нің ескі нұсқалары үшін жазба соңында жазатын боламын

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


Осымен бірінші шеңберді бооолдық, енді ішіндегі шеңберге көшейік, ол үшін манағы жалғыз дивіміздің ішіне тағы бір див саламыз да, shenber_2 деп класс жазамыз

<div class="shenber_1">
	<div class="shenber_2"></div>
</div>


shenber_2 классына стильдер жазамыз, алдымен қарапайым стильдерін жазайық, фоны көк, жәке көктен ақшыл көкке ұзындығы мен ені 44px құрайды, бұрыштарының радиусы 24px, сосын оны ортаға орналастыруымыз керек, жәнее мынандай бордер, мынадай ішкі көлеңке береміз.


Блок элементтерге Тень яғни shadow яғни көлеңке box-shadow қасиеті арқылы жазылаты, көлеңке элементтің ішіне қарай түсіп тұру үшін inset деп жазамыз.

.shenber_1 {
	width: 44px; // ұзындығы
	height: 44px; // ені
	background-color: #2f4f9e; // фон түсі
        /* градиент түс */
	background: -moz-radial-gradient(30px 0px, circle, #FFF 0%, #CACACA 69%,#949494 70%,#949494 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, 30px 0px, circle, color-stop(0%,#FFF), color-stop(69%,#cacaca), color-stop(70%,#949494), color-stop(100%,#949494)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(30px 0px, circle, #FFF 0%, #CACACA 69%,#949494 70%,#949494 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(30px 0px, circle, #FFF 0%, #CACACA 69%,#949494 70%,#949494 100%); /* Opera 11.10+ */
	background: -ms-radial-gradient(30px 0px, circle, #FFF 0%, #CACACA 69%,#949494 70%,#949494 100%); /* IE10+ */
	background: radial-gradient(30px 0px, circle, #FFF 0%, #CACACA 69%,#949494 70%,#949494 100%); /* W3C */
	border: 2px solid #AAAAAA; // шеңбердің жиектерінің қалыңдығы және түсі 
	position: absolute; // абсолютті позицияланатын элемент (манағы тегіміздің ішінде)
	top: 6px; // жоғарыдан (төмен қарата) алты пиксел
	left: 6px; // сол жақтан (оңға қарата) алты пиксел
	border-radius: 24px; // бұрыштарының радиусы
		-webkit-border-radius: 24px; // хром сафари үшін
		-moz-border-radius: 24px; // мозилла үшін (ИЕ-үшін соңында жазам деп тағы ескертем)
	box-shadow:inset 0px 0px 5px #082266; // көлеңке ішке қарай түссін, жоғарыдан және сол жақтан ноль пикселге ығыссын, бес пикселге шашырасын, #082266 деген түспен дегенді білдіреді мынау
		-webkit-box-shadow:inset 0px 0px 5px #082266; // мынау дәл сол хром сафари үшін
		-moz-box-shadow:inset 0px 0px 5px #082266; // мынау файрфокс үшін (ИЕ үшін соңында жазам!)
}


Міне енді элементіміз мынандай болып шықты, аздап өңі кіріп, ұқсай бастады )))


Енді мынадай элипс формалы элемент салып, радиальный градиент береміз, мынадай эффект шығу үшін.


Манағы .shenber_2 классы бар дивтің ішіне тағы бір див саламыз, shenber_3 деп класс береміз.
<div class="shenber_1">
	<div class="shenber_2">
		<div class="shenber_3"></div>
	</div>
</div>


shenber_3-ке стиль береміз.
.shenber_3 {
	position: absolute; // абсолютті элемент
	top: 2px; // жоғарыдан екі пикселге
	left: 4px; // сол жақтан төрт пиксельге жылжыт
	width: 36px; // ұзындығы 
	height: 28px; // биіктігі
	border-radius: 18px/14px; //  мынау элементті сопақ қылады, қысқартылып жазылған түрі
	background-color: transparent; // 
/*ары қарата градиенттер*/	
	background: linear-gradient(top, #d9d9e9 0%, transparent 100%);
	background: -moz-radial-gradient(18px 10px, closest-corner, rgba(243, 243, 250, 0.7) 0%, rgba(243, 243, 250, 0.3) 60%, rgba(243, 243, 250, 0) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, 18px 10px, circle, color-stop(0%, rgba(243, 243, 250, 0.7)), color-stop(60%,rgba(243, 243, 250, 0.3)), color-stop(100%,rgba(243, 243, 250, 0))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(18px 10px, closest-corner, rgba(243, 243, 250, 0.7) 0%, rgba(243, 243, 250, 0.3) 60%, rgba(243, 243, 250, 0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(18px 10px, closest-corner, rgba(243, 243, 250, 0.7) 0%, rgba(243, 243, 250, 0.3) 60%, rgba(243, 243, 250, 0) 100%); /* Opera 11.10+ */
	background: -ms-radial-gradient(18px 10px, closest-corner, rgba(243, 243, 250, 0.7) 0%, rgba(243, 243, 250, 0.3) 60%, rgba(243, 243, 250, 0) 100%); /* IE10+ */
	background: radial-gradient(18px 10px, closest-corner, rgba(243, 243, 250, 0.7) 0%, rgba(243, 243, 250, 0.3) 60%, rgba(243, 243, 250, 0) 100%); /* W3C */
}


Осы стильдерден кейін біздің менюіміз мынадай түрге келді.


Бүгінше осы жерден аяқтай салайын, сағат болса біраз болыпты, жазбамның көлемі де тым үлкейіп бара жатыр екен, тәк келесі сабақта, ортасындағы сурет пен мәтінші саламыз, мүмкін svg графиканы қолданармыз, ол жағы әл белгісіз, сосын ховер эффекттерін жазып шығамыз, сосын барлығын болғаннан кейін Internet Explorer 6-8 нұсқалары үшін арнайы дуалайтын боламыз.

Жазбаны соңына дейін оқып шыққандар, басынан бастап тағы оқыңдар :))))

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

7 пікір

Abylai
исходныйын жазба толық біткеннен кейін жариялаймын
AKA
Пілүстеп отырудан басқа амал жоқ, түсінбеген соң :))))
AL-ASTER
Өте жақсы! Жырт амиго CSSті) Қазақша стиль жасасын!
Abylai
UPD. 17 қаңдар 2012, 22:38
Тек тіркелген қолданушылар ғана пікір қалдыра алады.