Отмјене анимације које укључују прелазак преко слика које се користе за потребе ЈаваСцрипт. Не више! ЦСС је ту да оживи ваше сличице и галерије.
Ефекти лебдења слике могу додати додатни ниво углађености вашој веб локацији. Они стварају гладак ефекат, чинећи галерије слика или вртешке пријатнијим за навигацију. Најбољи део је што ове ефекте можете креирати само са ЦСС-ом и без ЈаваСцрипт-а.
Можете креирати различите стилове анимације на својим сликама. То укључује замагљивање или зумирање позадине, бледење или клизање у тексту и промену боје позадине.
Креирање ХТМЛ-а за слике
Почните креирањем индек.хтмл датотеку у празној фасцикли на рачунару, а затим отворите датотеку помоћу уређивача текста. Унутар датотеке креирајте ХТМЛ костур и додајте следеће ознаке унутар ознаке тела за отварање и затварање:
<дивкласа="мрежа">
<дивкласа="омотач слике">
<имгкласа="замутити"срц=" https://picsum.photos/500?random=1"алт=""><дивкласа="садржај бледи">
Лорем ипсум долор сит амет цонсецтетур адиписицинг елит. Солута ад
сед ат амет бландитиис уллам ипсум делецтус сит рецусандае вел!
див>
див><дивкласа="омотач слике">
<имгкласа="зум замућење"срц=" https://picsum.photos/500?random=2"алт=""><дивкласа="садржај бледи">
Лорем ипсум долор сит амет цонсецтетур адиписицинг елит. Солута ад
сед ат амет бландитиис уллам ипсум делецтус сит рецусандае вел!
див>
див><дивкласа="омотач слике">
<имгкласа="замутити"срц=" https://picsum.photos/500?random=3"алт=""><дивкласа=„слајд садржаја улево“>
Лорем ипсум долор сит амет цонсецтетур адиписицинг елит. Солута ад
сед ат амет бландитиис уллам ипсум делецтус сит рецусандае вел!
див>
див><дивкласа="омотач слике">
<имгкласа="сиви"срц=" https://picsum.photos/500?random=3"алт="">
<дивкласа=„слајд садржаја улево“>
Лорем ипсум долор сит амет цонсецтетур адиписицинг елит. Солута ад
сед ат амет бландитиис уллам ипсум делецтус сит рецусандае вел!
див>
див>
див>
Ово је решеткасти контејнер са четири омота слика. Елементи див са имаге-враппер класа служи као омот за слику и њен одговарајући текст. Слика и садржај сваког одељка имају јединствени скуп класа који су му додати.
Унутар листе стилова ћете циљајте ове елементе њиховим именима класа и примените различите ефекте стила и анимације. Текст се подразумевано неће приказати; показаћете га само када пређете мишем преко омотача слике, а слика ће током процеса бити подвргнута различитим ефектима.
Додавање основног ЦСС-а
Сада када сте креирали ХТМЛ, време је да га стилизујете помоћу ЦСС-а. Створити стиле.цсс датотеку и везу до овог стилског листа из ваше ХТМЛ датотеке, унутар одељак:
<линкрел="стилесхеет"хреф="стиле.цсс">Инсиде иоур стиле.цсс датотеку, прва ствар коју треба да урадите је да ресетујете маргину на телу на нулу и поставите неку доњу маргину:
тело {
маргина: 0;
маргина-дно: 20рем;
}Затим, морате да претворите најудаљенији контејнер у а ЦСС мрежа коју можете користити за постављање елемената у две димензије. Следећи код креира мрежу са онолико колона или редова који одговарају. Минимална величина сваке колоне је 300 пиксела, а максимална величина је 1 део контејнера:
.грид {
приказ: грид;
грид-темплате-колумнс: понављање(ауто-фит, минмак(300пк, 1фр));
}Пошто желите да поставите текст у односу на његов контејнер, потребно је да поставите положај у односу на омотач слике:
.имаге-враппер {
положај: релативан;
преливати: сакривен;
}
Следећи корак је стилизовање слике. Прикажите слику као блок елемент, учините да се протеже по ширини целог контејнера и поставите је у центар свог контејнера:
.имаге-враппер > имг {
приказ: блокирати;
ширина: 100%;
Аспецт-ратио: 1 / 1;
објектно уклапање: поклопац;
објект-позиција: центар;
}
Што се тиче текста, поставите га централно и дајте провидну, светло сиву боју позадине:
.имаге-враппер > .садржај {
положај: апсолутни;
уметнути: 0;
фонт-сизе: 2рем;
паддинг: 1рем;
позадини: ргба(255, 255, 255, .4);
приказ: флек;
алигн-итемс: центар;
оправдати-садржај: центар;
}
Сачувајте ЦСС датотеку и отворите индек.хтмл у вашем претраживачу. Требало би да пронађете страницу сличну оној на слици испод.
Подешавање прелаза на сликама и текстовима
Сада када сте применили основне стилове на слике, следећи корак је да им додате неку анимацију. Започните додавањем прелаза на слике и њихов одговарајући текст:
.имаге-враппер > имг,
.имаге-враппер > .садржај {
прелаз: 200Госпођалакоћа уласка;
}
То значи да ће сви ефекти прелаза (тј. бледење, зумирање и замућење) трајати 200 милисекунди и имати исту временску криву.
Фаде-Ин и Блур анимација
Први стил анимације бледи у тексту. Када пређете мишем преко одређеног омота слике, садржај који има избледети класа ће имати овај ефекат (фаде-ин и фаде-оут анимација) примењен на њега. Ово постижете тако што подесите непрозирност на нулу и промените је на један када миш лебди на одређеном омоту слике:
.имаге-враппер > .садржај.фаде {
непрозирност: 0;
}
.имаге-враппер:лебдети > .садржај.фаде {
непрозирност: 1;
}
Ако сачувате датотеку и проверите прегледач, видећете активну анимацију затамњења. Али такође можете приметити да је текст мало тежак за читање (ако је слика оштра и има много контраста). Подсетимо се да све слике имају и назив класе замућење. Ово је за замагљивање слика како бисте додали нешто преко потребног контраста између њих и текста:
имаге-враппер:лебдети > имг.блур {
филтер: замућење(5пк)
}
Сада када пређете курсором преко слике, можете видети да ће се само замутити. Можете повећати вредност пиксела да би замућење било израженије на сликама, додајући на тај начин већи контраст између њега и текста.
Додавање других ефеката
Други ефекти су померање текста са леве стране, зумирање слике и додавање сивих тонова на слику. Ево кода за постизање сва три ефекта:
.имаге-враппер > .садржај.слиде-лефт {
преобразити: транслатеКс(100%)
}.имаге-враппер:лебдети > .садржај.слиде-лефт {
преобразити: транслатеКс(0%)
}.имаге-враппер:лебдети > имг.сива {
филтер: нијансама сиве(1)
}.имаге-враппер:лебдети > имг.блур {
филтер: замућење(5пк)
}
.имаге-враппер:лебдети > имг.зоом {
преобразити: Скала(1.1)
}
Сачувајте датотеку, а затим идите у прегледач и пређите курсором преко сваке слике. Требало би да видите различите ефекте на делу.
Да бисте довршили ефекте слајд-ин, можете креирати још три омота слика, од којих сваки садржи слику и текст. Сваки део текста би имао име класе слајд-уп, клизање надоле, или благо-десно. Онда бисте унели одговарајућу вредност пикел, ем или рем, унутар преобразити() функција за стварање сва три ефекта.
ЦСС Грид и Флекбок
ЦСС Грид и Флекбок су две функције које вам омогућавају да креирате фантастичне изгледе за своју веб локацију. Можете са лакоћом креирати практично било који распоред који желите и прилагодити редове и колоне по свом укусу. Колоне ће такође подразумевано одговарати. Научите када да користите једно преко другог помоћи ће вам да постанете један проценат најбољих ЦСС програмера.
