градиенты Archives - Дизайн Мания

Полезные дизайнерские онлайн инструменты №16 и немного вдохновения

С момента публикации прошлой подборки полезных веб-сервисов №15 прошло немало времени, и у нас накопилась масса новых интересных ссылок, которыми хочется с вами поделиться. Их насколько много, что они все физически не помещаются в один пост. Поэтому разделим ее на две части — второй блок с классными онлайн-проектами ожидайте через несколько недель. Сегодня будем говорить про генераторы, паттерны, цвета, логотипы, UX-элементы и др. Линки традиционно…

Полезные веб-сервисы дизайнеру №10: эффектные фоны, CSS генераторы, SVG материалы

Online сервисы

Текущий выпуск будет 10-тым по счету (юбилейным) с момента запуска рубрики статей-подборок с разными инструментами дизайнерам. Именно поэтому мы подготовили непривычно большое число обозреваемых проектов — сразу 10. Кроме того, подобных публикаций в блоге не было достаточно давно (прошлый пост датируется аж началом февраля), и за пару месяцев накопилось много чего интересного для рассмотрения. SVG Backgrounds Сервис SVG Backgrounds содержит яркие и эффектные SVG фоны для сайтов. Представленные…

Создаем красивый градиент фона + трансформация skew в CSS3

Верстка

Ранее в блоге мы уже рассказывали про линейные градиенты и заодно приводили примеры разных сервисов-генераторов. Сегодня попробуем применить эти знания на практике для создания красивого градиента фона на CSS. Плюс в процессе работы познакомимся с интересной функцией skew для реализации трансормаций в CSS3. Можно сказать, что основная идея фонового изображения позаимствована с сайта компании BrightMedia, который является прекрасным примером профессионального использования всех возможностей CSS3. Правда, мы не будем повторять…

Линейные градиенты в CSS и генераторы градиентов

Градиентом называют плавный переход из одного цвета к другому. Когда-то этот прием был достаточно популярен для сайтов в стиле веб 2.0. Помнится, многие дизайнеры применяли яркие градиенты для создания красочных логотипов, дизайнов сервисов и т.п. В настоящее время с помощью CSS3 данную фишку можно реализовать без каких-либо картинок, фотошопа, а используя только стили CSS. Я уже как-то писал про градиентные кнопки CSS3 сегодня поговорим про…

Создаем красивые кнопки для сайта на CSS3 (с градиентами)

Каждый веб-мастер давно наслышан, а кто-то уже виртуозно применяет на практике новые уникальные возможности CSS3. Не так давно мы разбирали несколько интересных текстовых эффектов, на этот раз речь пойдет о градиентных кнопках, созданных без использования графики (картинок), то есть, только средствами CSS3. Сам туториал я обнаружил здесь, вам же предлагаю перевод. Итак основные качества будущей кнопки (кнопок): Масштабируемость (в зависимости от размера шрифта и количества…

Бесплатные градиенты для фотошопа

Градиенты — это один из наиболее важных аспектов, которые нельзя забывать при разработке веб-сайта 2.0. Предлагаю вам скачать отличную подборку из 130 потрясающих градиентов в одном файле в формате GRD для Adobe Photoshop. Эти градиенты полностью масштабируемы в том смысле, что вы можете достаточно просто создать форму или использовать готовые формы shapes для Photoshop, а потом применить на них тот или иной градиент. С помощью…