<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

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

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

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; и все вроде получилось! С остальными элементами также делать или есть какие-либо исключения?

Ответить

samvel29 samvel29 08.04.2019 11:04:29

И что должно получится? Табличка и поверх нее полупрозрачный фон. Что с этим делать? Опять статья написана для сео

Ответить

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