.img-responsive{
width:100%;
max-width:100%;
}
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;
}