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

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


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

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

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


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

Интересная библиотека, например, для интерактивного бэкграунда.

pic1

Сайт разработчика VincentGarreau/particles.js

Живое Demo


Категории: JavaScript, HTML, CSS
Пометки: Постоянно изменяющиеся частицы, рисование на канве, конвас, canvas

Нужно было разместить картинку по центру блока, размер самого изображения может быть разным.


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

Коротко о том, как вставить на страницу SVG изображение и изменить его цвет через CSS.


Категории: HTML, CSS
Как изменить шрифт текста сайта на свой.

Категории: CSS

Интересный шрифт, в рукописной стилистике.

pic1

 
/* cyrillic */
@font-face {
  font-family: 'Neucha';
  font-style: normal;
  font-weight: 400;
  src: local('Neucha'), url(https://fonts.gstatic.com/s/neucha/v9/kfCpWUYjzqqtPFESHGr73_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Neucha';
  font-style: normal;
  font-weight: 400;
  src: local('Neucha'), url(https://fonts.gstatic.com/s/neucha/v9/irvP3TB0tsoy_UMHmCQlTw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

Нашел на сайте


Категории: HTML, CSS, -Памятка-

Вечная проблема: картинки разного размера, но должны выглядеть одинаково.

Вот примерный вид результата:

pic1


Категории: Web, HTML, CSS
Пометки: Вертикальное выравнивание картинки изображения, фотка

Промер создания и оформления простого тултипа на CSS

pic1


Категории: HTML, CSS
Пометки: тултип, всплывающая подсказка

Данный способ поможет тем, кому нужно растянуть блок на всю высоту страницы, не считая шапки. При этом прокрутки на странице не будет.


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