815 читали · 1 год назад
7 способов нарисовать крестик закрытия на чистом css
Конечно, можно просто запилить svg и вес небольшой и цвет менять можно, но это же скучно! Содержание: 1. Вариант с svg. Можно менять цвет, поворачивать <svg viewPort="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line x1="1" y1="11" x2="11" y2="1" stroke="black" stroke-width="2"/> <line x1="1" y1="1" x2="11" y2="11" stroke="#000000" stroke-width="2"/> </svg> 2. С помощью псевдоклассов. По мне, самый устаревший способ. <div class="close"></div> <style> .close:before, .close:after { content: ""; position: absolute; width: 24px; height: 4px; background: #000000; } ...
Знакомимся с CSS / Крестики-нолики. Пошаговый курс
Сегодня мы немного познакомимся со стилями. На прошлом уроке мы уже поняли, что при помощи стилей мы можем изменить фоновый цвет кнопки. Но, естественно, этим возможности стилей не исчерпываются. При помощи стилей можно менять дизайн страницы кардинально. Как вы уже помните, мы меняем стиль элемента при помощи свойства style указывая его в атрибутах элемента. В качестве значения в кавычках мы пишем некий код. Этот код записан на специальном языке описания стилей. Сейчас посмотрим как все это работает...