<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

Как сделать затемнение фона через CSS

Как сделать затемнение фона через CSS

Очень часто я стал видеть на сайтах затемнение фона. Особенно часто это делается в галереях, где по клику на изображение, оно увеличивается, а вся остальная часть затемняется. Безусловно, практически везде стоит специальный плагин JQuery, но в этой статье я расскажу, как сделать затемнение фона через CSS, не прибегая к JQuery.

Давайте напишу HTML-код:

<table border="1">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>
<div id="TB_overlay"></div>

Здесь я добавил одну таблицу, в качестве тестового контента, который будет затемнён. А также блок TB_overlay, который и является ключевым, то есть он будет затемнять. Привожу CSS-код:

#TB_overlay {
  background-color: #000; /* Чёрный фон */
  height: 100%; /* Высота максимальна */
  left: 0; /* Нулевой отступ слева */
  opacity: 0.50; /* Степень прозрачности */
  position: fixed; /* Фиксированное положение */
  top: 0; /* Нулевой отступ сверху */
  width: 100%; /* Ширина максимальна */
  z-index: 100; /* Заведомо быть НАД другими элементами */
}

Здесь я постарался прокомментировать, но обратите внимание на свойство opacity. Чем выше значение, тем более сильное затемнение. Максимальное значение 1. Фактически, данный способ затемнения фона через CSS очень прост: идёт наложение на весь контент чёрного блока с определённой прозрачностью.

На мой взгляд, данный способ затемнения очень простой и понятный, поэтому он и применяется чаще всего.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

gala_78 gala_78 13.05.2013 21:02:41

Добрый вечер, Михаил. Я скопировала код, но появилась только таблица, без всякого затемнения. Почему?

Ответить

Admin Admin 13.05.2013 21:57:15

Попробуйте в других браузерах, если не получится, значит, как-то не так подключили стили.

Ответить

zomer zomer 23.05.2013 15:53:40

Михаил, добрый день. Я новичок, и учусь писать ХТМЛ странички. Есть такой вот код, наверное он даже вашего производства: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=cp-1251"> <title>Всплывающая Подсказка</title> <style type="text/css"> <!-- .dlink { color: #0000FF; /* цвет ссылки */ font-weight: bold; /* указывает, что текст ссылки жирный */ font-family: Verdana, Arial, Helvetica, sans-serif; /* семейство шрифта ссылки */ font-size: 16px; /* размер шрифта ссылки */ } #wind { position: absolute; width: 450px; /* ширина всплывающего окна */ left: 32%; /* отступ от левого края экрана */ top: 100px; /* отступ с верху экрана */ border:solid #A0A050 3px; /* цвет и толщина рамки окна*/ display: none; z-index: 100; overflow: hidden; background-color:#ffffff; /* цвет фона внутри окна, стоит белый */ color:#000000; /* цвет текста внутри окна, стоит чёрный */ text-align:center; /* выравнивает весь текст в окне по центру */ padding:5px; } --> </style> </head> <body> <div><a href="#" title="Всплывающее окно" class="dlink" onClick="document.getElementById ('wind').style.display='block'; return false;">Пояснения</a></div> <div id="wind"> <div align="center"> <table cellspacing="0" align="right"> <tr><td style="padding: 0 3 0 3; background-color: #A0A050; /* цвет кнопки закрыть #A0A050 можете вставить свой */ font-family: Verdana; font-size: 10pt; color: #ffffff; font-weight: bold;" onClick="document.getElementById('wind').style.display='none'; return false;" onMouseOver="this.style.cursor='pointer'" onMouseOut="this.style.cursor='default'">X</td> </tr> </table> Здесь на месте этого текста ставьте свой текст или html код. </div> </div> </body> </html> Подскажите пожалуйста, как интегрировать сюда затемнение, чтобы при открытии модального окна все затемнялось кроме самого окна. Перепробовал кучу вариантов с вашим кодом, но получается только затемнение, само окно остается под затемнением

Ответить

Admin Admin 23.05.2013 22:14:24

Это убогий код, и он явно не моего производства. Как интегрировать в эту помойку модальное окно - не знаю. Лучше всё написать заново. Если Вы не знаете, как такое написать, то изучайте HTML. Копировать откуда-то чужой да ещё и кривой код - бесполезная затея.

Ответить

erkulov.nurbek erkulov.nurbek 11.02.2014 16:28:17

opacity не поддерживается в старых браузерах..так?

Ответить

tikkiwiki tikkiwiki 12.02.2014 12:20:04

Верно.

Ответить

Bagi Bagi 16.03.2016 00:52:18

Правильно я понял, чтобы один из элементов не затемнялся среди всех остальных, то надо его вставить между <div id="TB_overlay"> </div> ? Например я поставил картинку, и сделал opacity: 0.77; и все вроде получилось! С остальными элементами также делать или есть какие-либо исключения?

Ответить

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