Създайте анимирано CSS изкуство
Създаването на CSS изображения е забавен начин да упражните уменията си и да създадете изящно произведение на изкуството. Това е приятна почивка от обичайния ежедневен стил на уеб компонентите. Всичко, от което се нуждаете, за да започнете, е празен документ и CSS файл; препоръчваме да използвате Sass, което ще ви позволи да използвате повторно стиловете си и да напишете по-прости селектори (вижте нашето ръководство за какво е Сас? за да научите повече за този препроцесор).
Ще започнем с някои най-добри съвети за овладяване на CSS изкуство, след което ще ви покажем как да пресъздадете този анимиран балон Pikachu, използвайки само CSS (уверете се, че поддържате файловете си в прилично състояние съхранение в облака ).
За повече вдъхновение разгледайте нашия обзор на невероятни Примери за CSS анимация . След нещо по-основно? Започнете с учене как да създадете ледена близалка с помощта на CSS .
Или, ако стартирате нов сайт, отхвърлете сложността с брилянтен уеб конструктор и се уверете, че сте получили своя уеб хостинг място на.
Намалете дизайна до прости форми
Когато създавате CSS изкуство, може да ви помогне да разгледате няколко референтни изображения за вдъхновение и след това да създадете опростена вариация на карикатура, докато вървите, представяйки обекта с помощта на примитивни форми, които правят по-добре CSS фигури .
Използвайте ярък фон, за да помогнете с позиционирането
Когато се припокриват форми с подобни цветове, е трудно да се види къде са поставени или как изглеждат. Полезно е формата, върху която работите, да се откроява, като промените Цвят на фона към нещо ярко и весело, като пурпурно. Това ви позволява лесно да видите точната позиция и форма на вашия елемент.
Използвайте размери на течността
Когато става въпрос за дефиниране на px стойност за свойства, бихме препоръчали използването на rem единица. В случай, че решите, че искате общата ви фигура да бъде по-голяма или по-малка, като използвате rem единици, трябва само да промените основата html {размер на шрифта: ... px} в Sass, за да увеличите или намалите цялото произведение на изкуството.
Когато се определят височините и ширините на дъщерни елементи, които трябва да имат относително оразмеряване спрямо родителя, процентите са полезни. Тъй като тези стойности винаги са относителни към техния родител, те също трябва да се мащабират с html размер на шрифта .
01. Започнете с контейнери
Опаковъчен контейнер, в който да се съхраняват произведенията на изкуството, е добро начало. В контейнера можем да поставим три вътрешни контейнера - главата, тялото и балоните.
Контейнерът обикновено трябва да бъде позиция: относителна за да позволи на други елементи да бъдат поставени относително вътре в него с помощта позиция: абсолютна и имат добре дефинирана височина и ширина, в противен случай позиционирането на дъщерни елементи става трудно.
Във вашите стилове добавете основните си цветове като променливи на Sass за повторна употреба. Сас изсветлете () и потъмнява () функциите ще създадат нюанси и нюанси на вашите цветове, които могат да се използват като акценти или сенки за вашия герой.
02. Оформете главата
След като структурата е разбрана, нека първо оформим главата. В този случай главата прави хубава централна точка за произведението на изкуството, така че вместо да задава позицията си на абсолютна, тя може да бъде настроена на относителна. Това позволява на контейнера да има стабилен елемент вътре в него, като дава на останалите плаващи абсолютни елементи точка на закрепване и по този начин по-голям контрол върху тяхното положение.
Чертите на лицето ще се нуждаят от контейнер за позициониране, така че създайте a вътре в контейнера за глава за жълтата форма с ширина, височина и цвят на фона - сега нека направим този правоъгълник да изглежда по-скоро като форма на глава. Едно от най-често срещаните и полезни свойства в CSS изкуството е граница-радиус свойство, което променя кривата на X или Y на ъглите на кутията и може да се използва за създаване на по-органични форми.
Използвайки тази техника с комбинация rem и процент, можете да правите подобни на петна форми, а не просто обикновени елипси, които естествено се мащабират с html {размер на шрифта: ... px} :
.face { border-top-left-radius: 50% 4.5rem; border-top-right-radius: 50% 4.5rem; border-bottom-left-radius: 50% 3rem; border-bottom-right-radius: 50% 3rem; ... }След усъвършенстване на главата граница-радиус , позиционирайте останалите черти на лицето като детски елементи на главата, като очите, бузите, носа и ушите. Подобно на главата, на граница-радиус трикът ще ви бъде полезен оттогава граничен радиус: 50% може да не изглежда привлекателно.
03. Преминете към тялото
Тяло може да се постави в контейнера на тялото зад главата и да се оформи със същия граница-радиус техника, както и ръцете, краката и опашката. За да се даде възможност за правилно припокриване, действителното тяло трябва да бъде свой собствен елемент, тъй като някои вътрешни елементи като задните ивици ще трябва да бъдат отрязани с преливане: скрито . За да придаде на тялото по-голяма дълбочина, преобразуване: изкривяване () собственост може леко да прогони тялото.
Опашката на мълнията може да бъде изградена с помощта на три отделни правоъгълника, вместо да се опитва да формира тази форма от един елемент. Правоъгълниците могат да се въртят и позиционират един върху друг, за да образуват болт. Ръцете и краката могат да използват по-тъмния основен цвят, който създадохме с помощта на Sass потъмнява () така че те се открояват.
04. Добавете балони
Сега, когато електрическата мишка е завършена, нека вържем балони на гърба й. Добавете малко s със споделени стилове с дъщерен низ и ги разположете в купчина над главата. Низът е невидим с изключение на граница-ляво , които помагат да изглежда по-струнно.
За да завържете низа около талията на персонажа, a може да се постави в тялото, за да позволи правилното позициониране. Струната се нуждае от лека извивка, за да изглежда, че е завързана около тялото, така че може да има малка височина, граница-дъно и а граница-дъно ляв и десен радиус, което прави тънка извита линия:
.string { height: 1rem; width: 9rem; border-right: solid 1px $white; border-left: solid 1px $white; border-bottom: solid 1px $white; border-bottom-left-radius: 50% 1rem; border-bottom-right-radius: 50% 1rem; }05. Анимирайте CSS
Можем да дадем живот на героя чрез добавяне @keyframes анимации. Ръцете, краката, ушите и опашката могат да бъдат анимирани преобразуване: завъртане () . Осигурете преобразуване-произход е настроен на ‘ставата’ (т.е. отгоре център за крак) и регулирайте въртенето. Този тип анимация може да се използва няколко пъти в микс на Sass:
@mixin animateRotate($name, $start, $end) { @keyframes #{$name} { 0%, 100% { transform: rotate(#{$start}deg) } 50% { transform: rotate(#{$end}deg) } } }И накрая, добавяне на бавни 5s transform: translateY () анимацията на ключовия кадър ще анимира героя нагоре и надолу, сякаш той е плаващ. За нотка реализъм, мигаща анимация, използваща преобразуване: скала Y (0,1) свойството може да се използва, за да изглежда така, сякаш очите се затварят.
Тази статия първоначално е публикувана в списание за уеб дизайн нето . Купете издание 283 или Абонирай се .
Прочетете още:
- 5 неща, които никога не сте знаели за CSS
- Добавете SVG филтри с CSS
- Как да кодирам интелигентни текстови ефекти с CSS
