Рецепты CSS

Рецепты CSS

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

 

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

 

как создать куб на css3

 

 

 

Проблема

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

Итак давайте разбираться.

Проблема

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

Другой, очень забавный пример можно найти на популярном российском веб-сайте  habrahabr.ru. В соответствии с лучшими практиками оформления страниц для ошибки 404 эта страница содержит навигационное меню, позволяющее перейти к некоторым основным разделам веб-сайта. Каждый элемент меню представлен в виде планеты, вращающейся по окружности, а текст наверху гласит: «Слетайте на другие наши планеты». Разумеется, в данном случае логично перемещать планеты по окружности и не вращать их дополнительно вокруг своей оси, иначе текст станет невозможно прочитать.

 


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

HTML
<div class="path">
<img src="/lea.jpg" class="avatar" />
</div>

Прежде чем задумываться об анимации, необходимо применить несколько базовых стилей (определить размеры, фоны, поля и т. д.), для того чтобы элемент выглядел как на рисунке ниже. Поскольку стилизация очень простая, я не включаю соответствующий код в этот раздел, . Главное, о чем необходимо помнить, — что диаметр пути равен  300px , то есть его радиус составляет  150px.


Если вы сомневаетесь в своем умении создавать круглые фигуры с помощью CSS, то обратитесь к секрету Гибкие эллисы.

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

@keyframes spin {
to { transform: rotate(1turn); }
}
.avatar {
animation: spin 3s infinite linear;
transform-origin: 50% 150px; /* 150px = path radius */
}

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



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

 

Проблема

Анимация не всегда запускается сразу же по завершении загрузки страницы. Гораздо чаще мы хотим использовать анимацию в ответ на действия пользователя, такие как наведение мыши на элемент или удержание кнопки мыши, когда ее указатель находится на элементе (:active ). В подобной ситуации у нас не всегда есть контроль над фактическим числом итераций, так как действия пользователя могут приводить к тому, что анимация прервется до того, как будут воспроизведены все запланированные итерации. Например, пользователь может запустить симпатичную анимацию  :hover и убрать указатель мыши с элемента до того, как анимация завершится. Что, по вашему мнению, должно происходить далее в этом случае?

Если вы ответили что-то вроде «анимация должна застыть в текущем состоянии» или «она должна плавно вернуться в изначальное состояние», то вас ждет неприятный сюрприз. По умолчанию анимация прервется и резко перескочит в изначальное состояние. Иногда, если речь идет о малозаметной анимации, такое поведение может быть допустимым. Но в большинстве случаев это значительно ухудшает впечатление пользователей от работы с интерфейсом. Можно ли это как-нибудь изменить?

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

 

Проблема

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

Проблема

Помните старый тег  <blink> ? Разумеется, помните. Он превратился в культурный символ нашей индустрии, напоминающий нам о неловком, непритязательном начале нашей дисциплины, а также в семейную шутку корифеев веб-дизайна. Он презираем всюду и всеми за нарушение правила о разделении структуры и стиля, но в первую очередь за чрезмерное использование в конце девяностых, из-за чего работа в Сети в то время была сущим кошмаром. Даже его создатель Лу Монтулли признался: «[Я считаю] мерцающий тег худшим, что я когда-либо сделал для Интернета».

Однако теперь, когда раны, нанесенные тегом  <blink> , затянулись, мы иногда ловим себя на мысли о добавлении в дизайн мерцающей анимации. Поначалу это кажется чем-то странным, словно мы обнаруживаем в себе жуткие наклонности, о которых до этого не подозревали. Но кризис самопознания проходит, когда мы осознаем, что в некоторых редких сценариях мерцание может улучшить впечатление пользователя от использования вашего дизайна, а не ухудшить его. Распространенный прием в дизайне пользовательских интерфейсов — добавление мерцания (но не более трех вспышек!) для указания, что определенное изменение было применено к интерфейсу, или же для подсветки цели текущей ссылки (элемента, чей идентификатор совпадает с указанным в адресе после решетки  # ). При таком ограниченном использовании мерцание может быть очень эффективным инструментом привлечения внимания пользователя к определенной области экрана, а благодаря малому количеству итераций мы избегаем побочных эффектов, которые порождал тег  <blink> . Еще один трюк, позволяющий использовать мерцание во благо (для управления вниманием
пользователя) и при этом не наносить ущерб (не отвлекать, не раздражать и не вызывать припадков), заключается в том, чтобы «сглаживать» вспышки (то есть вместо простого переключения между состояниями «включено» и «выключено» мы добавляем плавный переход от одного к другому).

Но как же реализовать все это? Единственная подходящая замена тегу  <blink> в CSS, свойство  text-decoration: blink , слишком ограниченно и не позволяет воплощать все задумки, но даже если бы оно обладало достаточной мощью, все равно поддержка браузерами у него находится на очень низком уровне. Так можем ли мы использовать CSS или наша единственная надежда — JS?

Проблема

Довольно часто возникает необходимость в анимации, которую трудно или даже вовсе невозможно создать с помощью переходов, определенных на CSS - cвойствах элементов. Например, это может быть мультфильм или сложный индикатор прогресса. Покадровая анимация, состоящая из отдельных изображений, — идеальное решение для подобных случаев, но удивительно, насколько сложно реализовать ее гибким и удобным способом.

Возможно, вы сейчас задаетесь вопросом, почему бы просто не прибегнуть к помощи анимированных изображений в формате GIF. Разумеется, анимиро-ванные GIF-изображения прекрасно подходят во многих ситуациях, но у них есть несколько недостатков, которые в определенных сценариях делают их нежелательным решением:
‰ они ограничены палитрой из 256 цветов, одной и той же для всех кадров;
‰ они не поддерживают прозрачность альфа-канала, что может стать большой проблемой, если мы не знаем, что будет находиться под нашим анимированным GIF-изображением. Например, так часто бывает, когда изображение представляет собой индикатор прогресса;
‰ нет никакой возможности управлять из CSS-кода определенными аспектами, такими как продолжительность, количество повторений, приостановкаанимации и т. д. Генерируя изображение в формате GIF, вы пакуете в один файл все данные, и изменить их можно, лишь отредактировав изображение и создав новый файл.

Это прекрасно для обеспечения переносимости, но не когда вы хотите поэкспериментировать. Давным-давно, в 2004 году, разработчики браузера Mozilla предприняли попытку справиться с первыми двумя проблемами, разрешив покадровую анимацию в файлах формата PNG, аналогично тому, как мы можем использовать и статичные, и анимированные GIF-файлы. Формат носил название APNG и предусматривал обратную совместимость с утилитами просмотра изображений, не поддерживающими PNG с анимацией: первый кадр кодировался точно так же, как в традиционных PNG-файлах, поэтому старые утилиты могли как минимум отобразить один этот кадр. Несмотря на многообещающее начало, формат APNG так и не завоевал популярность, и по сей день поддержка этого формата браузерами и графическими редакторами крайне ограниченна. Разработчики даже используют JavaScript для реализации гибкой покадровой анимации в браузере, анимируя с помощью сценариев свойство background-position спрайта. Более того, в Сети можно найти небольшие библиотеки, предназначенные для помощи в этом деле! Но существует ли простой и понятный способ создания подобной анимации средствами приятного и читабельного CSS-кода?

Проблема

Эластичные переходы и анимация (то есть пружинящие переходы) — это популярный способ придания интерфейсу жизнерадостности и реалистичности, ведь когда объекты движутся в реальной жизни, они редко перемещаются из точки А в точку Б, не демонстрируя никакой упругости. С технической точки зрения пружинящий эффект заключается в том, что после того, как переход достигает конечного значения, он немного отматывается назад, затем снова достигает конечного значения, снова отматывается назад, но уже на меньшее значение, и так повторяется один или несколько раз до тех пор, пока переход окончательно не завершится.

Например, предположим, что мы анимируем элемент, стилизованный под падающий мяч, определяя с помощью  transform переход от  none до  translateY(350px). Разумеется, элемент может демонстрировать пружинящее поведение не только при перемещении по плоскости. Этот эффект способен сделать значительно привлекательнее любой тип перехода, включая:

‰ переходы, затрагивающие размер (например, можно увеличивать элемент при срабатывании  :hover , отображать растущее в размере диалоговое окно, начиная с  transform: scale(0) , анимировать столбики на диаграмме);
‰ переходы, включающие изменение угла (например, вращения или секторные диаграммы, секторы на которых посредством анимации вырастаютс нуля). Несколько библиотек JavaScript содержат встроенные возможности по созданию пружинящей анимации. Однако сегодня мы более не нуждаемся в помощи сценариев для добавления в наши проекты анимации и переходов. Как же тогда наилучшим способом реализовать пружинящий эффект средствами CSS?

 

Проблема

Это одна из старейших и самых известных проблем веб-дизайна. Она встречается настолько часто, что большинство из нас обязательно сталкивались с ней в тот или иной момент своей карьеры. В двух словах смысл ее таков: нижний колонтитул с любой блочной стилизацией, такой как фон или тень, прекрасно работает, когда содержимое достаточно длинное, но ломается на коротких страницах (таких, как сообщения об ошибке). Поломка выглядит так, что нижний колонтитул «прилипает» не к нижней кромке окна просмотра, как нам хотелось бы, а к нижней кромке содержимого.
Объясняется такая популярность этой проблемы не только ее вездесущностью, но также тем, насколько обманчиво простой она кажется с первого взгляда. Это классический случай задачи, на решение которой приходится затратить намного больше времени, чем поначалу ожидалось. Помимо этого, средствами CSS 2.1 она все еще не решается: практически все классические решения требуют указывать фиксированную высоту нижнего колонтитула, что надуманно, а зачастую попросту невозможно. Кроме того, все эти решения чрезмерно сложные, грязные и предъявляют специфические требования к разметке.

Но тогда ничего лучше в нашем распоряжении не было, учитывая ограничения CSS 2.1. Однако с современным CSS мы можем намного больше! Так как же
решить задачу?

Проблема

44 года назад мы высадили человека на Луне, но до сих пор не можем центрировать объекты по вертикали в CSS.

Центрировать элементы по горизонтали в CSS невероятно просто: если это строковый элемент, то мы применяем  text-align: center к его предку, а если это блочный элемент, то мы применяем  margin: auto к нему самому. Но одной мысли о том, чтобы центрировать элемент по вертикали, достаточно, чтобы по спине пробежали холодные мурашки. С годами центрирование по вертикали превратилось в «святой грааль» CSS и «семейную шутку» разработчиков внешних интерфейсов. И это понятно, ведь здесь налицо все необходимые причины:

  • это то, что требуется разработчикам очень часто;
  • это звучит чрезвычайно просто в теории;

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

  • метод с табличным макетом (использующий режимы отображения таблиц) не включен, так как требует нескольких лишних элементов HTML;
  • метод со строковым блоком не включен, так как, на мой вкус, он слишкомгрязный.

Если не указано иное, мы будем использовать следующую разметку прямо внутри элемента  <body> , хотя решения, которые мы собираемся изучить, должны работать вне зависимости от выбранного вами контейнера:
HTML
<main>
<h1>Am I centered yet?</h1>
<p>Center me, please!</p>
</main>
Мы также применим несколько простейших правил CSS для оформления фона, забивки и т. п., чтобы наша отправная точка выглядела как на рисунке.

Страница 1 из 5

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+