От автора: на днях я столкнулся с необходимостью установить границы элемента CSS с трех сторон и подумал, что было бы интересно рассмотреть всевозможные способы сделать это. Ни один из них не является особенно сложным, но, возможно, вы считаете один из них наилучшим из-за четкости синтаксиса, эффективности или чего-то другого. Предположим, нам нужна граница внизу, слева и справа (но не сверху) ...

От автора: вы можете легко применить в CSS фильтры изображений и других элементов с помощью свойства filter. Но что, если вы хотите применить фильтр только к фону элемента? Это довольно сложно. Существуют свойства CSS, специфичные для фона, например background-blend-mode, но смешивание и фильтры — это не одно и то же. Это похоже на то, что у нас есть backdrop-filter, но ...

От автора: если изображение стоит тысячи слов, то наложение фонов CSS друг на друга должно стоить еще больше. Аналогично, возможности дизайна, которые открываются с помощью режимов смешивания в CSS, скорее всего, больше, чем вы можете себе представить. Когда вы слышите о CSS Blend Modes, как правило люди упоминают о трех новых свойствах CSS, которые получили довольно хорошую поддержку в современных ...

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

От автора: Open Web продолжает проявлять себя там, где мы никогда бы не подумали: телефоны, телевизоры, часы, книги, игровые приставки, газовые насосы, лифты, автомобили — даже холодильники. Не определяя слишком много или слишком строго то, как использовать Интернет, он остается гибким и адаптируемым. Эти качества позволили ему превзойти закрытые технологии, такие как Flash и Silverlight. С развитием Сети появляются новые ...

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

Лето 2018 плавно подходит к своему завершению, а мы заметили, что за этот период так и не опубликовали ни одной подборки классных онлайн проектов. Прошлый юбилейный 10 выпуск мини обзоров был размещен достаточно давно и включал сразу 10 сайтов. Сегодня их будет чуть меньше, но хуже от этого статья не станет — поговорим о CSS скриптах, палитрах, логотипах и не ...

От автора: в данном уроке мы с вами создадим форму поиска, которая будет появляться по клику на иконку поиска. Данная техника особенно актуальна для адаптивных сайтов. Чтобы не занимать драгоценное пространство в первом экране формой поиска, достаточно будет разметить небольшую иконку поиска. По клику на данную иконку будет появляться форма поиска. Таким образом, мы создадим в первом экране, на уровне ...

От автора: на днях вечером Амит Патель упомянул, что вы можете присвоить тегам HTML script свойство display: block с помощью CSS, а затем отредактировать этот код инлайном с атрибутом contentEditable. Это означает, что вы можете увидеть все обновления в браузере по мере ввода. Вскоре после этого Мариус Гундерсен ответил, что вы можете сделать это и с тегом style. Все это ...

От автора: сегодня будет разговор о том, как работает свойство z index CSS. Это третий пост в «Как работает CSS» — серия статей, где мы глубоко погружаемся в фундаментальные строительные блоки CSS, которые иногда похожи на черную магию. Независимо от того, как вы пишите CSS, всегда полезно знать, что «runtime» вашей таблицы стилей позволяет писать эффективный масштабируемый CSS. Сегодня мы ...