Много лесен начин за завъртане на елементите на страницата на уебсайта - просто приложете няколко стила css. Запознаването с този урок ще ви позволи да поставите разгънат фен на карти, разпръснати паднали листа или стилни снимки в албум на страницата. Урокът съдържа пример за изпълнението на фотоалбум и отчита решението за всички съвременни браузъри.
Необходимо е
Четири снимки с ширина до 450px
Инструкции
Етап 1
Този пример ще се съсредоточи върху създаването на стилна страница на албума със завъртени снимки.
Подготвих предварително изображения (ширина 400px) с адреси:
В бъдеще ще присвояваме идентификационни номера на изображенията според техните имена.
Стъпка 2
Първо, ще подготвим блок за нашия фотоалбум, като използваме тага div, а също така ще добавим снимки към него с помощта на маркера img (всяко изображение трябва да бъде затворено в свой собствен таг div), като това:
Моля, обърнете внимание, че сме присвоили идентификатор на блока -. Чрез идентификатора можем да се позовем на блока, използвайки css.
Стъпка 3
След това трябва да зададете стиловете css на блока. Списък със стилове: "position: relative;" - ще зададе началото от горния ляв ъгъл на нашия блок; "margin: 50px auto;" - ще зададе отстъпа на нашия блок "50px" над и под останалото съдържание на страницата, както и ще зададе автоматичното отстъпване отдясно и отляво, като по този начин ще подреди нашия блок в центъра; "ширина: 900px; височина: 650px;" - ще зададе съответно ширината на 900px и височината на 650px.
Посоченият списък със стилове трябва да бъде поставен по този начин:
#photo_page {
позиция: относителна;
марж: 0 автоматично;
ширина: 900px;
височина: 650px;
подравняване на текст: център;
}
Обърнете внимание на използването на "#photo_page" - така се отнасяме към идентификатора на блока.
Стъпка 4
Сега ще присвоим общи стилове за всяко изображение вътре в блока photo_page. Това са заоблени ъгли, сива граница, бял фон, подложка и сянка.
Това ще създаде фотографски ефект:
#photo_page img {
граница-радиус: 7px;
граница: 1px плътно сиво;
фон: #ffffff;
подплата: 10px;
кутия-сянка: 2px 2px 10px # 697898;
}
Обърнете внимание на използването на "#photo_page img" - това ще се отнася до всички изображения в блока photo_page
Стъпка 5
Също така е важно да добавите кратък стил като този:
#photo_page div {
плувка: ляво;
}
Той свива всички блокове вътре в блока photo_page вляво.
Стъпка 6
Междинният етап на урока вече е завършен. Ако работата ви е подобна на изображението на екранната снимка, тогава не сте сгрешили и можете да преминете към следващата стъпка.
Стъпка 7
Сега се обръщаме към завъртане на публикуваните снимки. За това се нуждаем от стил на преобразуване. В момента в чист вид той не се използва, а само с префикс за всеки браузър в началото, като този:
-webkit-transform: завъртане (стойност);
-moz-transform: завъртане (стойност);
-o-преобразуване: завъртане (стойност);
Това е стилът на ротация за браузърите: Google Chrome, Mazilla, Opera (съответно). Вместо думата "стойност", ще вмъкнем число с deg в края, по следния начин:
90 градуса - завъртете се на 90 градуса по посока на часовниковата стрелка.
-5deg - завъртете -5 градуса обратно на часовниковата стрелка.
И т.н.
Стъпка 8
Стил за снимка photo_1:
# снимка_1 {
-webkit-трансформация: завъртане (5deg);
-moz-трансформация: завъртане (5deg);
-o-преобразуване: завъртане (5deg);
}
Първото изображение се завърта на 5 градуса.
Стъпка 9
Стил за снимка photo_2:
# снимка_2 {
-webkit-трансформация: завъртане (-3deg);
-moz-трансформация: завъртане (-3deg);
-o-преобразуване: завъртане (-3deg);
}
Второто изображение се завърта -3 градуса.
Стъпка 10
Стил за снимка photo_3:
# снимка_3 {
-webkit-трансформация: завъртане (-2deg);
-moz-трансформация: завъртане (-2deg);
-o-преобразуване: завъртане (-2deg);
}
Третото изображение се завърта на -2 градуса.
Стъпка 11
Стил за снимка photo_4:
# снимка_4 {
-webkit-трансформация: завъртане (8deg);
-moz-трансформация: завъртане (8deg);
-o-преобразуване: завъртане (8deg);
}
Четвъртото изображение се завърта на 8 градуса.
Стъпка 12
Нека да видим как можете да коригирате позицията на изображенията. Например искате да компенсирате първото изображение 20px отгоре и 10px отляво. В този случай трябва да използвате стила на полето. Ето правилния начин да го използвате за нашия случай:
# снимка_1 {
марж: 20px -10px -20px 10px;
-webkit-трансформация: завъртане (5deg);
-moz-трансформация: завъртане (5deg);
-o-преобразуване: завъртане (5deg);
}
Моля, обърнете внимание, че първата стойност на стила е горният поле; второто е отстъп вдясно; третият е отстъп отдолу; четвърто - отстъп вляво.
Важно: в нашия случай долният марж е равен на отрицателната стойност на горния марж. Ако видите бяло пространство под изображението на вашата страница, опитайте се да отстъпите долната част на изображението още по-негативно.
Стъпка 13
Работата е завършена, предоставям екранна снимка (като взема предвид промяната в отстъпа на първото изображение, описано в стъпка 12).
Добавете стил на вдлъбнатина към изображения, които не са в позиция, която да ви подхожда.
