Приветствую вас в моем блоге! Сегодня пойдет речь о некоторых CSS-свойствах, которые позволят вам оформить сообщения при вёрстке чата. Как например, в шапке поста.
Стало интересно? Двигай под кат, расскажу обо всем поподробнее.
background-attachment
Первое свойство, которое я бы хотел рассмотреть, это — background-attachment. Вкратце, что оно позволяет сделать:
background-attachment — MDN
CSS свойство background-attachment определяет, является ли позиция фонового изображения фиксированной в области просмотра, или прокручивается вместе с содержащим его блоком.
Теперь, зная назначение свойства, давайте применим его на практике, специально для этой статьи подготовил демку на Codepen:
В примере использовано значение fixed свойства background-attachment, которое позволяет фиксировать наш фон, в качестве фона заливки был использован градиент, растянутый на всю высоту окна браузера. Таким образом, при прокрутке окна, создается эффект плавной смены фона сообщений (прим. некоторые пользователи соц. сети Instagram наверняка замечали подобный эффект в Direct’е)
Свойство clip-path
Второй эффект, который мы с вами рассмотрим это создание некого хвостика у сообщений:
Этот эффект достигается с помощью нулевого значения border-radius у правого нижнего угла, а также, главное это использование псевдо-элемента ::after с «отсечением» лишнего с помощью clip-path.
Коротко об этом свойстве:
clip-path — MDN
CSS свойство clip-path создает ограниченную область, которая определяет какая часть элемента должна быть видимой. Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты.
Для начала нам понадобится svg-файл, который будет выполнять роль маски. Я подготовил для статьи код svg в программе Adobe Illustrator.
|
1 2 3 4 5 6 7 |
<svg height="0" width="0"> <defs> <clipPath id="svgPath"> <path fill="#FFFFFF" d="M10,10H0V0H0A10,10,0,0,0,10,10Z"/> </clipPath> </defs> </svg> |
Далее, этот код мы размещаем в теле нашего HTML документа, например перед закрывающим тэгом </body>.
Мы задали для svg-элемента clipPath id равный svgPath и теперь можем его использовать для маскировки нашего псевдо элемента ::after
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
content: ''; /* обязательное свойство псевдо элементов */ position: absolute; /* задаем абсолютное позиционирование относительно родителя */ bottom: 0; /* притягиваем к низу родителя */ right: -10px; /* делаем отступ на ширину "хвоста" справа от родителя */ display: block; /* делаем элемент блочным */ height: 10px; /* задаем высоту */ width: 10px; /* задаем ширину */ z-index: -1; /* переносим псевдо элемент под родителя */ background: inherit; /* задаем background как у родителя */ clip-path: url(#svgPath); /* "отсекаем" лишнее с помощью svg-маски */ |
Применив свойство clip-path к псевдо элементу ::after, мы получили интересный эффект, который, в совокупности с фиксированным фоновым градиентом, позволит разнообразит дизайн вашего приложения, чата или любого другого элемента, на который только хватит вашей фантазии.
Как видите, описанные в статье эффекты, на самом деле очень просты в создании, экспериментируйте, фантазируйте и создавайте.
Спасибо за внимание, буду признателен, репостам и комментариям!
До скорой встречи!
Подписывайтесь на мой Telegram-канал – проводник в мир IT и Web-разработки. Уроки, лайфхаки, личные кейсы, ссылки и обзоры на полезные сервисы.