<MyRusakov.ru />

Создание Интернет-магазина на PHP и MySQL

Создание Интернет-магазина на PHP и MySQL

Видеокурс "Создание Интернет-магазина на PHP и MySQL" - это уникальный курс по созданию Интернет-магазина с нуля. Особенностью данного курса является то, что создание идёт с самого начала, то есть от идеи. Далее создаётся дизайн всех необходимых страниц, после делается их вёрстка. Затем создаётся движок на PHP и MySQL, после делается Admin-панель и, наконец, готовый сайт размещается в Интернете.

Адрес созданного в этом курсе сайта: http://storedvd.ru

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Плавные переходы в CSS3.

Плавные переходы в CSS3.

Всем здравия! В этой статье мы разберём, как делать плавные переходы на CSS3, используя свойство transition.

Давайте подумаем, как сделать, чтобы, например, при наведении на какой-нибудь блок, он менял цвет текста, фона и тени плавно? Думаю, что многие сейчас ответят, что без скриптов тут не обойтись, но это не так! На помощь нам приходит свойство transition. Давайте поговорим, какие есть параметры у этого свойства.

transition-property: background;
transition-duration: 2s;
transition-delay: 1s;
transition-timing-function: ease;

В transition-property мы должны указать, что именно мы хотим анимировать. Например, background. Если вы хотите анимировать сразу все свойства css, то задайте значение all.

transition-duration задаёт время, которое будет длиться анимация. В нашем случае 2 секунды.

transition-delay задаёт задержку перед анимацией. Т.е. анимация произойдёт не сразу, а лишь спустя 1 секунду в нашем случае.

Теперь поговорим о transition-timing-function. Он может иметь несколько значений:

  • linear - эффект, при котором анимация будет длиться с одинаковой скоростью
  • ease - эффект, при котором анимация начнётся медленно, затем ускорится, а в конце снова замедлится
  • ease-in - эффект с замедленным началом
  • ease-out - эффект с замедленным концом
  • ease-in-out - эффект с замедленным началом и концом
  • cubic-bezier(n,n,n,n) - тут можно указать какие-нибудь свои значения от 0 до 1

Чтобы не рассписывать всё так длинно, есть сокращённая форма

transition: background 2s ease 1s;

Думаю, тут всё понятно. Сначала указываем, что мы анимируем, потом сколько времени будет длиться анимация, какой эффект применять и задержка перед анимацией(её может и не быть).

Мы рассмотрели свойство transition и теперь давайте закрепим наши знания на практике. Для этого анимируем div.

HTML разметка <html>
<head>
  <title>transition</title>
  <meta charset="utf-8">
</head>
<body>
  <div class="block">Кнопка клац!</div>
</body>
</html>

Теперь зададим ему стили, а затем я поясню

.block {
  width: 110px;
  padding: 15px 3px;
  background: #ccc;
  color: #fff;
  text-align: center;
  border-radius: 7px;
  font: 17px "Tahoma";
}

Вот, что у нас получилось:

блок

Теперь зададим стили при наведении

.block:hover {
  background: #fafafa;
  color: #ccc;
  box-shadow: 1px 3px 5px #ccc;
}

блок при наведении

Сейчас стили меняются, но не плавно, а резко. Чтобы это исправить, добавим только что изученное свойство transition.

.block: hover {
  /* ... стили */
  transition: all .5s ease-in-out;
}

Теперь при наведении стили будут меняться плавно, но когда вы отведёте мышку, то стили вернутся на первоначальные значения резко. Чтобы это исправить, добавим transition также к нашему блоку.

.block {   /* ... стили */   transition: all .5s ease-in-out; }

На этом всё для этой статьи. Обязательно попробуйте придумать себе какой-нибудь пример и сделать его, чтобы закрепить знания, которые вы получили сейчас. Удачи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (4):

Gluhar Gluhar 09.04.2014 21:18:16

В Ie 10 не работает.

Ответить

pavell pavell 09.04.2014 21:42:54

Я так понимаю HTML5 CSS3 и JS заменит флеш.

Ответить

1111g 1111g 15.10.2014 20:07:55

Не работает даже на етой странице

Ответить

pavell pavell 12.12.2014 20:45:10

Добрый вечер. Хочу сделать так чтобы при загрузке сайта стили к блоку применялись плавно. Прописываю эти свойства к блоку но не работает (все стили применяются сразу а не плавно). А вот если поставить :hover и в этом селекторе прописать этот код, то стили при наведении применяться будут плавно. Как сделать так чтоб без наведения а просто при загрузке страницы стили плавно переменялись (так как если просто прописать у блока нужный код то работать плавность не будет).

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.