Записи, помеченные ‘css’

• 

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

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

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

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

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

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

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

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

  Далее... 1 Комментарий »
• 

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

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

  Далее... Нет комментариев »
• 

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

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

  Далее... Нет комментариев »
• 

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

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

  Далее... Нет комментариев »
• 

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

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

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

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

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

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

  Создание необычного выезжающего меню с использованием jQuery

  В этом уроке мы создадим необычное выезжающее снизу меню. У пунктов этого большого меню будет название и описание. Оно будет выезжать снизу, открывая описание и уменьшенное изображение. Мы будем использовать свойства CSS3 для интересных эффектов тени и jQuery для взаимодействия. 

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