ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ° Π² html
ΠΠΎΠ»Π·ΡΠ½ΠΎΠΊ
ΠΠΎΠ»Π·ΡΠ½ΠΎΠΊ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ Π²Π²ΠΎΠ΄Π° ΡΠΈΡΠ΅Π» Π² ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅, Π½ΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΏΠΎΠ»Ρ ΠΈΠΌΠ΅Π΅Ρ Π΄ΡΡΠ³ΠΎΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π² ΡΠ΅Ρ ΡΠ»ΡΡΠ°ΡΡ , ΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π²Π°ΠΆΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠΎΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. ΠΠ° ΡΠΈΡ. 1 ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°Π½ Π²ΠΈΠ΄ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ° Π² ΡΠ°Π·Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
Π ΠΈΡ. 1. ΠΠΈΠ΄ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ° Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ° ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ.
ΠΠ΄Π΅ΡΡ min β ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ Π² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ 0), max β ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ 100), step β ΡΠ°Π³ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΈΡΠ΅Π» (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ 1), value β ΡΠ΅ΠΊΡΡΠ΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ value Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠΎΡΠΌΡΠ»Π΅:
ΠΡΡΠΈΠ±ΡΡΡ Π½Π΅ ΡΠ²Π»ΡΡΡΡΡ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ, ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡΡΡΠΈΡΡ, Π² ΡΠ°ΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ½ΠΈ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
ΠΠ΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΡΠ»Π° ΡΠΈΡΠΈΠ½Π° ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ° ΠΎΡΡΠ°ΡΡΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ.
Π‘Π°ΠΌΠΈ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠΈ ΡΠ΅Π΄ΠΊΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π² Β«ΡΠΈΡΡΠΎΠΌΒ» Π²ΠΈΠ΄Π΅, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π½Π΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ ΡΠ²ΡΠ·Ρ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ, Π° Π²ΠΎΡ Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ JavaScript ΡΡΠΎ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΌΠΎΡΠ½ΡΠΌ ΠΈ ΡΠ΄ΠΎΠ±Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ 1 Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ° ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠ°ΠΊΠ°Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΎΡΠΎΠ³Π°Π»Π΅ΡΠ΅ΡΡ .
ΠΡΠΈΠΌΠ΅Ρ 1. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ°
HTML5 IE 10 Cr Op Sa Fx
Π ΠΈΡ. 2. Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ°
Π£Π·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠΈ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ JavaScript.
Default:
Square:
Round:
Image:
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°
Π¨Π°Π³ 1) Π΄ΠΎΠ±Π°Π²ΠΈΡΡ HTML:
ΠΡΠΈΠΌΠ΅Ρ
Π¨Π°Π³ 2) Π΄ΠΎΠ±Π°Π²ΠΈΡΡ CSS:
ΠΡΠΈΠΌΠ΅Ρ
.slidecontainer <
width: 100%; /* Width of the outside container */
>
/* Mouse-over effects */
.slider:hover <
opacity: 1; /* Fully shown on mouse-over */
>
.slider::-moz-range-thumb <
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
>
Π¨Π°Π³ 3) Π΄ΠΎΠ±Π°Π²ΠΈΡΡ JavaScript:
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΏΠΎΠ»Π·ΡΠ½ΠΎΠΊ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript:
ΠΡΠΈΠΌΠ΅Ρ
var slider = document.getElementById(«myRange»);
var output = document.getElementById(«demo»);
output.innerHTML = slider.value; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() <
output.innerHTML = this.value;
>
ΠΡΡΠ³Π»ΡΠΉ ΠΏΠΎΠ»Π·ΡΠ½ΠΎΠΊ
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΡΡΠ³Π»ΠΎΠ³ΠΎ ΠΌΠ°ΡΠΊΠ΅ΡΠ° ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ border-radius ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ. Π‘ΠΎΠ²Π΅Ρ: Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π²ΡΡΠΎΡΡ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ° Π½Π° Π΄ΡΡΠ³ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΡΠ΅ΠΌ ΠΏΠΎΠ»Π·ΡΠ½ΠΎΠΊ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π½Π΅ΡΠ°Π²Π½ΡΠ΅ Π²ΡΡΠΎΡΡ (15ΠΏΠΊΡ vs. 25ΠΏΠΊΡ Π² ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅):
ΠΡΠΈΠΌΠ΅Ρ
.slider::-webkit-slider-thumb <
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
>
.slider::-moz-range-thumb <
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
>
ΠΠΊΠΎΠ½ΠΊΠ° ΡΠ»Π°ΠΉΠ΄Π΅Ρ/ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π·Π½Π°ΡΠΎΠΊ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΡΠΊΠ΅ΡΠ° ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ background ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΈ Π²ΡΡΠ°Π²ΡΡΠ΅ URL-Π°Π΄ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ:
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠΊΡΠΈΠΏΡΠΎΠ² Π΄Π»Ρ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠΎΠ²
ΠΠΎΠ»Π·ΡΠ½ΠΎΠΊ, Π΄ΠΎΡΠΎΠΆΠΊΠ° ΠΈ Π±Π΅Π³ΡΠ½ΠΎΠΊ
ΠΠΎΠ»Π·ΡΠ½ΠΎΠΊ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· Π΄ΠΎΡΠΎΠΆΠΊΠΈ, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π΅Ρ Π±Π΅Π³ΡΠ½ΠΎΠΊ. Π Π΄ΠΎΡΠΎΠΆΠΊΠ΅ ΠΈ Π±Π΅Π³ΡΠ½ΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΡΠΈΠ»ΠΈ, Π½ΠΎ Π½Π΅ ΡΠΊΡΠΈΠΏΡΡ.
ΠΡΠ½ΠΎΠ²Ρ ΡΡΠΈΠ»Π΅ΠΉ
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠΎΠ² Π½Π΅ ΡΠ°ΠΊ ΡΠΆ ΡΡΡΠ΄Π½Π°. ΠΠ»Ρ Π±Π΅Π³ΡΠ½ΠΊΠ° ΠΈ Π΄ΠΎΡΠΎΠΆΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΡΠΈΠ»ΠΈ, Ρ ΠΎΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π·Π°Π²ΠΈΡΡΡ ΠΎΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°:
ΠΠ΅Π»ΡΠ·Ρ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΡΠ°Π²ΠΈΠ»Π΅, Π΄Π°ΠΆΠ΅ Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΎΠ΄Π½ΠΈ ΠΈ ΡΠ΅ ΠΆΠ΅ ΡΡΠΈΠ»ΠΈ ( ΠΊΡΠΎΠΌΠ΅ ΠΎΡΡΡΡΠΏΠΎΠ² Π΄Π»Ρ Π±Π΅Π³ΡΠ½ΠΊΠ° ). ΠΡΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡ ΠΎΠ΄ΠΈΠ½ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ½ Π½Π΅ ΡΠ°ΡΠΏΠΎΠ·Π½Π°Π΅Ρ, ΡΠΎ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅Ρ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅. ΠΠΎΡΡΠΎΠΌΡ Π²Π°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ CSS Π½Π° ΡΠ΅ΡΠ²Π΅ΡΠ½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Π΅.
IE ΠΈ MS Edge ΡΡΠ΅Π±ΡΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ color ΠΈ border-color Π½Π° Π΄ΠΎΡΠΎΠΆΠΊΠ΅, ΠΈΠ»ΠΈ ΠΎΠ½ΠΈ ΠΎΡΠΎΠ±ΡΠ°Π·ΡΡ ΡΡΠΈΠ»ΠΈ Π΄ΠΎΡΠΎΠΆΠΊΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΄Π»Ρ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ° ΠΈΠΌ Π½ΡΠΆΠ½Ρ ΠΈΠ½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ, ΡΠ΅ΠΌ Π² Π΄ΡΡΠ³ΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
CSS ΡΠ°Π±Π»ΠΎΠ½
ΠΡΠ΅ ΡΡΠΈ Π½Π΅ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΏΡΠΈΠ²ΠΎΠ΄ΡΡ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΡΠ°Π±Π»ΠΎΠ½Ρ CSS :
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ appearance ΠΈ ΠΎΡΠΈΠ±ΠΊΠ° Android WebKit
ΠΠΎΠΈΠΌ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΡΠΌ ΠΏΠ»Π°Π½ΠΎΠΌ Π±ΡΠ»ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ ΡΡΠΈΠ»ΡΠΌ Π±Π΅Π³ΡΠ½ΠΊΠ° ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡ Π»ΠΈ ΠΎΠ½ΠΈ ΠΌΠΎΠΈΠΌ. ΠΡΠ»ΠΈ ΠΎΠ½ΠΈ Π½Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ, ΡΠΎ ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ slider-horizontal :
ΠΠ°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠ°
ΠΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ
Π― ΠΏΡΠΎΠ±ΠΎΠ²Π°Π» Π΄Π²ΠΈΠΆΡΡΠΈΠΉΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠ΅Π°Π³ΠΈΡΡΡΡΠΈΠΉ Π½Π° ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π±Π΅Π³ΡΠ½ΠΊΠ°, Π½ΠΎ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠΊΡΠΈΠΏΡΠΎΠ² Π½Π΅ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ, ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ΅ΠΊΡΡΠΈΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ Π±Π΅Π³ΡΠ½ΠΊΠ° Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. Π’Π°ΠΊΠΆΠ΅ ΠΏΡΡΠ°Π»ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡΠ΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ° Π²ΠΌΠ΅ΡΡΠΎ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ, Π½ΠΎ ΠΏΠΎΠΏΡΡΠΊΠ° Π·Π°Π²Π΅ΡΡΠΈΠ»Π°ΡΡ ΠΏΡΠΎΠ²Π°Π»ΠΎΠΌ. Π ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΡΡΠ΅ΡΠ΅, ΠΌΡ ΡΠ΅ΡΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ ( ΠΊΠΎΡΠΎΡΠ°Ρ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π½Π΅ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠ°ΠΊ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ° ).
Π IE/Edge Π΅ΡΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½Π°Ρ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎ Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΡΠ°ΡΡΠΈ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π°. Π ΡΡΠ°ΡΡΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΡΡΡΡ Π΅Π΅:
Π‘ΠΎΠ±ΡΡΠΈΡ Π²Π²ΠΎΠ΄Π° ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ
ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠ΅ΡΠ΅Π΄Π²ΠΈΠ³Π°Π΅Ρ Π±Π΅Π³ΡΠ½ΠΎΠΊ ΠΏΠΎ Π΄ΠΎΡΠΎΠΆΠΊΠ΅, ΠΏΠΎΠ»Π·ΡΠ½ΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·ΡΠ²Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΡ Π²Π²ΠΎΠ΄Π° ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ. ΠΠ΄Π½ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½Π΅ΠΏΡΠ΅ΡΡΠ²Π½ΠΎ Β« ΠΏΠΎΡΠΎΠΆΠ΄Π°ΡΡ Β» ΡΠΎΠ±ΡΡΠΈΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, Π΄ΡΡΠ³ΠΈΠ΅ β ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ.
ΠΡΠΈ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Ρ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠΎΠΌ ΠΏΠ΅ΡΠ΅Ρ Π²Π°ΡΡΠ²Π°ΠΉΡΠ΅ ΡΠΎΠ±ΡΡΠΈΡ Π²Π²ΠΎΠ΄Π° ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ. ΠΠ°ΡΠ΅ΠΌ Π²ΡΠ·ΡΠ²Π°ΠΉΡΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠ΅ΠΊΡΠ°ΡΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π±Π΅Π³ΡΠ½ΠΊΠ°. ΠΡΠΎ Π΄Π°Π΅Ρ ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ :
Π₯ΠΎΡΡ ΡΡΠ°Π±ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , Π° Π΄ΡΡΠ³ΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΡΠΎ. Π ΡΡΠΎ ΠΏΡΠΈΠ²Π΅Π»ΠΎ Π±Ρ ΠΊ Π»ΠΈΡΠ½ΠΈΠΌ Π·Π°ΡΡΠ°ΡΠ°ΠΌ ΡΠ΅ΡΡΡΡΠΎΠ², ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ . ΠΠΎ Ρ Π±ΡΠ» Π±Ρ ΡΠ°Π΄, Π΅ΡΠ»ΠΈ ΠΊΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΎΠΏΡΠΎΠ²Π΅ΡΠ³Π½Π΅Ρ ΡΡΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΠΎΠ»Π·ΡΠ½ΠΎΠΊ html + CSS
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅ ΡΠ²Π°ΠΆΠ°Π΅ΠΌΡΠ΅ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΠ΅ Π²Π΅Π±-ΠΌΠ°ΡΡΠ΅ΡΠ°. ΠΡΡ ΠΎΠ΄ΠΈΠ½ ΠΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ CSS.
Π‘Π΅ΠΉΡΠ°Ρ Π±ΡΠ΄Π΅ΠΌ Π΄Π΅Π»Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ ΠΏΠΎΠ»Π·ΡΠ½ΠΎΠΊ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°. ΠΡΠΎΡΡΠΎΠΉ-ΡΠΎ ΠΏΠΎΠ»Π·ΡΠ½ΠΎΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΡΠΎΡΡΠΎ. ΠΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π²Π²Π΅ΡΡΠΈ Π² html ΠΊΠΎΠ΄ ΡΠ΅Π³ input Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ type=Β»rangeΒ», ΠΊΠ°ΠΊ Π»ΡΠ±ΠΎΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠΎΠΉΠΌΡΡ, ΡΡΠΎ Π½Π° ΡΠΊΡΠ°Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ²Π΅ΡΡΠΈ ΠΏΠΎΠ»Π·ΡΠ½ΠΎΠΊ.
ΠΠΎΡ ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π²ΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅
ΠΠ΅Π²Π·ΡΠ°ΡΠ½Π΅Π½ΡΠΊΠΎ. Π§ΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎΡ Π±Π΅Π³ΡΠ½ΠΎΠΊ ΠΊΡΠ°ΡΠΈΠ²ΡΠΌ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ css, Π½ΠΎ Π½Π΅ Π²ΡΡ ΡΠ°ΠΊ ΠΏΡΠΎΡΡΠΎ. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π±Π΅Π³ΡΠ½ΠΎΠΊ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ.
Π― Π½Π΅ ΡΡΠ°Π½Ρ Π·Π°Π±ΠΈΠ²Π°ΡΡ ΠΠ°ΠΌ ΠΌΠΎΠ·Π³ΠΈ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΡΠΌΠΈ, ΠΏΠΎΡΠ΅ΠΌΡ ΡΠ°ΠΊ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, ΠΡ ΠΆΠ΅ Π΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΠ΅, ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ ΠΠ°ΠΌ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π½Π΅ ΠΏΠΎΠ½ΡΡΠ½ΠΎ.
Π‘ΠΊΠ°ΠΆΡ ΡΠΎΠ»ΡΠΊΠΎ, ΡΡΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ± Π½Π°Ρ Π±Π΅Π³ΡΠ½ΠΎΠΊ ΠΏΠΎΠ»ΡΡΠΈΠ»ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠΌ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²Π΅Π½Π΄ΠΎΡΠ½ΡΠ΅ (Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΠ΅) ΠΏΡΠ΅ΡΠΈΠΊΡΡ.
ΠΠ°Π»Π΅Π΅ Ρ ΠΠ°ΠΌ Π΄Π°ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΊΠΎΠ΄Π° Ρ ΠΎΠ±ΡΡΡΠ½ΡΡΡΠΈΠΌΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΠΌΠΈ, ΠΈ ΠΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ Π½Π°ΡΡΠ½ΠΎΠ³ΠΎ ΡΡΠΊΠ° ΠΈ ΠΌΠ°ΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π° (ΡΠ°ΠΌΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΈΠ²Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄), ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠ°Π±ΠΎΡΠ°ΡΡ Π² Notepad ++ Π½Π°Π΄ Π²Π½Π΅ΡΠ½ΠΈΠΌ Π²ΠΈΠ΄ΠΎΠΌ Π±Π΅Π³ΡΠ½ΠΊΠ°.
ΠΡΠΎ Π½Π΅Π·Π½Π°ΠΊΠΎΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΊΠΎΠ΄Π°, Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ·Π½Π°ΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅ htmlbook. ΠΠΎΠ»Π΅Π΅ ΠΏΠΎΠ½ΡΡΠ½ΠΎΠ³ΠΎ ΠΈ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ, Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ, Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅ Π½Π΅Ρ.
ΠΡΠ°ΠΊ, ΠΊΠΎΠ΄ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ³ΠΎ Π±Π΅Π³ΡΠ½ΠΊΠ°:
input[type=range] <
-webkit-appearance : none ;
margin : 50px ;
width : 20% ;
>
input[type=range]:focus <
outline : none ;
>
input[type=range]::-webkit-slider-runnable-track <
height : 8px ;
cursor : pointer ;
animate : 0.2s ;
border : 1px solid #575656 ;
background : #AD020D ;
>
input[type=range]::-moz-range-track <
height : 8px ;
cursor : pointer ;
animate : 0.2s ;
box-shadow : 1px 1px 1px #000 ;
background : #AD020D ;
border : 1px solid #575656 ;
>
input[type=range]::-moz-range-thumb <
box-shadow : 1px 1px 1px #000 ;
border : 1px solid #000000 ;
height : 36px ;
width : 16px ;
border-radius : 40%/60% ;
background : #ffffff ;
cursor : pointer ;
>
/style >
/head >
body >
input type =» range » value =» 0 » max =» 100 «/>
/body >
/html >
Π Π²ΠΎΡ ΠΈ ΠΎΠ½ ΡΠ°ΠΌ, ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π²ΠΈΠ³Π°ΡΡ:
ΠΡΡ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π»ΠΈΠ½ΠΈΡ, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ Π΄Π²ΠΈΠ³Π°Π΅ΡΡΡ Π±Π΅Π³ΡΠ½ΠΎΠΊ, ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ.
input[type=range] <
-webkit-appearance : none ;
appearance : none ;
width : 260px ;
height : 20px ;
padding : 0 ;
box-shadow : inset 0 0 0 2px #2D7CFA ;
background : #AD020D ;
overflow : hidden ;
>
/* ΠΠΈΠ½ΠΈΡ-Π½Π΄ΠΈΠΊΠ°ΡΠΎΡ Π΄Π»Ρ Firefox */
input[type=range]::-moz-range-track <
background : none ;
border : none ;
>
/* ΠΏΠΎΠ»Π·ΡΠ½ΠΎΠΊ Π² Firefox */
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ, ΡΠ°ΠΊ ΠΆΠ΅ ΡΠ°Π±ΠΎΡΠΈΠΉ:
Π§ΡΠΎΠ± ΠΌΠ΅ΡΠΎΠ΄ ΡΡΠΊΠ° ΠΈ ΠΌΠ°ΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠ²Π°, Π½Π΅ ΡΠ²ΡΠ»ΡΡ Ρ ΠΠ°Ρ ΠΊ ΠΏΡΠΎΡΡΠΎΠΌΡ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π° Π±ΡΠ» ΠΎΡΠΌΡΡΠ»Π΅Π½Π½ΡΠΌ ΠΈ, Π·Π½Π°ΡΠΈΡ, Π±ΠΎΠ»Π΅Π΅ ΠΏΠ»ΠΎΠ΄ΠΎΡΠ²ΠΎΡΠ½ΡΠΌ, Ρ ΡΠ±ΡΠ°Π» ΠΈΠ· ΠΊΠΎΠ΄Π° ΠΎΠ±Π΅ΠΈΡ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠΎΠ² ΡΡΠ°ΡΡΠΎΠΊ, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΠΉ Π΄Π»Ρ IE.
ΠΠΎΡΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ, ΠΈ ΠΡ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ Π½Π°ΠΈΠ±ΠΎΠ»ΡΡΡΡ ΠΏΠΎΠ»ΡΠ·Ρ ΠΎΡ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ.
ΠΠ΅Π»Π°Ρ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΡ ΡΡΠΏΠ΅Ρ ΠΎΠ².
ΠΠ΅ΡΠ΅ΠΌΠ΅Π½Π°
ΠΡΠΆΡΠΈΠ½Π° ΡΠΏΠ°Π» Ρ Π΄Π΅ΡΡΡΠΎΠ³ΠΎ ΡΡΠ°ΠΆΠ°, ΠΈ Π½Π΅ ΡΠ°Π·Π±ΠΈΠ»ΡΡ. Π’Π°ΠΊ ΡΠ΅Π»ΠΈΠΊΠΎΠΌ ΠΈ ΠΏΠΎΡ ΠΎΡΠΎΠ½ΠΈΠ»ΠΈ.
ΠΠΎΠ΄ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠ° Π² html
ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π² GitHub ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΈ. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π²Π½Π΅ΡΡΠΈ Π²Π½Π΅ΡΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΠΏΡΠΈΠ²Π΅Ρ, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ° ΡΠΊΠ»ΠΎΠ½ΠΈΡΡΠΉΡΠ΅ https://github.com/mdn/interactive-examples ΠΈ ΠΎΡΠΏΡΠ°Π²ΡΡΠ΅ Π½Π°ΠΌ ΠΏΡΠ» ΡΠ΅ΠΊΠ²Π΅ΡΡ.
ΠΠ°Π»ΠΈΠ΄Π°ΡΠΈΡ
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ Π½Π΅Ρ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ³ΠΎ ΠΏΠ°ΡΡΠ΅ΡΠ½Π° Π²Π°Π»ΠΈΠ΄Π°ΡΠΈΠΈ, Π½ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠ°Ρ Π²Π°Π»ΠΈΠ΄Π°ΡΠΈΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ
ΠΡΠ»ΠΈ ΠΏΡΠ΅Π΄ΠΏΡΠΈΠ½ΡΡΠ° ΠΏΠΎΠΏΡΡΠΊΠ° ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠ΅Π½ΡΡΠ΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ, ΡΠΎ ΠΎΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° min. ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ, ΠΏΠΎΠΏΡΡΠΊΠ° ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ, ΠΏΡΠΈΠ²Π΅Π΄ΡΡ ΠΊ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ°Π²Π½ΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡΡ max.
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ
The values of the list attribute is the id of a element located in the same document. The provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.
Π‘ΠΌΠΎΡΡΠΈΡΠ΅ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅ΡΡΡΠΊΠΈ Π½ΠΈΠΆΠ΅, Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡΡΡ Π² ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
ΠΠ΅ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ
Examples
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΎΡΠ½ΠΎΠ²Π½ΡΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΉ, Π² ΠΊΠΎΡΠΎΡΡΡ ΠΈΠ½ΠΏΡΡΡ Ρ range ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ:
ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π² Π±ΠΎΠ»ΡΡΠ΅ΠΉ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅ΡΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΌΠ΅ΠΆΠ΄Ρ ΠΌΠΈΠ½ΠΈΠΌΡΠΌΠΎΠΌ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌΠΎΠΌ, Π½Π΅ΠΆΠ΅Π»ΠΈ ΡΠ΅Π°Π»ΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ, range ΠΈΠ½ΠΏΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΡΠ»ΡΡΠ°Π΅ Ρ ΠΊΠΎΠ½ΡΡΠΎΠ»Π΅ΠΌ Π³ΡΠΎΠΌΠΊΠΎΡΡΠΈ Π΄ΠΎΠΌΠ°ΡΠ½Π΅Π³ΠΎ ΡΡΠ΅ΡΠ΅ΠΎ, ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄ΡΠΌΠ°Π΅Ρ «ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π³ΡΠΎΠΌΠΊΠΎΡΡΠΈ Π½Π°ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌΠ°» Π²ΠΌΠ΅ΡΡΠΎ «ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π³ΡΠΎΠΌΠΊΠΎΡΡΡ Π½Π° 0.5».
Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΠΌΠΈΠ½ΠΈΠΌΡΠΌΠ° ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌΠ°
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° Π΄Π΅ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΡΡΠ΅ΠΏΠ΅Π½Ρ Π΄Π΅ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ°Π²Π½Π° 1, ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Ρ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³Π΄Π° ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅Π»ΡΠΌ ΡΠΈΡΠ»ΠΎΠΌ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π°ΡΡΠΈΠ±ΡΡ step ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ ΡΡΠ΅ΠΏΠ΅Π½ΠΈ Π΄Π΅ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ 5 ΠΈ 10, Ρ ΡΠΎΡΠ½ΠΎΡΡΡΡ Π΄ΠΎ Π΄Π²ΡΡ Π·Π½Π°ΠΊΠΎΠ² ΠΏΠΎΡΠ»Π΅ Π·Π°ΠΏΡΡΠΎΠΉ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ step Π½Π° 0.01:
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΡΠΈΠ½ΡΡΡ Π»ΡΠ±ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠ°Π·ΡΡΠ΄Π½ΠΎΡΡΠΈ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ any Π΄Π»Ρ Π°ΡΡΠΈΠ±ΡΡΠ° step :
ΠΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²ΡΠ±ΡΠ°ΡΡ Π»ΡΠ±ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ 0 ΠΈ Ο Π±Π΅Π· ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ Π½Π° ΡΠ°Π·ΡΡΠ΄Π½ΠΎΡΡΡ.
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Ρ ΡΡ-ΠΌΠ΅ΡΠΎΠΊ ΠΈ Π»Π΅ΠΉΠ±Π»ΠΎΠ²
ΠΠ°ΠΊΠ΅ΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»Π»Π΅ΡΠ° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°
Π’Π°ΠΊ ΠΊΠ°ΠΊ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΈΠΌΠ΅ΡΡ ΡΡΡ Π³ΠΈΠ±ΠΊΠΎΡΡΡ, ΠΈ Π½Π° ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½ΠΈΠΉ Π΄Π΅Π½Ρ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½ΠΈΡ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠ΅ HTML, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ², ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΡ ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π½Π° macOS Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ.
ΠΠ΅Π΄Π΅ΠΊΠΎΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Π»Π΅Ρ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°
ΠΠΎΠ½ΡΡΠΎΠ»Π»Π΅Ρ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Ρ Ρ ΡΡ-ΠΌΠ΅ΡΠΊΠ°ΠΌΠΈ
ΠΠΎΠ½ΡΡΠΎΠ»Π»Π΅Ρ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° Ρ Ρ ΡΡ-ΠΌΠ΅ΡΠΊΠ°ΠΌΠΈ ΠΈ Π»Π΅ΠΉΠ±Π»Π°ΠΌΠΈ
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π΅ΡΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΈΠ½ΠΏΡΡ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΠΊΠ°ΠΊ ΡΠ»Π°ΠΉΠ΄Π΅Ρ, ΠΎΠ½ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡ Π΅Π³ΠΎ ΡΠ°ΠΊ ΡΡΠΎΠ± ΠΏΠΎΠ»Π·ΡΠ½ΠΎΠΊ Π΅Π·Π΄ΠΈΠ» Π² ΠΏΡΠ°Π²ΠΎ ΠΈ Π² Π»Π΅Π²ΠΎ. ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π΄Π΅Π»Π°ΡΡ ΡΠ»Π°ΠΉΠ΄Π΅Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ, ΡΠ°ΠΊ ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»Π·ΡΠ½ΠΎΠΊ ΠΌΠΎΠ³ Π΅Π·Π΄ΠΈΡΡ Π²Π²Π΅ΡΡ ΠΈ Π²Π½ΠΈΠ·. ΠΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Π½Π΅ ΠΈΠΌΠΏΠ»Π΅ΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π» ΡΡΠΎ ΠΏΠΎΠΊΠ°. (Firefox Π±Π°Π³ 981916, Chrome bug 341071). ΡΠ°ΠΊΠΆΠ΅, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ Π±Π°Π³ ΠΏΠΎΠ΄ Π²ΠΎΠΏΡΠΎΡΠΎΠΌ.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠΎΠ½ΡΡΠΎΠ»Π»Π΅Ρ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°:
Screenshot | Live sample |
---|---|
ΠΡΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Π»Π΅Ρ (ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ ΠΌΠ΅ΡΠ΅ Π½Π° Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², Π΄ΡΡΠ³ΠΈΠ΅ ΠΌΠΎΠ³ΡΡ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ).
Standards
Π‘Π»Π΅Π΄ΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ, ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΎΡΡΠΎ ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ CSS, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»Π»Π΅ΡΠ°, ΡΡΠΎΠ±Ρ Π΅Π³ΠΎ Π²ΡΡΠΎΡΠ° ΠΎΠΊΠ°Π·Π°Π»Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΈΡΠΈΠ½Ρ:
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ
Screenshot | Live sample |
---|---|
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΡΠ΅ΠΉΡΠ°Ρ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»Π»Ρ Π½Π°ΠΏΡΡΠΌΡΡ.
transform: rotate(-90deg)
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ CSS. ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , ΡΡΠΎ CSS Π΄Π»Ρ ΡΠ°ΠΌΠΎΠΉ ΠΎΠ±ΡΡΡΠΊΠΈ; ΡΡΠΎ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ Π΄ΠΈΡΠΏΠ»Π΅Ρ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π΄Π»Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅; ΠΏΠΎ ΡΡΡΠΈ, ΠΎΠ½ ΡΠ΅Π·Π΅ΡΠ²ΠΈΡΡΠ΅Ρ ΠΎΠ±Π»Π°ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π΄Π»Ρ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ°, ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ ΠΏΠΎΠ²ΡΡΠ½ΡΡΡΠΉ ΡΠ»Π°ΠΉΠ΄Π΅Ρ Π² Π·Π°ΡΠ΅Π·Π΅ΡΠ²ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π΅, Π½Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ Π±Π΅ΡΠΏΠΎΡΡΠ΄ΠΊΠ°.
ΠΠ°ΡΠ΅ΠΌ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΡΠΈΠ»Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² Π·Π°ΡΠ΅Π·Π΅ΡΠ²ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π΅:
Π Π°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»Π»Π΅ΡΠ° ΡΡΠΎ Π½Π°Π±ΠΎΡ ΠΈΠ· 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π΄Π»ΠΈΠ½Ρ ΠΈ 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π²ΡΡΠΎΡΡ. ΠΠ°ΡΠΆΠΈΠ½Π³ΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Ρ Π½Π° 0 ΠΈ transform-origin (en-US) ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Ρ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ Π²ΡΠ°ΡΠ°Π΅ΡΡΡ ΡΠ»Π°ΠΉΠ΄Π΅Ρ; ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ»Π°ΠΉΠ΄Π΅Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΠΎΠ½ Π²ΡΠ°ΡΠ°Π΅ΡΡΡ ΡΠ΅ΡΠ΅Π· ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΏΠΎ 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ. Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π°ΡΠ°Π»Π° ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π½Π° 75px ΠΏΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΡΠΈ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ Π²ΡΠ°ΡΠ°ΡΡΡΡ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅Π½ΡΡΠ° ΡΡΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°. ΠΠ°ΠΊΠΎΠ½Π΅Ρ, ΠΌΡ ΠΏΠΎΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΠΌ ΠΏΡΠΎΡΠΈΠ² ΡΠ°ΡΠΎΠ²ΠΎΠΉ ΡΡΡΠ΅Π»ΠΊΠΈ Π½Π° 90Β°. Π Π΅Π·ΡΠ»ΡΡΠ°Ρ: ΠΈΠ½ΠΏΡΡ range, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠ°ΡΠ°Π΅ΡΡΡ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΠ²Π΅ΡΡ Ρ, Π° ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ½ΠΈΠ·Ρ.
Screenshot | Live sample |
---|---|
appearance property
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠΎΡ ΠΆΠ΅ HTML ΡΡΠΎ ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅:
ΠΠ΅ΡΡΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ ΠΈΠ½ΠΏΡΡΡ ΡΡΠΎ ΠΈΠΌΠ΅ΡΡ ΡΠΈΠΏ range:
orient attribute
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠΎΡ ΠΆΠ΅ HTML ΡΡΠΎ ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π°ΡΡΠΈΠ±ΡΡ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ vertical :
writing-mode: bt-lr;
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ writing-mode ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΎ Π΄Π»Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ²
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠΎΡ ΠΆΠ΅ HTML ΡΡΠΎ ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅:
ΠΡΠ΅ Π²ΠΌΠ΅ΡΡΠ΅
ΠΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π²ΡΡΠ΅ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² ΡΠ²ΠΎΡΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΠΌΡ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ Π²ΡΠ΅ Π²ΠΌΠ΅ΡΡΠ΅ ΡΡΠΎΠ± Π΄ΠΎΠ±ΠΈΡΡΡΡ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΠΈ ΡΠ΅ΡΠ΅Π½ΠΈΡ:
ΠΡΡΠ°Π²ΠΈΠΌ orient Π°ΡΡΠΈΠ±ΡΡ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ vertical Π΄Π»Ρ Firefox: