ΠΡΠ°ΡΠΈΠ²ΡΠ΅ Radio Buttons (ΡΠ°Π΄ΠΈΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ°) ΠΈ Checkbox (ΡΠ΅ΠΊΠ±ΠΎΠΊΡ)
ΠΠ°ΠΌ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»ΠΈ ΡΠ»Π°ΠΆΠΊΠΎΠ² (checkbox css) ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉ (radio ΠΊΠ½ΠΎΠΏΠΊΠ°), Π±Π΅Π· JavaScript? ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ CSS3 ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ!
Π¨Π°Π³ 1: ΠΠ±ΡΠΈΠ΅ ΡΠ²Π΅Π΄Π΅Π½ΠΈΡ
ΠΡΠΎ Ρ ΠΎΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΠΊΠΎΠΌ Ρ CSS, ΡΠΎΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠΆΠ΅ Π΄ΠΎΠ³Π°Π΄Π°Π»ΡΡ, ΠΊΠ°ΠΊ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²ΡΠ²Π°ΡΡ Π½Π°ΡΡ Π·Π°Π΄Π°ΡΡ. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ:
input[type=»checkbox»]:checked + label { } |
Π’Π΅ΠΏΠ΅ΡΡ, Π΄Π»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ ΠΎΡΠ΅Π½Ρ Π³Π»ΡΠ±ΠΎΠΊΠΈΠ΅ Π·Π½Π°Π½ΠΈΡ Π² ΡΡΠΎ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ β Π½Π΅ Π±ΠΎΠΉΡΠ΅ΡΡ, ΡΠΈΡΠ°ΠΉΡΠ΅ Π΄Π°Π»Π΅Π΅!
Π§ΡΠΎ ΠΆΠ΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ Π΄Π΅Π»Π°ΡΡ? ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Β CSS3 ΠΏΡΠ΅Π²Π΄ΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Β :checked, Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΠΌ ΠΏΡΠΎΠ²Π΅ΡΠΊΡ Π²ΠΊΠ»/Π²ΡΠΊΠ». ΠΠ°ΡΠ΅ΠΌ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ β+β ΡΠΌΠ΅ΠΆΠ½ΡΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΎΡ CSS 2.1 Β ΡΡΠ°Π·Ρ ΠΏΠΎΡΠ»Π΅ checkbox ΡΠ»Π°ΠΆΠΊΠ° ΠΈΠ»ΠΈ ΡΠ°Π΄ΠΈΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΠΎ label.
Π¨Π°Π³ 2: ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° Π½Π°ΡΠ΅Π³ΠΎ HTML ΠΊΠΎΠ΄Π°
ΠΡ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ HTML ΠΈ CSS ΡΠ°ΠΉΠ»ΠΎΠ² (ΠΡ ΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΈ ΡΡΠΈΠ»ΠΈ, ΠΈΡΡ ΠΎΠ΄Ρ ΠΈΠ· Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΠ°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°). Π Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΠ°, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ°Π΄ΠΈΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏ Π΅Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΈ ΡΠ°ΠΊΠΆΠ΅ Π΅ΡΡΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠ΅.
Π₯ΠΎΡΠΎΡΠΎ, Π΄Π°Π²Π°ΠΉΡΠ΅ Π½Π°ΡΠΈΠ½Π°ΡΡ? Π Π½Π°ΡΠ½Π΅ΠΌ ΠΌΡ Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½Π°ΡΠΈΡ
ΡΠ΅ΠΊΠ±ΠΎΠΊΡ
<input type=»checkbox» /> <label>Styled Check Box</label> |
Π’Π΅ΠΏΠ΅ΡΡ, ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ Π·Π½Π°Π΅ΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ ΠΎ , ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ input ΠΈ label Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π²Π°ΠΌ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅Π³ΠΎΠΌ input ΡΠ΅ΡΠ΅Π· label. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ for=β» ΠΈ id=β».
<input type=»checkbox» name=»cc» /> <label for=»c1″>Check Box 1</label> |
Π― ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»Ρ Π²Π½ΡΡΡΠΈ label, Π½ΠΎ ΡΡΠΎ Π±ΠΎΠ»Π΅Π΅ Π»ΠΈΡΠ½ΠΎΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΠ΅, Π½ΠΎ Π΄Π°Π»Π΅Π΅ ΠΡ ΠΏΠΎΠΉΠΌΠ΅ΡΠ΅ Π·Π°ΡΠ΅ΠΌ ΠΎΠ½ Π½ΡΠΆΠ΅Π½.
Π¨Π°Π³ 3: CSS ΡΡΠΈΠ»ΠΈ
ΠΠΌΠ΅Π½Π½ΠΎ Π·Π΄Π΅ΡΡ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ ΡΠ°ΠΌΠΎΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅. ΠΠ΅ΡΠ²ΠΎΠ΅, ΡΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ΄Π΅Π»Π°ΡΡ β ΡΡΠΎ ΡΠΊΡΡΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΡΠ΅ΠΊΠ±ΠΎΠΊΡ ΡΠ»Π°ΠΆΠΎΠΊ (ΠΈ ΡΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΠ²ΠΎΠΉ Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠΈ). Π‘ΡΠΈΠ»ΠΈ checkbox.
input[type=»checkbox»] { display:none; } |
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ label, Π½ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎ span Π²Π½ΡΡΡΠΈ label. Π― Π΄Π΅Π»Π°Ρ ΡΡΠΎ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π°ΠΆΠΊΠ° Π±ΠΎΠ»Π΅Π΅ ΡΠΎΡΠ½ΡΠΌ. ΠΠ΅Π· Π½Π΅Π΅ Π²Ρ Π±Ρ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ label Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ, Π½ΠΎ ΡΠ°ΠΊΠΈΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ ΡΠΎΡΠ½ΠΎ Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»ΠΎΠΆΠ½ΠΎ.
1 2 3 4 5 6 7 8 9 | input[type=»checkbox»] { display:none; } input[type=»checkbox»] + label span { display:inline-block; width:19px; height:19px; background:url(check_radio_sheet.png) left top no-repeat; } |
ΠΠΎΠ·Π²ΠΎΠ»ΡΡΠ΅ ΠΌΠ½Π΅ ΠΊΠΎΡΠΎΡΠΊΠΎ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ ΡΡΠΎ.
ΠΠΎΡ ΠΎΡΡΠ°Π»ΡΠ½Π°Ρ ΡΠ°ΡΡΡ CSS, ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΡΠ΅ Π΄Π»Ρ ΠΌΠΎΠ΅Π³ΠΎ ΡΡΠΈΠ»Ρ. ΠΡΠΎ ΡΠΈΡΡΠΎ Π΄Π»Ρ ΡΡΡΠ΅ΡΠΈΠΊΠΈ.
1 2 3 4 5 6 7 8 9 10 11 12 | input[type=»checkbox»] { display:none; } input[type=»checkbox»] + label span { display:inline-block; width:19px; height:19px; margin:-1px 4px 0 0; vertical-align:middle; background:url(check_radio_sheet.png) left top no-repeat; cursor:pointer; } |
Π¨Π°Π³ 4: ΠΠ°ΠΊ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ?
Π’Π°ΠΊ, ΠΎΡΡΠ°Π»ΠΎΡΡ ΡΠΎΠ²ΡΠ΅ΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ . ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ Π²Ρ ΠΎΠ΄Π΅, ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. ΠΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | input[type=»checkbox»] { display:none; } input[type=»checkbox»] + label span { display:inline-block; width:19px; height:19px; margin:-1px 4px 0 0; vertical-align:middle; background:url(check_radio_sheet. png) left top no-repeat; cursor:pointer; } input[type=»checkbox»]:checked + label span { background:url(check_radio_sheet.png) -19px top no-repeat; } |
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΠΏΡΠ°ΠΉΡ Π»ΠΈΡΡΠ°, Π²ΡΠ΅, ΡΡΠΎ ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠ½Π°.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ²
ΠΡΠ΅Π²Π΄ΠΎ-ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΠΊΡΠΎΠΌΠ΅ IE β ΠΎΠ½ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ. ΠΡ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ :checked Π² IE9 ΠΈ Π½ΠΈΠΆΠ΅, Π½ΠΎ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠ°ΠΊΡΠΈΡΠ½ΠΎ.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ β Π½Π΅ΡΡΠ½ΠΎ. Mobile Safari Pre IOS 6 Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π΅Π³ΠΎ.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! ΠΠΎΠ·Π½ΠΈΠΊΠ½ΡΡ ΡΡΡΠ΄Π½ΠΎΡΡΠΈ β ΠΏΠΈΡΠΈΡΠ΅ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ !
ΠΠ°Π½Π½ΡΠΉ ΡΡΠΎΠΊ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½ Π΄Π»Ρ Π²Π°Ρ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΡΠ°ΠΉΡΠ° vladmaxi.net
ΠΡΡΠΎΡΠ½ΠΈΠΊ ΡΡΠΎΠΊΠ°: http://webdesign.tutsplus.com
ΠΠ΅ΡΠ΅Π²Π΅Π»: ΠΠ»Π°Π΄ΠΈΡΠ»Π°Π² ΠΠΎΠ½Π΄Π°ΡΠ΅Π½ΠΊΠΎ
Π§ΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π» Π² Π·Π°ΠΊΠ»Π°Π΄ΠΊΠΈ ΡΠ²ΠΎΠ΅Π³ΠΎ Π»ΠΈΡΠ½ΠΎΠ³ΠΎ ΠΊΠ°Π±ΠΈΠ½Π΅ΡΠ°, ΠΠ°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π°Π²ΡΠΎΡΠΈΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΈΠ»ΠΈΠ·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ.
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ CSS ΠΈ Π½Π΅Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ»Π°ΠΆΠΊΠ°
Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS. ΠΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° HTML ΡΠ»Π°ΠΆΠΊΠ° ΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² CSS Π±Π΅Π· Π΅Π΄ΠΈΠ½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ JavaScript. ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΠ°Π±ΠΎΡΡ ΡΡΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π° ΠΈ Π²Π΅ΡΡ Π½ΡΠΆΠ½ΡΠΉ ΠΊΠΎΠ΄ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π½ΠΈΠΆΠ΅. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°ΡΠ°ΡΡ ΠΏΠΎΠ»Π½ΡΠΉ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ Π² ΠΊΠΎΠ½ΡΠ΅Β ΡΡΠΎΠΊΠ°.
Β
Β
Π Π°Π·ΠΌΠ΅ΡΠΊΠ°
Π‘ΡΡΡΠΊΡΡΡΠ° HTML Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΠ°ΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π²ΠΎΠ΄Π° Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠ΅ΡΠ²ΡΠΌ, Π΄ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ ΠΈ Π½Π΅Π½ΡΠΌΠ΅ΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ°. ΠΠΎΠ·ΠΆΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄ CSS, ΡΡΠ°Π½Π΅Ρ ΠΏΠΎΠ½ΡΡΠ½ΠΎ,Β ΠΏΠΎΡΠ΅ΠΌΡ.
Β
<div> <input type="checkbox"> <label for="checkbox_toggle">Click to Expand</label> <ul> <li><a href="#">Link One</a></li> <li><a href="#">Link Two</a></li> <li><a href="#">Link Three</a></li> <li><a href="#">Link Four</a></li> </ul> </div>
ΠΠ°ΠΊ ΠΡ Π²ΠΈΠ΄ΠΈΡΠ΅, Π·Π΄Π΅ΡΡ Π½Π΅Ρ Π½ΠΈΡΠ΅Π³ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎΠ³ΠΎ, Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML ΠΎΠ±ΡΡΠ½ΡΠ΅, ΡΠΈΡΠΎΠΊΠΎΒ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅:
- Π Π±Π»ΠΎΡΠ½ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π²ΡΠ΅Β ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅.
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π²ΠΎΠ΄Π° ΡΠΈΠΏΠ° ΡΠ»Π°ΠΆΠΎΠΊ Π½ΡΠΆΠ΅Π½ ΠΈΠ·-Π·Π° Π΅Π³ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π±ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌΒ ΠΈΠ»ΠΈ Π½Π΅ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ. ΠΠ½ Π±ΡΠ΄Π΅Ρ ΡΠΏΡΡΡΠ°Π½ Π²ΡΠ΅Β Π²ΡΠ΅ΠΌΡ.
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²Π²ΠΎΠ΄Π° ΠΈ Π²ΡΠ·ΠΎΠ²Π° Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎΒ ΠΌΠ΅Π½Ρ.
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅Π½ΡΠΌΠ΅ΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ° β ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΏΠΈΡΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΌ, ΠΊΠΎΠ³Π΄Π° ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΠΎ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈ Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉΒ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΠ΅Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Β ΡΠ»Π°ΠΆΠΊΠ°
ΠΠ°ΠΌ Π½ΡΠΆΠ΅Π½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ»Π°ΠΆΠΊΠ° ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°Π΄ΠΈ Π΅Π³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΡΡΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ° :checked. Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΈ ΡΠ½ΡΡΠΈΠ΅ ΡΠ»Π°ΠΆΠΊΠ° Π΄Π΅Π»Π°Π΅ΡΡΡ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ Π½Π°ΠΆΠ°ΡΠΈΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ, ΡΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π‘Π½Π°ΡΠ°Π»Π° ΡΠΏΡΡΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΒ ΡΠ»Π°ΠΆΠΊΠ°:
Β
input[type=checkbox]{ display: none; }
ΠΡΠ΅ ΡΠΏΡΡΡΠ΅ΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅Π½ΡΠΌΠ΅ΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ° β ΡΡΠΎ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π²ΠΈΠ΄Π½ΠΎ, ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎΒ ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΠΎ:
Β
ul{ display: none; }
Π Π²ΠΎΡ ΠΈ Π½Π΅Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ. ΠΡΠ»ΠΈ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :checked Ρ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΡΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠΌ ~, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π·Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΡΠ»Π°ΠΆΠΊΠ°. ΠΡΠΎ ΠΏΡΠΈΡΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ»Π°ΠΆΠΊΠ° ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π»ΡΡ Π²ΡΡΠ΅ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π΄Π΅ΡΠ΅Π²Π΅ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ²Β Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
Β
input[type=checkbox]:checked ~ ul { display: block }
ΠΠΎΠ΄ Π²ΡΡΠ΅ ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ Π½Π΅Π½ΡΠΌΠ΅ΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ, ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ ΡΠ»Π°ΠΆΠΎΠΊ. Π’Π°ΠΊ ΠΊΠ°ΠΊ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²Π²ΠΎΠ΄Π° ΡΠΈΠΏΠ° ΡΠ»Π°ΠΆΠΎΠΊ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π²Π° ΡΠΎΡΡΠΎΡΠ½ΠΈΡ, ΠΎΠ½ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΡΠΌ ΠΈ ΡΠΏΡΡΡΠ°Π½Π½ΡΠΌΒ ΡΠΎΡΡΠΎΡΠ½ΠΈΡΠΌΠΈ.
ΠΠ°Π΄Π΅Π΅ΠΌΡΡ, Π²Π°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΡΡ ΡΡΠΎΡΒ ΡΡΠΎΠΊ.
ΠΠ²ΡΠΎΡ ΡΡΠΎΠΊΠ° DannyΒ Markov
ΠΠ΅ΡΠ΅Π²ΠΎΠ΄Β βΒ ΠΠ΅ΠΆΡΡΠΊΠ°
Π‘ΠΌΠΎΡΡΠΈΡΠ΅Β ΡΠ°ΠΊΠΆΠ΅:
- ΠΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° ΡΠΎΠΊ-Π³ΡΡΠΏΠΏΡ: Ρ Π°ΠΎΡΠΈΡΠ½ΠΎΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌΒ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΉΒ CSS
- ΠΡΠΎΡΡΠΎΠ΅ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ HTML5Β ΠΈΒ CSS
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΌΠ΅Π½Ρ Π² ΡΠΎΠΌΠ±ΠΎΠ²ΠΈΠ΄Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠ΅ ΡΒ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌΒ CSS
- ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ Π² css, Π½ΠΎΡΠ±ΡΡ 3, 2016
- ΠΠ΅ΡΠΊΠΈ: css, css3, Π²Π΅ΡΡΡΠΊΠ°, ΡΡΠΎΠΊ css, ΡΡΠΎΠΊ css3, ΡΡΠΎΠΊ Π²Π΅ΡΡΡΠΊΠ°
Tweet
οΏ½
ο»ΏΠΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ
[an error occurred while processing the directive]25+ ΡΡΠΈΠ»Π΅ΠΉ ΡΠ»Π°ΠΆΠΊΠΎΠ² CSS ΠΈΠ· CodePen 2018
Π€Π»Π°ΠΆΠΎΠΊ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ HTML ΠΈ CSS ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅ΠΎΡΡΠ΅ΠΌΠ»Π΅ΠΌΠΎΠΉ ΡΠ°ΡΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΡΠΎΡΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π½Π° Π²Π°ΡΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°Ρ ΠΈΠ»ΠΈ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ . ΠΠΎΡΡΠΎΠΌΡ Π²Π°ΠΆΠ½ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΈΡ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ. ΠΠΎΠ±Π°Π²ΠΈΠ² ΠΊ Π½ΠΈΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ CSS ΠΈΠ»ΠΈ JS, Π²Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΈ Π²ΠΎΡΡ ΠΈΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ. β
ΠΡΠ°ΠΊ, Π²ΠΎΡ ΡΠΏΠΈΡΠΎΠΊ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΈΠ· Π»ΡΡΡΠΈΡ ΡΠ»Π°ΠΆΠΊΠΎΠ² CSS, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ Π½Π°ΡΠ΅Π» Π½Π° CodePen, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠΌΠΎΡΡΠ΅ΡΡΡΡ Π² Π²Π°ΡΠΈΡ ΡΠΎΡΠΌΠ°Ρ .
ΠΠ°ΡΠ°Π΄ΠΎΠΊΡ ΠΆΠΈΠ·Π½ΠΈ | Π€Π»Π°ΠΆΠΊΠΈ CSS
Π£Π²ΠΈΠ΄Π΅Π» ΡΡΠΎ ΠΈ ΠΏΠΎΠ΄ΡΠΌΠ°Π», ΡΡΠΎ Π±ΡΠ»ΠΎ Π±Ρ Π·Π΄ΠΎΡΠΎΠ²ΠΎ Π²ΠΎΡΡΠΎΠ·Π΄Π°ΡΡ Π΅Π³ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ JS.
Π£Π²ΠΈΠ΄Π΅ΡΡ ΠΏΠ°ΡΠ°Π΄ΠΎΠΊΡ ΠΆΠΈΠ·Π½ΠΈ Π² Π·Π°Π³ΠΎΠ½Π΅ | Π€Π»Π°ΠΆΠΊΠΈ CSS ΠΎΡ havardob (@havardob) Π½Π° CodePen.
Pretty Pure CSS Π€Π»Π°ΠΆΠΊΠΈ ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΡΠΎΡΡΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ ΠΎΡΠΎΡΠΈΡ ΡΠ»Π°ΠΆΠΊΠΎΠ² ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS, Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΠΈ ΡΠ²Π΅ΡΠΎΠΌ.
Π‘ΠΌ. Π€Π»Π°ΠΆΠΊΠΈ ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ Pen Pretty Pure CSS ΠΎΡ cesque (@cesque) Π½Π° CodePen.
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ CSS-ΡΠ»Π°ΠΆΠΊΠΈ ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ CSS-ΡΠ»Π°ΠΆΠΊΠΈ ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ Π·Π°ΠΏΠ°ΡΠ½ΡΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π±Π΅Π· ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΈ ΠΌΠ°ΡΡΠΈΠ²Π° ΡΡΡΠΈΡ ΠΎΠ².
Π‘ΠΌ. Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ CSS-ΡΠ»Π°ΠΆΠΊΠΈ ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ Pen ΠΎΡ TommiTikall (@TommiTikall) Π½Π° CodePen.
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π°ΠΆΠΎΠΊ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π°ΠΆΠΎΠΊ Π½Π° ΡΠΈΡΡΠΎΠΌ HTML ΠΈ CSS, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π΄Π»Ρ Π°ΡΠ΄ΠΈΡΠΎΡΠΈΠΈ Π±Π»ΠΎΠ³Π° North of Rapture.
Π‘ΠΌ. Π€Π»Π°ΠΆΠΎΠΊ Pen Pure CSS Animated by north-of-rapture (@north-of-rapture) Π½Π° CodePen.
Jelly Checkbox
ΠΠ΅Π»Π΅ΠΎΠ±ΡΠ°Π·Π½Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ»Π°ΠΆΠΊΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΈΡΡΠΎΠ³ΠΎ CSS.
Π‘ΠΌ. Π€Π»Π°ΠΆΠΎΠΊ Pen Jelly ΠΎΡ andreasstorm (@andreasstorm) Π½Π° CodePen.
ΠΡΠΎΡΡΠΎΠΉ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΡΠ»Π°ΠΆΠΊΠΎΠ²
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΡΡΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉ ΡΠ»Π°ΠΆΠΊΠΎΠ² Ρ ΠΌΡΠ»ΡΡΡΡΠ½ΡΠΌΠΈ Π½Π°Π΄ΠΏΠΈΡΡΠΌΠΈ.
Π‘ΠΌ. ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΡΠ»Π°ΠΆΠΊΠΎΠ² Pen Simple ΠΎΡ Art292 (@Art292) Π½Π° CodePen.
Π€Π»Π°ΠΆΠΎΠΊ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ CSS
ΠΠ½ΠΎΠΏΠΊΠ° ΡΠ»Π°ΠΆΠΊΠ° ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ CSS Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΌ-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΌ.
Π‘ΠΌ. Π€Π»Π°ΠΆΠΎΠΊ Pen Full CSS ΠΎΡ TimGuignard (@TimGuignard) Π½Π° CodePen.
ΠΠΎΠ»Π½ΠΎΡΡΡΡ CSS: Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΡΠ»Π°ΠΆΠΊΠΈ, ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΏΠΎΠ»Ρ Π²ΡΠ±ΠΎΡΠ°
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠ΅ΡΡΡΠ΅ ΡΠ»Π°ΠΆΠΊΠ°: ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΉ, Π½Π΅ ΠΎΡΠΌΠ΅ΡΠ΅Π½Π½ΡΠΉ, ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΉ ΠΈ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΉ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠ΅Π½Π½Π°Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ CodePen Π΄Π»Ρ: http://kyusuf. com/post/completely-css- ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅-ΡΠ»Π°ΠΆΠΊΠΈ-ΡΠ°Π΄ΠΈΠΎ-ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΏΠΎΠ»Ρ Π²ΡΠ±ΠΎΡΠ°
ΠΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠΌ. ΠΏΠ΅ΡΠΎ CSS: Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΡΠ»Π°ΠΆΠΊΠΈ, ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΠΏΠΎΠ»Ρ Π²ΡΠ±ΠΎΡΠ° ΠΎΡ KenanYusuf (@KenanYusuf) Π½Π° CodePen.
Π Π΅Π°Π»ΠΈΡΡΠΈΡΠ½ΡΠΉ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ CSS Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ»Π°ΠΆΠΊΠΎΠ²
Π Π΅Π°Π»ΠΈΡΡΠΈΡΠ½ΡΠΉ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ CSS Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ»Π°ΠΆΠΊΠΎΠ² HTML.
Π‘ΠΌ. ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ Pen Realistic CSS Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π°ΠΆΠΊΠ° ΠΎΡ nathantaylor (@nathantaylor) Π½Π° CodePen.
Π‘ΡΠ°ΡΡΠ»ΠΈΠ²ΡΠ΅ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠ΅ ΡΠ»Π°ΠΆΠΊΠΈ (ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΎ)
Π‘ΡΠ°ΡΡΠ»ΠΈΠ²ΡΠ΅ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠ΅ ΡΠ»Π°ΠΆΠΊΠΈ Π΄Π»Ρ ΠΆΠ΅Π»Π΅, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΈΡΡΠΎΠΉ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
Π‘ΠΌ. Pen Happy Little Checkboxes (ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΎ) ΠΎΡ landb (@landb) Π½Π° CodePen.
ΠΠ½ΠΎΠΏΠΊΠΈ-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ½ΠΎΠΏΠΎΠΊ-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ: ΡΠ²Π΅ΡΠ»Π°Ρ, iOS, Π½Π°ΠΊΠ»ΠΎΠ½Π½Π°Ρ, ΠΏΠ»ΠΎΡΠΊΠ°Ρ ΠΈΠ»ΠΈ ΡΠ»ΠΈΠΏ.
Π‘ΠΌ. ΠΠ½ΠΎΠΏΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Pen Pure CSS ΠΎΡ mallendeo (@mallendeo) Π½Π° CodePen.
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ All-CSS (Π²Π·Π»ΠΎΠΌ ΡΠ»Π°ΠΆΠΊΠ°)
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ all-CSS, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²Π·Π»ΠΎΠΌΠ° HTML-ΡΠ»Π°ΠΆΠΊΠ°.
Π‘ΠΌ. ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ Pen All-CSS Toggle Switch (Checkbox Hack) ΠΎΡ mburnette (@mburnette) Π½Π° CodePen.
Switchy Checkbox
ΠΠ»ΠΎΡΠΊΠΈΠΉ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΉ ΡΠ»Π°ΠΆΠΎΠΊ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ JS.
Π‘ΠΌ. ΡΠ»Π°ΠΆΠΎΠΊ Pen Switchy ΠΎΡ tiffachoo (@tiffachoo) Π½Π° CodePen.
Π€Π»Π°ΠΆΠΎΠΊ Google Material Style (ΡΠΎΠ»ΡΠΊΠΎ CSS)
Π€Π»Π°ΠΆΠΊΠΈ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π° ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠ»Π°ΠΆΠΊΠΎΠ² ΠΏΠΎΠ»ΠΈΠΌΠ΅ΡΠ°.
Π‘ΠΌ. Π€Π»Π°ΠΆΠΎΠΊ Pen Google Material Style (ΡΠΎΠ»ΡΠΊΠΎ CSS) ΠΎΡ Sambego (@Sambego) Π½Π° CodePen.
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π°ΠΆΠΎΠΊ CSS
ΠΠ½Π΅ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΠ»ΠΎΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΠ»Π°ΠΆΠΊΠΈ, Π½ΠΎ ΠΏΠΎΡΠ»Π΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΡΠΏΠΈΠ·ΠΎΠ΄Π° ΠΏΠΎΠ΄ΠΊΠ°ΡΡΠ° Β«Π Π°Π·Π³ΠΎΠ²ΠΎΡΡ ΠΎ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π΅Β» Ρ ΡΠ΅ΡΠΈΠ», ΡΡΠΎ ΠΌΠΎΠ³Ρ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ.
Π‘ΠΌ. ΡΠ»Π°ΠΆΠΎΠΊ Pen Custom CSS Checkbox ΠΎΡ derekmorash (@derekmorash) Π½Π° CodePen.
ΠΠ½ΠΎΠΏΠΊΠ°-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ Jquery
ΠΠ½ΠΎΠΏΠΊΠ°-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ Π² ΡΡΠΈΠ»Π΅ iOS Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ jQuery ΠΈ CSS.
Π‘ΠΌ. ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Pen JQuery ΠΎΡ nikhil8krishnan (@nikhil8krishnan) Π½Π° CodePen.
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΡΡΠΊΠΎΡΡΠΈ ΠΈ Π³Π°ΠΌΠΌΡ (Π΄Π΅Π½Ρ ΠΈ Π½ΠΎΡΡ)
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ Π΄Π½Ρ ΠΈ Π½ΠΎΡΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ JS ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ CSS.
Π‘ΠΌ. ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΡΡΠΊΠΎΡΡΠΈ ΠΈ Π³Π°ΠΌΠΌΡ ΠΏΠ΅ΡΠ° (Π΄Π΅Π½Ρ ΠΈ Π½ΠΎΡΡ) ΠΎΡ JosephShenton (@JosephShenton) Π½Π° CodePen.
ΠΠ²ΠΎΠ΄Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ β ΡΠ»Π°ΠΆΠΊΠΈ/ΡΠ°Π΄ΠΈΠΎ/ΡΡΠΌΠ±Π»Π΅ΡΡ
ΠΠ°Π±ΠΎΡ Π²Π²ΠΎΠ΄ΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ , ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΡΠ»Π°ΠΆΠΊΠΈ HTML, ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ ΠΈ ΡΡΠΌΠ±Π»Π΅ΡΡ.
Π‘ΠΌ. ΠΡ ΠΎΠ΄Π½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΠΏΠ΅ΡΠ° β ΡΠ»Π°ΠΆΠΎΠΊ / ΡΠ°Π΄ΠΈΠΎ / ΡΡΠΌΠ±Π»Π΅ΡΡ ΠΎΡ jcgilmore2 (@jcgilmore2) Π½Π° CodePen.
ΠΠ»ΠΎΡΠΊΠΈΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ β ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ»Π°ΠΆΠΊΠ°
ΠΡΠΈΠ±ΠΊΠ° ΡΠ»Π°ΠΆΠΊΠ° ΠΏΠ»ΠΎΡΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½Π°! ΠΠΈΠ»ΠΊΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΠ»ΠΎΡΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° β Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΡΠ»Π°ΠΆΠΊΠΈ ΠΎΡ @geoffrey_crofte.
Π‘ΠΌ. ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Pen Flat β ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ»Π°ΠΆΠΊΠ° ΠΎΡ ARS (@ARS) Π½Π° CodePen.
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ Gooey CSS
ΠΡΠΈΠΌΠ΅Ρ ΡΠ»Π°ΠΆΠΊΠ° Gooey Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ CSS.
Π‘ΠΌ. ΡΡΠΌΠ±Π»Π΅Ρ Pen Gooey CSS ΠΎΡ onediv (@onediv) Π½Π° CodePen.
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ Pure CSS
ΠΠΎΠ»ΡΡΠ°Π΅ΠΌ ΡΠ΄ΠΎΠ²ΠΎΠ»ΡΡΡΠ²ΠΈΠ΅ ΠΎΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² π
Π‘ΠΌ. ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ Pen Pure CSS ΠΎΡ rgg (@rgg) Π½Π° CodePen.
Π‘ΡΠΈΠ»Ρ ΡΠ»Π°ΠΆΠΊΠ° 2.0 Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ SCSS
ΠΠΊΠΊΡΡΠ°ΡΠ½ΡΠΉ ΡΡΠΈΠ»Ρ ΡΠ»Π°ΠΆΠΊΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ SCSS.
0 With SCSS»> Π‘ΠΌ. Π‘ΡΠΈΠ»Ρ 2.0 ΡΠ»Π°ΠΆΠΊΠ° ΠΏΠ΅ΡΠ° ΡΠΎ SCSS ΠΎΡ lorenzodianni (@lorenzodianni) Π½Π° CodePen.ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΡΠΈΠ»Ρ Π²Π²ΠΎΠ΄Π°
Π ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ Π²Ρ ΠΎΠ΄Π½ΡΡ Π΄Π°Π½Π½ΡΡ Π΄Π»Ρ ΡΠ»Π°ΠΆΠΊΠΎΠ²/ΡΠ°Π΄ΠΈΠΎ Π΄Π»Ρ ΠΈΡ ΠΎΡΠΌΠ΅ΡΠ΅Π½Π½ΡΡ ΠΈ Π½Π΅ ΠΎΡΠΌΠ΅ΡΠ΅Π½Π½ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ, ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΉ Π·Π°ΠΏΠ°ΡΠ½ΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΡΠΈΠ»Ρ Π²Π²ΠΎΠ΄Π° Π±Π΅Π· Π΄Π΅Π»Π°ΡΡ ΡΡΡΠ°Π½Π½ΡΠ΅ ΡΠ±ΡΠΎΡΡ. ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π·Π°ΠΌΠ΅ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ ΡΠ²Π»ΡΡΡΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠ΅ Π΄Π»Ρ Π²Ρ ΠΎΠ΄Π½ΡΡ Π΄Π°Π½Π½ΡΡ Π² Firefox. ΠΡΠΎΠ²Π΅ΡΡΡΠ΅ ΡΡΠΎ Π² Chrome ΠΈ Safari.
Π‘ΠΌ. Pen Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΡΠΈΠ»Ρ Π²Π²ΠΎΠ΄Π° ΠΎΡ abergin (@abergin) Π½Π° CodePen.
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π°ΠΆΠΎΠΊ Ρ ΠΌΠ°ΡΠΊΠ΅ΡΠΎΠΌ SVG
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: ΠΡΠΆΠ½Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΡΠ»Π°ΠΆΠΊΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ Π² IE9, Chrome, Safari ΠΈ Firefox.
Π‘ΠΌ. ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π°ΠΆΠΎΠΊ Pen Ρ ΠΌΠ°ΡΠΊΠ΅ΡΠΎΠΌ SVG ΠΎΡ rolchau (@rolchau) Π½Π° CodePen.
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ»Π°ΠΆΠΊΠ° CSS
Π’ΠΎΠ»ΡΠΊΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ CSS ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΈ Π½Π΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠ΅ ΡΠ»Π°ΠΆΠΊΠΈ.
Π‘ΠΌ. Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ»Π°ΠΆΠΊΠ° Pen CSS ΠΎΡ parcon (@parcon) Π½Π° CodePen.
Π€Π»Π°ΠΆΠΎΠΊ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ
Π Π΅ΠΌΠ΅ΠΉΠΊ ΡΠ»Π°ΠΆΠΊΠ° Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ ΠΠ°ΡΠΊΠ° ΠΡΠΌΠ±Π° Dribbble, ΡΠ½ΡΡΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ½ΠΎΠΌ! π
Π‘ΠΌ. Π€Π»Π°ΠΆΠΎΠΊ Pen Motion ΠΎΡ JonasBadalic (@JonasBadalic) Π½Π° CodePen.
Π€Π»Π°ΠΆΠΎΠΊ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ CSS
Π€Π»Π°ΠΆΠΎΠΊ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ HTML, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠΉ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ CSS.
Π‘ΠΌ. Π€Π»Π°ΠΆΠΎΠΊ CSS Pen Morphing ΠΎΡ sderoij (@sderoij) Π½Π° CodePen.
Checkcircle #codevember 1
ΠΡΠΎΡΡΠΎΠΉ ΡΠ»Π°ΠΆΠΎΠΊ Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠΌ CSS Π΄Π»Ρ Π΅Π³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ.
Π‘ΠΌ. ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠΉ ΠΊΡΡΠΆΠΎΠΊ ΠΏΠ΅ΡΠ° #codevember 1 ΠΎΡ abensur (@abensur) Π½Π° CodePen.
ΡΠ»Π°ΠΆΠΎΠΊ, ΡΠ»Π°ΠΆΠΎΠΊ css, ΡΡΠΈΠ»Ρ ΡΠ»Π°ΠΆΠΊΠ°, css, ΡΡΠΈΠ»Ρ ΡΠ»Π°ΠΆΠΊΠ° css, ΠΏΡΠΈΠΌΠ΅ΡΡ css, ΡΠ»Π°ΠΆΠΎΠΊ ΡΠΎΡΠΌΡ, ΡΠ»Π°ΠΆΠΎΠΊ html, ΡΠ»Π°ΠΆΠΎΠΊ html ΠΎΡΠΌΠ΅ΡΠ΅Π½, ΡΠ»Π°ΠΆΠΎΠΊ ΡΠΈΠΏΠ° Π²Π²ΠΎΠ΄Π°, ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ css
41 Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΡΡΡΠ΅ΠΊΡΡ ΡΠ»Π°ΠΆΠΊΠΎΠ² CSS, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ Π²Π΄ΠΎΡ Π½ΠΎΠ²Π»ΡΡΡ Π²Π°Ρ Π² 2023 Π³ΠΎΠ΄Ρ
Π€Π»Π°ΠΆΠΊΠΈ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡ Π² Π½Π°ΡΠΈΡ ΡΠΈΡΡΠ΅ΠΌΠ°Ρ ΡΠΆΠ΅ ΠΎΡΠ΅Π½Ρ Π΄ΠΎΠ»Π³ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ. ΠΡ ΠΌΠΎΠ³Π»ΠΈ Π²ΠΈΠ΄Π΅ΡΡ ΠΈΡ Π² ΡΠΎΡΠΌΠ°Ρ , ΠΊΡΠΏΠΎΠ½Π°Ρ , Π»ΠΈΡΡΠΎΠ²ΠΊΠ°Ρ ΠΈ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ ΠΏΠ΅ΡΠ°ΡΠ½ΡΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°Ρ . Π€Π»Π°ΠΆΠΊΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΠ΅Π½Ρ Π² ΡΠΈΡΡΠΎΠ²ΠΎΠΉ ΡΠΎΡΠΌΠ°Ρ, ΡΡΠΎΠ±Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ Β«Π΄Π°Β» ΠΈΠ»ΠΈ Β«Π½Π΅ΡΒ». ΠΠ·-Π·Π° Π΄Π²ΠΎΠΈΡΠ½ΠΎΠ³ΠΎ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠ° ΡΠ»Π°ΠΆΠΊΠΎΠ² ΠΎΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π² ΠΏΠ°Π½Π΅Π»ΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΈ ΠΌΠ΅Π½Ρ Π½Π°ΡΡΡΠΎΠ΅ΠΊ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½Π°Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ° ΡΠΈΠ»ΡΠ½ΠΎ ΡΠ²ΠΎΠ»ΡΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π»Π° ΠΎΡ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠΌΠΏΠ°ΠΊΡΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΊ Π±ΠΎΠ»Π΅Π΅ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΌΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΡΡΠ΅ΠΊΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΠ»Π°ΠΆΠΊΠΎΠ² CSS ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠ΅Π½Π°ΡΠΈΠ΅Π² CSS3, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ Π½Π° ΡΠ²ΠΎΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°Ρ , Π² ΡΠΎΡΠΌΠ°Ρ ΠΈ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠ»ΠΈ Π²Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π²Π·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° Π½Π°ΡΠΈ ΠΌΠ°ΠΊΠ΅ΡΡ MacBook ΠΈ ΠΌΠ°ΠΊΠ΅ΡΡ iPhone, ΡΡΠΎΠ±Ρ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ ΡΠ²ΠΎΠΈ ΠΏΡΠΎΠ΅ΠΊΡΡ Π°ΡΠ΄ΠΈΡΠΎΡΠΈΠΈ ΠΈΠ»ΠΈ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ.
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΈΠ½ΡΠ΅Π»Π»Π΅ΠΊΡΡΠ°Π»ΡΠ½ΡΡ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² ΡΠ»Π°ΠΆΠΊΠΎΠ² ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉ CSS, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅. Π ΡΡΠΎΠΌ ΡΠΏΠΈΡΠΊΠ΅ Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΡΡΠ΅, ΡΠ°ΠΊ ΠΈ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ CSS-ΡΠ»Π°ΠΆΠΊΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π²Ρ ΠΎΡΠΌΠ΅ΡΠΈΠ»ΠΈ ΠΈΡ Π²ΡΠ΅.
Π§Π΅ΠΊΠ±ΠΎΠΊΡ V04
V04 β ΡΡΠΈΠ»ΡΠ½ΡΠΉ CSS-ΡΠ»Π°ΠΆΠΎΠΊ.
ΠΠ°ΠΆΠ΄Π°Ρ Π·Π°ΠΏΠΈΡΡ ΡΠ»Π°ΠΆΠΊΠ° ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π΅, ΠΏΠΎΡΡΠΎΠΌΡ Ρ Π²Π°Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΌΠ΅ΡΡΠ° Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΡΠ»Π°ΠΆΠΊΠ°. ΠΡΠ΅ ΠΎΠ΄Π½ΠΈΠΌ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΏΡΠ°ΠΊΡΠΈΡΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΡΠΎΠ³ΠΎ ΡΠ°Π±Π»ΠΎΠ½Π° ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ Π»Π΅Π³ΠΊΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Π½ΠΈΠΌ ΠΊΠ°ΠΊ Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΌ, ΡΠ°ΠΊ ΠΈ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΡΠΊΡΠ°Π½ΠΎΠΌ. ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ CSS-ΡΠ»Π°ΠΆΠΊΠ°, ΡΡΠΎΡ Π±ΡΠ΄Π΅Ρ Ρ ΠΎΡΠΎΡΠΈΠΌ Π²ΡΠ±ΠΎΡΠΎΠΌ. Π€Π°ΠΉΠ»Ρ ΠΊΠΎΠ΄Π° ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡΡΡ Π² Π²ΠΈΠ΄Π΅ Π·Π°Π³ΡΡΠΆΠ°Π΅ΠΌΡΡ ΡΠ°ΠΉΠ»ΠΎΠ², ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ ΡΠ΄ΠΎΠ±Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π€Π»Π°ΠΆΠΎΠΊ CSS V05
ΠΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ»Π°ΠΆΠΊΠ° CSS ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠΊΠΈ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ. ΠΡΠ»ΠΈ Π²Π°Ρ ΡΠ»Π°ΠΆΠΎΠΊ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ Π·Π½Π°ΡΠΎΠΊ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π·Π°ΠΏΠΈΡΠ΅ΠΉ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ.
ΠΠΎΠΌΠΈΠΌΠΎ Π·Π½Π°ΡΠΊΠΎΠ² ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ, ΡΡΠΎΡ ΡΠ»Π°ΠΆΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ ΠΊΠ»Π°ΡΡΠ½ΡΠΉ ΠΈ ΠΊΡΠ°ΡΠΎΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. ΠΠ΅ΡΠΊΠ° ΡΠ»Π°ΠΆΠΊΠ° Π²ΡΠ°ΡΠ°Π΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΠ΅ ΡΠ»Π°ΠΆΠΎΠΊ, Π° ΡΡΠΊΠΎ-ΡΠΈΠΎΠ»Π΅ΡΠΎΠ²ΡΠΉ ΡΠ²Π΅Ρ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π°ΡΠ΄ΠΈΡΠΎΡΠΈΠΈ Π»Π΅Π³ΠΊΠΎ Π·Π°ΠΌΠ΅ΡΠΈΡΡ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π² ΡΡΠΎΠΌ ΡΠ°Π±Π»ΠΎΠ½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½ΠΎΠ²Π΅ΠΉΡΠΈΠΉ ΡΡΠ΅Π½Π°ΡΠΈΠΉ CSS3, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½ΡΠΆΠ½ΡΡ ΡΠ²Π΅ΡΠΎΠ²ΡΡ ΡΡ Π΅ΠΌΡ ΠΈ ΠΏΡΠΈΠ΄Π°ΡΡ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎΡΡΡ ΡΠ²ΠΎΠ΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ²Π΅ΡΡΠΈΡ
Π€Π»Π°ΠΆΠΎΠΊ V03
ΠΠ»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ ΠΈΡΠ΅Ρ CSS-ΡΠ»Π°ΠΆΠΎΠΊ Π² ΡΡΠΈΠ»Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΡΠΎΡ Π²Π°ΡΠΈΠ°Π½Ρ Π±ΡΠ΄Π΅Ρ Ρ ΠΎΡΠΎΡΠΈΠΌ Π²ΡΠ±ΠΎΡΠΎΠΌ.
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ Π΄Π²Π° ΡΠ»Π°ΠΆΠΊΠ° CSS. Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ Ρ ΠΎΡΠΎΡΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ» Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π² ΡΡΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²ΡΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ-ΡΠ»Π°ΠΆΠΊΠΈ Π² Π»ΡΠ±ΠΎΠΉ ΡΠ°ΡΡΠΈ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°/ΡΠΎΡΠΌΡ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΡΡΠΎΡ ΡΠ»Π°ΠΆΠΎΠΊ Π² Π²ΠΈΠ΄Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ ΠΊΠ°ΠΊ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ².
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π€Π»Π°ΠΆΠΎΠΊ Simple CSS V15
V15 ΠΈΠΌΠ΅Π΅Ρ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΡΠΉ ΠΈ ΠΏΡΠΎΡΡΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ»Π°ΠΆΠΊΠ° CSS.
Π§ΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΡΡΠΎΡ CSS-ΡΠ»Π°ΠΆΠΎΠΊ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ, ΡΠ°ΠΊ ΡΡΠΎ Π΅Π³ΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ. Π€Π»Π°ΠΆΠΎΠΊ ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π² Π³Π°Π»ΠΎΡΠΊΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ Π½Π° ΠΏΠΎΠ»Π΅. Π ΡΡΠΎΠΌ ΡΠ°Π±Π»ΠΎΠ½Π΅ Π½Π°ΡΡΠ΄Ρ Ρ ΠΎΠ±ΡΡΠ½ΡΠΌΠΈ ΡΠ»Π°ΠΆΠΊΠ°ΠΌΠΈ ΡΠ°ΠΊΠΆΠ΅ ΡΠΊΠ°Π·Π°Π½Ρ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠ΅ ΡΠ»Π°ΠΆΠΊΠΈ ΠΈ ΡΠ»Π°ΠΆΠΊΠΈ Ρ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΌΠΈ ΠΈ ΠΎΡΠΌΠ΅ΡΠ΅Π½Π½ΡΠΌΠΈ ΡΠ»Π°ΠΆΠΊΠ°ΠΌΠΈ. Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΡΠΏΡΠΎΡΡΠΈΠ» ΡΡΠ΅Π½Π°ΡΠΈΠΉ ΠΊΠΎΠ΄Π°, ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π² ΡΠ»Π°ΠΆΠΎΠΊ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π²Π°ΡΠΈΠΌΠΈ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡΠΌΠΈ ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π΄Π΅ΠΌΠΎ-Π·Π°Π³ΡΡΠ·ΠΊΠ°
Smash
Smash β ΡΡΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΉ Π½Π°Π±ΠΎΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°. Π ΡΡΠΎΠΌ Π½Π°Π±ΠΎΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Π½ΠΎΠ²Π΅ΠΉΡΠΈΠ΅ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ CSS3 ΠΈ Bootstrap 4, ΠΏΠΎΡΡΠΎΠΌΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ Π½Π°Π±ΠΎΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π±Π°Π·ΠΎΠ²ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½Π΅ ΡΡΠ°ΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. Π ΡΡΠΎΠΌ ΠΏΠ°ΠΊΠ΅ΡΠ΅ Π΅ΡΡΡ Π²ΡΠ΅, ΠΎΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡΠΈΠ·ΡΠ²Π° ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π΄ΠΎ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠΎΠ². Π ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ ΡΠ»Π°ΠΆΠΊΠΎΠ² CSS Π²Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ ΡΠ΅ΡΡΡΠ΅ ΡΠ°Π·Π½ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠ»Π°ΠΆΠΊΠΎΠ². ΠΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ ΠΎΠ±ΡΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ»Π°ΠΆΠΊΠ°, Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΌ ΡΠ»Π°ΠΆΠΊΠΎΠΌ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΌ ΡΠ»Π°ΠΆΠΊΠΎΠΌ. Π₯ΠΎΡΡ ΡΡΠΎ Π½Π°Π±ΠΎΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΡΡΡΠΊΡΡΡΠ° ΠΊΠΎΠ΄Π° ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠ°; ΠΏΠΎΡΡΠΎΠΌΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π½Π°ΠΉΡΠΈ ΠΊΠΎΠ΄ Π½ΡΠΆΠ½ΡΡ Π²Π°ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π²Π°ΡΠΈΠΌΠΈ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌΠΈ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ΅ΠΎΠΌΠΎΡΡΠ½ΡΠ΅ ΡΠ»Π°ΠΆΠΊΠΈ
ΠΠΈΠ·Π°ΠΉΠ½ Π½Π΅ΠΎΠΌΠΎΡΡΠ½ΡΡ ΡΠ»Π°ΠΆΠΊΠΎΠ² ΡΠ²Π»ΡΠ΅ΡΡΡ Ρ ΠΎΡΠΎΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π³Π»ΡΠ±ΠΈΠ½Ρ ΠΈ ΡΠ΅Π½Π΅ΠΉ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΌ ΡΠΊΡΠΈΠΏΡΠ΅ CSS. Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΠΏΠΎΠΈΠ³ΡΠ°Π» ΡΠΎ ΡΠ²Π΅ΡΠΎΠΌ ΠΈ ΡΠ΅Π½ΡΡ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ΅Π°Π»ΠΈΡΡΠΈΡΠ½ΡΠΉ ΠΎΠΏΡΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΠΎΡΠ½ΠΎΠ²Π°Π½Π° Π½Π° ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ-ΡΠ»Π°ΠΆΠΊΠ° Π² Π»ΡΠ±ΠΎΠΉ ΡΠ°ΡΡΠΈ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°ΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²ΡΠ²ΠΎΠ΄ΠΈΡ Π²Π°Ρ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π½Π° Π½ΠΎΠ²ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ, Π° ΡΠ°ΠΊΠΆΠ΅ Π²ΡΠ΄Π΅Π»ΡΠ΅Ρ Π²Π°Ρ Π²Π΅Π±-ΡΠ°ΠΉΡ ΡΡΠ΅Π΄ΠΈ ΡΠ°ΠΉΡΠΎΠ² Π²Π°ΡΠΈΡ ΠΊΠΎΠ½ΠΊΡΡΠ΅Π½ΡΠΎΠ².
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠΈΠ·Π°ΠΉΠ½ ΡΠ»Π°ΠΆΠΊΠΎΠ² CSS
ΠΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠ»Π°ΠΆΠΊΠΎΠ² Π΄Π°Π΅Ρ Π²Π°ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΈ ΡΠ½ΡΡΠΈΡ ΡΠ»Π°ΠΆΠΊΠ°. Π ΡΡΠΎΠΌ ΠΏΠ°ΠΊΠ΅ΡΠ΅ Π΅ΡΡΡ Π΄Π²Π΅ ΡΠ°Π·Π½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ; ΠΎΠ±Π° ΠΎΠ½ΠΈ ΠΏΡΠΎΡΡΡ ΠΈ ΡΠ»Π΅Π³Π°Π½ΡΠ½Ρ. Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π²Π°ΡΠΈΡ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ²Π΅ΡΠ»ΡΡ ΠΈΠ»ΠΈ ΡΠ΅ΠΌΠ½ΡΡ Π²Π΅ΡΡΠΈΡ. ΠΠ΅ΡΡ ΡΡΠ΅Π½Π°ΡΠΈΠΉ ΠΊΠΎΠ΄Π° Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π²Π°ΠΌ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ CodePen. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΠΌΠ΅ΡΡΠ°ΠΌΠΈ ΡΡΡΠ΅ΠΊΡΡ, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅, ΠΈΠ»ΠΈ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΈ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ Π² ΡΠ°ΠΌΠΎΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ CodePen.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π€Π»Π°ΠΆΠΎΠΊ Ρ mo.js
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ CSS-Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ»Π°ΠΆΠΊΠ°, ΡΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ Π²Π°Ρ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΠΈΡ. ΠΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ, ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΠΊΡΠΈΠΏΡ mo.js Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠ° ΠΏΠ»Π°Π²Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΡΡΠ΅ΠΊΡ ΠΏΡΠ·ΡΡΡ Π³Π»Π°Π΄ΠΊΠΈΠΉ ΠΈ Π½Π°ΡΡΠΎΡΡΠΈΠΉ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΡΠ»Π°ΠΆΠΎΠΊ. Π―ΡΠΊΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΡΠΎΠ±Ρ ΡΠ΅ΡΠΊΠΎ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» ΡΠ»Π°ΠΆΠΎΠΊ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π²ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠΌΠ°ΡΡΡΠΎΠ½Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°ΠΊΠΎΠ³ΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° Π±ΡΠ΄Π΅Ρ ΡΡΠΏΠΎΠΊΠ°ΠΈΠ²Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΡΠ»ΠΈ Π²Ρ ΡΡΠ²ΡΡΠ²ΡΠ΅ΡΠ΅, ΡΡΠΎ mo.js ΡΡΡΠΆΠ΅Π»ΠΈΡ Π²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ ΠΊΠΎΠ΄ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π²Π°ΡΠΈΠΌΠΈ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡΠΌΠΈ. ΠΠ΅ΡΡ ΡΡΠ΅Π½Π°ΡΠΈΠΉ ΠΊΠΎΠ΄Π° ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π²Π°ΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄ Π² ΡΠ²ΠΎΠ΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎ
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π°ΠΆΠΎΠΊ
ΠΡΠΎ ΠΏΡΠΈΠΌΠ΅Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠ»Π°ΠΆΠΊΠ° Π½Π° ΡΠΈΡΡΠΎΠΌ CSS. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠΎΡΡΡΡ ΠΈ Π»Π΅Π³ΠΊΠΈΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ² ΠΊΠΎΠ΄Π° ΡΠΏΡΠΎΡΡΠΈΡ Π²Π°ΡΡ ΡΠ°Π±ΠΎΡΡ. Π’Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΊΠΎΠ΄, Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΡΡΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠ»Π°ΠΆΠΊΠ° ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΡΠ°ΡΡΡΡ ΠΏΡΠΎΡΡΡΠΌΠΈ. ΠΡΡΠ΅ΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π±ΡΡΡΡΡΠΉ ΠΈ ΠΏΠ»Π°Π²Π½ΡΠΉ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π΄Π°ΠΆΠ΅ Π½Π΅ Π·Π°ΠΌΠ΅ΡΡΡ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΡ Π³Π°Π»ΠΎΡΠΊΠΈ. ΠΠ·-Π·Π° ΡΡΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π°ΠΆΠΎΠΊ Π² Π»ΡΠ±ΠΎΠΉ ΡΠΎΡΠΌΠ΅, Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΠΈ ΡΠ΅Π»Π΅Π²ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΡΠ°Π»ΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ, ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ Π½Π΅ ΡΠΎΡΡΠ΅Π΄ΠΎΡΠΎΡΠΈΠ»ΡΡ Π½Π° ΡΠ²Π΅ΡΠ°Ρ ΠΈ ββΡΡΠΈΡΡΠ°Ρ . ΠΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²Π΅ΡΠΎΠ²ΡΡ ΡΡ Π΅ΠΌΡ ΠΈ Π½ΡΠΆΠ½ΡΠ΅ ΡΡΠΈΡΡΡ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ·Π΄Π°Π½ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΡΠΊΡΠΈΠΏΡΠ° CSS3, ΠΎΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π²ΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ²Π΅ΡΠ° ΠΈ ΡΡΠΈΡΡΡ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎ
Π’ΠΎΠ»ΡΠΊΠΎ CSS ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ»Π°ΠΆΠΊΠ° ΡΠΏΠΈΡΠΊΠ° Π΄Π΅Π»
ΠΠ· ΡΠ°ΠΌΠΎΠ³ΠΎ Π½Π°Π·Π²Π°Π½ΠΈΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠ»Π°ΠΆΠΊΠ° ΡΠΏΠΈΡΠΊΠ° Π΄Π΅Π». Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ» ΠΊΠ°ΠΊ Π³Π°Π»ΠΎΡΠΊΡ, ΡΠ°ΠΊ ΠΈ ΡΡΡΠ΅ΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠ½ΡΡΠΈΡ Π³Π°Π»ΠΎΡΠΊΠΈ. ΠΠΎΠ³Π΄Π° Π²Ρ ΡΡΠ°Π²ΠΈΡΠ΅ Π³Π°Π»ΠΎΡΠΊΡ, Π²Ρ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ ΡΡΡΠ΅ΠΊΡ Π·Π°ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΡ, Π½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ ΡΡΡΠ΅ΠΊΡ ΠΏΠΎΠ±ΡΡΠΊΡΡΠΊΠΈ Π΄Π»Ρ Π³Π°Π»ΠΎΡΠΊΠΈ, ΡΡΠΎΠ±Ρ ΡΠ΅ΡΠΊΠΎ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΠ» Π·Π°Π΄Π°ΡΡ. Π§ΡΠΎΠ±Ρ Π΄Π°ΡΡ Π²Π°ΠΌ ΡΡΠΎΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ, ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΠΊ javascript Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΊΠΎΠ΄ΠΎΠΌ CSS3. Π€ΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π²Π°ΠΌ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ CodePen. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ΄Π΅Π»Π°Π» ΠΏΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΡ Π² ΠΊΠΎΠ΄Π΅, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ Π»Π΅Π³ΡΠ΅ ΠΏΠΎΠ½ΡΡΡ ΠΊΠΎΠ΄. ΠΡΠ»ΠΈ Π²Ρ Π½ΠΎΠ²ΠΈΡΠΎΠΊ, ΡΡΠΎΡ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° ΡΠ»Π°ΠΆΠΊΠ° CSS ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ½ΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ²Π΅ΡΡΠΈΡ
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΠ»Π°ΠΆΠΊΠΈ SVG
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΡΡΡΠ΅Π½ΠΈΠ΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ»Π°ΠΆΠΎΠΊ, ΡΡΠΎΡ CSS-Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ»Π°ΠΆΠΊΠ° ΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Ρ Π½Π° Π²Π°Ρ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΠ΅. Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΡΡΠ΅ΠΊΡ Π·Π°ΡΠ΅Π½Π΅Π½ΠΈΡ Π²ΡΡΡΠ½ΡΡ, ΡΡΡΠ΅ΠΊΡ ΠΊΡΡΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΡΡΠ΅ΠΊΡ Π·Π°ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΡΠ»Π°ΠΆΠΊΠ°. ΠΠ°ΡΡΠ΄Ρ Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΡΠ»Π°ΠΆΠΊΠ° Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΠ°ΠΊ Π±ΡΠ»ΠΎ ΡΠΊΠ°Π·Π°Π½ΠΎ ΡΠ°Π½Π΅Π΅, ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ» Π²Π°ΠΌ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ ΡΠ»Π°ΠΆΠΊΠ°. ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Π°ΠΌ Π½ΡΠ°Π²ΠΈΡΡΡ, ΠΈ Π½Π°ΡΠ½ΠΈΡΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π°Π΄ Π½ΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π» Π²Π°ΡΠ΅ΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ. Π Π·Π°Π³ΡΡΠΆΠ°Π΅ΠΌΠΎΠΌ ΡΠ°ΠΉΠ»Π΅ Π²Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠΈΠΏΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π» ΡΠ°ΠΉΠ»Ρ ΠΈ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π°, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ Π»Π΅Π³ΠΊΠΎ Π½Π°ΠΉΡΠΈ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ²ΡΠΈΠΉΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Checkbox Challenge
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠ»Π°ΠΆΠΎΠΊ Ρ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΡΠΎΡ ΡΠ»Π°ΠΆΠΎΠΊ Π² Π»ΡΠ±ΠΎΠΉ ΡΠ°ΡΡΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°/ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈΠ·-Π·Π° Π΅Π³ΠΎ Π½Π΅ΡΠ»ΠΎΠΆΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΡΡΠ΅ΠΊΡ ΠΊΠΎΡΠΎΡΠΊΠΎΠΉ ΠΏΡΠ»ΡΡΠ°ΡΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ»Π°ΠΆΠΎΠΊ. ΠΠ°ΠΊ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½, ΡΡΠ΅Π½Π°ΡΠΈΠΉ ΠΊΠΎΠ΄Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡ. Π ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΊΡΠΈΠΏΡ CSS; ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄ Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅. ΠΡΠ΅ ΠΎΠ΄Π½ΠΈΠΌ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎΠΌ ΡΡΠΎΠ³ΠΎ Π»Π΅Π³ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ Π΅Π³ΠΎ Π΄Π°ΠΆΠ΅ Π² ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ ΠΈ ΡΠΎΡΠΌΡ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ²Π΅ΡΡΠΈΡ
Π€Π»Π°ΠΆΠΎΠΊ CSS Ripple/Wave
ΠΠ΄Π΅ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π²ΠΎΠ»Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π΄Π»Ρ ΡΠ»Π°ΠΆΠΊΠΎΠ², Π½ΠΎ ΡΡΠΎΡ Π²ΠΎΠ»Π½ΠΎΠ²ΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄Π»ΠΈΠ½Π½Π΅Π΅ ΠΈ Π΅Π³ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΡΡΠ²ΡΡΠ²ΠΎΠ²Π°ΡΡ. Π ΡΡΠΎΠΌ ΠΏΠ°ΠΊΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ Π΄Π°Π» Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ»Π°ΠΆΠΊΠΎΠ² ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉ β ΠΎΠ±Π° ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠΎΡΡΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. ΠΠ»Ρ ΡΠ»Π°ΠΆΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΊΡΠ΅ΡΡΠΈΠΊ. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΊΡΠ΅ΡΡΠΈΠΊ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΈΠΌΠ²ΠΎΠ», ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Π΅ΡΠ΅. ΠΠ°ΠΊ ΠΈ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π΄ΡΡΠ³ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² ΡΠ»Π°ΠΆΠΊΠΎΠ² CSS Π² ΡΡΠΎΠΌ ΡΠΏΠΈΡΠΊΠ΅, ΡΡΠΎΡ ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π½ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΡΠΊΡΠΈΠΏΡΠ° CSS. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π±Π΅Π· ΠΊΠΎΠ»Π΅Π±Π°Π½ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ²Π΅ΡΠ° ΠΈ ΡΡΡΠ΅ΠΊΡΡ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ²Π΅ΡΡΠΈΡ
Pure CSS Fancy Checkbox/Radio
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½Π°ΡΠΊΡΡΠΈΠ»ΠΈ ΠΎΠ΄Π½ΠΈ ΠΈ ΡΠ΅ ΠΆΠ΅ Π²ΠΎΠ»Π½ΠΎΠ²ΡΠ΅ ΠΈ ΡΠΏΡΡΠ³ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΡ, ΡΡΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΌΠΎΠΆΠ΅Ρ Π²Π°Ρ Π·Π°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°ΡΡ. ΠΠΎΠ³Π΄Π° Π²Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΠ΅ ΡΠ»Π°ΠΆΠΎΠΊ, Π²Π΅ΡΡ ΡΠ΅ΠΊΡΡ ΠΏΠΎΠ³Π»ΠΎΡΠ°Π΅ΡΡΡ ΡΠ»Π°ΠΆΠΊΠΎΠΌ ΠΈ ΡΠ΅ΡΠΊΠΎ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π²ΡΠ±ΡΠ°Π½Π½ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ. ΠΠΎΠ΄ΠΎΠ±Π½ΡΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ ΠΏΡΠΈΠ³ΠΎΠ΄ΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° Ρ Π²Π°Ρ ΠΌΠ°Π»ΠΎ ΠΌΠ΅ΡΡΠ°, Π½ΠΎ Π²Ρ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ. Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ ΠΊΠ°ΠΊ ΡΠ»Π°ΠΆΠΊΠΈ, ΡΠ°ΠΊ ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ. Π‘ΡΠ΅Π½Π°ΡΠΈΠΉ ΠΊΠΎΠ΄Π° ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΡ, ΡΡΠΎΠ±Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΌΠΎΠ³Π»ΠΈ ΠΏΠΎΠ½ΡΡΡ ΠΊΠΎΠ΄, ΠΏΠΎΡΡΠ°ΡΠΈΠ² Π½Π° Π΅Π³ΠΎ ΡΡΠ΅Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠΈΠ½ΡΡ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΡΠΎΡΡΠΎΠΉ ΡΠ»Π°ΠΆΠΎΠΊ
ΠΠ»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ Ρ ΠΎΡΠ΅Ρ, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ Π±ΡΠ»ΠΎ ΠΏΡΠ΅Π΄Π΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΠΈ Π½Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅ΡΡΡ ΠΏΡΠΈΡΡΠ΄Π»ΠΈΠ²ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ, ΡΡΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΠΈΡ Π²Π°Ρ. ΠΡΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΊΠ°ΠΊ ΡΠΌΠ΅ΡΠ°Π½Π½Π°Ρ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΡΠ»Π°ΠΆΠΊΠ° ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΠΈΠ·-Π·Π° Π΅Π³ΠΎ ΠΊΡΡΠ³Π»ΠΎΠΉ ΡΠΎΡΠΌΡ. ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠ°Π²ΠΈΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΠΊΠ°ΠΊ Π΄Π»Ρ ΡΠ»Π°ΠΆΠΊΠΎΠ², ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉ. ΠΠ°ΠΊ ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄ΡΡΠ³ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² ΡΠ»Π°ΠΆΠΊΠΎΠ² CSS Π² ΡΡΠΎΠΌ ΡΠΏΠΈΡΠΊΠ΅, ΡΡΠΎΡ ΠΈΠΌΠ΅Π΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΊΠ°ΠΊ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ°, ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ ΠΎΡΠΌΠ΅Π½Ρ Π²ΡΠ±ΠΎΡΠ° Π΄Π΅ΠΉΡΡΠ²ΠΈΡ. ΠΠ΅ΡΡ ΡΡΠ΅Π½Π°ΡΠΈΠΉ ΠΊΠΎΠ΄Π° Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π²Π°ΠΌ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ CodePen, ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π±ΡΡΡΡΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄ ΠΈ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠ±ΠΌΠ°Π½ Ρ ΡΠ»Π°ΠΆΠΊΠΎΠΌ: ΡΠΏΠΈΡΠΎΠΊ Π΄Π΅Π»
ΠΡΠΎ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ»Π°ΠΆΠΊΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠΏΠΈΡΠΊΠ° Π΄Π΅Π». ΠΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΡΠΏΠΈΡΠΊΠ° Π΄Π΅Π» ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π³Π»Π°Π΄ΠΊΠΎ Π² ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ ΠΎΡΠΌΠ΅ΡΠ°Π΅ΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΊΠ°ΠΊ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ΅, ΠΎΠ½ΠΎ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΡΠ°Π·Π΄Π΅Π» ΡΠΏΠΈΡΠΊΠ° Π·Π°Π²Π΅ΡΡΠ΅Π½Π½ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ. Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠΎ ΡΡΠΎΡΠΎΠ½Ρ ΡΡΠΎΠ½ΡΠ΅Π½Π΄Π° Π²ΡΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΎΡΠ»ΠΈΡΠ½ΠΎ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π·ΡΡΡ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° ΠΈ ΡΡΠ°Π·Ρ ΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ/Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. ΠΡΠ»ΠΈ Π²Ρ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ Π½Π°ΡΠ΅ΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠ΅ΠΉ Π½Π°Π±ΠΎΡΠΎΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, Π³Π΄Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΏΡΠΎΡΡΡΡ Π²Π°ΡΡ ΡΠ°Π±ΠΎΡΡ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Jelly Checkbox
ΠΡΠΎ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π°ΠΆΠΊΠ°. ΠΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ, ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΠΆΠ΅Π»Π΅ΠΎΠ±ΡΠ°Π·Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠΎΠ΄ΠΏΡΡΠ³ΠΈΠ²Π°Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅ Π½Π° ΡΠ»Π°ΠΆΠΎΠΊ. ΠΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π½Π΅ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΠ»Π°ΠΆΠΊΠΎΠ² CSS, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠ΅Π½Π°ΡΠΈΠΉ CSS Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΡΠ°Π»ΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ, ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΠ» Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΈ ΠΏΡΠΎΡΡΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π°ΠΆΠΎΠΊ Π΄ΠΎ Π½ΡΠΆΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΡΠ΅Π½Π°ΡΠΈΠΉ CSS3 Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π»Π΅Π³ΠΊΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΡΠΈΠΌ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠΌ ΠΊΠΎΠ΄Π°.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ²Π΅ΡΡΠΈΡ
Shift & Check Boxes
ΠΡΠΎΡ ΡΠ»Π°ΠΆΠΎΠΊ ΠΏΠΎΡΡΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ΅Π½ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΠΌ ΡΠΏΠΈΡΠΊΠ° Π΄Π΅Π» ΠΈ Π·Π°ΠΌΠ΅ΡΠΊΠ°ΠΌ Π½Π° Π²Π°ΡΠ΅ΠΌ iPhone. ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» ΠΈ Π³ΡΠ°Π½ΠΈΡΡ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ Π»Π΅Π³ΠΊΠΎ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΡΠ°Π»ΡΠ½Π°Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ, ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π½Π΅ Π΄Π°Π» Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡΡ. ΠΠΎ, ΡΠ΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡΠΈΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠΌ. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΠ² ΡΠ»Π°ΠΆΠΎΠΊ, Π²Ρ Π·Π°ΡΠ΅ΡΠΊΠ½Π΅ΡΠ΅ Π²Π΅ΡΡ ΡΠ΅ΠΊΡΡ, ΠΊΠ°ΠΊ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Google Keep. ΠΡΠ»ΠΈ Π²Ρ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ Π°Π΄ΠΌΠΈΠ½ΠΈΡΡΡΠ°ΡΠΎΡΠ°, ΡΡΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄Π°ΡΡ Π²Π°ΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±Π°Π·ΠΎΠ²ΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ²Π΅ΡΡΠΈΡ
ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° Π±Π»ΠΎΠΊΠΈ/ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° Π±Π»ΠΎΠΊΠΈ/ΠΊΠ½ΠΎΠΏΠΊΠΈ β ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΡΠ°Π»ΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»Π°ΠΆΠΊΠ° Π΄Π°Π» Π²Π°ΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΈΠ΄Π΅Ρ, ΠΎΡΡΡΠ΄Π° Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²Π·ΡΡΡ Π΅Π΅ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ. ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΡΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, ΡΡΠΎΠ±Ρ ΠΎΠΆΠΈΠ²ΠΈΡΡ ΡΠΈΡΡΠ°ΡΠΈΡ. Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΡΠΎΠ³ΠΎ ΡΠ»Π°ΠΆΠΊΠ° ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ» Π²Π°ΠΌ ΡΡΠΈ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ ΡΠ»Π°ΠΆΠΎΠΊ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΡ Ρ ΡΠ»Π°ΠΆΠΊΠΎΠΌ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π²Π°ΡΠΈΡ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΠ΅ΠΉ. Π Π΄Π΅ΠΌΠΎΠ²Π΅ΡΡΠΈΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠ»Π°ΠΆΠΎΠΊ Π½Π΅ Π°ΠΊΡΠΈΠ²Π΅Π½. Π‘ Π²Π°ΠΌΠΈ Π΄Π΅Π»ΠΈΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ, ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ°Π±ΠΎΡΡ Π²Π°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ Π΄Π΅Π»Π°ΡΡ Π²ΡΡΡΠ½ΡΡ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π‘ΡΠΈΠ»ΠΈ ΡΠ»Π°ΠΆΠΊΠΎΠ² CSS3
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ» Π²Π°ΠΌ Π½Π°Π±ΠΎΡ ΠΈΠ· Π΄Π΅Π²ΡΡΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² ΡΠ»Π°ΠΆΠΊΠΎΠ². ΠΡΠ΅ Π΄Π΅Π²ΡΡΡ ΡΠ»Π°ΠΆΠΊΠΎΠ² Π²ΡΠ΄Π΅Π»Π΅Π½Ρ ΠΆΠΈΡΠ½ΡΠΌ ΡΡΠΈΡΡΠΎΠΌ ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΡΠΎΡΠΊΠΈΠΌΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ΠΈ Π²ΡΠ΄Π΅Π»ΡΡΡΡΡ ΡΡΠ΅Π΄ΠΈ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΎΡΠΌΡ ΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ. ΠΠ°ΡΡΠ΄Ρ Ρ ΡΠ»Π°ΠΆΠΊΠ°ΠΌΠΈ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ» Π²Π°ΠΌ ΡΠΊΠΎΠ»ΡΠ·ΡΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ . ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΊΡΠΈΠΏΡ CSS3, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ Π»ΡΠ±ΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ²Π΅ΡΠ° ΠΈ ΡΡΠΈΠ»ΠΈ Π³ΡΠ°Π½ΠΈΡ. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π°, ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΠΎ ΡΠ΅Π³ΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π» ΠΊΠΎΠ΄ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ, ΡΡΠΎΠ±Ρ Π²Ρ Π·Π½Π°Π»ΠΈ, Π½Π°Π΄ ΠΊΠ°ΠΊΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Π²Ρ ΡΠ°Π±ΠΎΡΠ°Π΅ΡΠ΅.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π§ΠΈΡΡΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ CSS
Π ΡΡΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ» Π½Π°ΠΌ ΠΊΠ°ΠΊ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ, ΡΠ°ΠΊ ΠΈ ΡΠ»Π°ΠΆΠΊΠΈ. ΠΠΎ ΡΡΠΎ Π½Π΅ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΡΠ»Π°ΠΆΠΊΠΈ ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π½Π° Π½Π°ΡΠΈΡ ΡΠ°ΠΉΡΠ°Ρ ΠΈ ββΠ² ΡΠΎΡΠΌΠ°Ρ . Π ΡΡΠΎΠΌ ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΌΠΎΠ·Π°ΠΈΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ. ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΌΠ°ΡΡΠ΅ΡΠ°, ΡΡΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ. Π ΡΠ°ΠΌΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Ρ Π²Π°Ρ Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΈ ΡΠΊΡΡΡΡ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΆΠ΄Π°ΡΡΠ΅Π΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅. ΠΠ·-Π·Π° Π½Π΅ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΆΠ΄Π°ΡΡΠ΅Π³ΠΎ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΠΏΠ΅ΡΠ²ΡΠ΅ Π·Π°Ρ ΠΎΠ΄ΡΡ, ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΠΎΠ½ΠΈ Π²ΡΠ±ΠΈΡΠ°ΡΡ. ΠΠ½Π΅ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΠΈΠ»ΠΈ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎΠ²Π΅ΡΡΠΈΡ
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠ»ΡΡΠ°ΡΠΈΠΈ
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΡΠΎΠ³ΠΎ ΡΠ»Π°ΠΆΠΊΠ° ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ. ΠΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ, Π·Π΄Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΡΠ»ΡΡΠΈΡΡΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π²ΡΠ±ΠΎΡΠ΅ ΡΠ»Π°ΠΆΠΊΠ° ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΎΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π½Π° Π»ΡΠ±ΠΎΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅, Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ ΠΈ ΡΠΎΡΠΌΠ°Ρ . ΠΡΡΠ΅ΠΊΡ ΠΎΡΠ΅Π²ΠΈΠ΄Π΅Π½, ΡΠ°ΠΊ ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΌΠΎΠΆΠ΅Ρ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΠΎΠ½ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ. ΠΡΠΎΡ ΠΏΡΠΎΡΡΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ»Π°ΠΆΠΊΠ° ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ΄Π΅Π»Π°Π½ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΊΡΠΈΠΏΡΠΎΠ² HTML5 ΠΈ CSS3. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΠΊΠΎΠ΄ Π΄Π°ΠΆΠ΅ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΠΈΠ»ΠΈ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΡΠΏΠ°Π΄Π°ΡΡΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠ»Π°ΠΆΠΊΠ°ΠΌΠΈ
ΠΡΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ»Π°ΠΆΠΊΠ° ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠΎΡΠΌΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ, ΡΠ»Π°ΠΆΠΎΠΊ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅ΠΌΡΡ ΡΠΏΠΈΡΠΊΠ΅. ΠΡΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² ΠΊΠ°ΡΠ°Π»ΠΎΠ³ΠΎΠ², Π³Π΄Π΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΌΠΎΠΆΠ΅Ρ Π»Π΅Π³ΠΊΠΎ ΠΎΡΡΠΈΠ»ΡΡΡΠΎΠ²Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΠΈΠΉ Π΅Π³ΠΎ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ. Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ, ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» HTML5, CSS3 ΠΈ Javascript. ΠΡΠΎΡΡΠ°Ρ ΡΡΡΡΠΊΡΡΡΠ° ΠΊΠΎΠ΄Π° ΡΠΏΡΠΎΡΡΠΈΡ Π½Π°ΡΡΡΠΎΠΉΠΊΡ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΠ»Π°ΠΆΠΊΠΎΠ² ΠΈ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΎΠΊ
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΡΠ»Π°ΠΆΠΊΠΎΠ², Π½Π΅ Π½Π°ΡΡΡΠ°Ρ ΠΈΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ, ΡΡΠΎΡ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° ΡΡΠΈΠ»Ρ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ. Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΡΠ΅Π½Π°ΡΠΈΠΉ CSS3, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΠ°ΡΠΎΡΠ½ΡΠΉ ΠΈ ΠΆΠΈΠ²ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ»Π°ΠΆΠΊΠΎΠ² ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉ. Π ΡΡΠΎΠΌ Π½Π°Π±ΠΎΡΠ΅ Π²Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ ΡΠ΅ΡΡΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΠ° Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π²Π°ΡΠΈΡ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΠ΅ΠΉ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΈ Π½Π°ΡΠ½ΠΈΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ. ΠΡΡ ΡΡΡΡΠΊΡΡΡΠ° ΠΊΠΎΠ΄Π° ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π²Π°ΠΌ Π½Π°ΠΏΡΡΠΌΡΡ, ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π»Π΅Π³ΠΊΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΡΠΈΠΌ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠΌ ΠΊΠΎΠ΄Π° ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΠΈΠ»ΠΈ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π΄Π΅ΠΌΠΎ-Π·Π°Π³ΡΡΠ·ΠΊΠ°
Materialise Dash
ΠΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ, ΡΡΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΡΠΈΠ±ΠΎΡΠ½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ. ΠΠ° ΡΡΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ»Π°ΠΆΠΊΠ° ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΡΡΠ½ΠΊΡΠΈΠΉ. Π Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Shift & Check Boxes Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ ΡΠ»Π°ΠΆΠΎΠΊ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠΠΎ Π² ΡΡΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ Π΄Π°Π» Π²Π°ΠΌ ΠΏΠΎΠ»Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΡΠΈΠ±ΠΎΡΠ½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, ΡΡΠΎΠ±Ρ Π΄Π°ΡΡ ΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅. Π ΡΡΠΎΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ΅ Π΄Π»Ρ ΡΠ»Π°ΠΆΠΊΠΎΠ² Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΌΠ΅ΡΡΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠ², Π½ΠΎ ΠΈ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΈ Π΄Π°ΡΡ. Π¦Π²Π΅ΡΠ½ΡΠ΅ ΠΌΠ΅ΡΠΊΠΈ ΡΠ°ΠΊΠΆΠ΅ ΡΠΊΠ°Π·Π°Π½Ρ Π² ΡΡΠΎΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ΅ ΡΠ»Π°ΠΆΠΊΠ°, ΡΡΠΎΠ±Ρ Π²Π°ΡΠΈ Π·Π°ΠΏΠΈΡΠΈ Π±ΡΠ»ΠΈ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Ρ. ΠΡΠ»ΠΈ Π²Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΊΠ°Π»Π΅Π½Π΄Π°ΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°ΡΡ Π·Π°ΠΏΠΈΡΠΈ ΡΠ»Π°ΠΆΠΊΠΎΠ² Ρ ΠΊΠ°Π»Π΅Π½Π΄Π°ΡΠ΅ΠΌ Π΄Π»Ρ Π»ΡΡΡΠ΅Π³ΠΎ Π΄ΠΎΡΡΡΠΏΠ°.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ²Π΅ΡΡΠΈΡ
Π‘ΡΠΈΠ»ΡΠ½ΡΠΉ ΡΠ»Π°ΠΆΠΎΠΊ
Π‘ΡΠΈΠ»ΡΠ½ΡΠΉ ΡΠ»Π°ΠΆΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»Π°ΠΆΠΊΠ° ΡΠΌΠ΅Π»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΡΡΠ΅ΠΊΡΡ ΡΠ»Π°ΠΆΠΊΠ°, ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ Π»ΡΡΡΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ. ΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ ΠΈΠΌΠ΅Π΅Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΡΠΆΠ΅Π»ΡΠΉ ΡΡΠ΅Π½Π°ΡΠΈΠΉ Π΄Π»Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°; ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΠΊΠ°ΠΊ ΠΊΠΎΠ΄Ρ CSS, ΡΠ°ΠΊ ΠΈ Javascript Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°. ΠΠΎ Π²ΡΠ΅ ΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄ ΠΈ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ Π±ΡΡΡΡΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π½Π° Π²Π°Ρ ΡΠ°ΠΉΡ. ΠΡΡ ΡΡΡΡΠΊΡΡΡΠ° ΠΊΠΎΠ΄Π° ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π²Π°ΠΌ Π½Π°ΠΏΡΡΠΌΡΡ, ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π»ΡΡΡΠΈΠΉ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΎΠΏΡΡ. ΠΠ·ΡΠ² ΡΡΠΎ Π·Π° Π²Π΄ΠΎΡ Π½ΠΎΠ²Π΅Π½ΠΈΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π² ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅ ΠΈΠ»ΠΈ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π’ΡΠΌΠ±Π»Π΅Ρ
Π’ΡΠΌΠ±Π»Π΅ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠ°ΡΠΈΠ½Π½ΡΡ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΡ ΡΠ»Π°ΠΆΠΊΠΎΠ². ΠΡΠ΅ ΠΎΠ΄Π½ΠΎ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΌΠ±Π»Π΅ΡΠΎΠ² Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΏΠΎΡΡΠ²ΡΡΠ²ΠΎΠ²Π°ΡΡ, ΡΡΠΎ ΠΎΠ½ΠΈ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΎΠΏΡΠΈΡ. Π ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Apple Π½Π°ΠΈΠ»ΡΡΡΠ°Ρ ΡΠ°ΠΊΡΠΈΠ»ΡΠ½Π°Ρ ΠΎΠ±ΡΠ°ΡΠ½Π°Ρ ΡΠ²ΡΠ·Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΡΠ΅Π°Π»ΡΠ½ΠΎ ΡΡΠ²ΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ². Π§ΡΠΎΠ±Ρ ΡΠ»ΡΡΡΠΈΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΠ΅, ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° ΡΠ΄Π΅Π»Π°Π» Π»ΠΈΡΠΎ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΌ. ΠΠΈΡΠΎ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ, Π° ΡΠ²Π΅ΡΠΎΠ²Π°Ρ ΡΡ Π΅ΠΌΠ° ΠΏΡΠΈΠ΄Π°Π΅Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ Π±ΠΎΠ»ΡΡΠ΅ ΠΆΠΈΠ·Π½ΠΈ. Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΡΠΏΠΎΠΌΡΠ½ΡΡΠΎΠ³ΠΎ Π²ΡΡΠ΅ ΡΠ»Π°ΠΆΠΊΠ°, ΡΡΠΎΡ Π΄Π΅Π»Π°Π΅ΡΡΡ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΡΡΠΊΡΡΡΡ CSS3. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² ΡΠ²ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ²Π΅ΡΡΠΈΡ
Π€Π»Π°ΠΆΠΎΠΊ Material Design
Π€Π»Π°ΠΆΠΎΠΊ Material Design ΠΏΠΎΡ ΠΎΠΆ Π½Π° Π²ΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ Material Design, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Π²ΠΈΠ΄Π΅Π»ΠΈ. Π―ΡΠΊΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΡΡΠΊΠΎΡΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ . ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅, Π² ΡΠΎΡΠΌΠ΅ ΠΈ Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ ΡΠ»Π°ΠΆΠΎΠΊ ΡΠΈΡΡΠΎ CSS-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΡΠΎΠ΄ΡΠΊΡΠ°. ΠΠ°ΡΡΡΠΈΡ ΠΎΠ²Π°Π½Π½Π°Ρ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ Π½Π° Π½Π΅Π΅ ΠΊΡΡΡΠΎΡ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π² Π΄Π΅ΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π±Π΅Π»ΡΠΉ ΡΠΎΠ½, Π΄Π»Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ΅ΡΡΠΉ ΠΎΡΡΠ΅Π½ΠΎΠΊ. ΠΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ ΡΠ²Π΅ΡΠΎΠ²ΡΡ ΡΡ Π΅ΠΌΡ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ²Π΅ΡΡΠΈΡ
Happy Little Checkboxes
Happy little checkboxes β ΡΡΠΎ ΠΆΠΈΠ²ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ»Π°ΠΆΠΊΠΎΠ². Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»Π°ΠΆΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ Π²Π΅ΡΡΠΈΡ HTML5 ΠΈ CSS3 Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠΈΡ ΠΌΠΈΠ»ΡΡ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ ΡΠ»Π°ΠΆΠΊΠΎΠ². Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΡΠΎΠ½ΠΊΠΈΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠΎΠ΄Π½ΡΡΠΈΡ Π±ΡΠΎΠ²Π΅ΠΉ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π² ΡΡΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π½ΠΎΠ²Π΅ΠΉΡΠΈΠ΅ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π²Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ Ρ ΠΎΡΠΎΡΠΎ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΈΡΡΡΠΉ ΡΡΡΠ΅ΠΊΡ. Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ» Π²Π°ΠΌ ΡΡΡΠ΅ΠΊΡΡ ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΈ ΠΈ ΠΎΡΠΌΠ΅Π½Ρ. ΠΡΠ³ΠΊΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π° ΠΊΠΎΡΠΎΠ±ΠΊΠ°Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΠ»Π°Π²Π½ΠΎ ΠΈ Π±Π΅Π· Π·Π°Π΄Π΅ΡΠΆΠ΅ΠΊ. ΠΠΎΠ΄, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠ»Π°ΠΆΠΊΠ°, Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π²Π°ΠΌ, ΠΏΠΎΡΡΠΎΠΌΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π³ΠΎ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠΎ ΡΠ²ΠΎΠΈΠΌΠΈ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌΠΈ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅ ΠΈΠ»ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / Π‘ΠΊΠ°ΡΠ°ΡΡ Π΄Π΅ΠΌΠΎΠ²Π΅ΡΡΠΈΡ
Π€Π»Π°ΠΆΠΊΠΈ ΡΡΠΈΠ»Ρ
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠ΅ΡΠ΅ Π½Π°Π±ΠΎΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΡ ΡΠ»Π°ΠΆΠΊΠΎΠ² ΠΈ Π΄ΡΡΠ³ΠΈΡ Π²Π΅Π±-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΡΠ° ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ Π²Π΄ΠΎΡ Π½ΠΎΠ²ΠΈΡ Π²Π°Ρ. Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠ°ΠΊΠ΅ΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° CSS Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΡ Π±Π»ΠΎΠΊΠΎΠ². ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π°ΠΆΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΈ Π²ΡΠ΅ ΠΎΠ½ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ². ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ ΡΡΡΠ΅ΠΊΡ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ ΠΊΠ°ΠΊ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, ΡΠ°ΠΊ ΠΈ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. ΠΡΡΠ΅ΠΊΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° Π²ΠΎ Π²ΡΠ΅Ρ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡΡ ΡΠ»Π°ΠΆΠΊΠΎΠ² ΠΏΡΠΎΡΡΡ ΠΈ ΠΏΠΎΠ½ΡΡΠ½Ρ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Π΅Π³ΠΎ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠΌ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠΈΠΏΠΎΠ² ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ Π΄Π΅Π»ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ. ΠΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΡΡΡΠ΅ΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Π°ΠΌ Π½ΡΠ°Π²ΠΈΡΡΡ, ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Π½ΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π» Π²Π°ΡΠ΅ΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
CSS Checkmark Animation
Π§Π΅ΠΌ ΠΏΡΠΎΡΠ΅ ΡΡΡΠ΅ΠΊΡ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½, ΡΠ΅ΠΌ Π²ΡΡΠ΅ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΠΎ ΡΠΎΡ ΡΠ°Π½ΡΡΡ ΠΏΡΠΎΡΡΠΎΡΡ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π²Π°ΡΠΈΠ°Π½ΡΠ°ΠΌΠΈ β ΡΠ°ΠΌΠ°Ρ ΡΠ»ΠΎΠΆΠ½Π°Ρ Π·Π°Π΄Π°ΡΠ°. ΠΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ, ΡΡΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π³Π°Π»ΠΎΡΠΊΠΈ CSS. Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠ»Π΅Π΄ΠΎΠ²Π°Π» Π±Π°Π·ΠΎΠ²ΠΎΠΌΡ ΠΏΡΠΎΡΡΠΎΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΌΡ ΡΡΡΠ΅ΠΊΡΡ. ΠΡ Π±Ρ Π²ΠΈΠ΄Π΅Π»ΠΈ ΡΡΠΎΠ»ΡΠΊΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. ΠΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΌ ΠΈ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌΠΈ, ΡΠΎΡ ΡΠ°Π½ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΎΠΏΡΡ Π±ΠΎΠ»Π΅Π΅ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΡΠΌ. ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠ΅ΡΠ΅ ΡΠΎΠ½ΠΊΠΈΠΉ ΡΠΈΡΡΡΠΉ ΡΡΡΠ΅ΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ ΡΠ»Π°ΠΆΠΊΠ°, ΡΡΠΎΡ ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΠΈΡ Π²Π°ΡΠΈ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΠΈ. Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»Π°ΠΆΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Π·Π½Π°ΡΠΊΠΈ ΡΡΠΈΡΡΠΎΠ² awesome, ΠΏΠΎΡΡΠΎΠΌΡ Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π΄ΡΡΠ³ΠΈΡ ΡΠΎΡΠΌΠ°ΡΠΎΠ² Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΡΡΡΠΎΠΉ ΡΠ»Π°ΠΆΠΎΠΊ Ρ SVG
ΠΡΡΡΠΎΠΉ ΡΠ»Π°ΠΆΠΎΠΊ Ρ SVG β Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. ΠΡΡΠ΅ΠΊΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² Π½Π°Π΄Π»Π΅ΠΆΠ°ΡΠ΅ΠΌ ΠΌΠ°ΡΡΡΠ°Π±Π΅ ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΡΡΠ΅Π±ΡΠ΅ΠΌΠΎΠΌ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π΅. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π²Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡΠΈΠΉ ΡΡΡΠ΅ΠΊΡ ΡΠ»Π°ΠΆΠΊΠ°, Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ° ΠΈ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΡΠ°Π»ΡΠ½Π°Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ, Π΅ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΡΠΈΠ½Ρ ΡΠΎΠ½ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ Π² ΠΊΡΠ°ΡΡΠ°ΠΉΡΠΈΠ΅ ΡΡΠΎΠΊΠΈ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Π±Π°Π·ΠΎΠ²ΡΠ΅ ΡΡΠ΅Π½Π°ΡΠΈΠΈ HTML ΠΈ CSS3, Π΄Π°ΠΆΠ΅ Π½ΠΎΠ²ΠΈΡΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΡΠΈΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΡΠ»Π°ΠΆΠΊΠ°. Π‘ΡΡΡΠΊΡΡΡΠ° ΠΊΠΎΠ΄Π° Π΄ΠΎΡΡΡΠΏΠ½Π° Π²Π°ΠΌ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ Codepen, ΠΏΠΎΡΡΠΎΠΌΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΠΈΡ Π²Π½Π΅ΡΠ΅Π½ΠΈΡ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π€Π»Π°ΠΆΠΊΠΈ ΠΈ ΡΠ°Π΄ΠΈΠΎΠ³ΡΡΠΏΠΏΡ, Π²Π΄ΠΎΡ Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°ΠΌΠΈ
ΠΡΠΎ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ»Π°ΠΆΠΊΠΎΠ², ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. Π ΡΡΠΎΠΌ Π½Π°Π±ΠΎΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ Π΄Π°Π» Π²Π°ΠΌ ΠΊΠ°ΠΊ ΡΠ»Π°ΠΆΠΊΠΈ, ΡΠ°ΠΊ ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ. ΠΠΎΠ΄Π½ΡΠ΅ ΡΡΠΊΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π² ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΌ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠΈΡ ΠΊΠΎΡΠΎΠ±ΠΎΠΊ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π»Π΅Π³ΠΊΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Π²Π°ΡΠΈΠΌΠΈ ΡΠΎΡΠΌΠ°ΠΌΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΊΠ°ΠΊ ΡΠ°ΠΊΠΎΠ²ΠΎΠΉ Π² ΡΠ²ΠΎΠΈΡ ΡΠΈΡΡΠΎΠ²ΡΡ ΡΠΎΡΠΌΠ°Ρ ΠΎΠΏΡΠΎΡΠ° ΠΈ ΠΊΠΎΠ½ΡΠ°ΠΊΡΠ½ΡΡ ΡΠΎΡΠΌΠ°Ρ . ΠΠΎΠ²ΠΎΡΡ ΠΎΠ± ΠΎΠΏΡΠΎΡΠ΅, ΡΠΏΠΈΡΠΎΠΊ Π°Π΄ΡΠ΅ΡΠΎΠ² ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π»ΡΡΡΠΈΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ, ΡΠ΅ΠΌ Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ Π½ΠΎΡΠΈΡΠ΅Π»Ρ. ΠΠ·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° Π½Π°ΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ, ΡΡΡΡΠΊΡΡΡΠ° ΠΊΠΎΡΠΎΡΠΎΠΉ Π»Π΅Π³ΠΊΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΡΡΡ. ΠΡ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎΡ ΡΠ»Π°ΠΆΠΎΠΊ, ΠΈ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠΈΠ΅ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΠ΅ ΠΏΠΈΡΡΠΌΠ°.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π’ΡΠΏΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ
ΠΠ°ΠΊ Π±ΡΠ»ΠΎ ΡΠΊΠ°Π·Π°Π½ΠΎ ΡΠ°Π½Π΅Π΅, ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ β ΡΡΠΎ ΠΎΠ±ΡΡΠ½Π°Ρ ΡΠΎΡΠΌΠ° ΡΠ»Π°ΠΆΠΊΠΎΠ² Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ , ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΈΠ»ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ. Π Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΡΠ»Π°ΠΆΠΎΠΊ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠ΅ΡΡΠΌ ΠΈ Π½Π΅Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π΄ΠΎ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΡΠ΅ΡΡΠ°. ΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ ΡΠ΅ΡΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π·Π°Π΄ΡΠΌΠ°ΡΡΡΡ, ΠΏΠΎΠΊΠ° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅. ΠΠΌΠ΅ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅ΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° Π·Π°ΠΌΠΎΡΠΎΠ·ΠΊΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ΅ΠΊΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΡΡΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. ΠΠ΅ΡΠ²ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π² ΡΡΠΎΠΌ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅Π½ ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π²ΠΎ Π²ΡΠ΅Ρ ΡΠΈΠΏΠ°Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π²ΡΠΎΡΠΎΠΉ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π±ΠΎΠ»ΡΡΠ΅ ΠΌΠ΅ΡΡΠ° ΠΈ Π½ΡΠΆΠ΄Π°Π΅ΡΡΡ Π² ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΠΈΠ»ΠΈ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π€Π»Π°ΠΆΠΎΠΊ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ Pure CSS
ΠΡΠ»ΠΈ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ Π½Π΅ ΡΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² β ΡΡΠΎ ΡΠ°Π·ΡΠΌΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ»ΡΡΡΠΈΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ. ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΏΠΎΠ½ΡΡΠ½ΡΠΌΠΈ. ΠΡΠ»ΠΈ Π²Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ, ΡΠ°ΠΊ ΠΈ Π² Π½Π°ΡΡΠΎΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ Π΄Π»Ρ ΠΎΠ±ΠΎΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ². ΠΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ, ΡΡΠΎ ΡΠΈΡΡΡΠΉ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ CSS. Π ΡΡΠΎΠΌ ΡΡΡΠ΅ΠΊΡΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π·Π΄ΠΎΡΠΎΠ²Π΅Π½Π½ΡΠ΅ ΠΊΠΎΠ΄Ρ, ΡΡΠΎ ΡΡΠΊΠΎΡΡΠ΅Ρ Π΅Π³ΠΎ Π·Π°Π³ΡΡΠ·ΠΊΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΡ Π½Π° ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΈΠ»ΠΈ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π΅Π· Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ. Π’Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π·Π½Π°Π», ΡΡΠΎ ΠΎΠ½ Π½Π°ΠΆΠ°Π» ΠΊΠ½ΠΎΠΏΠΊΡ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π€Π»Π°ΠΆΠΎΠΊ Switchy
Π ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΡΡΡΠ΅ΠΊΡΠ΅ ΡΠ»Π°ΠΆΠΊΠ° ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·ΡΠΌΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ. Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΡΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠ»Π°ΠΆΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΠ²Π΅ΡΠ° Π² ΠΏΠΎΠ»ΡΠ·Ρ Π½Π΅Π΅. Π Π½Π΅Π΄Π°Π²Π½ΠΈΡ Π²ΠΎΠ»ΡΠ΅Π±Π½ΡΡ Π°ΠΊΡΠ΅ΡΡΡΠ°ΡΠ°Ρ Apple iMac Π²Ρ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²ΠΈΠ΄Π΅Π»ΠΈ Π·Π΅Π»Π΅Π½ΡΠΉ ΠΈ ΠΎΡΠ°Π½ΠΆΠ΅Π²ΡΠΉ ΡΠ²Π΅ΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΈ Π²ΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ. ΠΠΈΠ·Π°ΠΉΠ½Π΅Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»Π°ΠΆΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΡ ΠΆΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΡΠ°Π»ΡΠ½Π°Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ, ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΡΠ²Π΅ΡΠ° ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅Ρ Π²ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π²Π°ΡΠΈΠΌΠΈ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌΠΈ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΠΎΠ΄Π΅Π»ΠΈΠ»ΡΡ ΡΡΠ΅Π½Π°ΡΠΈΠ΅ΠΌ ΠΊΠΎΠ΄Π°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΌ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ²Π΅ΡΡΠΈΡ
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π°ΠΆΠΎΠΊ / Π’ΡΠΌΠ±Π»Π΅Ρ
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠ΅ΡΠ΅ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ CSS-ΡΠ»Π°ΠΆΠΊΠΎΠ² Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ, ΡΡΠΎΡ Π½Π°Π±ΠΎΡ ΡΠ»Π°ΠΆΠΊΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΠΊΠΎΠ½Π΅Ρ Π²Π°ΡΠ΅ΠΌΡ ΠΏΠΎΠΈΡΠΊΡ. ΠΡ, Π²ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΡΠ»Π°ΠΆΠΊΠ° ΠΏΠΎΡ ΠΎΠΆΠΈ Π½Π° ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉ. Π‘ΠΎΠ·Π΄Π°ΡΠ΅Π»Ρ ΠΏΠΎΠΊΠ°Π·Π°Π» ΡΠ°Π·Π½ΠΈΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ , ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π² ΡΡΠΌΠ±Π»Π΅ΡΠ°Ρ . Π ΡΡΠΎΠΌ Π½Π°Π±ΠΎΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΡΠ΅, ΡΠ°ΠΊ ΠΈ ΠΊΡΠ°ΡΠΎΡΠ½ΡΠ΅ ΡΠΈΡΡΠ½ΠΊΠΈ. Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π²Π°ΡΠΈΡ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΠ΅ΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈ Π½Π°ΡΠ°ΡΡ Π΅Π³ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. Π‘Π°ΠΌΠΎΠ΅ ΠΏΡΠΈΡΡΠ½ΠΎΠ΅ Π² ΡΡΠΈΡ ΡΠ»Π°ΠΆΠΊΠ°Ρ ΡΠΎ, ΡΡΠΎ Π²ΡΠ΅ ΠΎΠ½ΠΈ ΡΠ΄Π΅Π»Π°Π½Ρ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΊΡΠΈΠΏΡΠ° CSS. ΠΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π³Π»Π°Π΄ΠΊΠΈΠ΅ ΠΈ Π±ΡΡΡΡΡΠ΅, ΠΈ ΠΈΡ Π·Π°Π³ΡΡΠ·ΠΊΠ° Π½Π΅ Π·Π°ΠΉΠΌΠ΅Ρ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ²Π΅ΡΡΠΈΡ
Π€Π»Π°ΠΆΠΎΠΊ Full CSS
ΠΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ°ΠΌΡΡ Π±ΠΎΠ»ΡΡΠΈΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ Π²Π΅ΡΡΠΈΠΈ HTML5 ΠΈ CSS3 ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΎΠΏΠ»ΠΎΡΠΈΡΡ Π² ΠΆΠΈΠ·Π½Ρ Π»ΡΠ±ΡΡ ΡΠΎΡΠΌΡ ΠΈ ΡΠ²Π΅Ρ. ΠΠ° ΠΎΡΠ½ΠΎΠ²Π΅ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΄ΡΠΊΡΠ° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡΠΌΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡΡ Π²Π°Ρ ΠΏΡΠΎΠ΄ΡΠΊΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΠ΅ ΠΎΠ±ΡΠ²Π½ΡΠΌ ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠΌ, ΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡΠΌΡ ΡΡΠΎΠΏΡ ΠΈΠ»ΠΈ ΡΡΡΠ΅Π»ΡΠΊΠΈ Π΄Π»Ρ ΡΡΠΌΠ±Π»Π΅ΡΠΎΠ². Π€Π»Π°ΠΆΠΎΠΊ / ΡΡΠΌΠ±Π»Π΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π² ΡΡΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, ΠΏΠΎΡΡΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ΅Π½ ΠΎΠ±ΡΠ²ΠΈ. Π§Π΅ΡΠΊΠΈΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈ ΡΠ²Π΅ΡΠΎΠ²ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎ Π²ΠΈΠ΄Π΅ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ. ΠΠ°ΠΊ ΠΈ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π°ΠΆΠΊΠΎΠ² CSS Π² ΡΡΠΎΠΌ ΡΠΏΠΈΡΠΊΠ΅, ΡΡΠΎΡ ΡΠ°ΠΊΠΆΠ΅ ΡΠ΄Π΅Π»Π°Π½ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΊΡΠΈΠΏΡΠ° CSS.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎ
ΠΠ½ΠΎΠΏΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
ΠΠ· ΡΠ°ΠΌΠΎΠ³ΠΎ Π½Π°Π·Π²Π°Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΠ²ΠΎΠ΄, ΡΡΠΎ ΡΡΠΎΡ Π½Π°Π±ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΡΡΠ΅ΠΊΡΠΎΠ². Π ΡΡΠΎΠΌ Π½Π°Π±ΠΎΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π²ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ ΠΎΡ iOS Π΄ΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠ»ΠΎΡΠΊΠΈΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ. Π ΡΡΠΎΠΌ Π½Π°Π±ΠΎΡΠ΅ Π΄Π°Π½ΠΎ ΠΏΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ², ΠΈ Π²ΡΠ΅ ΠΎΠ½ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° CSS3. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΡΠ΄Π΅Π»Π°Π½ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π½ΠΎΠ²Π΅ΠΉΡΠ΅Π³ΠΎ ΠΊΠΎΠ΄Π° CSS3, Π²Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΈ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ. ΠΡΡΠ΅ΠΊΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠΎΡΠ° ΠΈ ΠΏΠ΅ΡΠ΅Π²ΠΎΡΠΎΡΠ° ΡΠ²Π»ΡΡΡΡΡ Π»ΡΡΡΠΈΠΌΠΈ ΡΡΠ΅Π΄ΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ², ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΡΡ Π²Π°ΠΌ Π² ΡΡΠΎΠΌ ΠΏΠ°ΠΊΠ΅ΡΠ΅. ΠΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π³Π»Π°Π΄ΠΊΠΈΠ΅ ΠΈ ΠΏΠ»Π°Π²Π½ΡΠ΅, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π½Π΅ Π·Π°ΠΌΠ΅ΡΡΡ Π½ΠΈΠΊΠ°ΠΊΠΈΡ Π·Π°Π΄Π΅ΡΠΆΠ΅ΠΊ ΠΏΡΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠΈ Ρ Π½ΠΈΠΌΠΈ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π°ΠΆΠΎΠΊ CSS
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π°ΠΆΠΎΠΊ CSS ΠΏΠΎΡΡΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ΅Π½ Shift ΠΈ ΡΠ»Π°ΠΆΠΊΠ°ΠΌ, ΡΠΏΠΎΠΌΡΠ½ΡΡΡΠΌ Π²ΡΡΠ΅. ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π²ΡΡΠ΅ΡΠΊΠΈΠ²Π°Π΅Ρ ΡΠ΅ΠΊΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΠ΅ ΡΠ»Π°ΠΆΠΎΠΊ. Π ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Shift & Check Boxes ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Javascript Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΊΠΎΠ΄Π΅, ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π»ΠΎ ΡΡΡΠ΅ΠΊΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΠΆΠ΅Π»ΡΠΌ. Π ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΡΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π±Π°Π·Ρ HTML ΠΈ ΡΡΡΠ΅ΠΊΡΠΎΠ² CSS. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠΆΠΈΠ΄Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠ»Π°Π²Π½ΠΎΠΉ ΠΈ Π±ΡΡΡΡΠΎΠΉ ΡΠ°Π±ΠΎΡΡ Ρ ΡΡΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ. ΠΡΠΎΡ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π²ΠΎΠ΄ΠΈΡΡ ΡΠ΅ΠΊΡΡΡ, Π½ΠΎ, ΡΠ΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΊΠΎΠ΄ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½ΡΠΆΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ. ΠΡΠΎΡΡΠ°Ρ ΡΡΡΡΠΊΡΡΡΠ° ΠΊΠΎΠ΄Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π»Π΅Π³ΠΊΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΡΠΈΠΌ ΡΠ»Π°ΠΆΠΊΠΎΠΌ Π΄Π°ΠΆΠ΅ Π½ΠΎΠ²ΠΈΡΠΊΠ°ΠΌ.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π‘ΡΠΈΠ»ΠΈ ΡΠ°Π΄ΠΈΠΎ ΠΈ ΡΠ»Π°ΠΆΠΊΠΎΠ²
Π‘ΡΠΈΠ»ΠΈ ΡΠ°Π΄ΠΈΠΎ ΠΈ ΡΠ»Π°ΠΆΠΊΠΎΠ² ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ»ΠΈ Π²Π°ΠΌ Π΄Π²Π° Π²Π°ΡΠΈΠ°Π½ΡΠ° ΡΡΠΎΠ³ΠΎ ΠΏΠ°ΠΊΠ΅ΡΠ°. ΠΠ΄ΠΈΠ½ Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΉ ΠΊΡΡΠ³Π»ΠΎΠΉ ΡΠΎΡΠΌΠΎΠΉ, Π° Π΄ΡΡΠ³ΠΎΠΉ Ρ ΡΠΎΠΌΠ±ΠΎΠ²ΠΈΠ΄Π½ΠΎΠΉ ΡΠΎΡΠΌΠΎΠΉ. Π ΠΎΠ±Π΅ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π·Π°ΡΡΡ Π°Π½ΠΈΡ. ΠΠΎΠΌΠΈΠΌΠΎ ΡΠΎΡΠΌ, ΡΡΠΎ Π±Π°Π·ΠΎΠ²ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°Π΄ΠΈΠΎ ΠΈ ΡΠ»Π°ΠΆΠΊΠΎΠ². ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ ΡΡΡ ΡΠΎΡΠΌΡ Π½Π° ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ, Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ Π² ΡΠΎΡΠΌΡ. ΠΠΎΠ²ΠΎΡΡ ΠΎ ΡΠΎΡΠΌΠ°Ρ , Π²Π·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ ΡΠΎΡΠΌΡ Π²Ρ ΠΎΠ΄Π° Ρ ΠΌΠΎΠ΄Π½ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ Π΄Π»Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ², ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π‘Π΄Π΅Π»Π°Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½Π°ΡΡΡΠΎΠ΅ΠΊ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ»Π°ΠΆΠΊΠ° Π² ΡΠ²ΠΎΠ΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ / ΠΠ°Π³ΡΡΠ·ΠΈΡΡ Π΄Π΅ΠΌΠΎΠ²Π΅ΡΡΠΈΡ
Π Π΅Π°Π»ΠΈΡΡΠΈΡΠ½ΡΠ΅ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ
Π Π΅Π°Π»ΠΈΡΡΠΈΡΠ½ΡΠ΅ ΡΠ°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΊΠΈ β ΡΡΠΎ Π½Π°Π±ΠΎΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Π²ΠΈΠ΄Π΅Π»ΠΈ Π² ΡΠ°Π½Π½ΠΈΡ Π²Π΅ΡΡΠΈΡΡ iOS. ΠΡΡΠ΅ΠΊΡΡ ΡΠ΅Π½ΠΈ ΠΈ Π³Π»ΡΠ±ΠΈΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ. ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΠ±ΠΈΡΠ°Π΅ΡΠ΅ΡΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΡΠΏΠΈΡΠΎΠΊ ΠΎΠΏΡΠΈΠΉ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ°, ΡΠ°ΠΊΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠΏΡΠΎΡΡΠΈΡ Π·Π°Π΄Π°ΡΡ.