Кликабельный фон / подложка для сайта через HTML, CSS, JS

Кликабельный фон сайта Верстка 

Реализацию данной задачи вы наверняка встречали на крупных порталах, так как подобный рекламный брендинг привлекает максимум внимания посетителей и является более эффективным чем обычные баннеры. Сегодня рассмотрим как сделать фон ссылкой на сайте с помощью HTML, CSS, Javascript и некоторых других «подручных средств». Ранее в блоге уже публиковались статьи по схожей тематике, например, про большую фоновую картинку у веб-страниц или создание изображения на весь экран но все…

Интересные дизайнерские онлайн сервисы №11: эффекты CSS, анимация, фоны

Дизайнерские онлайн сервисы Online сервисы 

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

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

Полезные веб-сервисы дизайнеру №10 Online сервисы 

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

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

CSS hover эффекты Верстка 

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

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

Инструменты веб-дизайнеру Online сервисы 

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

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

Интересные сервисы дизайнерам Online сервисы 

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

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

Подчеркивание текста и ссылок Верстка 

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

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

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

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

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

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

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

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

Создаем красивый градиент фона Верстка 

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

7 ресурсов для веб-дизайнера — Март 2016

Online сервисы Инструменты Полезные сайты 

Работа любого веб-дизайнера – тяжелый творческий труд. Для более продуктивной/эффективной деятельности можно воспользоваться рядом интернет ресурсов, которые значительно упростят работу и дадут приток новых идей. Обзоры таких сайтов мы стараемся регулярно публиковать — после январской подборки встречайте 7 интересных проектов за март 2016. BrandColors На сайте Brandcolors можно найти кодировки цветов всех самых популярных мировых брендов. Найдете их сразу же на главной странице: слева расположены названия,…

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

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

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

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