<MyRusakov.ru />

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

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

Видеокурс "Вёрстка сайта с нуля" - это уникальная информация по созданию страниц любой сложности.

Пройдя данный курс, Вы сможете не только верстать страницы с любым по сложности дизайном, но и выводить на чистую воду недобросовестных верстальщиков, которых в Рунете около 95% (!!!). Поэтому данную информацию надо знать всем: кто создаёт сам и кто заказывает их на стороне.

Также вёрстка страниц - это очень прибыльное дело. Заработок верстальщиков составляет от 100 рублей в час у новичков до 1500 рублей в час уже у профи, которым Вы станете после просмотра курса и практики.

Также в Видеокурсе "Вёрстка сайта с нуля" рассказывается о том, как искать заказчиков, где их искать, как им писать в первый раз. Всё это я подробно рассказываю в курсе, а также даю уже готовый вариант первого обращения к заказчику. С таким обращением вероятность того, что заказчик к Вам обратится, близка к 100%. А учитывая, что Вы будете профессионалом, то этот заказчик превратится в постоянного!

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

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

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

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

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 17:41:08

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

Ответить

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