Сервис позволяет генерировать css код для тени. Есть несколько настроек, включающих: прозрачность, размытие и т.д.


Пометки: HTML тени

В данной заметке опишу самые часто используемые возможности SCSS.


Категории: Web, CSS

Думаю все мы уже привыкли видит на сайтах значок рубля, вместо приписки "руб.", но что делать если кодировка сайта не utf-8, а windows-1251?


Категории: Web, HTML, CSS
Пометки: web шрифт со знаком рубля, знак рубля шрифтом

Emmet

29.10.2019

Уже давно использовал, в разных редакторах, возможность генерации целых блоков html по шаблонам вида: div.class>ul+.
И вот решил выяснить про данный функционал подробнее.


Категории: Web, HTML, CSS
Пометки: автокомплит, ctrl+e в codelobster

Базовый пример того, как можно сделать кнопку для скрола до шапки сайта. В примере использоваться fontawesome и jQuery, но вполне можно обойтись и без них.

Кнопка появляется, только если посетитель промотал сайт на 300 пикселей вниз.


Категории: JavaScript, CSS, JQuery
Пометки: Плавная промотка страницы до шапки сайта, scrollup

Сейчас, во времена адаптивных шаблонов, уже некого не удивишь совершенно разным дизайном для мобильных платформ и десктопов, но довольно часто верстальщики приналегают оптимизацией размера картинок и отображаю на всех устройствах одну и ту же картинку, просто меняя ее визуальную ширину / высоту.

Итак атрибут srcset позволяет задать какие картинки, при какой ширине экрана нужно загружать. Это позволяет не только экономить трафик, но и проходить Google pagespeed.


Категории: Web, HTML, CSS
Пометки: Адаптивные картинки, Адаптивные изображения используя srcset

Интересный проект Animista, сразу можно посмотреть как будет вырядить CSS эффект, покрутить его, "примерит" и получить код для использования.


Категории: CSS, Сторонние сервисы
Пометки: анимация, animation

Довольно красочная подборка иконок (whatsapp, telegram, vk, twitter, facebook и многие другие) на прозрачном фоне.

Можно или вырезать или использовать как спрайты.


Категории: HTML, CSS, -Памятка-
Пометки: whatsapp, telegram, иконки, icon, vk, twitter, facebook

Иногда нужно заменить старую табличную верстку (HTML таблицу), на отзывчивую (Responsive), правильный вариант, это переверстать (на эту тему есть заметка Замена таблиц на flexbox ), но иногда это слишком затратно по ресурсам.

Тут есть простое решение - превратить таблицу в flexbox


Категории: HTML, CSS
Пометки: Переделка табличной верстки на flexbox

При использовании flexbox некоторые привычные методы, например, выравнивание элементов по центру внутри flex блока, работаю по другому.

Ниже пример выравнивания текста по вертикали в flexbox


Категории: HTML, CSS
Яндекс.Метрика