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

  • Рисуем разные формы: круги, квадраты, прямоугольники, треугольники.
  • Тени, для создания объема и 3D-эффекта
  • Цветовой градиент для создания большей глубины и 3D-эффекта
  • Размещение разнообразных единиц. Вы используете старые способы, такие как блок отображения, абсолютные / относительные позиции, и комбинируете их с новыми, такими как flexbox.
  • Наложение единиц с z-индексом
  • Создание эффекта нажатия кнопки благодаря активному / активному фокусу
  • отзывчивый дизайн с медиа-запросом: покедекс закрывается на мобильном телефоне или в уменьшенном окне!

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

Испытания

  • Рисование кривых: в CSS непросто. Я использовал z-index, чтобы разместить несколько прямоугольников на разных планах. Затем радиус границы, чтобы округлить их углы и создать разные кривые на Pokedex:

  • Треугольники: их довольно сложно создать на CSS. Я нашел несколько уловок вроде создания полупрозрачных / полуцветных квадратов:

Мои маленькие секреты:

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

  • Эффект объема придается кнопкам благодаря линейному градиенту . Он также используется на зеленом экране и на стыке в середине pokedex.
  • К формам объектов добавляются тени для создания более трехмерного эффекта (тень блока)

  • Также добавлена ​​тень внутри зеленого экрана, чтобы сделать его более реалистичным! (вставка тени блока).

  • Функция «: active» позволяет анимировать кнопки при нажатии на них. он меняет линейный градиент, добавляет больше теней и делает цвет темнее. Таким образом, кажется, что кнопка нажата.
  • Кроме того, Pokedex реагирует: если вы уменьшите размер окна или откроете его на маленьком устройстве, оно закроется!

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

В конце концов, создание Pokedex на CSS - это полноценная, поучительная и забавная тренировка. Он позволяет использовать все функции, используемые сегодня в CSS. Следующая задача: рисовать покемонов в CSS! ;)

PS: нажмите красную кнопку! Будет сюрприз, если найдешь Пикачу…;)

Вы можете найти весь проект на Github: https://github.com/bloodstorms/bloodstorms.github.io

Хотите испытать получше? Попробуйте создать покемона на полном CSS!

Я ищу более крутой способ выучить новые языки. Посмотрите на этого парня, он создал все мировые флаги на CSS! Http://flag-icon-css.lip.is/

А ты ? Какие твои любимые?

Тиффани