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

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

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

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

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

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

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

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

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

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

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

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

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

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

Закончил обучение в Нетологии — итоговый отзыв

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

Tutsplus — бесплатные уроки по веб-дизайну и не только

Tuts+ (или Tutsplus) — полезный англоязычный образовательный портал с аудиторией около 5-ти миллионов пользователей, которые ежедневно изучают дизайн, кодинг, фотографию, бизнес и множество других специальностей. Одно из самых популярных направлений здесь — «Дизайн и иллюстрация» design.tutsplus.com, создано для дизайнеров со всего мира, желающих получить новые знания и усовершенствовать свои навыки. В отличии от популярных видеокурсов все материалы находятся в онлайн доступе. Уроки сгруппированы в несколько категорий…

Нетология — буду учить HTML-верстку онлайн

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

HTML Academy — отличные онлайн-курсы по HTML и CSS

Обучение веб-разработке — тема достаточно обширная, и начинать ее нужно с самых азов — HTML и CSS. Сейчас в интернете существует масса разных курсов, отсканированных книг и самоучителей для получения знаний. Однако ничего из этого не будет изучать также интересно как проект HTML Academy. Этот полезный ресурс поможет вам качественно и в короткие сроки изучить основы веб-разработки / верстки. Ресурс сделан в формате интернет школы,…

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

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

Слайдер «аккордеон» для сайдбара с помощью CSS3

В сайдбаре блогов или сайтов часто не хватает места для всех информационных блоков с текстами, которые вы, возможно, бы хотели там разместить. Часто для этого используются табы — это что-то вроде закладок, которые переключают несколько страницы контента. Метод работает отлично и экономит место в сайдбаре. Сегодня предлагаю рассмотреть еще одну похожу по назначению разработку — слайдер «аккордеон» (Accordion). Визуально он выглядит приблизительно так: То есть…

Оформление текста с помощью CSS3 на практике

Оформление текста Верстка Типографика 

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

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

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