<MyRusakov.ru />

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

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

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

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

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

Подробнее

Как сделать тень на 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-код ссылки для форумов (например, можете поставить её в подписи):

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

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 или уже есть, но я просто не заметил? с ув., Тарас

Ответить

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