Главная » Архив меток: CSS 3

Архив меток: CSS 3

Продвинутая CSS-темизация: динамические темы с помощью переменных и JavaScript

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

Читать далее »

Прогрессивное раскрытие формы с помощью CSS

От автора: как можно улучшить с помощью CSS формы? Недавно нам в SiloCreativo посчастливилось прочитать замечательную статью Феликса Ортеги о UX под названием «Прогрессивное раскрытие: Поиск простого в сложном» с отличными реальными примерами, позволяющими лучше понять эту технику прогрессивного раскрытия и как применить ее в нашей работе. В веб-дизайне мы можем найти много мест, где применение этого метода будет означать ...

Читать далее »

Продвинутые эффекты с помощью режимов наложения фона CSS

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

Читать далее »

Возможности свойства color-adjust CSS

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

Читать далее »

Экономящие время техники CSS для создания адаптивных изображений

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

Читать далее »

Методы скрытия элементов в CSS

От автора: мы не придаем большого значения скрытию HTML-элементов через CSS; мы делаем это инстинктивно, пока не узнаем об аспекте доступности и о принципиальном отличие различных методов. Это отличие состоит в том, чтобы полностью скрыть элемент и его содержимое или скрыть элемент, но отобразить его содержимое для чтения с экрана. Мы знаем, что скрытие элемента CSS связано не только с ...

Читать далее »

Обрезка по высоте строки — простая формула CSS для удаления из текста верхнего пространства

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

Читать далее »

CSS initial — будьте осторожны с начальными значениями

От автора: в CSS каждое свойство имеет то, что называется начальным значением. Иногда это называется значением по умолчанию, но спецификация использует термин CSS initial, который, я думаю, немного лучше. Технически, начальное значение любого заданного свойства должно быть объявлено, только если это значение переопределяет ранее определенное значение, которое не является начальным значением. Но начальные значения часто присутствуют, даже если они не ...

Читать далее »

Создание кругового меню. Часть 2

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

Читать далее »

Создание кругового меню. Часть 1

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

Читать далее »