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

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

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

CSS hover эффекты — для картинок, кнопок, при наведении на ссылки, блоки и др.

CSS hover эффекты - для картинок, кнопок, при наведении на ссылки, блоки и др. Верстка 

Очень часто на сайтах вы могли встречать изменение оформления ссылок или кнопок при наведении. Реализовать задачу позволяет специальный псевдокласс :hover в CSS. Сегодня рассмотрим некоторые приемы верстки позволяющие сделать эту фишку, а ниже опубликуем список наиболее интересных из них (с краткими описаниями/пояснениеми). Все варианты разделим на: Эфекты для кнопок и ссылок. Hover в изображениях. CSS библиотеки (подключаются отдельно). Данные группы весьма условны, т.к. многие примеры…

Инструменты веб-дизайнеру и не только №9 — Sketch плагины, мокапы, верстка

Инструменты веб-дизайнеру и не только №9 - Sketch плагины, мокапы, верстка Online сервисы 

Прошлая заметка с обзорами дизайн сервисов была опубликована несколько месяцев назад, поэтому пришло время рассмотреть парочку новых проектов. Начиная с этого выпуска мы решили включать в подобные статьи не только ссылки на полезные сайты, но и публиковать разные интересные материалы, что могут пригодиться в работе. То есть по формату составляющие части подборки могут кардинально отличаться, но всех их объединяет тематика дизайна для Web’а и не…

Подборка сервисов дизайнерам №8 — работа с лого, лендинги, CSS библиотека

Подборка сервисов дизайнерам №8 - работа с лого, лендинги, CSS библиотека Online сервисы 

Публикуем последнюю в текущем 2017 году подборку полезных сайтов, которые заинтересуют верстальщиков, веб-дизайнеров, иллюстраторов и подобных им специалистов. Традиционно все проекты достаточно простые по своей функциональности, выполняют буквально 1-2 задачи. Однако иногда эти решения хорошо помогают упростить вашу работу и сэкономить немного времени. Сегодня поговорим про логотипы, иконки, примеры макетов и типографику. Good Web Design Ресурс Good Web Design содержит достаточно большую коллекцию дизайнов лендингов. Для…

Подчеркивание ссылок и текста через CSS, свойство text-decoration

Подчеркивание ссылок и текста через CSS, свойство text-decoration Верстка 

В одной из прошлых статей мы писали о мини дизайнерском тренде в виде добавления ярких фоновых полосок под ссылками и текстом на сайте. Аналогичный эффект также можно встретить в современных иллюстрациях для социальных сетей, которые содержат некий контент. Сегодня решили продолжить тему и рассмотреть вопрос с точки зрения верстки, то есть рассказать как сделать подчеркивание текста / ссылок в HTML. В этом нам поможет одна…

Горизонтальное выпадающее меню на CSS + HTML

Горизонтальное выпадающее меню на CSS + HTML Верстка 

Большинство классических сайтов в интернете использует горизонтальное меню в качестве основного элемента навигации. Иногда в нем могут встречаться разные дополнительные фишки — многоуровневые конструкции, иконки для подпунктов, блок поиска, сложные списки и т.п. Недавно в блоге уже была небольшая подборка стильных меню в PSD, а сегодня рассмотрим 4 практических примера как сделать выпадающее меню на CSS + HTML. Информация пригодится начинающим разработчикам и тем, кто…

Сервисы в помощь веб-дизайнеру — Сентябрь 2016

Сервисы в помощь веб-дизайнеру - Сентябрь 2016 Online сервисы Инструменты Полезные сайты 

Последняя подборка ресурсов для веб-дизайнера была опубликована пару месяцев назад в марте. Самое время вернуться к данной теме и рассказать вам о нескольких новых полезных сервисах, упрощающих работу специалистов по веб-дизайну. Сегодня в выпуске: генераторы фавиконок и email писем, сайты для текстов, CSS и цветовой палитры. Inkbrush Inkbrush – очередной инструмент от MovableInk, позволяющий за несколько минут генерировать код эффектного, красивого электронного письма, которое можно…

Как сделать закругленные углы CSS: описание + CSS генераторы

Решил на своем сайте стандартным блокам в сайдбаре сделать закругленные углы с помощью CSS3. Раньше, помнится, чтобы реализовать данную задачу рисовали отдельные картинки для каждого угла и совмещали их с помощью нескольких DIV блоков в HTML. К счастью, сейчас все это легко задается в CSS стилях. Для определенных макетов и тематик (например, женской) подобное CSS закругление выглядят намного интереснее прямых строгих линий. В общем, пришлось…

Жирный текст с помощью HTML и CSS

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

Кликабельный фон / подложка для сайта

Для одного проекта попросили реализовать кликабельный фон (подложку) сайта, которую вы могли встречать на крупных порталах. Такой рекламный брендинг позволяет максимально привлечь внимание посетителя и намного эффективнее баннера. В блоге уже публиковались статьи про большую фоновую картинку для сайта и создание изображения на весь экран но все эти варианты были не кликабельные. Поэтому пришлось искать новое решение в сети. Я определил 3 возможных метода решения задачи. Кликабельный фон…

Лучшие статьи Дизайн Мании 2013

Традиционно в начале нового года подвожу итоги прошедшего с обзором самых интересных публикаций в блоге. Если сравнивать эту заметку с соответствующим постами в WordPress Inside или итоговым постом на Tod’s blog, то здесь выбрать лучшие материалы было сложнее всего. Их число оказалось достаточно большим. Хотя, если посмотреть аналогичную статью за 2012 год, то там также было много полезных ссылок. Не буду менять традицию и сгруппирую…

UIPlayGround — 200 иконок на CSS3 для ваших сайтов

Использовать на сайтах иконки, которые реализуются через CSS стили, все более модно, удобно и эффективно. Как-то в блоге я уже рассматривал необычные сервисы с иконками One Div и The Noun Project, сегодня расскажу про еще один. Примечательно, что автор проекта UIPlayGround сам обратился ко мне на почту с просьбой поведать о своем детище. Итак, на сайте UIPlayGround вы найдете около 200 разных иконок на CSS/CSS3….

LoftBlog — полезный видеоблог для веб-разработчиков

LoftBlog — место, где можно с головой погрузиться в увлекательный мир новейших информационных технологий и веб-разработки. Долой скуку и устаревшие данные! Специалисты говорят, что в ИТ сфере каждые 2 года информация просто-напросто устаревает, поэтому если хочешь быть впереди — держи руку на пульсе. На сайте Loftblog не догоняют, а идут в ногу с новейшими технологиями! Loftblog — это качественные, современные уроки от ведущих it-специалистов в…

Страница 1 из 3123