Мазмун
- 01. Орнотуу
- 02. HTMLди бүтүр
- 03. Sass өзгөрмөлөрүн изилдөө
- 04. Дене стилин жөндөңүз
- 05. Бөлүмдүн аталыштарын стилдеңиз
- 06. CTAs бөлүп көрсөтүү
- 07. Контейнердин фонун жана экрандарын орнотуңуз
- 08. Фондук сүрөттөрдү кошуу
- 09. Өткөөлдөрдү кошуп, эффекттерди алып барыңыз
- 10. JavaScript'ке өтүңүз
- 11. Класс кошуңуз жана алып салыңыз
- 12. Аны кабыл ал
Сиздин конуу бетиңиз веб-сайтыңыздын макетиндеги чечүүчү элемент. Бул сиз бизнесиңизди, же саткан өнүмүңүздү тааныштырууга болгон биринчи чыныгы мүмкүнчүлүк, ошондуктан анын дизайны ачкыч болуп саналат. Конуу баракчалары иш-аракетке чакыруу (CTA) деп аталган бирдиктүү максаттуу иштелип чыккан. Аракетке чакырууларды жана колдонуучунун тажрыйбасын толуктоо үчүн түстөрдү жана сүрөттөрдү колдонуу сөзсүз керек.
- Бул окуу куралы үчүн иштеген CodePen караңыз
Бул окуу куралы, биз ойдон чыгарылган мода бренди үчүн кызыктуу конуу барагын кантип курууга болот. Ал экрандын экрандуу бөлүгүндө чоң сүрөттөр жана кыймылдуу которуулар менен айланып турат.Бул баракчада эки ачык иш-аракет баскычы болот жана биз HTML, Sass үчүн стиль жана ES6 синтаксисин колдонгон ванилин JavaScriptти колдонобуз (веб-хостинг сиздин веб-сайтыңыздын муктаждыктарына шайкеш келээрин унутпаңыз). Өтө татаалбы? Вебсайтты код талап кылбастан түзүңүз, жөнөкөй веб-сайт куруучусун байкап көрүңүз.
01. Орнотуу
Эгер CodePen колдонуп жаткан болсоңуз, Pen орнотууларынан CSS 'SCSS' деп коюлгандыгын текшериңиз. Орнотуулар өтмөгүн чыкылдатып, 'CSS'ти тандап, ачылуучу параметрлерден CSS Preprocessor'ду SCSS кылып өзгөртө аласыз.
Андан кийин HTMLге кошуп баштасак болот. Биз "сол" деп аталган бөлүктү жана "оң" деп аталган бөлүктү контейнер классынын ичине ороп, эки бөлүмгө тең "экран" классы берилет.
div> бөлүм> / бөлүм> бөлүм> / бөлүм> / div>
02. HTMLди бүтүр
HTMLибизди аягына чейин чыгаруу үчүн, ар бир бөлүмгө an колдонуп, аталышын кошобуз h1 тэг Төмөндө биз чыныгы баскычтагы долбоор болсо, башка баракчага шилтеме бере турган баскычты кошушубуз керек. Биз бул классты беребиз баскычы нерселерди жакшы жана жөнөкөй кылуу.
div> section> h1> Mens Fashion / h1> button> a href = "#"> Көбүрөөк билүү / a> / button> / section> section> h1> Womens Fashion / h1> button> a href = "#"> Үйрөнүү Көбүрөөк / а> / баскычы> / бөлүм>
03. Sass өзгөрмөлөрүн изилдөө
Sass биз үчүн жакшы көргөн бир нерсе - бул өзгөрүлмө колдонуу. Түпнуска CSS өзгөрмөлөрү көбүрөөк колдоого ээ болуп жаткандыгына карабастан, биз Sass колдонуп, нерселерди коопсуз сактайбыз. Буларды өзүбүздүн башыбызга коёбуз .scss, жана сиз каалаган түстөрдү тандай аласыз, бирок колдонуп rgba баалуулуктар бизге көбүрөөк ийкемдүүлүктү берет.
/ * * Variables * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0.7); $ сол баскычты көтөрүү: rgba (94, 226, 247, 0.7); $ right-bgColor: rgba (227, 140, 219, 0.8); $ оң баскычы: rgba (255, 140, 219, 0.7); $ hover-width: 75%; $ кичине туурасы: 25%; $ animateSpeed: 1000ms;
04. Дене стилин жөндөңүз
Биринчиден, биз бардык демейки төшөмөлөрдү тазалап, тулку бою менен чектешип, андан кийин шрифттин үй-бүлөсүн Open Sans кылып орнотобуз. Бул баскычка гана таасирин тийгизет, андыктан биз кандай шрифт колдонгонубуз өтө маанилүү эмес. Андан кийин туурасы менен бийиктигин койобуз 100% жана X огунда ашып-ташкан нерселердин баары катылып кала тургандыгын текшерип коюңуз.
html, тулку {padding: 0; margin: 0; font-family: 'Ачык Sans', sans-serif; туурасы: 100%; бийиктиги: 100%; overflow-x: жашырылган; }
05. Бөлүмдүн аталыштарын стилдеңиз
Бөлүмдүн аталыштары үчүн Google шрифтин тандап алууга убакыт келди - биз Playfair Display тандадык. Андан кийин колдонуу translateX биз бөлүмдүн аталыштары ар дайым X огунда топтолгонун текшере алабыз.
h1 {арип өлчөмү: 5rem; color: #fff; абалы: абсолюттук; сол жакта: 50%; жогорку: 20%; өзгөртүү: translateX (-50%); white-space: nowrap; font-family: 'Playfair Display', serif; }
06. CTAs бөлүп көрсөтүү
Биздин баскычтар биздин иш-аракеттерге чакыруубуздун милдетин аткарат, андыктан алар чоң, тайманбас жана басуу оңой болгон жерде жайгаштырылышы керек. Эки баскычтын ак чеги жана кызыктуу өтүү эффектиси болот. Эки баскычтын демейки стилдери бирдей болот, бирок биз алардын өңүн жылдырганда өзгөртөбүз.
.tutton {display: block; абалы: абсолюттук; сол жакта: 50%; жогорку: 50%; бийиктиги: 2.6rem; padding-top: 1.2rem; туурасы: 15rem; текстке тегиздөө: борбор; Ак түс; чек: 3px solid #fff; чек-радиусу: 4px; font-weight: 600; текстти өзгөртүү: чоң тамга; текстти жасалгалоо: жок; өзгөртүү: translateX (-50%); өткөөл: бардык .2s;
Негизги кнопкалар жөнөкөй учуу эффектине ээ болот жана биз түскө көрсөткөн Sass өзгөрмөлөрүн колдонобуз, бул барактын фонуна окшош түс болот.
.screen.left .tutton: hover {background-color: $ left-button-hover; border-color: $ сол баскычы-hover; } .screen.right .баскыч: hover {background-color: $ right-button-hover; border-color: $ right button-hover;
07. Контейнердин фонун жана экрандарын орнотуңуз
Контейнер классы биздин баракча орогучунун милдетин аткарат жана биз экрандарды абсолюттук жайгаштырууга койгонубуз үчүн, анын абалын салыштырмалуу деп коёбуз. Биз контейнерге демейки фон түсүн беребиз, бирок, албетте, бул көрүнбөйт, анткени экөөнүн экөөнө тең ар кандай түстөрдү орнотобуз.
.container {абалы: салыштырмалуу; туурасы: 100%; бийиктиги: 100%; өбөлгөлөрү: $ container-BgColor; .screen {абалы: абсолюттук; туурасы: 50%; бийиктиги: 100%; толуп кетүү: жашырылган; }}
08. Фондук сүрөттөрдү кошуу
Сол жана оң бөлүктөрүндө экөө тең сүрөтүн көрсөтүшөт, жана сиз Unsplash, Pixabay же Pexels сыяктуу веб-сайттардан (мен бул колдонмодо колдонгон) акысыз акциялардын сүрөттөрүн таба аласыз. Ишти жеңилдетүү үчүн, биз CSS'ке шилтеме бере турган imgbb деп аталган акысыз хостинг жана бөлүшүү кызматын колдондум.
.screen.left {left: 0; background: url (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) борбордун борбору кайталабастан; background-size: cover; &: before {position: Absolute; мазмуну: ""; туурасы: 100%; бийиктиги: 100%; фон: $ left-bgColor; }}
Ошондой эле барактын оң тарабында imgbb жардамы менен фондук сүрөт чагылдырылат жана биз фон түсүн кызгылтым кылып коёбуз. Дагы, биз фон өлчөмүн койду жапкыч. Бул бизге бүтүндөй камтылган элементти камтууга мүмкүндүк берет, бул биздин учурда .экран класс.
.screen.right {right: 0; background: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) борбордун борбору кайталабайт; background-size: cover; &: before {position: Absolute; мазмуну: ""; туурасы: 100%; бийиктиги: 100%; background: $ right-bgColor; }}
09. Өткөөлдөрдү кошуп, эффекттерди алып барыңыз
Эки экранда учуу эффектибиз үчүн анимация ылдамдыгы биздин өзгөрмөнүн маанисин кармаган өткөөл аркылуу башкарылат $ animateSpeed, бул 1000 мс (бир секунд). Андан кийин анимацияны бир аз жеңилдетүү менен бүтүрөбүз, бул бизге жеңилирээк анимация берүүгө жардам берген жеңил-желпи.
.screen.left, .screen.right, .screen.right: before, .screen.left: before {өткөөл: $ animateSpeed all ease-in-out; }
Эми биз эмне кылууну каалайбыз, сол экрандын үстүндө жылдырганда, JavaScriptтин жардамы менен ошол бөлүмгө класс кошулат (аны кийинки кадамда жазабыз). Бул класс кошулганда, ал экран биз көрсөткөн өзгөрмөнүн туурасына чейин созулат - ал 75% түзөт, андан кийин оң тарабы кененирээк өзгөрмөгө (25%) коюлат.
.hover-left .left {width: $ hover-width; } .hover-left .right {width: $ small-width; } .hover-left. right: алдында {z-index: 2; }
Бул нерсе JavaScriptтин жардамы менен чычкан көтөрүп чыкканда жаңы класс кошулуп, сол тарабы менен бирдей иштейт жана оң экраны ошого жараша созулат. Ошондой эле, ынануубуз керек z индекси коюлган 2 ошондуктан CTA баскычы көбүрөөк көрүнөт.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-right .left: before {z-index: 2; }
10. JavaScript'ке өтүңүз
CSS класстарын кошууга жана алып салууга жардам берүү үчүн, биз vanilla JavaScript текстин колдонобуз жана жаңы ES6 функцияларын колдонобуз. Биринчи кезекте, кээ бир туруктуу өзгөрүлмөлөрдү жарыялоо керек.
Анткени биз колдонуп калабыз документ деп аталган туруктуу өзгөрмөнү бир нече жолу орнотобуз док жана документти ошол ичинде сактаңыз, ошондо биз 'документ' деген сөздү жакшы жана кыска сактай алабыз.
const doc = документ;
Эми дагы үч туруктуу орнотушубуз керек, ал сактагычты сактайт .right, .сол жана .container селекторлор. Туруктуу колдонуп жаткандыгыбыздын себеби, биз булардын маанисин өзгөрткүбүз келбестигин билгендиктен, туруктуу колдонуунун мааниси бар. Булар орнотулганда, биз аларга чычкан окуяларын кошо алабыз.
const right = doc.querySelector (". right"); const left = doc.querySelector (". сол"); const контейнер = doc.querySelector (". контейнер");
Колдонуу сол акыркы кадамда туруктуу өзгөрүлмө деп жарыяладык, эми ага окуя угуучусун кошо алабыз. Бул иш-чара болот чычкан борбору Кайра чакыруу функциясын колдонуунун ордуна, биз дагы бир ES6 функциясын колдонобуз Жебе Функциялары ’(() =>).
// hover left.addEventListener ("mouseenter", () => {container.classList.add ("hover-left");}) контейнер элементине класс кошот;
11. Класс кошуңуз жана алып салыңыз
Акыркы кадамда биздин иш-чаранын угарманы а чычкан борбору негизги контейнер классын бутага алып, жаңы класс кошкон окуя солго сол бөлүмдүн элементине. Кошулган деп аталып калгандыктан, эми аны алып салганда, аны алып салуу керек. Биз муну чычкан иш-чара жана .remove () ыкма.
// hover left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");}) кошулган классты жок кылат;
Ушул убакка чейин биз сол экранда баарын жасап келгенбиз. Эми биз JavaScriptти бүтүрүп, оң бөлүктүн элементтерине класстарды кошуп, алып салабыз. Баарын кооз жана тыкан кылуу үчүн, биз дагы ушул жерде жебе функциясы синтаксисин колдондук.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Аны кабыл ал
Эч бир долбоор - канчалык чоң же кичине болбосун - жооп берүүдөн алыс болуңуз. Ошентип, бул кадамда биз CSSке айрым медиа суроолорду кошуп, бул чакан долбоорду мобилдик шаймандарга колдон келишинче ыңгайлаштырабыз. Бул кандайча иштээрин билүү үчүн баштапкы CodePenди карап чыгыңыз.
@media (max-width: 800px) {h1 {font-size: 2rem; } .түймөсү {туурасы: 12rem; }
Баракчабыздын кеңдиги 800pxке жеткенде, шрифт жана баскычтар көлөмү кичирейип кетишине ынандык. Ошентип, нерселерди бүтүрүү үчүн биз бийиктикти дагы көздөп, барактын бийиктиги 700pxтен төмөндөгөндө баскычтарыбыз баракка ылдый жылышын каалайбыз.
@media (макс-бийиктиги: 700px) {.түймөсү {жогорку: 70%; }}
Баракчаларыңызды сактагыңыз келеби? Аларды PDF форматында экспорттоп, коопсуз булут сактагычта сактаңыз.
Веб-дизайн иш-чарасы Generate London 2018-жылдын 19-21-сентябрында кайтып келип, өнөр жайдын алдыңкы баяндамачыларынын толгон-токой графигин, семинарлардын толук күнүн жана баалуу тармактык мүмкүнчүлүктөрдү сунуштайт - өткөрүп жибербеңиз. Generate билетин азыр алыңыз.
Бул макала алгач net журналына жарыяланган 305-чыгарылыш. Азыр жазылыңыз.
