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

CSS трикове
(Кредит за изображение: Гети Имиджис)

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

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

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



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

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

01. Разгледайте режимите на смесване на CSS

Двутонните изображения и ефектите на оцветителя са едни от най-горещите тенденции в уеб дизайна. Те са широко популярни в мрежата благодарение на Spotify, който ги прилага последователно. Сега най-накрая можете да спрете да създавате множество разноцветни версии на активите си и да приложите ефектите директно в браузъра.

Използването на CSS режими на смесване е не само чудесен начин за унифициране на външния вид на съдържанието в уебсайтове, но също така ви позволява да задавате различни цветни версии на изображение, променяйки само една стойност в CSS: цвета. Има 15 възможни стойности на режим на смесване, включително екран, наслагване, изсветляване и потъмняване.

CSS трикове: Уебсайт на Ortiz Leon Architects CSS

Ortiz Leon Architects използва режими на смесване, за да генерира дуотонен фон на изображението

Има няколко метода за изпълнение, в зависимост от вида на елемента, към който искате да приложите ефекта. Например можете да използвате фоново изображение и цвят на фона в режим на смесване на фона на контейнера: потъмняват; , или създайте наслагване с псевдоелементи (т.е. :преди и :след ) върху обвивката на изображението, за да се получи оцветяващ ефект.

За да постигнете задоволителен дуотонен ефект, препоръчително е да използвате черно-бяло изображение с висок контраст. Можете да направите това, като приложите CSS филтри, за да зададете скала на сивото и високо ниво на контраст.

CSS трикове: Bolden

Уебсайтът на Bolden има този страхотен пример за микс-бленд режим, който е напълно постигнат в CSS

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

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

02. Добавете маска

Маскирането казва на вашия браузър кои елементи на активите трябва да бъдат видими и е много полезно за изграждане на креативни форми и оформления. Маскирането може да се извърши по три начина: използване на растерно изображение (напр. PNG формат с прозрачни части), CSS градиенти или SVG елементи.

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

img { mask-image: url(‘mask.png’) linear-gradient(-45deg, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%); mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/ }

Важно е да споменем, че Firefox поддържа само най-новия, така че трябва да използваме вграден SVG елемент на маска. Ами ако използваме растерно изображение с нива на прозрачност? Прозрачните части на изображението няма да се видят - така че с други думи, непрозрачните фрагменти ще бъдат показани, скривайки други парчета.

Маскирането е особено мощно, защото ви позволява да приложите същите свойства към фоновите изображения, като дефинирате тяхната позиция, размер и повторение.

CSS трикове: Добавете маска

Тук червеният фон е видимата част и текстът ще се появи иззад планините (щракнете върху изображението, за да видите финалната маска)

Един чудесен случай за CSS маскиране е в статии, които комбинират текст и изображения. Неправилните контейнери и изображения са много популярни в печата, но досадни и отнема много време за внедряване в мрежата. Но благодарение на маскирането, не повече!

Можете също така да се забавлявате, като използвате нива на прозрачност, за да изрежете част от анимираните изображения (напр. GIF файлове ). Въпреки това, когато използвате тези свойства, не забравяйте за поддръжката на различни браузъри и добавете префикси на доставчици.

03. Не се страхувайте от изрязване

Друга чудесна функция е CSS изрязването. Границата на дадена форма се нарича clip-path (да не се бърка със оттегленото свойство clip) и отрязването определя коя област на изображението да бъде видима. Изрязването е подобно на изрязването на лист хартия - всичко извън пътя ще бъде скрито, докато всичко вътре в пътя ще бъде видимо.

clip-path: circle(radius at x, y); clip-path: url(#clipping); /*referencing to SVG element*/

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

Готиното е, че можем да използваме функции за форми и SVG като пътеки за клипове, което ни дава много възможности - например, можем да ги анимираме в преобразуващи се форми. Вижте това статия от Крис Койер за създаването на прозрачен JPG с помощта на SVG път на клип.

CSS уебсайтове

С пътя на клипа можете да премахнете фона от изображението си (щракнете, за да видите пълния пример)

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

Ето защо се препоръчва да използвате маски, когато искате ефект на частична прозрачност; ако искате свежи ръбове, най-добре е да използвате пътищата на клипа.

04. Мислете извън кутията

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

И така, как работи? Просто приложете следния код към даденото плаващо изображение или контейнер:

shape-outside: circle(50%); /* content will flow around the circle*/

Важно е да се отбележи, че свойството float и размерите на елемента - височина и ширина - трябва да бъдат дефинирани, в противен случай това няма да работи. За формата, с която можете да отидете кръг () , многоъгълник () , вложка () или елипса () .

Друга възможна стойност е url () функция. В този случай това позволява на свойството shape-outside да дефинира форма на елемент въз основа на изображението. Можете да изберете да използвате url () функция вместо многоъгълник () когато имате особено сложна графика с много криви и точки и искате съдържанието да се увива плавно около нея.

CSS трикове: DevTools

Използвайте DevTools, за да проверите как се държи фигурата, която сте проектирали за вашия текст (щракнете върху изображението, за да видите този пример)

Ако искате да създадете повече място между вашия елемент и съдържанието, използвайте марж на формата собственост, която ще действа точно като марж. Функциите на формата могат да бъдат анимирани, но само за дефинирани полигони - url () функцията за съжаление не може да бъде анимирана.

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

05. Опитайте SVG за анимация

Честно казано, не мога да си представя днешната мрежа без SVG (мащабируема векторна графика). Името му говори само за себе си - то се мащабира, така че отговаря на всички притеснения относно отзивчив уеб дизайн . Графиката SVG ще бъде отчетлива, независимо от разделителната способност на екрана на устройството, на което се гледа.

Освен мащабируемостта, има и друга функция, която трябва да ви насърчи да играете със SVG: възможността да манипулирате SVG с CSS. Ако никога не сте опитвали да се занимавате с CSS анимации и SVG код, трябва да опитате сега - невероятно е колко бързо можете да постигнете невероятни ефекти.

CSS трикове: CSSconf Nordic

Това анимирано слайдшоу е от презентацията на Aga в CSSconf Nordic и е създадено изцяло в HTML и SVG (щракнете, за да го видите в действие)

Може би си мислите, че в някои случаи е по-лесно да използвате растерни изображения, но SVG има едно голямо предимство пред обикновените изображения. Думите, включени в SVG, се съхраняват в таг и така остава текст, което го прави търсещ, избираем и достъпен. Това също означава, че можете да го редактирате директно в кода. Трябва обаче да не забравяме да вградим лицето на шрифта, за да сме сигурни, че шрифтът ще бъде изобразен.

Анимирането на SVG с CSS прилича на анимиране на всеки друг елемент в HTML - може да се направи с преходи, трансформации и анимации на ключови кадри. След като се запознаете с SVG кода, останалото е просто и много интуитивно, защото по принцип го правите точно както бихте направили в HTML.

Най-страхотното при SVG е, че можете да вземете каквато част искате и да я оживите с CSS анимации. Това означава, че можем да създадем някои много интересни динамични ефекти, не непременно с помощта на JavaScript. SVG има свой собствен DOM API, така че всъщност целият SVG код може лесно да бъде проверен с помощта на DevTools, което горещо препоръчвам да използвате, докато изследвате тази тема.

06. Вдигнете малко шум

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

CSS трикове: Tennent Brown

Този ефект е много лесен за кодиране и добавя силен визуален акцент към уебсайт (щракнете, за да го видите на живо)

Перфектният пример за това как да го направите само в CSS можете да намерите на Капитан Анонимен 'CodePen , който представя изкривен, анимиран текст. Един ред код прави магията:

transform:skew(60deg, -30deg) scaleY(.66667);

07. Бъдете креативни с колаж

Вдъхновените от колажа дизайни се наслаждават на своя момент във визуалните изкуства - докато изследват тази статия, работата на Розана Уебстър и Баракуз веднага открадна сърцето ми - и дори в мрежата те получават все повече и повече внимание. Ако се съмнявате, разгледайте началната страница на MailChimp (по-долу). Забелязахте ли колажа?

CSS трикове: MailChimp

Колажите на началната страница на Mailchimp са създадени с помощта на игриви CSS свойства

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

Подготвих няколко примера, използващи всички тези страхотни CSS свойства, така че можете да видите как те могат да се комбинират, за да се постигне стил, подобен на колаж в мрежата. Разгледайте моите примери .

08. Не забравяйте поддръжката на браузъра

Ако се чувствате задържани, когато искате да използвате CSS свойства, за които подозирате, че не се поддържат от всички браузъри, @поддържа правилото е там, за да ви помогне. @поддържа ви позволява да проверите поддръжката на браузъра за CSS свойство: двойки стойност.

Кодът, който е включен в @поддържа block ще се изобрази само ако тези условия са верни, в противен случай кодът не е прочетен от браузъра. В случай, че браузърът не разбира @поддържа , той също не генерира дадена част от кода.

@supports (mix-blend-mode: overlay) { .example { mix-blend-mode: overlay; } }

Комбинирането на функции като смесване на режими, маскиране, изрязване, CSS форми и силата на SVG ни дава страхотен набор от инструменти, за да повишим креативността си и да се откъснем от нормата. С тези инструменти имаме възможност да създадем уеб версия на нещата, които в момента виждаме в печат.

Въпреки че някои свойства все още могат да имат проблеми със съвместимостта на браузърите (ако имате много проблеми, помислете за по-надежден уеб хостинг услуга), не се колебайте да играете с тях. Въпреки че поддръжката на браузъра може да бъде ограничена сега, това вероятно няма да е така в бъдеще. Въпрос на време е.

Тази статия първоначално е публикувана в списание net.

Свързани статии: