6 Цоол слике са ЦСС3
ЦСС3 је заиста моћан. Некада су нам биле потребне слике или хрпа ЈаваСцрипт кодова да би направили једноставан ефекат транзиције. Данас то исто можемо урадити само са ЦСС3.
У овом водичу ћемо вам показати како да креирате описе слика са различитим прелазима једноставно користећи ЦСС3.
- Демо
- Довнлоад соурце
Бровсер Суппорт
Овај наслов ће много зависити од трансформационих и транзиционих особина које су релативно нове карактеристике, па би било мудро узети у обзир подршку за прегледач потребну за глатко покретање наслова..
Ово су прегледачи који већ подржавају трансформацију и транзицију:
- Интернет Екплорер 10+ (још није објављен)
- Фирефок 6+
- Цхроме 13+
- Сафари 3.2+
- Опера 11+
Сада, хајде да започнемо туториал.
ХТМЛ Струцтуре
Имамо 6 слика; сваку слику са другачијим стилом описа.
Симпле Цаптион
Фулл Цаптион
Лорем ипсум долор сит амет, цонсецтетуер адиписцинг елит, сед диам нонумми нибх еуисмод тинцидунт у лаореет долоре магна аликуам ерат волутпат.
Фаде Цаптион
Лорем ипсум долор сит амет, цонсецтетуер адиписцинг елит, сед диам нонумми нибх еуисмод тинцидунт у лаореет долоре магна аликуам ерат волутпат.
Наслов слајда
Лорем ипсум долор сит амет, цонсецтетуер адиписцинг елит, сед диам нонумми нибх еуисмод тинцидунт у лаореет долоре магна аликуам ерат волутпат.
Ово је ротацијски наслов
Лорем ипсум долор сит амет, цонсецтетуер адиписцинг елит, сед диам нонумми нибх еуисмод тинцидунт у лаореет долоре магна аликуам ерат волутпат.
Фрее Стиле Цаптион
Лорем ипсум долор сит амет, цонсецтетуер адиписцинг елит, сед диам нонумми нибх еуисмод тинцидунт у лаореет долоре магна аликуам ерат волутпат.
Басиц ЦСС
Пре дизајнирања било ког елемента, увек је добар почетак ресетовања свих својстава помоћу овог ресетовања ЦСС-а и давање им подразумеване вредности стила, тако да ће сви претраживачи приказати исти резултат (осим можда, ИЕ6).
Стилови ће бити одвојени у стиле.цсс фајлу, тако да ће наша ХТМЛ датотека изгледати уредно. Међутим, не заборавите да додате стил везе унутар ознаке главе да бисте применили правила стила у датотеци.
ОК, почнимо стилизовање елемента, почевши од хтмл таг-а и главног враппер ид-а:
хтмл позадинска боја: #еаеаеа; #маинвраппер фонт: 10пт нормал Ариал, санс-сериф; хеигхт: ауто; маргин: 80пк ауто 0 ауто; тект-алигн: центар; видтх: 660пк;
Имаге Бок Стиле
Примјењујемо неке уобичајене стилове у оквире који садрже слике. Оквири ће бити приказани раме уз раме употребом лебдећег пловка. Обратите пажњу да смо такође додали преливање: скривено својство; ово ће учинити да сви објекти који пролазе кроз див да буду сакривени.
Такође, проглашавамо својство прелаза на свакој слици у оквиру, у случају да нам је потребна слика преласка касније.
#маинвраппер .бок бордер: 5пк солид #ффф; курсор: показивач; хеигхт: 182пк; флоат: лефт; маргин: 5пк; позиција: релативна; оверфлов: хидден; видтх: 200пк; -вебкит-бок-схадов: 1пк 1пк 1пк 1пк #ццц; -моз-бок-схадов: 1пк 1пк 1пк 1пк #ццц; бок-схадов: 1пк 1пк 1пк 1пк #ццц; #маинвраппер .бок имг поситион: абсолуте; лево: 0; -вебкит-транситион: сви 300мс се олакшавају; -моз-транзиција: сви 300мс се олакшавају; -о-транзиција: сви 300мс се олакшавају; -мс-транситион: сви 300мс се олакшавају; транзиција: сви 300мс се олакшавају;
Цаптион Цоммон Стиле
Наслов ће имати неке уобичајене стилове и такође својство прелаза. Уместо да користимо својство непрозирности, користимо РГБА режим боја са 0.8 за алфа канал да би натпис изгледао мало транспарентно без утицаја на текст унутар њега.
#маинвраппер .бок .цаптион бацкгроунд-цолор: ргба (0,0,0,0,8); позиција: апсолутна; цолор: #ффф; з-индекс: 100; -вебкит-транситион: сви 300мс се олакшавају; -моз-транзиција: сви 300мс се олакшавају; -о-транзиција: сви 300мс се олакшавају; -мс-транситион: сви 300мс се олакшавају; транзиција: сви 300мс се олакшавају; лево: 0;
Наслов 1
Први наслов ће имати једноставан ефекат прелаза који се обично користи за опис. Наслов ће се појавити са дна када лебдите изнад слике. Да бисте га адресирали, наслов ће имати фиксну висину од 30 пиксела и применићемо њену доњу позицију -30пк да бисмо је сакрили испод слике.
#маинвраппер .бок .симпле-цаптион хеигхт: 30пк; видтх: 200пк; дисплеј блок; боттом: -30пк; лине-хеигхт: 25пт; тект-алигн: центар;
Наслов 2
Други тип има пуну ширину и висину димензије слике / кутије (200к200пк), а транзиција би била као ефекат клизних врата само да ће клизити од врха ка дну.
#маинвраппер .бок .фулл-цаптион видтх: 170пк; хеигхт: 170пк; топ: -200пк; поравнавање текста: лево; паддинг: 15пк;
Цаптион 3
Трећи наслов ће имати ефекат слабљења. Дакле, додали смо непрозирност: 0 за почетно стање.
#маинвраппер .бок .фаде-цаптион, #маинвраппер .бок .сцале-цаптион опацити: 0; видтх: 170пк; хеигхт: 170пк; поравнавање текста: лево; паддинг: 15пк;
Цаптион 4
Четврти наслов ће склизнути с лијева на десно, тако да смо фиксирали 200пк лијево (лијево: 200пк) као почетну позицију.
** Цаптион 4: Слиде ** / #маинвраппер .бок .слиде-цаптион видтх: 170пк; хеигхт: 170пк; поравнавање текста: лево; паддинг: 15пк; лево: 200пк;
Цаптион 5
Пети наслов ће имати ротирајући ефекат. Неће се окретати само наслов, већ и слика. То је више као промена позиције ротацијом.
Дакле, додајемо својство трансформације са ротацијом од -180 степени, осим ако не желите да ротирате монитор да бисте прочитали наслов.
#маинвраппер # бок-5.бок .ротате-цаптион видтх: 170пк; хеигхт: 170пк; поравнавање текста: лево; паддинг: 15пк; топ: 200пк; -моз-трансформ: ротација (-180дег); -о-трансформ: ротација (-180дег); -вебкит-трансформ: ротирати (-180дег); трансформ: ротате (-180дег); #маинвраппер .бок .ротате видтх: 200пк; хеигхт: 400пк; -вебкит-транситион: сви 300мс се олакшавају; -моз-транзиција: сви 300мс се олакшавају; -о-транзиција: сви 300мс се олакшавају; -мс-транситион: сви 300мс се олакшавају; транзиција: сви 300мс се олакшавају;
Наслов 6
Последњи наслов ће имати трансформацију скале. Међутим, у претходним натписима, текст унутар њега ће се заправо приказати заједно са .цаптион прелазном сменом. У овом одељку ћемо учинити нешто другачије.
Текст ће се појавити након што се изврши пријелазна промјена. Дакле, додамо кашњење пријелаза на текст, у овом случају х3 и п таг.
#маинвраппер .бок .сцале-цаптион х3, #маинвраппер .бок .сцале-цаптион п поситион: релативе; лево: -200пк; видтх: 170пк; -вебкит-транситион: сви 300мс се олакшавају; -моз-транзиција: сви 300мс се олакшавају; -о-транзиција: сви 300мс се олакшавају; -мс-транситион: сви 300мс се олакшавају; транзиција: сви 300мс се олакшавају; #маинвраппер .бок .сцале-цаптион х3 -вебкит-транситион-делаи: 300мс; -моз-транситион-делаи: 300мс; -о-прелаза-кашњење: 300мс; -мс-транситион-делаи: 300мс; кашњење транзиције: 300мс; #маинвраппер .бок .сцале-цаптион п -вебкит-транситион-делаи: 500мс; -моз-транситион-делаи: 500мс; -о-прелаза-кашњење: 500мс; -мс-транситион-делаи: 500мс; кашњење транзиције: 500мс;
Хајде да их покренемо
У следећем одељку дефинисаћемо понашање наслова када прелазимо преко слика или оквира.
Цаптион Бехавиор 1: Схов уп.
За први натпис желимо да се прикаже (са дна) када лебдимо изнад оквира. Да бисмо се позабавили овим потезом користимо својство трансформације и ЦСС код у наставку каже наслову да помакне 100% своје тежине на врх.
#маинвраппер .бок: ховер .симпле-цаптион -моз-трансформ: транслатеИ (-100%); -о-трансформ: транслатеИ (-100%); -вебкит-трансформ: транслатеИ (-100%); трансформ: транслатеИ (-100%);
Ако не добијете смисао негативне вредности за транслатеИ, можда ћете желети да прочитате овај туторијал да бисте добили бољи увид.
Цаптион Бехавиор 2: Померите га доле.
С друге стране, други наслов ће се померити са врха. Дакле, ми ћемо имати позитивну вредност за транслатеИ.
#маинвраппер .бок: ховер .фулл-цаптион -моз-трансформ: транслатеИ (100%); -о-трансформ: транслатеИ (100%); -вебкит-трансформ: транслатеИ (100%); трансформ: транслатеИ (100%);
Цаптион Бехавиор 3: Фаде ин.
Трећи наслов је заправо најлакши. Када се оквир налази на лебдећи страни, опацитет наслова ће се претворити у 1, што ће га учинити видљивим, а пошто смо додали својство транзиције у класи описа, прелазак треба да се одвија глатко.
#маинвраппер .бок: ховер .фаде-цаптион опацити: 1;
Понашање у наслову 4: Гурните га улево.
Као што смо већ споменули, овај наслов ће склизнути с лијеве стране, међутим, слика ће се такођер помакнути удесно. Дакле, овде имамо 2 ЦСС декларације.
Доњи ЦСС код показује да када прелазимо изнад поља, наслов ће склизнути 100% његове ширине на лево. Обратите пажњу да сада користимо транслатеКс, јер желимо да се слајд помери хоризонтално десно на лево.
#маинвраппер .бок: ховер .слиде-цаптион бацкгроунд-цолор: ргба (0,0,0,1)! -моз-трансформ: транслатеКс (-100%); -о-трансформ: транслатеКс (-100%); -вебкит-трансформ: транслатеКс (-100%); непрозирност: 1; трансформ: транслатеКс (-100%);
Када пређете преко поља, слика ће се померити на лево.
#маинвраппер .бок: ховер имг # имаге-4 -моз-трансформ: транслатеКс (-100%); -о-трансформ: транслатеКс (-100%); -вебкит-трансформ: транслатеКс (-100%); трансформ: транслатеКс (-100%);
Цаптион Бехавиор 5: Ротирај га.
Овај наслов се разликује од осталих, јер се неће померити десно или лево, али ће се ротирати. Када се оквир налази на лебдењу, див који садржи слику и натпис ће се ротирати -180 супротно од казаљке на сату скривајући слику и приказујући наслов.
/ ** Ротате Цаптион: ховер Бехавиор ** / #маинвраппер .бок: ховер .ротате бацкгроунд-цолор: ргба (0,0,0,1)! -моз-трансформ: ротација (-180дег); -о-трансформ: ротација (-180дег); -вебкит-трансформ: ротирати (-180дег); трансформ: ротате (-180дег);
Цаптион Бехавиоур 6: Скали је.
Овај опис ће комбиновати неколико ефеката трансформације. Када се оквир налази на лебди, слика ће се повећати за 140% (1.4) од почетне димензије.
#маинвраппер .бок: ховер # имаге-6 -моз-трансформ: скала (1.4); -о-трансформ: скала (1.4); -вебкит-трансформ: скала (1.4); трансформација: скала (1.4);
И ако сте видели ЦСС изнад Наслов 6 наслова, сакрили смо текст лијево од 200пк. Овај ЦСС код испод наводи текст да се помери у почетну позицију. Дакле, текст ће се истовремено померати са леве на десно.
#маинвраппер .бок: ховер .сцале-цаптион х3, #маинвраппер .бок: ховер .сцале-цаптион п -моз-трансформ: транслатеКс (200пк); -о-трансформ: транслатеКс (200пк); -вебкит-трансформ: транслатеКс (200пк); трансформ: транслатеКс (200пк);
- Демо
- Довнлоад соурце
Сажетак
Иако су ове ЦСС карактеристике кул, али још није широко применљив, због ограничења подршке коју смо раније поменули. Међутим, наставите да експериментишете са овим новим функцијама, јер ћемо тако убудуће обликовати веб страницу.
Кредити
Сличице слика у водичу преузете су са следећих веб страница (снимак екрана):
- А Боок Апарт
- Арцхидуцхессе
- Влог
- Хонгкиат
- Фарма за поздрављање
- Марк Ецко
