Як створити дивовижні ефекти з фігурами CSS

Sep 14, 2025

Як

Переднє розробники, як правило, думають в прямокутниках; прямокутники всередині прямокутників всередині прямокутників всередині прямокутників. Ми можемо використовувати трюки з кордонами, щоб зробити кола або трикутники, але насправді вони все ще просто прямокутні коробки в маскуванні. Ну, це збирається змінюватися CSS Форми, a W3c Рекомендація кандидата, яка змінить, як ви думаєте.

Різдвяна пропозиція: Зберегти до 47% на підписку на чистий журнал

Форми CSS дозволяють створювати геометричні фігури, використовуючи функції форми: коло (), еліпсис (), вставка () та багатокутник (), і застосовувати їх до елементів або ефектів, таких як обрізання та фільтри. Більш того, форми можуть впливати на потік вмісту, дозволяючи вам акуратно обернути текст навколо функцій, таких як кругові аватари.

Можливо, найпотужніша функція форми є багатокутник (), оскільки він дозволяє створювати складні довільні форми, використовуючи необмежені точки, визначені за допомогою координаційних пар. Якщо ви використовували Св Це буде знайоме вам.

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

01. Почніть з HTML

По-перше, давайте отримаємо наш HTML готовий. Нам просто потрібно & lt; div & gt; , наша .clip Клас та наш текст, але, як ми будемо використовувати псевдо-елементи для цього ефекту, ми також додамо атрибут з тим самим значенням, що і текст, щоб ми могли прочитати його в CSS, а не жорсткий кодування.

 & lt; div class = "clip" data-content = "clipping demo" & gt;
Відрізана демо
& lt; / div & gt;

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

 .clip {
// екран заповнення
Позиція: абсолютна;
Верх: 0;
ліворуч: 0;
Ширина: 100%;
Висота: 100%;
// вирівнювання
Дисплей: Flex; // Використовуйте Flex для вирівнювання
Обґрунтування-вміст: Центр; // горизонтальне вирівнювання
Вирівнювання елементів: Центр; // вертикальне вирівнювання
// текстовий стиль
Шрифт-Сім'я: "Робота Sans", Arial, Helvetica, Sans-Serif; // РОБОТА SANS доступна в Google Fonts
маса шрифту: 800;
Шрифт-розмір: 8REM;
Текст-вирівнювання: Центр;
Текст-перетворення: верхній регістр;
}

02. Додайте якийсь стиль

Тепер ми можемо стиль :: раніше і :: Після Псевдоелементи, з кожним, стає шаром у верхній частині тексту. За замовчуванням, :: Після матиме найвищий Z-індекс. Зручний attr () Селектор буде читати значення нашого Зміст даних атрибут.

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

 .clip {
...
// Позиція Self (& amp;) та псевдо-елементи (до / після)
& amp;
& amp; ::
& amp; :: після {
  Позиція: абсолютна;
  Верх: 0;
  ліворуч: 0;
  Ширина: 100%;
  Висота: 100%;
  Дисплей: Flex; // Використовуйте Flex для вирівнювання
  Обґрунтування-вміст: Центр; // горизонтальне вирівнювання
  Вирівнювання елементів: Центр; // вертикальне вирівнювання
}
& amp; ::
& amp; :: після {
  Вміст: attr (вміст даних); // використовуйте значення атрибута як вміст
}
}

Результат у браузері повинен виглядати ідентичним, оскільки псевдо-елементи сидять безпосередньо на вершині тексту. Ви можете змінити свої стилі Дезінструмент щоб побачити, як вони шаруваті.

03. Набір фонів та кольорів

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

Це корисно, як інакше ми повинні використовувати два різних типи ланцюгів: & lt; br & gt; всередині & lt; div & gt; і більш незрозумілий \ A у атрибуті.

 .clip {
...
& amp;
& amp; ::
& amp; :: після {
  Прокладка: 0 50%;
  коробка: кордон-коробка;
}
& amp; :: до {
  Колір: $ білий;
  фон: $ рожевий;
}
& amp; :: після {
  Колір: $ рожевий;
  фон: $ синій;
}
}

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

04. Кліп тексту

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

Точний :: раніше Pseudo-елемент буде видно тільки у верхньому лівому трикутнику, а також :: Після Pseudo-елемент буде видно тільки в нижньому правому трикутнику. Ось код для досягнення цього:

 .clip {
...
& amp; :: до {
  Кліп-шлях: багатокутник (0 0, 100% 0, 0 100%, 0 100%);
}
& amp; :: після {
  Кліп-шлях: багатокутник (100% 0, 100% 100%, 0 100%, 100% 0);
}
}

Це створює багатокутники з чотирма точками. Кожна точка описується пара координат; просто x (зліва направо) і y (зверху вниз) значення. Значення може бути абсолютним (наприклад: PX) або відносним (наприклад:%). Пункти посилаються на верхню ліву, тому точки 100% 100% знаходяться в нижній праворуч.

Уявіть собі лінії, що з'єднують кожне з точок, у тому, щоб вони були перераховані для формування форм. В :: раніше Полігон він починається у верхньому лівому (0 0) , рухається по екрану до верхнього права (100% 0) , а потім донизу ліворуч (0 100%) .

Сподіваюся, ви побачите ваш обрізаний текст зараз. Змініть розмір браузера, і ви побачите обрізання відповідно.

Якщо ви використовуєте Chrome, ви, ймовірно, побачите деякі проблеми перевтомування під час зміни розміру, викликаного композитними шарами Chrome. На жаль, тому що демонстрація є повноекранним, рекомендованим буде змінюватися: перетворення майно і Трансформація: перекладач (0) Хак не виправити це. Однак, якщо ви перемикаєте .clip до Позиція: фіксована; це працює.

 кліп {
& amp;
& amp; ::
& amp; :: після {
  Позиція: фіксована;
}
}

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

05. Додати переходи

Тепер, коли ми отримали наш обрізаний текст, давайте приведемо його до життя з деякими переходами. Хороша новина полягає в тому, що ви можете просто перейти кліп-шлях Майно так, щоб браузер робить всю важку роботу. Давайте дозволимо перейти на псевдо-елементи, а потім визначити чотири різних станів для переходу між.

Держава 1: Це початковий стан, тому давайте створимо трьох інших

Додайте кожен блок у нижній частині CSS, коли ви йдете, так що ви можете побачити, як це виглядає.

State 2: трохи перемістіть трикутники, щоб розкрити фон

Це буде виглядати трохи, як прапор Республіки Конго. Видалення 20 відсотків від кінчика кожного трикутника багатокутника зробить трюк.

Стан 3: морф трикутники на прямокутників

Це схоже на французький триколор, у зворотному напрямку.

А як щодо цієї четвертої координатної пари? Ну, це там, де він приходить корисний. Виявляється, що перехід кліп-шлях Тільки працює, якщо використовується функція форми однакова (так багатокутник & GT, багатокутник), а кількість використаних точок однакова - браузер переходить кожну окрему точку. Ось чому ми маємо четверту приховану точку - це дозволяє нам бездоганно переходом від трикутника до прямокутника, ми просто показуємо, що четверта точка, коли нам це потрібно.

 .clip {
& amp; :: до {
  Кліп-шлях: багатокутник (0 0, 40% 0, 40% 100%, 0 100%);
}
& amp; :: після {
  Кліп-шлях: багатокутник (100% 0, 100% 100%, 60% 100%, 60% 0);
}
}

Держава 4: Твіст цих багатокутників

Дотримуючись нашої теми прапора, це нагадує «я вимагаю буксиру» у світі сигналізації морського прапора.

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

 .clip {
& amp; :: до {
  Кліп-шлях: багатокутник (100% 0, 0 0, 100% 100%, 0 100%);
}
& amp; :: після {
  Кліп-шлях: багатокутник (100% 0, 100% 100%, 0 0, 0 100%);
}
}

Обгортати

Ми всі встановлюємо, але ми ще не зможемо змінити держави, тобто ви не можете бачити переходи в дії. Є багато способів досягти цього, тому це залежить від вас. У REPO та Codepen я використав 100 відсотків JavaScript рішення з прихованими перемикачами та ~ General Sibling Selector - Зробіть вигляд. Ви також можете перевірити цей підручник Codepen тут .

Ця стаття спочатку з'явилася у випуску 298 сітка , журнал для професійних веб-дизайнерів та розробників - пропонує останні нові веб-тенденції, технології та методи. Купити проблему 298 тут або Підписатися на мережу тут .

Спеціальна різдвяна пропозиція: Зберегти до 47% на підписку до мережі для вас або друга на Різдво. Це обмежена пропозиція, тому рухайтеся швидко ...

Пов'язані статті:

28 видатних прикладів CSS
Як створити макет піраміди з фігурами CSS
CSS трюки для революції веб-макетів

Як створити дивовижні ефекти з фігурами CSS

01. Почніть з HTML

02. Додайте якийсь стиль

03. Набір фонів та кольорів

04. Кліп тексту

05. Додати переходи

Обгортати

Як - Найпопулярніші статті

Як розтягнути полотно і встановити для масляних фарб

Як спроектувати правдоподібні фантастичні звірі

Створіть примарні текстури з методами змішаного медіа

Магістр Наука оптимізації регулювання конверсії

Намалюйте параметри гри в Photoshop

Навчіться вирощувати листя з X-частинками

Як створити цифрові активи

Як намалювати Harley Quinn

Категорії