Найти в Дзене
Gatel
12 подписчиков

День 7: CSS - игра с кнопкой

~1 мин
background-color: transparent; - убрать цвет фона; border: none; - убрать границу; outline: none; - убрать контур при фокусе; cursor: pointer; - оставить указатель мыши для того, чтобы можно было навестись на нее. 1. Чтобы кнопка оставалась видимой и неподвижной при прокрутке страницы - position: fixed. 2. Чтобы кнопка была привязана к определенному контейнеру и двигалась с ним при прокрутке страницы (или когда контейнер находится внутри другого прокручиваемого элемента) - position: absolute. Это значение, которое равномерно распределяет элементы вдоль главной оси контейнера ( слева-посередине-справа) Использование различных стилей и позиционирований в CSS позволяет создавать удобные и функциональные интерфейсы. Например, кнопки можно стилизовать под ссылки с помощью свойств: background-color, border, outline и cursor. Позиционирование (position: fixed или absolute) помогает управлять положением кнопок на странице. Кроме того, flexbox с свойством justify-content: space-between позвол
Оглавление

Работа с кнопкой

background-color: transparent; - убрать цвет фона;

border: none; - убрать границу;

outline: none; - убрать контур при фокусе;

cursor: pointer; - оставить указатель мыши для того, чтобы можно было навестись на нее.

Интересный position fixed и absolute

1. Чтобы кнопка оставалась видимой и неподвижной при прокрутке страницы - position: fixed.

2. Чтобы кнопка была привязана к определенному контейнеру и двигалась с ним при прокрутке страницы (или когда контейнер находится внутри другого прокручиваемого элемента) - position: absolute.


justify-content: space-between

Это значение, которое равномерно распределяет элементы вдоль главной оси контейнера ( слева-посередине-справа)

Описание кнопки, которая расположена на одной строке
Описание кнопки, которая расположена на одной строке


Вывод

Использование различных стилей и позиционирований в CSS позволяет создавать удобные и функциональные интерфейсы. Например, кнопки можно стилизовать под ссылки с помощью свойств: background-color, border, outline и cursor. Позиционирование (position: fixed или absolute) помогает управлять положением кнопок на странице. Кроме того, flexbox с свойством justify-content: space-between позволяет равномерно распределять элементы по строке.