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

• 

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

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

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

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

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

  Как сделать элегантный аккордеон с JQUERY и CSS3

  Сегодня мы будем создавать элегантный аккордеон для контента. Идея состоит в том, чтобы несколько вертикальных вкладок с контентом раздвигались в стороны при наведении на одну из них курсором мыши. Для улучшения внешнего вида аккордеона будут использованы некоторые свойства CSS3. Давайте приступим!

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

  Создаем стильную кнопку, используя только CSS3

  Сегодня мы будем рисовать кнопку, используя исключительно CSS. В работе будут использованы градиенты, тени, границы и переходы. Кнопка основана на стандартном стиле, который встречается практически на всех сайтах. Мы выполним ее в закругленном прямоугольном стиле, похожем по форме на табличку. Тексту же на кнопке придадим небольшую тень, чтобы создать впечатление эффекта углубления.

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