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

• 

  Знакомство со структурным селектором CSS3 :first-of-type

  Как хорошо что в CSS3 добавились новые селекторы, позволяющие обращаться к определенным элементам, не используя классы, идентификаторы или другие свойства элемента! В этом уроке мы расскажем о селекторе :first-of-type.

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

  Обращения к файлу определенного типа при помощи селектора атрибутов CSS

  Селектор атрибутов очень удобен для выбора элементов без добавления излишних идентификаторов и классов. До тех пор, пока у элемента, к которому нужно обратиться, есть такие атрибуты, как href, src и type, нам не нужно добавлять лишнее. Селекторы атрибутов фактически присутствовали, начиная с CSS 2.1, и теперь, после добавления еще нескольких селекторов атрибутов в спецификации CSS3, мы можем [...]

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

  Создание отражения изображения с использованием CSS3

  Мы уже рассказывали о разных свойствах CSS3. Кроме этого есть еще свойства, которые пока что не включены в официальные спецификации CSS3, но которые стоит попробовать применить, и одно из таких свойств — box-reflect, которое введено для движка Webkit. Это свойство может создавать отражение указанных объектов.

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

  Создаем окно чата с текстовыми облачками в CSS3

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

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

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

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

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

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

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

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

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

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

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

  Оформляем текст с использованием CSS3

  Красивая типографика всегда интересна, поэтому хочется найти способы применения веб-технологий для улучшения оформления текста. В этом уроке мы покажем, как использовать свойства CSS3, чтобы разнообразить оформление текстов или создать эффекты способами, которые кажутся невозможными. Заметьте: эффекты будут работать только в браузерах Webkit, но мы добавили дополнительные свойства, чтобы они работали и в других браузерах.

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

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

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

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