<MyRusakov.ru />

Создание Интернет-магазина на OpenCart 2.0

Создание Интернет-магазина на OpenCart 2.0

Видеокурс "Создание Интернет-магазина на OpenCart 2.0" обучит Вас созданию любых Интернет-магазинов на OpenCart 2. В первом разделе курса разбираются абсолютно все возможности данного движка с примерами.

Во втором разделе создаётся полноценный Интернет-магазин, где Вы уже всё увидите своими глазами.

И, наконец, в третьем разделе курса созданный Интернет-магазин будет размещён в Интернете.

К курсу так же идут бесплатные и очень ценные Бонусы сопоставимые с самим курсом: "Как сэкономить на Яндекс.Директ до 50%", "Дропшиппинг" и "Как раскрутить Интернет-магазин".

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

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

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

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

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

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

Тени для текста и блоков.

Тени для текста и блоков.

В сегодняшней статье мы поговорим о том, как сделать тень у текста или блока с помощью CSS3.

Давайте для начала сделаем небольшую html разметку.

<html>
<head>
  <meta charset="utf-8">
  <title>Text-Shadow</title>
</head>
<body>
  <p>Lorem ipsum dolor sit amet.</p>
</body>
</html>

А теперь давайте зададим для неё стили:

body {
  background: #ccc;
}

p {
  font-size: 18px;
  text-shadow: 0 1px 0 #eee;
}

Тень для текста задаётся с помощью свойства text-shadow, где первое значение - это отступ по горизонтали, второй - по вертикали, третий - размытие, а четвёртый параметр - это цвет тени. Если вы запустите данный пример, то увидите довольно-таки интересный эффект однопиксельной белой тени, который сейчас часто применяется.

Можно также задавать сразу несколько теней через запятую:

p {
  text-shadow: 0 1px 0 #eee, 3px 3px 3px #000;
}

Теперь давайте поговорим о том, как задать тень для блока.
Для начала изменим нашу разметку

<html>
<head>
  <meta charset="utf-8">
  <title>Box-Shadow</title>
</head>
<body>
  <div class="block"></div>
</body>
</html>

И зададим какие-нибудь первоначальные стили

.block {
  background: #333;
  width: 200px;
  height: 200px;
  margin: 20px;
}

Теперь зададим нашему блоку тень с помощью box-shadow

.block {
  background: #333;
  width: 200px;
  height: 200px;
  margin: 20px;
  box-shadow: 7px 1px 7px 5px #555, -7px 1px 7px 5px #c1ff05;
}

Абсолютно всё, что я говорил о тенях для текста, справедливо и для теней блоков. В данном примере мы задали первую тень со смещением по оси x на 7px, по оси y на 1px, размытием 7px, и светло-черным цветом. Со второй тенью всё то же самое, только смещение по оси x будет не вправо, а влево, т.к. мы задали отрицательное число. Как вы могли заметить, есть ещё четвёртый параметр, который обозначает радиус распрастранения тени, но он используется нечасто.

Это были внешние тени, но есть ещё и внутренние

.block {
  box-shadow: inset 9px 9px 3px #112233;
}

Как видите, чтобы тень стала внутренней, нужно всего лишь добавить в начале слово inset.

На этом всё для сегодняшней статьи. Удачи!

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

dima9595 dima9595 03.04.2014 09:43:07

Нужно заметить, что место простого #цвета можно и использовать rgba цвета, в которых можно указать и прозрачность данного цвета.

Ответить

php_programmer php_programmer 03.04.2014 14:52:55

О задании цветов будет рассказываться в одной из следующих статей

Ответить

tigermehmat tigermehmat 03.04.2014 20:31:57

Ура)... жаль примеров не приводится...

Ответить

taalaybek96 taalaybek96 05.03.2015 22:12:59

Михаил можно ли с примерами

Ответить

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