Садржај
- 01. Поставите се
- 02. Завршите ХТМЛ
- 03. Истражите Сасс променљиве
- 04. Подесите стил тела
- 05. Обликујте наслове одељака
- 06. Нека се ЦТА истакну
- 07. Поставите позадину и екране контејнера
- 08. Додајте слике у позадини
- 09. Додајте прелазе и ефекте лебдења
- 10. Пређите на ЈаваСцрипт
- 11. Додајте и уклоните предавање
- 12. Нека буде реагован
Ваша одредишна страница је пресудан елемент у изгледу ваше веб странице. То је прва права прилика која вам је потребна за представљање вашег посла или производа који продајете, па је његов дизајн кључан. Одредишне странице су дизајниране са једним фокусираним циљем познатим као позив на акцију (ЦТА). Коришћење боја и слика за допуну позива на акцију и корисничког искуства је неопходно.
- Погледајте радни ЦодеПен за ово упутство
У овом упутству ћемо проћи кроз упутства о томе како да направите занимљиву одредишну страницу за измишљени модни бренд. Усредсредиће се на дизајн подељеног екрана са великим сликама и анимираним прелазима који се дешавају када задржите показивач.Ова страница ће имати два јасна дугмета за позив на акцију, а ми ћемо користити ХТМЛ, Сасс за обликовање и додир ванилије ЈаваСцрипт који користи синтаксу ЕС6 (не заборавите да се уверите да ваш веб хостинг одговара вашим потребама). Превише сложен? Направите веб локацију без потребе за кодом, испробајте једноставну израду веб страница.
01. Поставите се
Ако користите ЦодеПен, уверите се да је ЦСС подешен на „СЦСС“ у подешавањима оловке. Ову промену можете да извршите кликом на картицу подешавања, одаберите „ЦСС“ и у падајућим опцијама промените ЦСС Препроцессор у СЦСС.
Тада можемо започети додавање у наш ХТМЛ. Умотаћемо одељак под називом „лево“ и одељак под називом „десно“ унутар класе контејнера, при чему ће оба одељка добити класу „сцреен“.
див> сецтион> / сецтион> сецтион> / сецтион> / див>
02. Завршите ХТМЛ
Да бисмо довршили наш ХТМЛ, додаћемо наслов за сваки одељак користећи х1 ознака. Испод тога мораћемо да додамо дугме које ће водити до друге странице ако је ово пројекат из стварног света. Даћемо ово класи дугме да ствари буду лепе и једноставне.
див> сецтион> х1> Менс Фасхион / х1> буттон> а хреф = "#"> Леарн Море / а> / буттон> / сецтион> сецтион> х1> Воменс Фасхион / х1> буттон> а хреф = "#"> Леарн Још / а> / тастер> / сецтион>
03. Истражите Сасс променљиве
Једина ствар коју сви волимо код Сасс-а је употреба променљивих. Иако изворне ЦСС променљиве добијају већу подршку, ми ћемо заштитити ствари помоћу Сасс-а. Ставићемо их на врх нашег .сцсс, и можете одабрати које год боје желите, али користећи ргба вредности ће нам дати већу флексибилност.
/ * * Променљиве * * / $ цонтаинер-БгЦолор: # 444; $ лефт-бгЦолор: ргба (136, 226, 247, 0,7); $ лево-тастер-лебди: ргба (94, 226, 247, 0.7); $ ригхт-бгЦолор: ргба (227, 140, 219, 0,8); $ десни тастер-лебди: ргба (255, 140, 219, 0.7); $ ховер-видтх: 75%; $ мала ширина: 25%; $ аниматеСпеед: 1000мс;
04. Подесите стил тела
Прво ћемо обрисати све подразумеване облоге и маргине на телу, а затим ћемо породицу фонтова поставити на Опен Санс. Ово ће утицати само на дугме, па није превише важно који фонт користимо. Тада ћемо поставити ширину и висину на 100% и уверите се да се све што се прелије на Кс оси сакрије.
хтмл, боди {додатак: 0; маржа: 0; породица фонтова: ’Опен Санс’, санс-сериф; ширина: 100%; висина: 100%; оверфлов-к: хидден; }
05. Обликујте наслове одељака
Време је да одаберемо Гоогле фонт за наслове одељака - изабрали смо Плаифаир Дисплаи. Затим користећи транслатеКс можемо бити сигурни да су наслови одељака увек центрирани на Кс оси.
х1 {фонт-сизе: 5рем; боја: #ффф; позиција: апсолутна; лево: 50%; врх: 20%; трансформација: транслатеКс (-50%); празан простор: новрап; породица фонтова: ’Плаифаир Дисплаи’, сериф; }
06. Нека се ЦТА истакну
Наши тастери ће деловати као позиви на акцију, тако да они морају бити велики, подебљани и позиционирани тамо где их је лако кликнути. Оба дугмета ће имати белу ивицу и занимљив ефекат прелаза. Подразумевани стилови за оба дугмета биће исти, међутим њихове боје ћемо променити када задржите показивач.
.буттон {приказ: блок; позиција: апсолутна; лево: 50%; врх: 50%; висина: 2.6рем; облога: 1.2рем; ширина: 15рем; поравнање текста: центар; бела боја; граница: 3пк солид #ффф; радијус границе: 4пк; тежина фонта: 600; трансформација текста: велика слова; декорација текста: ниједна; трансформација: транслатеКс (-50%); прелаз: сви .2с;
Главна дугмад ће имати леп једноставан ефекат лебдења и користићемо променљиве Сасс које смо навели за боју, а која ће бити слична боји позадине странице.
.сцреен.лефт .буттон: ховер {бацкгроунд-цолор: $ лефт-буттон-ховер; боја обруба: $ леви тастер-лебди; } .сцреен.ригхт .буттон: ховер {бацкгроунд-цолор: $ ригхт-буттон-ховер; боја обруба: $ десни тастер-лебди;
07. Поставите позадину и екране контејнера
Класа контејнера ће деловати као наш омотач странице и поставићемо положај ове релативне, једноставно зато што желимо да поставимо екране на апсолутно позиционирање. Контејнеру ћемо доделити подразумевану боју позадине, али то се наравно неће видети, јер ћемо подесити различите боје за обе позадине екрана.
.контејнер {положај: релативан; ширина: 100%; висина: 100%; позадина: $ цонтаинер-БгЦолор; .сцреен {позиција: апсолутно; ширина: 50%; висина: 100%; прелив: скривен; }}
08. Додајте слике у позадини
И леви и десни одељак ће приказати слику, а можете пронаћи бесплатне бесплатне слике са веб локација као што су Унспласх, Пикабаи или Пекелс (које сам користио у овом упутству). Да бих олакшао ствари, користио сам бесплатну услугу хостинга и дељења слика под називом имгбб на коју можемо да се повежемо у нашем ЦСС-у.
.сцреен.лефт {лефт: 0; позадина: урл (’хттпс://превиев.ибб.цо/цпабРм/пекелс_пхото_450212_1.јпг’) центар центар без понављања; величина позадине: поклопац; &: пре {позиција: апсолутно; садржај: ""; ширина: 100%; висина: 100%; позадина: $ лефт-бгЦолор; }}
На десној страни странице такође ће се приказати слика у позадини помоћу имгбб-а, а боју позадине поставићемо на ружичасту. Поново смо поставили величину позадине на поклопац. То ће нам омогућити да покријемо читав елемент који садржи, а који је у нашем случају .сцреен класа.
.сцреен.ригхт {десно: 0; позадина: урл (’хттпс://превиев.ибб.цо/мТоПЦР/сетх_доиле_82563_1.јпг’) центар центар без понављања; величина позадине: поклопац; &: пре {позиција: апсолутно; садржај: ""; ширина: 100%; висина: 100%; позадина: $ ригхт-бгЦолор; }}
09. Додајте прелазе и ефекте лебдења
Брзином анимације за наш ефекат лебдења на оба екрана управљаће се прелазом који држи вредност наше променљиве $ аниматеСпеед, што је 1000мс (једна секунда). Тада ћемо завршити давањем анимацији мало олакшања, што је лакоћа уласка и изласка која ће нам помоћи да добијемо углађенију анимацију.
.сцреен.лефт, .сцреен.ригхт, .сцреен.ригхт: бефоре, .сцреен.лефт: бефоре {прелаз: $ аниматеСпеед све олакшавање уласка; }
Оно што желимо да се сада догоди је да када задржите показивач изнад левог екрана, том одељку ће се додати класа помоћу ЈаваСцрипт-а (што ћемо написати у каснијем кораку). Када се дода ова класа, тада ће се тај екран протезати на било коју ширину променљиве коју смо навели - која ће бити 75%, а затим ће десна страна бити подешена на мању променљиву ширине (25%).
.ховер-лефт .лефт {видтх: $ ховер-видтх; } .ховер-лефт .ригхт {видтх: $ смалл-видтх; } .ховер-лефт .десно: пре {з-индек: 2; }
Ово ради потпуно исто као и на левој страни, где ће се додати нова класа приликом преласка мишем преко курсора помоћу ЈаваСцрипт-а, а десни екран ће се у складу с тим развући. Такође морамо осигурати да з-индекс је подешен на 2 тако да ЦТА дугме постаје истакнутије.
.ховер-ригхт .ригхт {видтх: $ ховер-видтх; } .ховер-ригхт .лефт {видтх: $ смалл-видтх; } .ховер-ригхт .лефт: бефоре {з-индек: 2; }
10. Пређите на ЈаваСцрипт
Користићемо додир ванилије ЈаваСцрипт-а да би нам помогли да додамо и уклонимо ЦСС класе, а користићемо и неке од нових ЕС6 карактеристика. Прво што треба да урадимо је да декларишемо неке константне променљиве.
Јер ћемо користити документ више пута ћемо поставити константну променљиву тзв доц и сачувајте документ у њему како бисмо могли да реч „документ“ држимо лепо и кратко.
цонст доц = документ;
Сада морамо да поставимо још три константе које ће чувати .јел тако, .лево и .контејнер селектори. Разлог зашто користимо константе је тај што знамо да не желимо да мењамо вредност њих, па употреба константи има смисла. Са овим сада постављеним, можемо да им додамо неке догађаје миша.
цонст ригхт = доц.куериСелецтор (".десно"); цонст лефт = доц.куериСелецтор (". лефт"); цонст цонтаинер = доц.куериСелецтор (". контејнер");
Помоћу лево константна променљива коју смо прогласили у последњем кораку, сада јој можемо додати слушалац догађаја. Овај догађај ће бити моусеентер догађаја и уместо да користимо функцију повратног позива, користићемо другу ЕС6 функцију која се зове Функције стрелице ’(() =>).
// додаје класу елементу контејнера на ховер лефт.аддЕвентЛистенер ("моусеентер", () => {цонтаинер.цлассЛист.адд ("ховер-лефт");});
11. Додајте и уклоните предавање
У последњем кораку је наш слушалац догађаја додао а моусеентер догађај који циља главну класу контејнера и додаје нову класу која се зове лебдење лево до левог елемента секције. Када је ово позвано додато, сада морамо да га уклонимо када пређемо показивач изнад њега. То ћемо урадити помоћу мишји лист догађај и .ремове () метода.
// уклања класу која је додата на ховер лефт.аддЕвентЛистенер ("моуселеаве", () => {цонтаинер.цлассЛист.ремове ("ховер-лефт");});
До сада смо радили све на левом екрану. Сада ћемо довршити ЈаваСцрипт и додати и уклонити класе на правим елементима одељка. Поново смо овде користили синтаксу функције стрелице да би све изгледало лепо и уредно.
ригхт.аддЕвентЛистенер ("моусеентер", () => {цонтаинер.цлассЛист.адд ("ховер-ригхт");}); ригхт.аддЕвентЛистенер ("моуселеаве", () => {цонтаинер.цлассЛист.ремове ("ховер-ригхт");});
12. Нека буде реагован
Ниједан пројекат - без обзира на то колико је велик или мали - не би требало да избегава да буде реагован. Дакле, у овом кораку ћемо додати неке медијске упите у наш ЦСС и учинити овај мали пројекат што је могуће прилагодљивијим мобилним уређајима. Вреди погледати оригинални ЦодеПен да бисте видели како ово функционише.
@медиа (мак-видтх: 800пк) {х1 {фонт-сизе: 2рем; } .буттон {ширина: 12рем; }
Уверили смо се да ће се када се ширина странице смањи на 800 пиксела величина фонта и дугмади смањити. Дакле, да довршимо ствари, желимо да циљамо и висину и побринимо се да се наша дугмад померају по страници када висина странице падне испод 700 пк.
@медиа (мак-хеигхт: 700пк) {.буттон {топ: 70%; }}
Желите да сачувате своје странице? Извезите их као ПДФ датотеке и сачувајте у сигурном складишту у облаку.
Догађај за веб дизајн Генериши Лондон враћа се 19. и 21. септембра 2018. године, нудећи препун распоред водећих говорника у индустрији, целодневне радионице и драгоцене могућности умрежавања - не пропустите. Набавите своју Генерате карту одмах.
Овај чланак је првобитно објављен у часопису нет издање 305. Претплати се сада.
