Как сделать элементы в столбик css

Делаем крутой эффект тряски элементов на сайте (CSS Shake)

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

Способ №1: Подключение эффекта тряски

Подключение эффектов тряски осуществляется с помощью Download Center. Это отдельная страница сайта разработчика, на которой размещены .css-файлы с каждым эффектом тряски. Вам нужно выбрать понравившийся эффект, затем скачать файл с выбранным эффектом (либо скопировать код в созданный вами .css-файл с названием эффекта) и залить файл в корневую папку шаблона вашего сайта.

Также нужно будет указать путь к данному файлу перед закрывающим тегом </head> :

Примечание: Вместо <?php bloginfo(‘template_url’); ?> вам нужно указать свой путь к файлу.

Затем вы можете выбрать любой div , li , a или другой объект, к которому хотите применить эффект, и добавить к нему клас с названием эффекта, например:

Способ №2: Подключение эффекта тряски

Можно не подключать отдельный .css-файл, а добавить код напрямую в файл style.css. Например, добавим эффект shake-hard к ссылкам следующего списка:

Для этого в style.css нужно добавить тот же код из файла csshake-hard.css (который находится в Download Center):

И добавить class="shake-hard" к ссылкам:

Готово! Если эффект не будет отображаться в вашем браузере, то попробуйте добавить к правилу @keyframes следующие приставки:

-webkit- для Google Chrome, Safari;

-moz- для Mozilla;

Делаем эффект тряски самостоятельно

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

Как вы уже могли заметить, в коде каждого эффекта меняются только px (пиксели) и deg (градусы) для % (процентов). Также с каждой новой строкой добавляется 2% (см. выше). Мы можем легко сократить этот код. Например, минимизируем код эффекта shake:

Здесь мы увеличивали каждую строку не на 2%, а на 10%, и немного изменили px и deg. Вставьте этот код в style.css и добавьте к любому элементу на сайте class="shake" . Появится эффект тряски при наведении курсора на элемент.

Теперь разберемся, что за что отвечает:

transform: translate(2px 1px); — сдвигаем элемент на 2 пикселя по горизонтали и на 1 пиксель по вертикали;

rotate(1deg); — поворачиваем элемент на 1 градус;

animation-name: shake; &#8212; название эффекта, который мы добавляем;

animation-duration: 0.8s; &#8212; указываем скорость тряски в секундах или миллисекундах;

transform-origin: 50% 50%; &#8212; изменяем положение элементов при тряске;

animation-iteration-count: infinite; &#8212; делаем эффект тряски бесконечным (только при наведении курсора);

animation-timing-function: linear; &#8212; изменяем скорость перехода анимации.

Как вывести элементы в столбик грамотно?

На сайте есть такой вот список категорий. Категории расположены по алфавиту по горизонтали.
Схема такая
а а а а б б б в в в г г г
д д д е е е ж ж ж з з з
3b8c779d03214b7e90ce65ddbcccf1e0.png
Необходимо эти категории вывести по алфавиту по вертикали. Схема такая
а в д з
а г е з
а д е и
б д ж и
Как вы реализовываете такой вывод. Можно ли использовать флексбоксы для такой сортировки, либо нужно сортировать на стороне сервера и выводить уже подготовленный массив категорий?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *