10 невероятни CSS трика за трансформиране на вашите уеб оформления

Всеки с опит в уеб дизайна, независимо дали сте използвали DIY конструктори на уебсайтове или сте правили сайт от нулата, вероятно е чувал за CSS преди. Този невероятно мощен инструмент може да се използва за трансформиране на вашите уеб оформления, като ви дава силата да поемете контрола над уебсайта си и да постигнете творческата си визия. Но как можете да използвате каскадни таблици със стилове, за да отключите потенциала на следващия си уебсайт?

Това ръководство ще описва подробно редица CSS свойства, които всички са били използвани за създаване на заглавката, която можете да видите на изображението по-горе. Можете да намерите този проект тук на CodePen, което ви дава възможност да го опитате сами.

CSS манипулация на изображения

Първата стъпка, която трябва да направим, за да изградим нашата секция за заглавки, е добавянето на изображения към страницата. Можете да използвате редица методи, за да постигнете тази цел, така че ние разгледахме най-популярните, заедно с няколко трика, които да ви помогнат да манипулирате вашите изображения.

1. CSS фоново изображение

Искаме да имаме фоново изображение на цял екран за нашия хедър, а свойството CSS за фоново изображение е идеално. Първо, трябва да създадем контейнер за нашето изображение (и останалите елементи в заглавката).

Започнахме с добавяне на div таг с "header" като негов клас, последвано от задаване на неговия височина до 100vh и е ширина до 100vw; това ни дава кутия, която е точно със същия размер като изгледа. Добавихме и CSS правило за тялото на страницата с неговите препълването е зададено на скрито и е полета, зададени на 0px.

Когато контейнерът е на място, можем да добавим фоново изображение и има три различни CSS правила, от които се нуждаем, за да постигнем тази цел. Първото, фоново изображение, се нуждае от URL, за да действа като източник на фоновото изображение и ние използвахме удобния каталог Unsplash за това. Ние също трябва да зададем фон-размер за покриване и на фонова позиция до дъното, но може да искате да експериментирате с тях за най-добри резултати.

2. CSS фонов режим на смесване

CSS режимите на смесване правят възможно смесването на изображения и текст, подобно на функцията за смесване в софтуер като Adobe Photoshop. За да накараме режимите на смесване да работят с нашето фоново изображение, ние задаваме цвят на фона до полупрозрачно бяло преди да добавим режима на смесване, който искахме да използваме.

Следвайки това, Режимът на смесване на фона е настроен на мека светлина, което ни позволява да смекчим изображението.

3. CSS Clip-Path

За следващия ни трик ще използваме правило, наречено clip-path. Когато използвате img HTML тагове, можете да зададете път, който ще скрие части от изображенията, с които работите. Можете да изберете да използвате общи форми за това, но можете също да използвате приложение, генериращо SVG, за да създадете по-сложен дизайн.

Добавихме div таг с "flex_image_box", за да действа като контейнер за три изображения, използвайки свойството display CSS, за да го превърнем в flexbox (ще говорим за това по-късно). Три етикета img бяха добавени в тага div, с идентификатори, зададени като "img1", "img2" и "img3". Настройка на ширина на всяко изображение до 600px, ние сме в състояние оставете свойството височина празно без промяна на съотношението на изображенията; сега е време да добавим нашия клип-път!

За да създадем нашите три триъгълника, използвахме същия полигонен клип-път за img1 и img3, с обърната версия на място за img2. Трябваше също да поиграем с позиционирането на нашия flex-box контейнер, за да сме сигурни, че изображенията са в правилната позиция на екрана. Нашите правила за клип-пътека могат да се видят по-долу.

4. CSS непрозрачност

Непрозрачността задава нивото на прозрачност на всеки HTML елемент. Ние задаваме непрозрачност на нашите изображения до 90%, като ги правите леко непрозрачни, за да се слеят добре с фона.

CSS отзивчив текст и изображения

Вече проучихме изкуството на създаване на зашеметяващи отзивчиви уебсайтове с помощта на HTML, CSS и JavaScript в миналото, но можем да градим върху принципите, които вече разбирате, предоставяйки по-задълбочен поглед върху уменията, от които се нуждаете, за да овладеете оформлението на вашия уебсайт.

1. CSS отзивчиви/относителни единици

CSS единици като px, pt и cm са абсолютни единици и това означава, че уеб браузърът ще ги изобрази със същия размер, независимо от ширината и височината на прозореца, който заемат. Относителните единици са различни, произвеждат височини и дължини, които са относителни спрямо други измервания, като прозореца на браузъра или родителски елемент. Относителните единици по-долу са често използвани и от съществено значение за отзивчивия уеб дизайн.

• ем: Тази единица обикновено се използва с текст. Това е относително към размера на шрифта на текущия елемент, което прави 4em четири пъти по-голям от размера на шрифта, който е зададен.
• рем: Подобно на em, rem е относително към размера на шрифта на елемент; основният елемент в йерархията се използва за дефиниране на изходния размер.
• vw/vh: Определяне на ширината и височината въз основа на размера на изгледа, 2vw се равнява на 2% от ширината на браузъра, докато 2vh се равнява на 2% от височината на браузъра.
• %: % единицата изчислява размерите въз основа на размера на родителя на елемента.
• vmin/vmax: Тези единици произвеждат размери спрямо 1% от най-малките или най-големите размери на изгледа, осигурявайки на елементите средствата да реагират директно на размера на прозореца на браузъра.

2. CSS размер на шрифта

Това свойство може да бъде зададено с помощта на стойности по подразбиране, които са предварително дефинирани или от основната таблица със стилове на уебсайта, или от уеб браузъра на потребителя. Тези стойности включват среден, xx-small, x-small, small, large, x-large и xx-large, като средният е зададен по подразбиране за всеки текст, който няма CSS маркер за размер на шрифта. Като алтернатива могат да се използват относителни стойности, когато се използва свойството на CSS размер на шрифта и това е метод, който сме използвали, за да гарантираме, че текстът в нашия заглавен раздел е оразмерен с подходящ размер за всеки изглед.

Добавихме два заглавни маркера към нашия HTML, което ни позволява да добавяме текст към проекта. Едната е основна голяма заглавка, докато другата е подзаглавка и и двете използват относителни единици.

Свързани: Как да промените размера на HTML шрифта в CSS

3. CSS ширина и височина

Всички HTML елементи идват с размери на височина и ширина, независимо дали са div, img, a или друг тип маркер. Тези измерения могат да бъдат автоматично зададени на стойности по подразбиране, но те също могат да бъдат продиктувани от уеб дизайнери, използвайки правилните правила; използвахме и двата метода за тази заглавка.

За фоновото изображение са използвани отзивчиви единици, като височината е зададена на 100vh и ширината е зададена на 100vw, но ние също използвахме абсолютни единици за нашите три изображения. Струва си да проучите и експериментирате с CSS единици за ширина и височина, с опции като "наследяване", предоставящи означава да приемете размерите на родителски елемент и има много други трикове като този, които можете да използвате.

4. CSS Mix-Blend-Mode

Режимът на смесване на CSS е много подобен на режима на смесване на фона, само че може да се приложи към всеки елемент, вместо да бъде изключително за фонове. Използвахме това свойство в нашето заглавие H1, за да добавим текстура и да направим проекта по-интересен. Започнахме с настройването на нашите цвят на текста до черен, последвано от настройка на mix-blend-mode за наслагване.

Струва си да проучите различните опции за смесване, които имате, когато работите с текст, тъй като фоновете с уникални цветови профили ще реагират различно на настройките, които използвате.

5. CSS текстова трансформация

CSS text-transform е интелигентно свойство, което позволява на дизайнерите да променят малкия и малки букви на текста на своите уебсайтове, без да засягат начина, по който търсачките го четат. Например имаме задайте text-transform на главни букви на нашето заглавие H1, правейки всяка буква главна, независимо как я въвеждаме в нашия HTML.

Свойства на препълване на CSS

HTML често може да изглежда като твърда рамка, която задава строги граници за съдържанието на вашите уебсайтове, но това не е така, когато се използват свойства за препълване.

Препълване на CSS и препълване на текст

Overflow и text-overflow са много сходни CSS свойства. Препълването може да се приложи към всеки елемент, като ви дава контрол върху съдържанието, което може да избяга от неговите граници. Препълването на текст е подобно, макар че се отнася само за текст и ви дава възможност да добавяте допълнителни параметри към вашите правила. Използвахме само overflow за този проект (използвахме го, за да ограничим размера на тялото на нашата страница), но можете да прочетете за препълването на текст на W3Schools уебсайт.

Използване на CSS за вашите уеб оформления

CSS е невероятно мощен инструмент, който позволява на уеб дизайнерите и разработчиците да създават зашеметяващи уебсайтове с помощта на код. Препоръчваме ви да разгледате CodePen, който предоставихме в началото на статията, тъй като това ще ви даде още по-задълбочен поглед върху това как работят всички тези инструменти. Освен това можете да играете с хедъра, който сме направили, за да добавите свои собствени финални щрихи.

8 основни CSS съвета и трика, които всеки разработчик трябва да знае

Използвате ли тези ключови CSS методи за бърз работен процес и красив уеб дизайн?

Прочетете Следващото

За автора