Ознайомлення зі створенням зображень на чистому CSS. Частина перша. Для початківців


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

Роботу векторних художників і фронтенд-розробників часто розділяють. Причина в тому, що, як правило, багато компаній мають досить людей в штаті, тому розділення відбувається заради збільшення продуктивності. Інша поширена причина полягає в тому, що деякі хочуть цілком зосередитися на фронтенд-розробці, тоді як інших більше притягують ілюстрації. В обох галузях є специфічні ніші, в яких можна зосередитися на тому, щоб освоювати дійсно хороші і цінні навички.

Безумовно, такий підхід дуже розсудливий, проте я думаю, що фронтенд-розробка може витягнути немало користі, працюючи з ілюстраціями, навіть якщо це не його основний напрям.

Річ у тому, що ці два навички, по суті, полягають в з’єднанні різних компонентів для створення кінцевого продукту. Ілюстратори сполучають воєдино різні фігури і працюють з формами для того, щоб у результаті отримати малюнок. Фронтенд-розробники, у свою чергу, сполучають воєдино компоненти коду для створення веб-сторінки.

Вивчення основ векторної графіки знайомить вас з макетами, колірними патернами, динамікою форм і в цілому з творчістю, яка є присутнью в роботі фронтенд-розробника.

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

Створення зображення на чистому CSS мається на увазі, що замість програмного забезпечення для створення векторних ілюстрацій (такого, як Inkscape, Illustrator, Affinity Designer або Sketch) ви безпосередньо працюєте з CSS-кодом.

Незважаючи на схожість професій, я думаю, що ілюстраторові тонна CSS-коду, необхідного для створення зображення, може здатися страхітливою, втім, як і фронтенд-розробникові – перспектива створення зображення за допомогою коду.

З цієї причини пропоную до вашої уваги керівництво по створенню вашого першого зображення на чистому CSS, яке, як я сподіваюся:

  • підвищить довіру до створення картинок на чистому CSS;
  • допоможе зрозуміти, як створюються зображення на чистому CSS;
  • якщо ви фронтенд-розробник, то збільшить інтерес до векторної графіки;
  • якщо ви векторний ілюстратор, то збільшить інтерес до фронтенд-розробки;
  • забезпечить базовим шаблоном для створення зображень на чистому CSS.

Компоненти зображень на чистому CSS

Спершу розберемося, що таке “чистий CSS”.

Створення зображень на “чистому CSS” має на увазі додавання CSS-стилів декільком HTML-тегам div.

Приміром, ми можемо створити квадрат усього лише одним div і застосованим до нього стилем:

body{ background:  #1D1f20;}.square{ width: 100px; height: 100px; background: #A58CB6;}

Ми створюватимемо фігури, стилізуючи блоки, щоб сформувати з них фінальну картинку.

Кожен проект на чистому CSS складатиметься з наступних компонентів:

  • тег div для кожної фігури;
  • певний CSS-клас, присвоєний кожному div;
  • невидимий блок, який служитиме в якості полотна.

Але перш ніж приступити до написання коду, давайте розберемося, з яких конкретних форм складається зображення.

Структура фігур

По-перше, усе зображення коали було побудоване поверх невидимого квадратного полотна (це не офіційний термін). Це невидиме поле розташовуватиметься в центрі body, а голова – в центрі поля. Особисто мені здається, що це хороша практика, яка спрощує чуйний дизайн (детальніше про це у кінці статті).

А доки просто майте на увазі, що нам належить мати справу з невидимим прямокутним полем, яке я виділив нижче:

По-друге, у нас є круг у центрі веб-сторінки, на основі якого ми створюватимемо голову.

Далі ми створимо вуха, які розташовуються з боків голови. Кожне вухо складається з двох різноколірних кругів, які накладаються один на одного, один круг трохи менше іншого. Ми проводитимемо відмінність між div вуха і div “внутрішнього вуха”.

Крім того, у нас є пара очей, які також являються кругами, накладеними один поверх іншого. Вони відрізняються кольором і розміром: більший круг – білий, а менший (зіниця) – чорний.

Далі ми створимо ніс у вигляді коричневого прямокутника із заукругленими кутами, і розташуємо його під очима.

І останній штрих – два пучки сірого волосся у формі трикутників, що мають різне положення на верхівці коали.

Ще одна важлива річ, про яку варто згадати, – це те, що для створення зображення ми також використовуватимемо різні шари. Вуха будуть позаду голови, ніс – перед очима і так далі. Це стане зрозуміліше, коли ми візьмемося до роботи з CSS.

HTML

Примітка: щоб додати нашій коалі волосся, ми використовуватимемо метод clip - path. Він підтримується в Chrome, Safari і Opera. Якщо ви користуєтеся Firefox, раджу змінити його на інший браузер на час вивчення цього керівництва.

Як правило, я додаю один div, який буде фігурою, потім я стилізую її, а потім приступаю до наступного div.

Проте, оскільки це інструкція, давайте спочатку поглянемо на HTML-код і розберемо його:

<body>
 <!-- Начало зображення -->
 <!-- Невидиме поле -->
 <div class="box">
   
    <!-- Кругла голова -->
    <div class="head">  
      
      <!-- Кругла копія голови -->
      <div class="head-copy"></div>
      
       <!-- Ліве вухо ~ світло-сіре -->
      <div class="ear-left">
        
       <!-- Внутрішнє вухо ~ темно-сіре -->
      <div class="inner-ear"></div>
      </div>
      
      <!-- Праве вухо ~ світло-сіре -->
       <div class="ear-right">
      <!-- Внутрішнє вухо ~ Темно-сіре -->
        <div class="inner-ear"></div>
      </div>
      
      <!-- Ліве око ~ білий -->
      <div class="eye-left">
        <!-- Зрачок ~ чорний -->
        <div class="pupil">
        </div>
      </div>
      
      <!-- Праве око ~ білий -->
      <div class="eye-right">
        <!-- Зрачок ~ чорний -->
        <div class="pupil">
        </div>
      </div>
      
       <!-- Ніс ~ коричневий -->
       <div class="nose">
       </div>
      
       <!-- Волосся ~ світло-сірі -->
      <div class="hair-left"></div>
      <div class="hair-right"></div>
      
    <!-- Кінець голови -->
    </div>
 <!-- Кінець невидимого поля -->
 </div>
</body>

Важливо помітити, що деякі div вкладені в інші. Давайте подивимося на div правого вуха нашої коали :

 “Ear-right” (праве вухо) є батьківським div, а “inner-ear” (внутрішнє вухо) – дочірнім.

Ця відмінність важлива, тому що фігурам будуть задані фіксовані положення, ширина і висота, виражені у відсотках.

Наприклад, уявимо, що у нас є div, вкладений в body з height: 100% і width: 100%:

Класу some-div призначається фіксована позиція, яка на 10% нижче верхньої частини батьківського блоку. Оскільки some-div вбудований в body, який має 100% ширину і 100% висоти, div буде розташований на 10% нижче верхньої частини цього блоку.

Тепер вкладемо інший div в some - div і задамо йому такий же стиль:

Як ви можете бачити, ми отримаємо абсолютно інше розташування.

В даному прикладі another-div (синій квадрат) на 10% нижче, ніж some-div (червоний квадрат).

Тепер перемістимо another-div з some-div у body і збільшимо відступ до 30%:

another-div тепер відступає на 30% від верху body, а не some-div.

Маючи це на увазі, перейдемо до стилів CSS.

CSS стилі

body

Спершу задамо body фоновий колір. Нехай це буде відтінок синього, як у Твітера:

body{ background:  #25A9FC;}

box

Тепер додамо стилі невидимому блоку. Він буде відцентрований по горизонталі (щоб стежити за зміною положення поля, додайте йому фон або рамку) :

.box{ position: relative; margin: auto; display: block; // опциональные фон і рамка background: white; border: solid 4px red; // пишіть код тут}

position: relative означає, що елемент позиціонується відносно свого нормального положення, яке знаходиться у верхньому лівому кутку, оскільки це перший div у body.

Коли властивість position встановлено в relative, використайте display: block; і margin: auto;, щоб автоматично відцентрувати поле по горизонталі.

Потім ми можемо додати наступну частину коду, щоб помістити поле на 8% нижче, а також встановити height і width з розмірами, як на зображенні вище, і, нарешті, присвоїти необхідне значення фону:

.box{ position: relative; margin: auto; display: block; margin-top: 8%; width: 600px; height: 420px; background: none;}

Відмітимо, що ми використовуємо властивість margin-top: 8%, щоб опустити поле на 8%. Оскільки ми спеціально настроюємо top, це не відіб’ється на наших попередніх відступах, заданих через margin:auto.

Тепер, коли поле налагоджене, все наші інші div будуть вкладені в нього. Знову ж таки, це важливо, тому що коли ми призначатимемо абсолютні положення у відсотках, це розташує div на стільки ж відсотків від поля, але не від body. Цей же принцип працюватиме і з нашою висотою і шириною.

Голова

Подивимося на код для створення голови, а потім розберемо його крок за кроком:

.head{ position: absolute; top: 16.5%; left: 25%; width: 50%; height: 67%; background: #A6BECF; border-radius: 50%;}

Процентні показники для top і left означають, що div буде в 15% від верхнього краю поля і в 25% – від лівого. Ширина div – 50% від ширини поля, а висота – 67% від висоти поля. Після цього ми встановлюємо світло-сірий колір фону.

Далі ми використовуємо border-radius: 50%. Якщо ви пропустите цю властивість, голова завжди буде у формі прямокутника (чи квадрата). border - radius є тією властивістю, яка міняє фігуру. Якщо ви знайомі з Illustrator, то можете порівняти додавання властивості border - radius з тим, як в нім треба потягнути за краї квадрата, щоб закруглювати його. Щоб округлити форму до круга, ми завжди використовуємо показник, рівний 50%.

border - radius можна використати не лише для створення круга, але і для того, щоб закруглювати будь-яку фігуру, наприклад, прямокутник для носа нашої коали.

Перш ніж ми підемо далі, я поясню, звідки я узяв відсоткові показники верхньої і лівої меж, ширини і висоти. Ми задали полю ширину в 600 пікселів, так що 50% дають нам 300 пікселів. Враховуючи, що поле було заввишки всього в 400 пікселів, процентний показник для голови має бути вищий.

Швидше за все ви чекаєте, що я дам вам точну формулу для обчислення висоти. Чесно кажучи, зазвичай я знаходжу потрібне значення методом тику.

Чим більше зображень ви створите на чистому CSS, тим швидше ви знаходитимете оптимальні значення. Але про що вам дійсно треба подумати зараз, так це про висоту і ширину батьківського div і про те, який розмір потрібний дочірньому div по відношенню до його предка.

Тепер, маючи відсотки позицій, вичислити абсолютний центр набагато простіше. Ось формула:

left =  (100 - width)  / 2top =  (100 - height)  / 2// наш випадок (100 - 67) /2 = top: 16.5%;(100-50)/2 = left: 25%;

Тепер цей фрагмент коду працює для div нашої голови, тому що ми хочемо розмістити її по центру. Проте ми, приміром, не хочемо поміщати в самий центр вуха. Ми скоро підійдемо до цього моменту, і я також поясню, коли використати bottom і right замість top і left.

Останнє, про що варто сказати в цьому розділі – кожен подальший div буде вкладений в div голови, оскільки кожна фігура, яка буде додана, буде розташована поверх неї.

Ось що ми повинні отримати на цьому етапі:

Копія голови

.head - copy{ width: 100%; height: 100%; position: absolute; background: #A6BECF; border-radius: 50%; z-index: 2;}

Div копії голови робиться виключно для того, щоб вуха могли з’явитися за головою. Для цього використовується властивість z - index. Зверніть увагу на останній рядок попереднього фрагмента коду:

z-index: 2;

z - index використовується для позначення рівня розташування div відносно інших по осі, спрямованій перпендикулярно екрану (тобто на вас або від вас). За допомогою цієї властивості задаються шари.

У нашому фінальному зображенні очі будуть над головою, ніс – над очима і так далі. Усе це контролюватиметься з допомогою z - index. Чим більше значення z - index, тим вище розташований div.

Так що якщо у вас два div, z-index: 1 буде вашим нижнім шаром, а z-index: 2 – верхнім. Коли ми додаємо копію голови, ми даємо їй значення z-index: 2, значить, вуха нашої коали розташовуватимуться за головою.

Якщо хочете, можете прибрати копію голови, коли ми додамо вуха, і подивитися, що вийде.

Ми не повинні побачити яких-небудь змін . Зображення як і раніше виглядає таким чином:

Вуха

Як говорилося раніше, у нас буде по одному вуху, що складається з кругів, для кожної сторони. Два світло-сірі круги більше і два темно-сірі круги поменше поверх кожного вуха (назвемо їх внутрішніми вухами – inner – ear).

.ear - left{ position: absolute; width: 60%; height: 65%; left: -20%; top: 5%; background: #A6BECF; border-radius: 50%; z-index: 1;}.ear - right{ position: absolute; width: 60%; height: 65%; right: -20%; top: 5%; background: #A6BECF; border-radius: 50%; z-index: 1;}.inner - ear{ position: absolute; border-radius: 50%; width: 80%; height: 80%; top: 10%; left: 10%; background: #819caf;}

Для кожного класу ми використовуємо border-radius:50%, оскільки нам потрібні круги, а потім додаємо колір, використовуючи background.
Як ви бачите, ми написали два різні стилі для вух, але тільки один для внутрішнього вуха. Це стане очевидним, коли ми розберемося з позиціонуванням.

Батьківським div для правого і лівого вуха являється голова. Таким чином, процентні показники розраховуватимуться відносно голови, так само як висота і ширина. Розраховуємо висоту і ширину, грунтуючись на тому, що ми хочемо великі вуха, які, проте, мають бути менше голови. Таким чином, ми отримуємо width:60% і height:65%.

Внутрішні вуха вкладаються в ліве і праве вухо. Ми знаємо, що вони мають бути трохи менші, так що задаємо їм 80% ширину і висоти. Ми також хочемо, щоб внутрішнє вухо розташовувалося в самому центрі вух, так що ми знову можемо використати вже знайому формулу:

left =  (100 - width)  / 2
top =  (100 - height)  / 2// наш випадок (100 - 80) /2 = top: 10%;(100-80)/2 = left: 10%;

Оскільки left і right розраховуються відносно вух, ми можемо використати один і той же стиль для лівого і правого вуха, тому у нас всього один div внутрішнього вуха. Ми вимушені використати два роздільних div для вух, тому що вони матимуть різні показники left і right, оскільки вони позиціонуються відносно голови.

Ми хочемо, щоб вуха стирчали ліворуч і праворуч від голови. Ми використовуємо негативні значення left: -20% і right: -20% для зрушення у вказаному напрямі.

Ось що вийшло у результаті:

//ліве вухо width: 60%; height: 65%; left: -20%; top: 5%;//праве вухо width: 60%; height: 65%; right: -20%; top: 5%

Наостанок ми додаємо z-index: 1; так що наші вуха вирушають під голову. Ось що повинне у нас вийти:

Очі

.eye - left{ position: absolute; background: white; width: 30%; height: 33%; top: 25%; left: 21%; border-radius: 50%; z-index: 3;}.eye - right{ position: absolute; background: white; width: 30%; height: 33%; top: 25%; right: 21%; border-radius: 50%; z-index: 2;}.pupil{ position: absolute; width: 28%; height: 30%; top: 35%; left: 36%; border-radius: 50%; background: #27354a;}

Як ви бачите, очі нашої коали схожі на її вуха. У нас є два великі білі круги (ліве і праве око) і одна зіниця.

Для них ми використовуємо border-radius:50%, оскільки вони є кругами, а також використовуємо background, щоб задати відповідний колір.

У нас є зіниця, яка поміщається в кожне око. Ми вгадуємо height і width зіниці, розміщуємо його по центру і отримуємо такий результат:

width: 28%;height: 30%;top: 35%;left: 36%;

Для визначення відступів лівого ока ви також можете використати метод проб і помилок або наведену вище формулу. Між тим, показники height і width ми просто вгадуємо, поки не знайдемо оптимальне значення.

 //ліве око width: 30%; height: 33%; top: 25%; left: 21%; //праве око width: 30%; height: 33%; top: 25%;
right: 21%;

Що стосується z - index, наступні значення дозволять помістити ніс прямо над очима:

 //ліве око z-index: 3; //праве око z-index: 2;

У результаті у нас повинна вийти ось така картинка:

Ніс

.nose{ position: absolute; background: #BE845F; width: 25%; height: 42.5%; left: 37%; top: 45%; border-radius: 50px; z-index: 4;}

Тепер займемося носом. Усі значення ми підбираємо аналогічно, ось оптимальні:

 width: 25%; height: 42.5%; left: 37%; top: 45%;

Ми задаємо коричневий колір для фону, використовуючи background, і глибину з допомогою z-index:4, щоб ніс виявився над очима.

Ми також використовуємо border-radius: 50px, за допомогою якого закругляємо кути прямокутника так, як нам треба. Коли фігуру треба закруглювати зовсім трохи, простіше вказувати кількість пікселів, а не відсотків.

Тепер у нас виходить ось таке зображення:

Волосся

Майже готово! Останній крок – додати стиль для двох наших пучків волосся, лівого і правого, після чого ми отримаємо закінчене зображення коали.

.hair - left{ position: absolute; top: -8%; left: 30%; width: 20%; height: 20%; background: #A6BECF;
-webkit-clip-path: polygon (50% 0%, 0% 100%, 100% 100%); clip-path: polygon (50% 0%, 0% 100%, 100% 100%);}.hair - right{ position: absolute; top: -4%; left: 48%; width: 20%; height: 20%; background: #A6BECF; -webkit-clip-path: polygon (50% 0%, 0% 100%, 100% 100%); clip-path: polygon (50% 0%, 0% 100%, 100% 100%);}

Як бачите, тут ми не використовуємо border-radius, але у нас є ось такий код з clip-path:

-webkit-clip-path: polygon (50% 0%, 0% 100%, 100% 100%);clip-path: polygon (50% 0%, 0% 100%, 100% 100%);

Для будь-якої фігури, окрім квадрата, трикутника і круга, простіше використати метод clip - path.

Це може здаватися трохи незрозумілим, але, на щастя, є прекрасний інструмент Clippy, який видає clip-path для різних фігур. Справа ви побачите безліч різних фігур :

На зображенні вище вибраний трикутник, так що ви можете скопіювати clip - path і вставити його в CSS- клас для волосся.

Ми знову задаємо колір з допомогою background і встановлюємо width і height у 20% для обох пучків. Ми задаємо лівому пучку значення left: 30%, а правому – left: 48%. Це хороший приклад для обговорення, що використати: right чи left? Припустимо, що ми хочемо пересунути правий пучок на 5% управо. Ми можемо додати 5% до 48%, щоб отримати значення left:53%. Проте правилом хорошого тону вважається перехід з left на right і навпаки при значенні вище 50%. Тому left: 53% буде еквівалентне right:47%.

Верхні зрушення будуть негативними, оскільки ми хочемо, щоб обидва пучки волосся стирчали над головою. Лівий пучок стирчатиме трохи сильніше, так що ми задаємо йому height: 8%, а правий пучок – трохи менше, з показником height: 4%.

Наша картинка коали готова!

У результаті CSS-код повинен виглядати так:

body{ background:  #25A9FC;}.box{ position: relative; margin: auto; display: block; margin-top: 8%; width: 600px; height: 420px; background: none;}.head{ position: absolute; top:16.5%; left: 25%; width: 50%; height: 67%; background: #A6BECF; border-radius: 50%;}.head - copy{ width: 100%; height: 100%; position: absolute; background: #A6BECF; border-radius: 50%;
z-index: 2;}.ear - left{ position: absolute; width: 60%; height: 65%; left: -20%; top: 5%; background: #A6BECF; border-radius: 50%; z-index: 1;}.ear - right{ position: absolute; width: 60%; height: 65%; right: -20%; top: 5%; background: #A6BECF; border-radius: 50%; z-index: 1;}.inner - ear{ position: absolute; border-radius: 50%; width: 80%; height: 80%; top: 10%; left: 10%; background: #819caf;}.eye - left{ position: absolute; background: white; width: 30%; height: 33%; top: 25%; left: 21%; border-radius: 50%; z-index: 3;}.eye - right{ position: absolute; background: white; width: 30%; height: 33%; top: 25%; right: 21%; border-radius: 50%; z-index: 3;}.pupil{ position: absolute; width: 28%;  - (-000-3-) -
left: 37%; top: 45%; border-radius: 50px; z-index: 4;}.hair - left{ position: absolute; top: -8%; left: 30%; width: 20%; height: 20%; background: #A6BECF; -webkit-clip-path: polygon (50% 0%, 0% 100%, 100% 100%); clip-path: polygon (50% 0%, 0% 100%, 100% 100%);}.hair - right{ position: absolute; top: -4%; left: 48%; width: 20%; height: 20%; background: #A6BECF; -webkit-clip-path: polygon (50% 0%, 0% 100%, 100% 100%); clip-path: polygon (50% 0%, 0% 100%, 100% 100%);}

Подальша практика

Сподіваюся, що ця стаття дала вам чітке уявлення про те, як створити зображення на чистому CSS, і надихнула продовжити вивчення цієї теми. Крім того, у вас тепер має бути хороший шаблон, який ви можете використати для подальшої практики.

Також я пропоную вам два безкоштовні способи прокачати свої навички по цій темі :

  1. Відеокурс “Pure CSS Images”.
  2. Челендж “Daily CSS Images”.

Переклад статті “A Beginner’s Guide to Pure CSS Images”

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *