Як створити форму серця з CSS
CSS3 підвищує доцільність того, що ми можемо побудувати на веб-сайтах, використовуючи тільки HTML і CSS. Ви можете знайти дивовижні приклади, які ми раніше показали. Але давайте не будемо надто далеко попереду, складний дизайн потребуватиме кодів, які можуть дати вам головний біль.
Замість цього, ми збираємося створити щось просте, щоб допомогти вам По-перше, зрозуміти форми та позиціонування CSS, перед тим, як вийти на більш просунуті конструкції. Оскільки день Святого Валентина знаходиться за рогом, створімо форму серця, використовуючи HTML і CSS.
Основи
В основному, ми можемо створити нову форму, приєднавши одну або кілька основних форм, наприклад, прямокутники та кола. Якщо розглядати форму серця, ми можемо виявити, що вона складається з два кола і комбінований прямокутник. Елементи HTML по суті являють собою квадрат або прямокутник. Завдяки радіусу кордону CSS3 ми можемо легко перетворити прямокутник у коло.
Почніть з додавання Потім ми зробимо це квадратом, вказавши ширину і висоту однаково. Виберіть потрібний колір тла. Далі ми зробимо кола. Замість того, щоб додавати нові елементи, ми будемо використовувати псевдоелементи, Разом з площею ми отримаємо такий результат: Після цього ми створюємо друге коло з псевдоелементом Результати такі: Ми можемо об'єднати ці два однакові стилі шляхом групування псевдоелементних селекторів наступним чином: Та-да! Ми маємо форму серця, хоча поки що не в правильному напрямку. Щоб виправити його, ми будемо використовувати CSS3 Transformation. Трансформація може бути надана основним елементам форми; Тут, це означає площу. Коли трансформується, псевдоелемент автоматично змінить своє положення після основного елемента. Тут ми повернемо серце, щоб його було видно “стоячи”. І саме так виглядає наше серце. Повний код форми серця наведений нижче, у HTML: І на нашому CSS буде так: Зверніть увагу, що ми встановили альфа-канал Тепер, коли ми маємо ідеальну форму серця, ми можемо замінити фон на інший колір (наприклад, рожевий або червоний) з легкістю. Єдиним недоліком тут є те, що ми не вдалося додати кордон до форми за рахунок укладених елементів. Додавання лінії кордону змусить серце виглядати дивно. З CSS3 створення форми, як форма серця тепер легко виконати. Властивість прикордонного радіусу дозволяє нам роблять елементи або навіть псевдоелемент в коло. З перетворенням CSS3 ми можемо поворот або переміщення координат об'єкта з легкістю. Ви обмежені лише вашою творчістю і фантазією!
.серцева форма позиція: відносна; ширина: 200px; висота: 200px; фоновий колір: rgba (250,184,66, 0,8);
: раніше і : після. Спочатку встановлюємо : раніше псевдоелементи в якості нашого першого кола. Ми робимо це квадрат з рівним розміром по ширині і висоті, як ми зробили з div. Потім ми перетворимо його в коло, надавши йому радіусу кордону 50% і покласти його на ліву сторону квадрата. .форма серця: до позиція: абсолютна; знизу: 0px; ліворуч: -100px; ширина: 200px; висота: 200px; зміст: "; -об'єкт-кордон-радіус: 50%; -моз-кордон-радіус: 50%; -о-кордон-радіус: 50%; кордон-радіус: 50%; фоновий колір: rgba (250,184,66 , 0,8);
: після з тими ж стилями, що й перше створене нами коло. Потім ми також розмістимо його на вершині квадрата. .форма серця: після позиція: абсолютна; зверху: -100px; праворуч: 0px; ширина: 200px; висота: 200px; зміст: "; -об'єкт-кордон-радіус: 50%; -моз-кордон-радіус: 50%; -о-кордон-радіус: 50%; кордон-радіус: 50%; фоновий колір: rgba (250,184,66 , 0,8);
.серцеподібне: перед, .серце: після позиція: абсолютна; ширина: 200px; висота: 200px; зміст: "; -об'єкт-кордон-радіус: 50%; -моз-кордон-радіус: 50%; -о-кордон-радіус: 50%; кордон-радіус: 50%; фоновий колір: rgba (250,184,66 , 0.8);. Heart-shape: до bottom: 0px; ліворуч: -100px;. Heart-shape: після top: -100px; right: 0px;
.серцева форма -вебкіт-перетворення: поворот (45deg); -moz-transform: rotate (45deg); -ms-transform: rotate (45deg); -o-transform: rotate (45deg); transform: rotate (45deg);
Результат:
.серцева форма позиція: відносна; ширина: 200px; висота: 200px; -webkit-transform: rotate (45deg); -moz-transform: rotate (45deg); -ms-transform: rotate (45deg); -o-transform: rotate (45deg); transform: rotate (45deg); фоновий колір: rgba (250,184,66, 1); форма серця: перед, .черна форма: після позиція: абсолютна; ширина: 200px; висота: 200px; зміст: "; -об'єкт-кордон-радіус: 50%; -моз-кордон-радіус: 50%; -о-кордон-радіус: 50%; кордон-радіус: 50%; фоновий колір: rgba (250,184,66 , 1); .heart-shape: до bottom: 0px; ліворуч: -100px;. Heart-shape: після top: -100px; right: 0px;
rgba (250,184,66, 1) у фоновому режимі 1 щоб видалити прозорість. Тепер це виглядає наше Серце.
Висновок
