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

• 

  Создание уникальных выпадающих списков с использованием CSS3

  Спецификация CSS3 определяет свойство pointer-events (события при взаимодействии с указателем) как: «Свойство pointer-events позволяет контролировать, можно ли и при каких условиях взаимодействовать с элементом при помощи указателя, например, мыши. Это свойство используется для задания обстоятельств, при которых событие, создаваемое указателем мыши, будет распространяться сквозь элемент на лежащий под ним элемент. Это также применимо при определении, попадает ли указатель пользователя [...]

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

  Создание счетчиков CSS и игры Реверси с использованием CSS3

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

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

  Создание плавных анимаций с использованием состояния воспроизведения анимации

  Несложно сделать анимацию CSS, которая запускается при загрузки страницы. Нужно просто использовать свойство анимации с параметрами. А как быть, если анимация применяется при определенном состоянии, например, при наведении указателя мыши, при нажатии, при активации элемента или изменении класса с помощью JS?

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

  Создание стилей таблицы с использованием возможностей CSS3

  Нам нравится использовать тени, закругленные углы, градиенты и другие свойства CSS3. Поэтому иногда мы создаем дизайн в таблице стилей больше, чем в программе Photoshop. Очень важно при создании дизайна учитывать возможности свойств CSS, чтобы готовый сайт быстро загружался и благодаря этому занимал более высокие позиции в поисковой выдаче.

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

  Создание анимаций CSS с использованием единственного ключевого кадра

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

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

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

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

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

  Скошенные углы и отрицательные радиусы границ с использованием градиентов CSS3

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

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

  Легко настраиваемый круглый индикатор загрузки с использованием CSS

  Мы обратили внимание на небольшой интересный индикатор загрузки и задумались, насколько сложно создать его с помощью CSS и анимаций CSS. Мы решили попробовать создать этот эффект с помощью увеличения размера границы до середины элемента, при этом не изменяя полную ширину элемента, используя свойства box-sizing: border-box, при применении которого значения ширины и высоты элемента будут включать в [...]

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

  Создание кругового движения элемента

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

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