<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

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

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

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

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

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

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

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

Примеры теней на css.

Примеры теней на css.

Мы уже разбирали с вами свойство box-shadow, но немногие могут с помощью него сделать классные тени. Сегодня я хочу показать вам простые примеры использования этого свойства для создания знаменитых эффектов.

Базовая тень

Создадим html и css файлы. В html пропишем следующее:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Basic Shadow</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="shadow"></div>
</body>
</html>

А теперь перейдем к css

body {
  background: #ccc;
  margin: 0;
}

div {   background-color: #fff;
  width: 400px;
  height: 200px;
  padding: 15px;
  margin: 15px;
  float: left;
}

.shadow {
  box-shadow: 5px 5px rgba(150,150,150,.5);
}

Пояснять тут, честно говоря, нечего. Единственное, в тени мы сдвигаем ее вправо и вниз на 5px и задаем цвет, используя rgba, с прозрачностью 0.5. В итоге получаем простую, но симпатичную тень

Простая тень

Размытая распространенная тень

Html у нас такой:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Blurred Spread Shadow</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="shadow">Some text...</div>
</body>
</html>

А css вот такой:

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}

.shadow {
  margin: 30px;
  background: #fff;
  width: 494px;
  height: 294px;
  border-radius: 3px;
  box-shadow: 0 20px 3px -10px rgba(0,0,0,.3);
  font: 15px "Sans-Serif", "Times New Roman";
  padding: 3px;
}

Здесь тень смещена по оси x на 0px, по оси y на 20px, размытие задано небольшое - 3px. Самое главное - распространение тени. Мы его задаем отрицательным в 10px. В итоге, вот такая красивая тень, которую, например, можно использовать под слайдерами

Размытая распространенная тень

Падающая тень

Html вот такой:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Drop Shadow</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
   <img src="ball.png" width="250" height="250" alt="Мяч">
  </div>
</body>
</html>

В html файле ничего необычного, кроме того, что я использую картинку футбольного мячика в блоке .container. Перейдем к css

body {
  background-color: #ccc;
  margin: 0;
}

.container {
  padding: 20px 50px;
  background-color: black;
}

.container img {
  -webkit-filter: drop-shadow(20px 20px 50px white);
}

Падающая тень

Здесь мы уже не используем свойство box-shadow, а используем свойство filter. Оно пока что плохо поддерживается, но уже работает в webkit браузерах последних версий. В нашем случае мы используем функцию drop-shadow, в которую передаем уже знакомые нам из свойства box-shadow параметры: x, y, размытие и цвет.

Итак, на этом все. Надеюсь, что вы сможете найти применение этим эффектам теней и придумаете свои, более интересные. Удачи!

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

ivbutusov ivbutusov 02.06.2014 11:41:08

Простите, а для текста можно парочку? И для внутренних теней?

Ответить

php_programmer php_programmer 02.06.2014 19:16:11

Так для текста примерно то же самое. Поэксперементируйте самостоятельно. Но, возможно, если будут какие-то интересные эффекты, то будет и статья.

Ответить

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