Архив тега: css3

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

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. Правда, мы не будем повторять один в один реализацию фона с данного проекта, а попробуем воссоздать нечто отдаленно похожее. Во-первых, […]

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

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

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

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

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

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

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

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

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

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

CSS генераторы кнопок, шаблонов, рамок и других элементов сайта

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

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

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

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

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

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

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

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

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

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

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

Эффекты и анимация на CSS

С помощью CSS разработчики могут создавать на сайтах весьма интересные эффекты и даже анимацию. Возможности нового CSS3 значительно расширили доступный набор их инструментов. В интернете имеется достаточно много разных примеров, библиотек и сервисов, где каждый может посмотреть и скачать те или иные эффекты. Про некоторые генераторы CSS3 и HTML5 мы уже писали, сегодня рассмотрим еще 2 интересных проекта. Animate.css — анимация через CSS Animate.css — набор классных, веселых кроссбраузерных(!) вариантов анимации для веб-сайтов. Вы можете использовать их как для домашних […]

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

Продвинутые CSS туториалы на Codrops

Думал опубликовать в блоге перевод очередного материала по CSS, но потом решил сразу поделиться ссылкой на сборник этих самых мануалов. Возможно, кому-то данная ссылочка пригодится, хотя в интернете с легкостью можно найти много сайтов с приемами по CSS. Правда, отличительной особенностью проекта Codrops являются действительно необычные и интересные CSS туториалы. Можно сказать, что там находятся в основном «продвинутые» и сложные CSS приемы, а не простенькие хаки как в большинстве блогов. Некоторые описания содержат реально много текста — авторы заметок стараются […]

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