Веб-сайттың элементтерін айналдырудың қарапайым тәсілі - тек бірнеше CSS стилін қолданыңыз. Осы сабақпен танысу сізге парақтың ашылмаған желдеткішін, шашыраңқы жапырақтарды немесе стильді фотосуреттерді альбомға орналастыруға мүмкіндік береді. Сабақта фотоальбомды іске асырудың мысалы келтірілген және барлық заманауи браузерлер үшін шешім ескерілген.
Бұл қажетті
450px дейінгі төрт фотосурет
Нұсқаулық
1-қадам
Бұл мысал айналдырылған фотосуреттермен стильді альбом парағын жасауға бағытталған.
Мен алдын-ала суреттерді (ені 400px) адрестермен дайындадым:
Болашақта біз кескіндерге олардың аттарына сәйкес жеке куәліктер тағайындаймыз.
2-қадам
Алдымен біз div альбомын қолданып, блок альбомын дайындаймыз және оған img тегінің көмегімен фотосуреттер қосамыз (әр сурет өзінің div тегінде болуы керек), мысалы:
Біз блокқа идентификатор тағайындағанымызды ескеріңіз. Идентификатор бойынша біз css көмегімен блокқа сілтеме жасай аламыз.
3-қадам
Әрі қарай, сізге CSS мәнерлерін блокқа қою керек. Стильдер тізімі: «позиция: салыстырмалы;» - шығу тегі біздің блоктың жоғарғы сол жақ бұрышынан орнатылады; «margin: 50px auto;» - «50px» блогының шегінісін парақтың қалған бөлігінің үстінде және астына қояды, сонымен қатар автоматты шегіністі оңға және солға орнатады, осылайша біздің блокты ортаға туралайды; «ені: 900px; биіктігі: 650px;» - енін сәйкесінше 900px және биіктігін 650px етіп орнатады.
Көрсетілген стильдер тізімі осылай орналастырылуы керек:
# фото_бет {
позиция: салыстырмалы;
маржа: 0 автоматты;
ені: 900px;
биіктігі: 650px;
мәтінмен туралау: орталық;
}
«# Фото_беттің» қолданылуына назар аударыңыз - бұған біз блок идентификаторына сілтеме жасаймыз.
4-қадам
Енді біз фото_беттер блогының ішіндегі әр сурет үшін жалпы стильдер тағайындаймыз. Бұл дөңгелектелген бұрыштар, сұр жиек, ақ фон, төсеу және көлеңке.
Бұл фотографиялық эффект жасайды:
# сурет_беті img {
шекара радиусы: 7px;
жиек: 1px тұтас сұр;
фон: #ffffff;
төсеме: 10px;
көлеңке: 2px 2px 10px # 697898;
}
«#Photo_page img» пайдалануды ескеріңіз - бұл фото_беттің блогындағы барлық суреттерге қатысты болады
5-қадам
Сондай-ақ, қысқа стиль қосу қажет:
#photo_page div {
қалқымалы: сол жақта;
}
Ол photo_page блогының ішіндегі барлық блоктарды сол жаққа кішірейтеді.
6-қадам
Қазір сабақтың аралық кезеңі аяқталды. Егер сіздің жұмысыңыз скриншоттағы суретке ұқсас болса, онда сіз қате жібермегенсіз және келесі қадамға өтуіңізге болады.
7-қадам
Енді біз орналастырылған фотосуреттерді бұруға кезек береміз. Ол үшін бізге трансформация стилі қажет. Қазіргі уақытта ол таза түрінде қолданылмайды, тек басында әр шолғыш үшін префикстен тұрады:
-webkit-түрлендіру: айналдыру (мән);
-moz-transform: айналдыру (мән);
-өзгерту: айналдыру (мән);
Бұл браузерлер үшін ротация стилі: Google Chrome, Mazilla, Opera (сәйкесінше). «Мән» сөзінің орнына соңына градусы бар санды енгіземіз, мысалы:
90deg - сағат тілімен 90 градусқа бұраңыз.
-5 градус - сағат тіліне қарсы -5 градусқа бұраңыз.
Тағыда басқа.
8-қадам
Фото_1 үшін стиль:
# фото_1 {
-webkit-түрлендіру: айналдыру (5deg);
-moz-transform: айналдыру (5deg);
-өзгерту: айналдыру (5дег);
}
Бірінші кескін 5 градусқа бұрылады.
9-қадам
Фото_2 үшін стиль:
# фото_2 {
-webkit-түрлендіру: айналдыру (-3deg);
-moz-transform: айналдыру (-3deg);
-өңдеу: айналдыру (-3deg);
}
Екінші сурет -3 градусқа бұрылған.
10-қадам
Фото_3 стилі:
# фото_3 {
-webkit-түрлендіру: айналдыру (-2deg);
-moz-түрлендіру: айналдыру (-2deg);
-о-түрлендіру: айналдыру (-2deg);
}
Үшінші сурет -2 градусқа бұрылған.
11-қадам
Фото_4 стилі:
# фото_4 {
-webkit-түрлендіру: айналдыру (8deg);
-moz-transform: айналдыру (8deg);
-өзгерту: айналдыру (8deg);
}
Төртінші сурет 8 градусқа бұрылған.
12-қадам
Кескіндердің орналасуын қалай түзетуге болатындығын қарастырайық. Мысалы, сіз бірінші кескінді жоғарыдан 20px және сол жақтан 10px ауыстырғыңыз келеді. Бұл жағдайда маржа стилін қолдану қажет. Мұны біздің жағдайға қолданудың дұрыс әдісі:
# фото_1 {
маржа: 20px -10px -20px 10px;
-webkit-түрлендіру: айналдыру (5deg);
-moz-transform: айналдыру (5deg);
-өзгерту: айналдыру (5дег);
}
Назар аударыңыз, стильдің бірінші мәні - жоғарғы маржа; екіншісі - оңға шегініс; үшіншісі - төменнен шегініс; төртінші - сол жақ шегініс.
Маңызды: біздің жағдайда төменгі маржа жоғарғы маржаның теріс мәніне тең. Егер сіз парағыңыздағы суреттің астында бос орын көрсеңіз, кескіннің төменгі жағын одан да теріс шегіндіріп көріңіз.
13-қадам
Жұмыс аяқталды, мен скриншот ұсынамын (12-қадамда сипатталған бірінші кескіннің шегінісінің өзгеруін ескере отырып).
Сізге сәйкес келмейтін кез-келген кескінге шегініс мәнерін қосыңыз.
