Курсы javascript
Сам вопрос:
Изменить-дописать код js так, чтобы открытии.sidenav фон затемнялся, при закрытии возвращался к исходному состоянию?
05.09.2017, 09:35
Регистрация: 19.08.2010
Сообщений: 14,092
position: fixed;
размером на весь экран и полупрозрачным фоном
— Разместить нужный див поверх фонового
— Показывать и скрывать те ДИВы по меренадобности
05.09.2017, 10:48
Регистрация: 27.05.2010
Сообщений: 33,011
body:after < opacity: 0; content: ""; >body.open:after
05.09.2017, 11:34
Регистрация: 27.05.2010
Сообщений: 33,011
dupre,
зачем создавать сообщение в теме Сайт Javascript.ru .
Последний раз редактировалось рони, 05.09.2017 в 11:36 .
05.09.2017, 11:35
Регистрация: 27.05.2010
Сообщений: 33,011
dupre,
пример надо делать полностью.
Последний раз редактировалось рони, 05.09.2017 в 11:38 .
06.09.2017, 02:59
Регистрация: 25.05.2014
Сообщений: 62
рони ,
решение оказалось проще чем я думал. Несколько строк на css и ни одно новой строки к имеющемуся js. Отлично!
По размещению сообщений и, что пример надо полностью понял и на будущее постараюсь учесть.
Спасибки большие за разъяснение затруднительных для меня решений по интересным задачам!
Как сделать затемнение фона css
Передайте смысл с помощью background-color и добавьте украшения с помощью градиентов.
На этой странице
Фоновый цвет
Как и в цветовых классах контекстуального текста, задавайте фон любому контекстуальному классу. Компоненты ссылки будут затемняться по наведению, как и классы текста. В утилитах фона не задается атрибут color , так что в некоторых случаях вам понадобится утилиты .text-* .
.bg-secondary
.bg-transparent
div class="p-3 mb-2 bg-primary text-white">.bg-primarydiv> div class="p-3 mb-2 bg-secondary text-white">.bg-secondarydiv> div class="p-3 mb-2 bg-success text-white">.bg-successdiv> div class="p-3 mb-2 bg-danger text-white">.bg-dangerdiv> div class="p-3 mb-2 bg-warning text-dark">.bg-warningdiv> div class="p-3 mb-2 bg-info text-dark">.bg-infodiv> div class="p-3 mb-2 bg-light text-dark">.bg-lightdiv> div class="p-3 mb-2 bg-dark text-white">.bg-darkdiv> div class="p-3 mb-2 bg-body text-dark">.bg-bodydiv> div class="p-3 mb-2 bg-white text-dark">.bg-whitediv> div class="p-3 mb-2 bg-transparent text-dark">.bg-transparentdiv>Фоновый градиент
При добавлении класса .bg-gradient к фону добавляется линейный градиент в качестве фонового изображения. Этот градиент начинается с полупрозрачного белого цвета, который постепенно исчезает к низу.
Вам нужен градиент в вашем собственном CSS? Просто добавьте background-image: var(—bs-gradient); .
.bg-primary.bg-gradient
.bg-secondary.bg-gradient
.bg-success.bg-gradient
.bg-danger.bg-gradient
.bg-warning.bg-gradient
.bg-info.bg-gradient
.bg-light.bg-gradient
.bg-dark.bg-gradient
Sass
В дополнение к следующей функциональности Sass, рассмотрите возможность чтения о наших включенных настраиваемых свойствах CSS (также известных как переменные CSS) для цветов и многого другого.
Переменные
Большинство утилит background-color генерируются цветами нашей темы, переназначенными из переменных нашей общей цветовой палитры.
$blue: #0d6efd; $indigo: #6610f2; $purple: #6f42c1; $pink: #d63384; $red: #dc3545; $orange: #fd7e14; $yellow: #ffc107; $green: #198754; $teal: #20c997; $cyan: #0dcaf0; $primary: $blue; $secondary: $gray-600; $success: $green; $info: $cyan; $warning: $yellow; $danger: $red; $light: $gray-100; $dark: $gray-900; $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)); Также доступны оттенки серого, но для создания каких-либо утилит используется только подмножество.
$white: #fff; $gray-100: #f8f9fa; $gray-200: #e9ecef; $gray-300: #dee2e6; $gray-400: #ced4da; $gray-500: #adb5bd; $gray-600: #6c757d; $gray-700: #495057; $gray-800: #343a40; $gray-900: #212529; $black: #000; Карта
Затем цвета темы помещаются в карту Sass, чтобы мы могли перебирать их, чтобы сгенерировать наши утилиты, модификаторы компонентов и многое другое.
$theme-colors: ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ); Цвета в градациях серого также доступны в виде карты Sass. Эта карта не используется для создания каких-либо утилит.
$grays: ( "100": $gray-100, "200": $gray-200, "300": $gray-300, "400": $gray-400, "500": $gray-500, "600": $gray-600, "700": $gray-700, "800": $gray-800, "900": $gray-900 ); Миксины
Никакие миксины не используются для создания наших фоновых утилит, но у нас есть некоторые дополнительные миксины для других ситуаций, когда Вы хотите создать свои собственные градиенты.
@mixin gradient-bg($color: null) background-color: $color; @if $enable-gradients background-image: var(--#$variable-prefix>gradient); > > // Horizontal gradient, from left to right // // Creates two color stops, start and end, by specifying a color and position for each color stop. @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); > // Vertical gradient, from top to bottom // // Creates two color stops, start and end, by specifying a color and position for each color stop. @mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); > @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) background-image: linear-gradient($deg, $start-color, $end-color); > @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); > @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); > @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) background-image: radial-gradient(circle, $inner-color, $outer-color); > @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); > Утилиты API
Фоновые утилиты объявлены в нашем API утилит в scss/_utilities.scss . Узнайте, как использовать утилиты API.
"background-color": ( property: background-color, class: bg, values: map-merge( $theme-colors, ( "body": $body-bg, "white": $white, "transparent": transparent ) ) ),
RuslanTsymbal / css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| .bg-bar |
| background-color: #993300; |
| > |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| //burger-menu hide and show |
| $( «.burger-menu» ).click(function() |
| $( «.page-header__nav» ).toggle(); |
| $(«.bar1»).toggleClass(‘bg-bar’); |
| $(«.bar2»).toggleClass(‘bg-bar’); |
| $(«.bar3»).toggleClass(‘bg-bar’); |
| var darkBlock = $(«div»).is(«#overlay») |
| if (darkBlock) |
| $(«#overlay»).remove(); |
| > else |
| var docHeight = $(document).height(); |
| $(«body»).append(» |
| $(«#overlay») |
| .height(docHeight) |
| .css( |
| ‘opacity’ : 0.4, |
| ‘position’: ‘absolute’, |
| ‘top’: 0, |
| ‘left’: 0, |
| ‘background-color’: ‘black’, |
| ‘width’: ‘100%’, |
| ‘z-index’: 1 |
| >); |
| > |
| >); |
| >); |
| //burger-menu animation |
| function myFunction(myClass) |
| myClass.classList.toggle(«change»); |
| > |