Рубрика: FrontEnd

bez-imeni-1

Создание CSS анимации «переворот»

CSS анимация — это очень весело. Её красота в том, что посредством множества простых свойств вы можете создать что угодно от элегантного затухания до Супер-Пупер эффекта. Одним из таких CSS эффектов является CSS эффект "переворот", где есть какой-то контент с друх сторон заданного контейнера. Этот урок покажет как создать этот эффект максимально простым способом.

Читать далее

Множество способов добавить ID к элементу ‘body’

Каждый из этих сниппетов был так или иначе собран из документации или похожего онлайн-источника.

На протяжении долгого времени я работал над веб-дизайном WordPress, были случаи, когда мне нужно было добавить ID или класс к тегу body. Например, это часто случается во время интеграции стороннего плагина в WordPress, который создает свои собственные страницы, которые WordPress не распознаёт. Или мне нужны более гибкие классы для дизайна сайта, который я создаю.

Чтобы изменить внешний вид этих страниц так, чтобы область видимости стилей распространялась только на эту страницу, нам нужен способ нацелиться на эту страницу или категорию страниц. Ниже приведены некоторые способы, которые я считаю полезными для добавления ID и классов к body элементу как с использованием WordPress, так и без него.

Читать далее

screenshot_1

Колонки одинаковой высоты Bootstrap

В одном из проектов мне было нужно, чтобы четыре стандартных блока col-xs-3 были одинаковой высоты, подстраиваясь под высоту самого «длинного». Для того, чтобы этого добиться, можно использовать простое решение:

Читать далее

maxresdefault

Как добавить пользовательский (кастомный) шрифт при помощи CSS

CSS-правило @font-face позволяет подгружать пользовательские (кастомные) шрифты к странице. Добавление в таблицу стилей этого правила заставляет браузер загружать шрифт из места его хранения, а затем отображать в соответствии с CSS.

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

Читать далее

Основы работы с canvas

Привет всем! Давненько я ничего не писал, адская неделя была на работе((

Сегодня я расскажу об основах работы с тегом canvas из HTML5. Это просто КРУТАЯ штука. Фактически canvas — это холст, на котором можно рисовать. Рендеринг — это довольно затратная для браузера вещь, поэтому сложного ничего лучше не делать.

canvas применим в тех случаях, когда нужно какое-то программируемое, но не особо сложное (хотя не всегда это так) изображение. К примеру, на canvas можно реализовать крутые переливающиеся фоны, которые будут адски вредны людям с эпилепсией.

Но начнём с простого примера:

Читать далее

images-1fc04c47-6e34-4701-aedf-c90e5927b2f8

CSS-анимация против JS-анимации

Иногда бывает так, что нужно добавить к элементу какую-то стандартную анимацию на событие наведения мыши (hover) или попадание в фокус (focus) и т.д. Добавить тень, изменить размер и т.д. Предлагаю рассмотреть простой пример для сравнения.

Читать далее

Css-miami-desktop_(110995239)

CSS-анимация «Дрожь»

Иногда бывает необходимость создать эффект "дрожания". Можно использовать JavaScript, однако последние спецификации CSS позволяют обойтись без него. Этот сниппет взят с моего любимого сайта по CSS — https://css-tricks.com.

Читать далее

apple-touch-icon

Добавить пространство к доку в OS X

Это совсем не связано с HTML, но по стечению обстоятельств мне пришлось кое-где это добавить. Для того, чтобы добавить «пространство» к доку в OS X, откройте Terminal.app и введите следующий код:

Читать далее