diff options
Diffstat (limited to 'files/ru/web/css')
11 files changed, 51 insertions, 68 deletions
diff --git a/files/ru/web/css/background-blend-mode/index.html b/files/ru/web/css/background-blend-mode/index.html index bfcdd98ff3..e55a99aa83 100644 --- a/files/ru/web/css/background-blend-mode/index.html +++ b/files/ru/web/css/background-blend-mode/index.html @@ -34,7 +34,6 @@ background-blend-mode: unset; <h2 id="Examples" name="Examples">Пример</h2> -<pre class="brush: html" style="display: none;"><div id="div"></div> <select id="select"> <option>normal</option> <option>multiply</option> @@ -54,14 +53,14 @@ background-blend-mode: unset; <option>luminosity</option> </select></pre> -<pre class="brush: css" style="display: none;">#div { +<pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: screen; }</pre> -<pre class="brush: js" style="display: none;">document.getElementById("select").onchange = function(event) { +<pre class="brush: js" class="hidden">document.getElementById("select").onchange = function(event) { document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML; } console.log(document.getElementById('div'));</pre> diff --git a/files/ru/web/css/blend-mode/index.html b/files/ru/web/css/blend-mode/index.html index 382af5dae0..40125081d4 100644 --- a/files/ru/web/css/blend-mode/index.html +++ b/files/ru/web/css/blend-mode/index.html @@ -24,9 +24,8 @@ translation_of: Web/CSS/blend-mode The effect is similar to two opaque pieces of paper overlapping.</p> <div id="normal"> - <pre class="brush: html" style="display: none;"><div id="div"></div></pre> - <pre class="brush: css" style="display: none;">#div { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -44,9 +43,8 @@ translation_of: Web/CSS/blend-mode The effect is similar to two images printed on transparent film overlapping.</p> <div id="multiply"> - <pre class="brush: html" style="display: none;"><div id="div"></div></pre> - <pre class="brush: css" style="display: none;">#div { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -64,9 +62,8 @@ translation_of: Web/CSS/blend-mode The effect is similar to two images shone onto a projection screen.</p> <div id="screen"> - <pre class="brush: html" style="display: none;"><div id="div"></div></pre> - <pre class="brush: css" style="display: none;">#div { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -81,9 +78,8 @@ translation_of: Web/CSS/blend-mode <dd>The final color is the result of <code>multiply</code> if the bottom color is darker, or <code>screen</code> if the bottom color is lighter.<br> This blend mode is equivalent to <code>hard-light</code> but with the layers swapped. <div id="overlay"> - <pre class="brush: html" style="display: none;"><div id="div"></div></pre> - <pre class="brush: css" style="display: none;">#div { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -99,9 +95,8 @@ translation_of: Web/CSS/blend-mode <p>The final color is a color composed of the darkest values per color channel.</p> <div id="darken"> - <pre class="brush: html" style="display: none;"><div id="div"></div></pre> - <pre class="brush: css" style="display: none;">#div { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -117,9 +112,8 @@ translation_of: Web/CSS/blend-mode <p>The final color is a color composed of the lightest values per color channel.</p> <div id="lighten"> - <pre class="brush: html" style="display: none;"><div id="div"></div></pre> - <pre class="brush: css" style="display: none;">#div { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -137,9 +131,8 @@ translation_of: Web/CSS/blend-mode This blend mode is similar to screen, but the foreground need only be as light as the inverse of the backdrop to reach a fully lit color.</p> <div id="color-dodge"> - <pre class="brush: html" style="display: none;"><div id="div"></div></pre> - <pre class="brush: css" style="display: none;">#div { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -157,9 +150,8 @@ translation_of: Web/CSS/blend-mode This blend mode is similar to multiply, but the foreground need only be as dark as the inverse of the backdrop to make the final image black.</p> <div id="color-burn"> - <pre class="brush: html" style="display: none;"><div id="div"></div></pre> - <pre class="brush: css" style="display: none;">#div { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -177,9 +169,8 @@ translation_of: Web/CSS/blend-mode The effect is similar to shining a <em>harsh</em> spotlight on the backdrop.</p> <div id="hard-light"> - <pre class="brush: html" style="display: none;"><div id="div"></div></pre> - <pre class="brush: css" style="display: none;">#div { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -197,9 +188,8 @@ translation_of: Web/CSS/blend-mode The effect is similar to shining a <em>diffused</em> spotlight on the backdrop<em><code>.</code></em></p> <div id="soft-light"> - <pre class="brush: html" style="display: none;"><div id="div"></div></pre> - <pre class="brush: css" style="display: none;">#div { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -216,9 +206,8 @@ translation_of: Web/CSS/blend-mode A black layer has no effect, while a white layer inverts the other layer's color.</p> <div id="difference"> - <pre class="brush: html" style="display: none;"><div id="div"></div></pre> - <pre class="brush: css" style="display: none;">#div { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -235,9 +224,8 @@ translation_of: Web/CSS/blend-mode As with <code>difference</code>, a black layer has no effect, while a white layer inverts the other layer's color.</p> <div id="exclusion"> - <pre class="brush: html" style="display: none;"><div id="div"></div></pre> - <pre class="brush: css" style="display: none;">#div { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -253,9 +241,8 @@ translation_of: Web/CSS/blend-mode <p>The final color has the <em>hue</em> of the top color, while using the <em>saturation</em> and <em>luminosity</em> of the bottom color.</p> <div id="hue"> - <pre class="brush: html" style="display: none;"><div id="div"></div></pre> - <pre class="brush: css" style="display: none;">#div { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -272,9 +259,8 @@ translation_of: Web/CSS/blend-mode A pure gray backdrop, having no saturation, will have no effect.</p> <div id="saturation"> - <pre class="brush: html" style="display: none;"><div id="div"></div></pre> - <pre class="brush: css" style="display: none;">#div { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -291,9 +277,8 @@ translation_of: Web/CSS/blend-mode The effect preserves gray levels and can be used to colorize the foreground.</p> <div id="color"> - <pre class="brush: html" style="display: none;"><div id="div"></div></pre> - <pre class="brush: css" style="display: none;">#div { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), @@ -310,9 +295,8 @@ translation_of: Web/CSS/blend-mode This blend mode is equivalent to color, but with the layers swapped.</p> <div id="luminosity"> - <pre class="brush: html" style="display: none;"><div id="div"></div></pre> - <pre class="brush: css" style="display: none;">#div { + <pre class="brush: css" class="hidden">#div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), diff --git a/files/ru/web/css/css_background_and_borders/border-image_generator/index.html b/files/ru/web/css/css_background_and_borders/border-image_generator/index.html index 750bbe96f3..8e798f9292 100644 --- a/files/ru/web/css/css_background_and_borders/border-image_generator/index.html +++ b/files/ru/web/css/css_background_and_borders/border-image_generator/index.html @@ -8,7 +8,7 @@ translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator --- <p>Этот инструмент можно использовать, чтобы генерировать CSS3 значения {{cssxref("border-image")}}.</p> -<div style="display: none;"> +<div class="hidden"> <h2 id="Border_Image_Generator" name="Border_Image_Generator">Border Image Generator</h2> <h3 id="HTML_Content">HTML Content</h3> diff --git a/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html index 0dbb391c06..d8aafac807 100644 --- a/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html +++ b/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html @@ -6,7 +6,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_генерато --- <p>С помощью этого инструмента вы можете создать CSS3 {{cssxref("border-radius")}} эффекты.</p> -<div style="display: none;"> +<div class="hidden"> <h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2> <h3 id="HTML_Content">HTML Content</h3> diff --git a/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html index a26dbc165d..4530073ad2 100644 --- a/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html +++ b/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Box_Model/Box-shadow_generator --- <p>Этот инструмент позволяет вам создавать CSS {{cssxref("box-shadow")}} эффекты, добавлять тени вашим элементам.</p> -<div style="display: none;"> +<div class="hidden"> <h2 id="box-shadow_generator" name="box-shadow_generator">Генератор box-shadow generator</h2> <h3 id="HTML_Content">HTML Content</h3> diff --git a/files/ru/web/css/css_colors/color_picker_tool/index.html b/files/ru/web/css/css_colors/color_picker_tool/index.html index 105c608af3..499aa260fd 100644 --- a/files/ru/web/css/css_colors/color_picker_tool/index.html +++ b/files/ru/web/css/css_colors/color_picker_tool/index.html @@ -6,7 +6,7 @@ tags: - инструменты translation_of: Web/CSS/CSS_Colors/Color_picker_tool --- -<div style="display: none;"> +<div class="hidden"> <h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2> <h3 id="HTML_Content">HTML Content</h3> diff --git a/files/ru/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/ru/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html index 4ed7e1686d..7ab14098a2 100644 --- a/files/ru/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html +++ b/files/ru/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -127,7 +127,7 @@ original_slug: Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> - <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_94E" style="display: none;"> </span></li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_94E" class="hidden"> </span></li> </ul> <div class="originaldocinfo"> diff --git a/files/ru/web/css/css_transitions/using_css_transitions/index.html b/files/ru/web/css/css_transitions/using_css_transitions/index.html index 2e75865c4d..fe9483eea9 100644 --- a/files/ru/web/css/css_transitions/using_css_transitions/index.html +++ b/files/ru/web/css/css_transitions/using_css_transitions/index.html @@ -73,7 +73,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 0.5s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -138,7 +138,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 1s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -203,7 +203,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 2s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -268,7 +268,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 4s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -337,7 +337,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: ease</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -400,7 +400,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: linear</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -463,7 +463,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: step-end</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -526,7 +526,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-timing-function: steps(4, end)</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -593,7 +593,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 0.5s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -665,7 +665,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 1s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -737,7 +737,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 2s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -809,7 +809,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-delay: 4s</code></p> - <div style="display: none;"> + <div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> diff --git a/files/ru/web/css/filter/index.html b/files/ru/web/css/filter/index.html index ba55a20e4a..63fa97d156 100644 --- a/files/ru/web/css/filter/index.html +++ b/files/ru/web/css/filter/index.html @@ -95,7 +95,7 @@ img { <pre class="brush: css">filter: blur(5px) </pre> -<div id="blur_example" style="display: none;"> +<div id="blur_example" class="hidden"> <pre class="brush: html"> <table class="standard-table"> <thead> <tr> @@ -190,7 +190,7 @@ table.standard-table td { </filter> </svg></pre> -<div id="brightness_example" style="display: none;"> +<div id="brightness_example" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> @@ -286,7 +286,7 @@ table.standard-table td { </svg> </pre> -<div id="contrast_example" style="display: none;"> +<div id="contrast_example" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> @@ -397,7 +397,7 @@ table.standard-table td { </svg> </pre> -<div id="shadow_example" style="display: none;"> +<div id="shadow_example" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> @@ -515,7 +515,7 @@ table.standard-table td { <pre class="brush: css">filter: grayscale(100%)</pre> -<div id="grayscale_example" style="display: none;"> +<div id="grayscale_example" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> @@ -599,7 +599,7 @@ table.standard-table td { <pre class="brush: css">filter: hue-rotate(90deg)</pre> -<div id="huerotate_example" style="display: none;"> +<div id="huerotate_example" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> @@ -686,7 +686,7 @@ table.standard-table td { <pre class="brush: css">filter: invert(100%)</pre> -<div id="invert_example" style="display: none;"> +<div id="invert_example" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> @@ -770,7 +770,7 @@ table.standard-table td { <pre class="brush: css">filter: opacity(50%)</pre> -<div id="opacity_example" style="display: none;"> +<div id="opacity_example" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> @@ -852,7 +852,7 @@ table.standard-table td { <pre class="brush: css">filter: saturate(200%)</pre> -<div id="saturate_example" style="display: none;"> +<div id="saturate_example" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> @@ -933,7 +933,7 @@ table.standard-table td { <pre class="brush: css">filter: sepia(100%)</pre> -<div id="sepia_example" style="display: none;"> +<div id="sepia_example" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> @@ -1017,7 +1017,7 @@ table.standard-table td { <pre class="brush: css">filter: contrast(175%) brightness(103%)</pre> -<div id="combination_example" style="display: none;"> +<div id="combination_example" class="hidden"> <pre class="brush: html"><table class="standard-table"> <thead> <tr> diff --git a/files/ru/web/css/transition-duration/index.html b/files/ru/web/css/transition-duration/index.html index f40f16a273..7389a9a6f0 100644 --- a/files/ru/web/css/transition-duration/index.html +++ b/files/ru/web/css/transition-duration/index.html @@ -44,7 +44,7 @@ transition-duration: unset; <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 0.5s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -109,7 +109,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 1s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -174,7 +174,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 2s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> @@ -239,7 +239,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> <p><code>transition-duration: 4s</code></p> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"> <div class="parent"> <div class="box">Lorem</div> </div> diff --git a/files/ru/web/css/using_css_custom_properties/index.html b/files/ru/web/css/using_css_custom_properties/index.html index db7a1674bd..905cbffe8d 100644 --- a/files/ru/web/css/using_css_custom_properties/index.html +++ b/files/ru/web/css/using_css_custom_properties/index.html @@ -138,7 +138,7 @@ translation_of: Web/CSS/Using_CSS_custom_properties </pre> -<div style="display: none;"> +<div class="hidden"> <pre class="brush:html"><div> <div class="one"></div> <div class="two">Text <span class="five">- more text</span></div> |