Стрічка новин на сайті через CSS і без JavaScript (біжучий рядок на HTML)

Стрічка новин Верстка 

Сьогодні буде корисний пост по темі верстки де ми розкажемо вам як можна реалізувати стрічку новин у вигляді біжучого рядка на HTML + CSS і без JavaScript. Також в якості бонуса в кінці статті поділимось готовим кодом інтеграції одного з найкращих рішень на WordPress сайті. По суті даний пост буде набором прикладів з сервісу Codepen аналогічно до того, як ми робили в замітках про підкреслювання…

Веб-сервисы разработчикам и дизайнерам №15 — генераторы, цветовые палитры, CSS

Веб-сервисы разработчикам и дизайнерам №15 Online сервисы Полезные сайты 

Представляем вашему вниманию первую в 2020 году подборку всяких «полезностей» для веб-дизайнеров и разработчиков. Учитывая длительный перерыв с момента прошлой публикации, решили добавить в статью достаточно большое количество разных веб-проектов. Надеемся, они будут вам полезны. Какого-то одного конкретного направления в статье нет, это будет такая себе «солянка» интересных и актуальных онлайн-сервисов, найденных на просторах сети. Общей фишкой у них всех можно назвать разве что их…

Mailto — HTML ссылка на электронную почту на сайте

Mailto - html ссылка Верстка 

Чтобы как-то разбавить дизайнерскую тематику посмотрим сегодня еще один урок по верстке – после предыдущего поста о CSS hover эффектах прошло уже немало времени. Данная заметка будет посвящена вопросу создания ссылки на почту в html. Все это реализуется с помощью обычного тега A, который не смотря на всю свою простоту, может использоваться не только для оформления гиперссылкок, но и имеет несколько интересных нюансов. Базовый синтаксис выглядит…

Интересные дизайнерские веб-сервисы №13: PNG, иллюстрации, иконки…

Интересные дизайнерские веб-сервисы №13 Online сервисы Полезные сайты 

Что-то в этом году, как и в прошлом, никак не получается собирать каждый месяц по одной полноценной подборке веб-проектов с краткими обзорами. Прошлый 12-тый выпуск вышел аж в январе. В нем можете почитать про сервисы Emoji и скриншотов, использование шритов + посмотреть парочку вариантов скроллинга (горизонтальный, диагональный и др.). Сегодня в статье полезных ссылок будет чуть меньше, но старались выбрать реально самые полезные из недавно…

Кликабельный фон / подложка для сайта через 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, позволяющий за несколько минут генерировать код эффектного, красивого электронного письма, которое можно…