Здравствуйте, это продолжение предыдущей статьи. Здесь будет практика верстки двух элементов. Первая из них неправильная, но это всего лишь для практики.
Элемент первый - номер товаров в корзине(неправильный)
Наша задача, сверстать вот такой элемент:
У нас есть вот такой код HTML:
Вот что отображается в браузере сейчас:
Вот код, который сделает нашу задачу:
У ссылки(<a>):
position: relative; - чтобы абсолютно позиционировать псевдоэлемент
dipslay: inline-block; чтобы правильно поставить элемент на нужное место
У самого псевдоэлемента:
content: "1"; - отображение цифр
position: absolute; - чтобы позиционировать его на нужное место
display: block; - чтобы задать ширину и высоту
width: 20px;
height: 20px;
background-color: blue; - нам нужен синий цвет у элемента
color: fff; - цвет текста в элементе
line-height: 20px; - для вертикального центрирования текста
text-align: center; - для горизонтального центрирования текста
font-size: 10px; - уменьшить размер шрифта для красоты
top: 45%; - позиционирование по вертикали относительно ссылки
left: 90%; - позиционирование по горизонтали относительно ссылки
border-radius: 50%; - чтобы получился круг, а не квадратCSS-код
Вот что получилось в браузере:
Почему такая верстка неправильная? Потому что номер товаров в корзине должен браться из Базы Данных, то есть этот элемент корзины должен сообщаться с сервером, а текст из псевдоэлементов не умеет взаимодействовать с сервером, придется проводить много лишних манипуляций, чтобы это правильно работало. Так что так верстать - не грамотно.
Второй элемент - затемнение картинки
Допустим нам нужно затемнить элемент, в котором находится картинка, вот этот:
Вот весь код HTML:
Вот изначальный код CSS:
У картинки заданы свойства:
display: block; - чтобы задать ширину для картинки
width: 100%; чтобы растягивалась на всю ширину блока и была резиновой
у <div>
width: 50%; - чтобы не занимал много места
margin: 0 auto; - чтобы был по центру расположен
position: relative; - чтобы позиционировать потом псевдоэлемент
Вот код, который нужен для затемнения картинки:
dipslay: block; - чтобы позиционировать и задать размеры элементу
width: 100%; - чтобы был на весь элемент(заполнил всю картинку по вверх нее)
z-index: 3; - на всякий случай, чтобы был по вверх всех элементов, хотя и стоит псевдоэлемент after
background-color: rgba(0, 0, 0, .5); - цвет затемнения
position: absolute; - чтобы позиционировать элемент
left: 0; расположение элемента
top: 0; расположение элемента
Вот что получилось:
Псевдоэлемент after встал по вверх картинки, с затемненным, но прозрачным фоном.
Таким образом, псевдоэлементам можно задавать любые свойства, как и <div>, <p>. Но они не доступны пользователю никак, их нельзя выделить, они не умеют взаимодействовать с сервером.
Подписывайтесь на канал, чтобы не пропустить следующие статьи, а также предлагайте свои темы на выбор в группе ВКонтакте в описании канала.
