Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Архив рубрики ‘css’

  • Постоянная ссылка на Создание адаптивного меню с использованием CSS

    Создание адаптивного меню с использованием CSS

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

    Далее... 3 Комментариев »
  • Постоянная ссылка на Создание 8 эффектных стилей оформления списков

    Создание 8 эффектных стилей оформления списков

    Cписки HTML (<ol> для нумерованных, <ul> для ненумерованных списков) используются очень часто. В этом уроке мы пойдем дальше создания обычных списков, и покажем вам 8 разных эффектных способов оформления списков HTML, используя CSS. Мы будем использовать чистый CSS, чтобы скучный список выглядел здорово и даже приобрел дополнительную функциональность.

    Далее... 3 Комментариев »
  • Постоянная ссылка на Создание отличного способа отображения значков социальных сетей

    Создание отличного способа отображения значков социальных сетей

    Некоторое время назад внимание автора урока привлек  интересный способ представления значков социальных сетей. Когда вы наводите указатель мыши на значок, появляется маленькая всплывающая подсказка с названием социальной сети, а все другие значки становятся полупрозрачными. Автору захотелось развить этот подход с применением CSS3 переходов. Основные задачи: плавное изменение уровня прозрачности, и небольшая анимация положения всплывающей подсказки. 

    Далее... 2 Комментариев »
  • Постоянная ссылка на Создание целевой страницы для веб-сайта StartupGiraffe

    Создание целевой страницы для веб-сайта StartupGiraffe

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Поворачивающийся рекламный щит с использованием только CSS

    Поворачивающийся рекламный щит с использованием только CSS

    Сегодня мы будем создавать рекламный щит, используя исключительно CSS. Обратите внимание, этот пример тестировался только в браузере Safari на компьютере Mac и в браузере Safari для системы IOS на iPhone. Ниже вы увидите демонстративное видео, на случай, если у вас нет этих браузеров.

    Далее... Нет комментариев »
  • Постоянная ссылка на Создание логотипа IBM Lotusphere с использованием CSS3

    Создание логотипа IBM Lotusphere с использованием CSS3

    Некоторое время назад автор урока посетил страницу конференции IBM Lotusphere. Он сразу обратил внимание на красивый логотип. Хотя дизайн логотипа простой и минималистичный, он очень хорошо выглядит. Сегодня мы создадим этот логотип, используя только HTML и CSS. Основной секрет этого эффекта — использование свойств border-radius и overflow:hidden. Мы создали две версии. Первая версия использует дополнительные элементы HTML, [...]

    Далее... Нет комментариев »
  • Постоянная ссылка на Создание подсвечивающихся блоков с использованием CSS3

    Создание подсвечивающихся блоков с использованием CSS3

    В этом уроке мы хотим показать, как создать милый эффект подсвечивающихся блоков, используя только CSS. Основная задача — создать уменьшенные изображения, после нажатия на которые открывалось бы соответствующее полноразмерное изображение. Используя переходы CSS и анимацию, мы можем заставить полноразмерное изображение появляться необычным образом.

    Далее... Нет комментариев »
  • Постоянная ссылка на Создание плоских «хлебных крошек» с использованием CSS

    Создание плоских «хлебных крошек» с использованием CSS

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

    Далее... 3 Комментариев »
  • Постоянная ссылка на Эффект дождя на стекле при помощи HTML и CSS

    Эффект дождя на стекле при помощи HTML и CSS

    В этом уроке мы научимся создавать эффект капель дождя на стекле, используя CSS. Урок очень прост, однако результат вам наверняка понравится. Для выполнения туториала вам понадобятся базовые знания CSS и совсем немного jQuery.

    Далее... 6 Комментариев »