CSS

Добавить тень у after элемента

06.12.2017

Имеется блок — выплывающее окно у которого after добавляет треугольную стрелочку, у блока требуется добавить тень. При добавлении тень игнорирует стрелочку, и для того, чтобы это обойти придется делать костыль. Добавить для тени before: .bt_delivery_win{ // выпадающее окно position: absolute; min-width: 300px; margin-top: 20px; padding: 20px 20px 20px 40px; color: #000000; background: #f0f0f0; box-shadow: 0…

Нарисовать треугольную стрелку css

01.12.2017

Требуется нарисовать с помощью css треугольную стрелку для списка ▼ и поворачивать её при открытии/закрытии списка. <div class=»i_phone_main j_phone_main»> <span class=»i_phone_main_str»></span> </div> .i_phone_main_str{ transform: rotate(180deg); } .i_phone_main_str:after { content: » «; position: absolute; width: 0; height: 0; top: -5px; left: -18px; border: solid transparent; border-width: 4px; border-bottom-color: #fff; pointer-events: none; } .i_phone_main_str.hd:after { top: 0;…

Подводные камни адаптивной верстки

29.10.2017

При верстке адаптивного сайта по мере его верстания всплывают некоторые моменты — подводные камни, с которыми рано или поздно придется столкнуться. Статья написана без логики, так сказать в боевом состоянии. Первый камень Когда полным ходом идет верстка, многие просто проверяют адаптив, путем изменения размера окна браузера. Там как правило все хорошо работает, особенно хорошо если…

Правила оформления css

25.10.2017

Для удобного и быстрого чтения кода используют разные принципы написания стилей. Ниже приведены правила оформления .css которые наиболее удобны для использования по-моему конечно же мнению. 1. Название класса в виде snake_case (название с маленькой буквы разделенные нижним подчеркиванием), само название человеко понятное с префиксами идентифицирующие человека написавшего код. .bt_topban_title 2. Отступы между классами, открывающая фигурная…