Интересный проект 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

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

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
Пометки: Вертикальное выравнивание картинки изображения, фотка
Яндекс.Метрика