Як намалювати квадрат у CSS

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

Одним із способів намалювати квадрат у CSS є використання властивості width для вказівки довжини сторони квадрата, а також властивість background-color для завдання кольору квадрата. Наприклад, наступний код створить квадрат зі стороною 100 пікселів і червоним фоном:

.square

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

.square

Крім того, за допомогою CSS ви можете обертати квадрати, додавати межі, тіні та застосовувати різні ефекти. Використовуючи різноманітні CSS властивості і поєднуючи їх між собою, ви можете створити квадрати з найрізноманітнішими зовнішніми характеристиками!

Створення елемента квадрата в HTML та CSS

Тепер у нас є елемент, який буде представляти квадрат. Далі, додамо стилі до нашого елементу, щоб він виглядав як квадрат. Для цього скористаємося CSS:

#квадрат

У наведеному прикладі, задали ширину і висоту квадрата в 100 пікселів кожна. Колір фону встановлений в червоний. Можна змінювати ці значення в залежності від вимог або переваг.

Після застосування стилів, елемент з ідентифікатором "квадрат" буде виглядати як червоний квадрат зі стороною 100 пікселів.

Тепер ви знаєте, як створити елемент квадрата в HTML і CSS. Просто створіть елемент за допомогою тегу div, надайте йому унікальний ідентифікатор і додайте стилі, щоб він виглядав як квадрат. При необхідності, ви завжди можете змінити розмір і колір квадрата, використовуючи CSS властивості.

Налаштування розмірів квадрата

Щоб налаштувати розміри квадрата в CSS, ви можете використовувати властивість width і height .

Властивість	Опис	Приклад
width	Встановлює ширину елемента.	width: 200px;
height	Встановлює висоту елемента.	height: 200px;

Ви можете використовувати значення в пікселях ( px ), відсотках ( % ), переглядах ( vw та vh ) та інших одиницях виміру.

.square

Це задасть квадрату розміри 300 пікселів по ширині і 300 пікселів по висоті.

Додавання кольору квадрату

Щоб додати колір квадрату в CSS, можна використовувати властивість background-color . Це властивість дозволяє задати колір фону елемента.

Для того щоб задати колір квадрату, потрібно вказати його клас в CSS файлі і застосувати властивість background-color до цього класу. Наприклад, якщо клас квадрата називається .square, то код для завдання кольору може виглядати наступним чином:

.square

В даному прикладі квадрат буде пофарбований в синій колір. Ви можете використовувати будь-який доступний в CSS колір: Назва кольору (наприклад, blue ), шістнадцятковий код (#0000FF), RGB або HSL значення.

Якщо ви хочете задати прозорий фон, то можна використовувати значення transparent . Наприклад:

.square

Тепер квадрат матиме прозорий фон.

Також можна використовувати різні ефекти для фону елемента, такі як градієнти, картинки і т.д. для цього потрібно використовувати інші властивості і значення CSS.

Зміна стилів кордону квадрата

Стиль кордону квадрата можна змінювати за допомогою властивості border-style . Ця властивість дозволяє вибирати з різних стилів кордону, таких як суцільна лінія, пунктирна лінія, пунктирна лінія та інші.

Приклад використання властивості border-style :

.square

У цьому прикладі межа квадрата матиме пунктирний стиль. Ви також можете задати колір кордону за допомогою властивості border-color і товщину кордону за допомогою властивості border-width .

Приклад використання властивостей border-color і border-width :

.square

У цьому прикладі межа квадрата матиме суцільний стиль, червоний колір і товщину 2 пікселі.

Створення ефектів на квадраті за допомогою тіней

Використання тіней дозволяє надати квадрату різні ефекти і стилізацію. У CSS є кілька способів додавання тіней:

Можливість задати колір тіні: За допомогою властивості box-shadow можна задати значення кольору, наприклад, box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); . Такий код створить квадрат з тінню зміщенням 10px вправо і 10px вниз, радіусом розмиття 5px і напівпрозорим чорним кольором.
Можливість задати кут тіні: за допомогою властивості box-shadow можна задати кут, під яким буде знаходиться тінь. Наприклад, box-shadow: 4PX 4PX 10px 1px rgba(0, 0, 0, 0.5); створить квадрат з тінню, зміщеною на 4PX вправо і вниз, з радіусом розмиття 10px, розширенням 1px і напівпрозорим чорним кольором.
Можливість комбінування декількох тіней: за допомогою властивості box-shadow можна задати кілька тіней для квадрата. Наприклад, box-shadow: 10px 10px 5px rgba (0, 0, 0, 0.5), - 10px-10px 5px rgba(255, 255, 255, 0.5); створить квадрат з двома тінями: одна тінь зміщена на 10px вправо і вниз, з радіусом розмиття 5px і напівпрозорим чорним кольором, а інша тінь зміщена на 10px вліво і вгору, з радіусом розмиття 5px і напівпрозорим білим кольором.

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

Додавання анімації квадрата

Щоб надати квадрату анімацію в CSS, ми можемо використовувати властивість animation . За допомогою анімації ми можемо задати різні ефекти руху, зміни кольору або розміру для квадрата.

Для початку створимо квадрат за допомогою CSS:

Тепер додамо анімацію для цього квадрата:

Тут ми використовували анімацію з назвою rotate, тривалістю 2 секунди, лінійним переходом і нескінченним повторенням. Ви можете використовувати будь-яке ім'я для вашої анімації і налаштовувати параметри в залежності від ваших потреб.

Тепер опишемо нашу анімацію в CSS:

@keyframes rotate

from

Тут ми використовували блок @keyframes для опису анімації. Усередині цього блоку ми визначили два ключові кадри-from (початковий кадр) і to (кінцевий кадр). Ми встановили обертання квадрата на 360 градусів за допомогою властивості transform .

Тепер, при завантаженні сторінки, квадрат буде обертатися нескінченно навколо свого центру.

Ви можете змінити параметри анімації, щоб надати квадрату інші ефекти руху або використовувати інші значення для властивості transform , щоб змінити розмір, поворот або зсув квадрата.

Зміна форми квадрата на іншу фігуру

Насправді, зміна форми квадрата на іншу фігуру в CSS досить просто. Існує кілька способів досягти цього.

Перший спосіб-використання властивості border-radius . Це властивість дозволяє округляти кути елемента, в тому числі і квадрата. Для того, щоб перетворити квадрат в коло, досить задати радіус округлення рівний половині ширини або висоти квадрата.

.square

Другий спосіб-використання властивості transform . За допомогою властивості transform можна застосовувати різні перетворення до елементів, включаючи їх форму. Для зміни форми квадрата на іншу фігуру, наприклад, трикутник, можна використовувати функцію skew() .

.square

Третій спосіб-використання властивості clip-path . За допомогою властивості clip-path можна створювати обрізані фігури. Для зміни форми квадрата на іншу фігуру, потрібно задати правило обрізки, використовуючи функцію polygon() . Наприклад, щоб отримати трикутник, потрібно вказати координати його вершин.

.square

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

Як намалювати квадрат в css: прості способи і приклади