a{
    display: inline-block;
    width: 500px;
}
a div{
    background: #000;  /* У блока, оборачивающего картинку при наведении будет просвечивать черный фон */
    overflow: hidden;  /* Ограничиваем видиую область */
}
a div img{
    opacity: 1;
    transition: opacity 124ms…
 

Шрифты


  • Google Fonts – всеми любимая библиотека шрифтов. Позволяет подобрать и скачать разные шрифты на все случаи жизни.
  • 1001…
В данной статье я бы хотел поделиться методом быстрой валидации полей с помощью разметки и стилей. Данный метод не является кроссбраузерным и рекомендуется к использованию только как дополнительная фича. По ходу статьи мы будем уменьшать наши шансы на кроссбраузерность,…

Чекбоксы

Для изображения галочки используем FontAwesome.

.checkbox input {display:none;}
.checkbox…

Рассмотрим методы респонсивного центрирования контента в контейнере.

1. Центрируем контент с помощью Flexbox

Lorem ipsum
.container…

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

Большинство создают внешние ссылки через target="_blank" и не знают одного интересного нюанса — страница, на которую мы попадем таким образом, получит частичный контроль над ссылающейся на нее страницей через js свойство window.opener.

Через window.opener.location мы сможем сделать редирект на, к примеру,…

.hyphens {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}