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

• 

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

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

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

  Использование псевдокласса CSS :nth-child

  Псевдоклассы можно использовать для выбора определенного элемента из списка. В этом уроке мы расскажем о псевдоклассе :nth-child, что можно создать с помощью этого псевдокласса и чем он может быть полезен. Псевдокласс :nth-child позволяет выбрать группу элементов с общими свойствами. Наиболее часто он используется для выбора четных или нечетных элементов из группы. Нередко его используют, чтобы таблица выглядела, [...]

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

  Цикл уроков об анимации CSS3. Часть 2: Основы свойств анимаций

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

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

  Необычные переключатели-флажки и радиокнопки с использованием только CSS3

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

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

  Обзор условных инструкций CSS

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

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

  Анимированные полосы загрузки с использованием CSS3 и фонов SVG

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

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

  Цикл уроков об анимациях CSS3. Часть 1. Основы. Что такое анимации?

  Если вы читали наш цикл уроков о переходах CSS3, то знаете, что переходы — это анимированные эффекты между начальным и конечным состояниями, которые запускаются событием, таким как активация псевдокласса CSS :hover или событием Javascript. В этом цикле уроков мы рассмотрим анимации CSS3. У них много общего с переходами, но они более гибкие и несколько более сложные в [...]

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

  Создание галереи изображений с увеличением с использованием только CSS3

  В этом уроке мы создадим галерею изображений с увеличением изображения при нажатии на него. Еще мы добавим кнопку для закрывания увеличенного изображения. И, что самое главное, мы сделаем это на чистом CSS! Лучше всего, чтобы страница с галереей не прокручивалась, так как псевдокласс :target прокрутит страницу до активного элемента, что будет раздражать, если страница может прокручиваться.

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

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

  В этом уроке мы создадим раздвигающуюся галерею изображений, использую только CSS. И еще мы рассмотрим альтернативу псевдоклассу :target. Посмотрите пример, чтобы увидеть, как работает галерея изображений.

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