<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

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

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

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

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

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

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

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

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

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

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

Какая тема Вас интересует больше?

Как сделать тень на CSS

Как сделать тень на CSS

Дизайнеры очень любят добавлять всякие тени на свои блоки. В Photoshop это делается в течение двух секунд, а вот для верстальщика - это целая история. Если Вы будете искать в Интернете, как сделать тень на CSS, то обнаружите, что почти везде используется CSS3, который, как я уже писал, ещё рано использовать. Есть смесь CSS3 и JQuery (вообще ужас), чтобы тень была кроссбраузерной. В общем, одно решение хуже другого, а я же в этой статье покажу кроссбраузерный вариант без всяких JQuery и CSS3.

Первым делом Вам надо вырезать следующие картинки:

  • Верхнюю границу с левым углом, но без правого. Желательно, чтобы её длина была заведомо больше, чем потребуется для блока.
  • Верхний правый угол.
  • Полоски слева и справа от блока высотой по 1 пикселю.
  • Нижняя граница с левым углом и так же без правого. Снова надо, чтобы полоса эта была максимально длинной.
  • Правый нижний угол.

Вот эти 6 картинок у Вас должны быть, а далее надо написать следующий HTML-код:

<div class="shadow-block">
  <div class="sh-top"></div>
  <div class="sh-rt"></div>
  <div class="sh-sl">
    <div class="sh-sr">
      <div class="sh-content">
        <p>Тут содержимое блока</p>
      </div>
    </div>
  </div>
  <div class="sh-bottom"></div>
  <div class="sh-rb"></div>
</div>

Теперь CSS-код:

/* Прячем область за блоками */
.shadow-block,
.shadow-block .sh-sl,
.shadow-block .sh-content {
  overflow: hidden;
}

/* Высота верхней и нижней рамки тени, а также углов */
.shadow-block .sh-top,
.shadow-block .sh-rt,
.shadow-block .sh-rb,
.shadow-block .sh-bottom {
  height:20px;
}
/* Ширина углов, их выравнивание и подъём наверх */
.shadow-block .sh-rt,
.shadow-block .sh-rb {
  float:right;
  margin-top: -20px;
  width:20px;
}

/* Отступ справа (для уголков) */
.shadow-block .sh-bottom,
.shadow-block .sh-top {
  margin-right: 20px;
}

/* Длинная полоска с верхней тенью (левый угол уже на картинке) */
.shadow-block .sh-top {
  background: url("images/st.png") no-repeat;
}

/* Верхний правый угол (левый угол уже имеется на полоске) */
.shadow-block .sh-rt {
  background: url("images/rt.png") no-repeat;
}

/* Горизонтальная полоса тени (высота 1 пиксель) слева от блока */
.shadow-block .sh-sl {
  background: url("images/sl.png") left repeat-y;
}

/* Горизонтальная полоса тени (высота 1 пиксель) справа от блока */
.shadow-block .sh-sr {
  background: url("images/sr.png") right repeat-y;
}

/* Цвет блока и отступ от границ с тенями */
.shadow-block .sh-content {
  background: #FFF;
  margin: 0 20px;
}
/* Длинная полоска с нижней тенью (левый угол уже на картинке) */
.shadow-block .sh-bottom {
  background: url("images/sb.png") no-repeat;
}

/* Нижний правый угол (левый угол уже имеется на полоске) */
.shadow-block .sh-rb {
  background: url("images/rb.png") no-repeat;
}

Безусловно, это сложный способ, но я его использую в своей практике, как и другие профессионалы. А новички и всякие халтурщики используют box-shadow, плюс различные скрипты и htc, чтобы было кроссбраузерно. Когда наплевать на качество, а волнуют лишь время и деньги, то это наилучший вариант. Но если Вы хотите качество, то используйте мой способ.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

Silver78 Silver78 01.04.2013 14:56:50

Михаил, а можно для особо одаренных (как я) :) выложить конкретно и НАГЛЯДНО какие должны быть картинки-запчасти для блока, рассмотренного в твоей статье??? Например, прямо после слов "Вот эти 6 картинок у Вас должны быть ..." выложить эти "картинки".

Ответить

Admin Admin 01.04.2013 17:08:54

http://files.myrusakov.ru/free/files/images-shadow.rar

Ответить

Silver78 Silver78 02.04.2013 04:55:56

Спасибо!

Ответить

GendolfWhite GendolfWhite 01.04.2013 19:40:55

Спасибо за урок.

Ответить

lev_100rus lev_100rus 02.04.2013 00:07:49

У Вас ведь уже была точно такая же статья на сайте. Зачем ещё одну делать? В предыдущей даже лучше описано что и как делать

Ответить

Admin Admin 02.04.2013 10:19:55

Дайте ссылку на эту статью.

Ответить

ac-40-6.0 ac-40-6.0 05.04.2013 15:24:18

Статья была о том как сделать закруглённые углы в блоке.

Ответить

Admin Admin 05.04.2013 21:16:04

В этой статье говорится про тень, а не про закруглённые блоки.

Ответить

ac-40-6.0 ac-40-6.0 05.04.2013 21:22:12

Я знаю. Тут аборигены интересуются.

Ответить

sergkosm sergkosm 12.04.2013 23:39:03

Мне знакомо еще свойство "text-shadow", это из той же области, что и box-shadow? И можно ли вместо text-shadow использовать свойство z-index?

Ответить

Admin Admin 13.04.2013 10:41:48

Да, это из той же области, что и box-shadow. z-index и text-shadow никак не связаны.

Ответить

remox remox 04.08.2013 12:02:25

Михаил, напишите пожалуйста несколько статей об использовании фреймворков для верстки, например о http://bootstrap-ru.com/scaffolding.php или уже есть, но я просто не заметил? с ув., Тарас

Ответить

Maks4ever Maks4ever 31.12.2014 16:41:08

один большой недостаток это отсутствие картинок, не знаю может стоит выкладывать исходники в конце статьи

Ответить

samvel29 samvel29 05.02.2019 13:52:20

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

Ответить

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