Архив тега: уроки верстки

На странице собраны все публикации по тегу «уроки верстки».

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

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

комментариев 6

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

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

комментария 4

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

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

1 комментарий

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

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

Нет комментариев

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

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

комментария 2

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

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

комментария 4

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

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

Нет комментариев

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

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

комментария 4

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

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

комментария 2

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

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

Нет комментариев

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

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

комментариев 7

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

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

комментариев 8

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

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

комментариев 8