Webstacker

Твой онлайн-журнал с мира Web и Front End: Новости, статьи и гайды на русском

Сниппеты

Сниппет – фрагмент исходного кода, который будет полезен в процессе разработки. Именно это Вы сможете найти в этой категории: полезные фишки, лайфхаки, интересные реализации

nickdeny

✂️ Обрезаем длинную строку и добавляем троеточие…

В этой статье мы научимся обрезать текст в одну или несколько строк с помощью CSS: overflow, white-space и text-overflow. Теория, реализация, примеры

nickdeny

Как отключить автозаполнение поля формы?

В этой статье мы научимся отключать автозаполнение (autocomplete) для формы и полей (input) без Javascript используя нативные возможности браузера и HTML. Также – посвятим в небольшую теорию и расскажем интересные факты

nickdeny

CSS треугольник: теория, реализация, примеры

Очень часто нам требуется сделать треугольник для реализации требований задачи. В этой статье мы научим, расскажем и покажем Вам как просто сделать треугольник на чистом CSS за две минуты без каких-либо проблем и использования растровых изображений

nickdeny

Стилизация placeholder с помощью CSS стилей

Атрибут placeholder применяется для отображения подсказок и другой информации внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности placeholder и стили, которые позволят сделать его более красивым и уникальным.

nickdeny

Эффект наведения (:hover) на смартфонах и планшетах

Немного истории С введением CSS2 разработчики получили возможность визуализировать наведения на объекты страницы с помощью псевдокласса :hover . Это внесло больше динамики, визуального восприятия страницы и стало неотъемлемым атрибутом каждого современного сайта. Поддержка и использование На данный момент, этот псевдокласс поддерживается любым современным браузером, что позволяет его свободно использовать. Для Internet Explorer 6 (IE6) данный […]

nickdeny

Адаптивный шрифт текста(font-size) с :root

Типография — один из самых тяжелых элементов адаптивного веб-дизайна. В идеале Вы хотите иметь шрифт, максимально читабельный на разных размерах экранов. Обычно, разработчики правят шрифты под определенные размеры устройств, и сейчас мы поможем решить Вам этот вопрос. Начнем с установки медиа-запроса для экранов меньше 45em: @media screen and (max-width: 45em) { p { font-size: 1.5em; […]