10 невероватних ЦСС трикова за трансформацију веб изгледа

Свако са искуством у веб дизајну, било да сте користили „уради сам“ креаторе веб локација или направили сајт од нуле, вероватно је раније чуо за ЦСС. Овај невероватно моћан алат се може користити за трансформацију ваших веб изгледа, дајући вам моћ да преузмете контролу над својом веб локацијом и остварите своју креативну визију. Али како можете да користите каскадне табеле стилова да бисте откључали потенцијал ваше следеће веб странице?

Овај водич ће само детаљно описати низ ЦСС својстава која су сва коришћена за креирање заглавља које можете видети на горњој слици. Овај пројекат можете пронаћи овде на ЦодеПен, дајући вам прилику да сами испробате.

ЦСС манипулација сликама

Први корак који треба да урадимо да бисмо направили одељак заглавља је додавање слика на страницу. Можете користити низ метода да бисте постигли овај циљ, па смо покрили најпопуларније, заједно са неколико трикова који ће вам помоћи да манипулишете својим сликама.

1. ЦСС позадинска слика

Желимо да имамо позадинску слику преко целог екрана за наше заглавље, а ЦСС својство позадинске слике је идеално. Прво, треба да направимо контејнер за нашу слику (и остале елементе у заглављу).

Почели смо тако што смо додали див ознаку са „хеадер“ као класу, а затим смо поставили њену висина до 100вх и његове ширина до 100вв; ово нам даје оквир који је потпуно исте величине као оквир за приказ. Такође смо додали ЦСС правило за тело странице, са његовим преливање постављено на скривено и његове маргине постављене на 0пк.

Са контејнером на месту, можемо додати слику у позадини, а постоје три различита ЦСС правила која су нам потребна да бисмо постигли овај циљ. Првој, позадинској слици, потребна је УРЛ адреса да би деловала као извор позадинске слике, а за ово смо користили згодан каталог Унспласх. Такође треба да поставимо величина позадине за покривање анд тхе позадински положај до дна, али можда ћете желети да експериментишете са овим за најбоље резултате.

2. ЦСС Бацкгроунд-Бленд-Моде

ЦСС режими мешања омогућавају мешање слика и текста, слично као функција мешања у софтверу као што је Адобе Пхотосхоп. Да би режими мешања функционисали са нашом позадинском сликом, поставили смо од боје позадине до полупровидне беле пре додавања режима мешања који смо желели да користимо.

Прате овај, бацкгроунд-бленд-моде је подешен на меко светло, што нам омогућава да ублажимо слику.

3. ЦСС Цлип-Патх

За наш следећи трик, користићемо правило које се зове цлип-патх. Када користите имг ХТМЛ ознаке, можете поставити путању која ће сакрити делове слика са којима радите. Можете изабрати да користите опште облике за ово, али такође можете користити апликацију која генерише СВГ да бисте креирали сложенији дизајн.

Додали смо див ознаку са „флек_имаге_бок“ да делује као контејнер за три слике, користећи својство дисплаи ЦСС да га претворимо у флекбок (о томе ћемо касније). Три ознаке имг су додате унутар див ознаке, са ИД-овима постављеним као "имг1", "имг2" и "имг3". Подешавање ширина сваке слике до 600 пиксела, можемо оставите својство висине празним без промене односа ширине и висине слике; сада је време да додамо нашу путању клипа!

Да бисмо креирали наша три троугла, користили смо исту путању клипа полигона за имг1 и имг3, са обрнутом верзијом на месту за имг2. Такође смо морали да се поиграмо са позиционирањем нашег флек-бок контејнера да бисмо били сигурни да слике стоје на правом месту на екрану. Наша правила о путањи клипова могу се видети у наставку.

4. ЦСС Опацити

Опацити поставља ниво транспарентности било ког ХТМЛ елемента. Поставили смо непрозирност наших слика до 90%, чинећи их благо непрозирним тако да се лепо стапају са позадином.

ЦСС прилагодљиви текст и слике

Већ смо истражили уметност креирање задивљујућих веб локација које реагују користећи ХТМЛ, ЦСС и ЈаваСцрипт у прошлости, али можемо да градимо на принципима које већ разумете, пружајући дубљи увид у вештине које су вам потребне да бисте савладали изглед ваше веб странице.

1. ЦСС одзивне/релативне јединице

ЦСС јединице као што су пк, пт и цм су апсолутне јединице, а то значи да ће их веб прегледач приказати у истој величини без обзира на ширину и висину прозора који заузимају. Релативне јединице су различите, производе висине и дужине које су релативне у односу на друга мерења, као што је прозор прегледача или родитељски елемент. Релативне јединице у наставку се обично користе и неопходне за респонзивни веб дизајн.

• ем: Ова јединица се обично користи са текстом. То је релативно у односу на величину фонта тренутног елемента, чинећи 4ем четири пута већим од величине фонта која је подешена.
• рем: Као и ем, рем је релативан у односу на величину фонта елемента; основни елемент у хијерархији се користи за дефинисање излазне величине.
• вв/вх: Одређивање ширине и висине на основу величине прозора за приказ, 2вв је једнако 2% ширине претраживача, док је 2вх једнако 2% висине претраживача.
• %: Јединица % израчунава димензије на основу величине надређеног елемента.
• вмин/вмак: Ове јединице производе димензије у односу на 1% најмањих или највећих димензија прозора за приказ, пружајући елементима средства да директно реагују на величину прозора претраживача.

2. Величина ЦСС фонта

Ово својство може да се подеси коришћењем подразумеваних вредности које су унапред дефинисане или главним стилом веб странице или веб претраживачем корисника. Ове вредности укључују средње, кк-мале, к-смалл, смалл, ларге, к-ларге и кк-ларге, при чему је средња вредност подешена као подразумевана за сваки текст који нема ЦСС ознаку величине фонта. Алтернативно, релативне вредности се могу користити када се користи ЦСС својство величине фонта, а ово је метод који смо користили да бисмо обезбедили да текст у нашем одељку заглавља има одговарајућу величину за било који виевпорт.

Додали смо две ознаке наслова у наш ХТМЛ, што нам омогућава да додамо текст у пројекат. Једно је главно велико заглавље, док је друго подзаглавље и оба користе релативне јединице.

Повезан: Како променити величину ХТМЛ фонта у ЦСС-у

3. ЦСС ширина и висина

Сви ХТМЛ елементи долазе са димензијама висине и ширине, било да су див, имг, а или било који други тип ознаке. Ове димензије се могу аутоматски поставити на подразумеване вредности, али их такође могу диктирати веб дизајнери користећи тачна правила; користили смо обе ове методе за ово заглавље.

Реактивне јединице су коришћене за позадинску слику, са висином постављеном на 100вх и ширином на 100вв, али смо такође користили апсолутне јединице за наше три слике. Вреди истражити и експериментисати са ЦСС јединицама ширине и висине, са опцијама као што је „наслеђивање“ које пружају значи усвојити димензије родитељског елемента, а постоји и мноштво других оваквих трикова које можете користити.

4. ЦСС Мик-Бленд-Моде

Режим мешања ЦСС-а је веома сличан режиму мешања позадине, само што се може применити на било који елемент, а не искључиво за позадину. Користили смо ово својство у нашем Х1 наслову да додамо текстуру и учинимо пројекат занимљивијим. Почели смо постављањем нашег боја текста у црну, након чега следи постављање мик-бленд-моде за преклапање.

Вреди истражити различите опције мешања које имате када радите са текстом, јер ће позадине са јединственим профилима боја различито реаговати на подешавања која користите.

5. ЦСС Трансформација текста

ЦСС трансформација текста је паметно својство које омогућава дизајнерима да промене велика и мала слова текста на својим веб локацијама без утицаја на начин на који га претраживачи читају. На пример, имамо подесите тект-трансформ на велика слова на нашем Х1 наслову, чинећи свако слово великим без обзира на то како га уносимо у наш ХТМЛ.

Својства преливања ЦСС-а

ХТМЛ често може изгледати као крути оквир који поставља строге границе за садржај на вашим веб локацијама, али то није случај када се користе својства преливања.

ЦСС Оверфлов & Тект-Оверфлов

Оверфлов и тект-оверфлов су веома слична својства ЦСС-а. Оверфлов се може применити на било који елемент, дајући вам контролу над садржајем који може да побегне из његових граница. Преливање текста је слично, иако се односи само на текст и даје вам могућност да додате додатне параметре својим правилима. Користили смо само оверфлов за овај пројекат (користили смо га да ограничимо величину тела наше странице), али о преливању текста можете прочитати на В3Сцхоолс веб сајт.

Коришћење ЦСС-а за ваше веб распореде

ЦСС је невероватно моћан алат који омогућава веб дизајнерима и програмерима да креирају запањујуће веб странице користећи код. Препоручујемо вам да погледате ЦодеПен који смо дали на почетку чланка, јер ће вам то дати још дубљи увид у то како сви ови алати функционишу. Осим тога, можете се играти са заглављем које смо направили да бисте додали своје завршне детаље.

8 основних ЦСС савета и трикова које сваки програмер треба да зна

Да ли користите ове кључне ЦСС методе за брз ток посла и прелеп веб дизајн?

Реад Нект

О аутору