17 ΠΊΡΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
0 βΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΠΈΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΡ! Π‘Π½Π°ΡΠ°Π»Π° ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΠΏΡΠΎΡΡΡΠΌ, Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ²Π»ΠΈΡΡΡ Π½Π° Π²ΠΎΡΠΏΡΠΈΡΡΠΈΠ΅ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΎΠ²Π΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ, Π²ΡΠ·ΡΠ²Π°ΡΡΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΠ΅Ρ. ΠΠ½Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎΡΡΠΈ Π²Π°ΡΠ΅ΠΌΡ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΏΡΠΎΠ΅ΠΊΡΡ.
ΠΡΠ°ΠΊ, Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ Π·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ Π½Π°ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ Ρ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΈΠ»ΠΈ Π³Π΄Π΅ Π΅Π΅ Π½Π°ΠΉΡΠΈ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅, ΠΌΡ Π²Π°ΠΌ ΠΏΠΎΠΌΠΎΠΆΠ΅ΠΌ. ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΡΠΏΠΈΡΠΎΠΊ, ΡΠΎΡΡΠΎΡΡΠΈΠΉ ΠΈΠ· 17 Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ², ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ, Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Π°Ρ Π·Π°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°ΡΡ.
- CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Β«ΠΠ±Π»Π°ΡΠ½Π°Ρ ΡΠΏΠΈΡΠ°Π»ΡΒ» (Cloud Spiral)
- Π‘Π»Π°ΠΉΠ΄Π΅Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
- ΠΠ²Π΅Π·Π΄Π½ΡΠΉ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡ ΡΠΎΠ½ Π² CSS
- ΠΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΡΠΉ ΡΠ»Π°ΠΉΠ΄Π΅Ρ Ρ ΡΠΈΡΡΡΠΌ CSS
- ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΡΠΈΡΠ΅ΡΠ±Π»Π°ΡΠ° ΡΠ°ΡΠΎΠ² Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
- CSS Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π² ΠΏΠ»ΠΎΡΠΊΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ (Material)
- 3D-ΡΡΠ΅ΡΠ° Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
- ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π³ΡΠ°Π½ΠΈΡ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS Π±Π΅Π· SVG
- Mr. JeellyFish — ΡΠΈΡΡΠ°Ρ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΡ
- ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΠΎΡΡΡ Π½Π° CSS
- ΠΠΎΠ΄Π²ΠΎΠ΄Π½Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
- ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΊΡΠ±-ΡΡΠ½ΡΡΠΊΠ°
- ΠΠ΅ΡΡΠ°ΡΡΠΈΠΉ Π·Π°Π³ΡΡΠ·ΡΠΈΠΊ
- ΠΠ΅ΠΌΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
- Π¦Π²Π΅ΡΠΎΠ²Π°Ρ ΠΏΠ°Π»ΠΈΡΡΠ° Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
- Π§Π°Ρ Π±ΠΎΡ
- ΠΠ΅ΡΠ°ΡΡΠΈΠΉ ΡΠΎΠ±ΠΎΡ
- ΠΠ°ΡΠ»Π°Π΄ΠΈΡΠ΅ΡΡ ΡΡΠΈΠΌΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡΠΌΠΈ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π»Π΅Π³ΠΊΠΎΡΡΠΈ ΡΠ²ΠΎΠ΅ΠΌΡ ΡΠ°ΠΉΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠΉ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π²Π΅ΡΠ½ΡΡ ΠΎΠ±Π»Π°ΡΠ½ΡΡ ΡΠΏΠΈΡΠ°Π»Ρ. ΠΡΠ³Π»ΡΠ΄ΠΈΡ Π·Π°Π²ΠΎΡΠ°ΠΆΠΈΠ²Π°ΡΡΠ΅!
Π Π΅ΡΠ΅ Π΅ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ°. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π΅Π΅, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ΄ΠΎΠ³ΡΠ΅ΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅Ρ ΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΠ΅ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ, ΠΈ ΠΎΠ½Π° Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ, ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ°ΠΊ ΠΆΠ°ΠΆΠ΄ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ.
ΠΡΠΎΡ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΡΠΉ Π·Π²Π΅Π·Π΄Π½ΡΠΉ ΡΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΡΠ΅ΠΊΡ ΠΏΠ°ΡΠ°Π»Π»Π°ΠΊΡΠ°, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π·Π°ΠΌΠ°Π½ΡΠΈΠ²ΡΡ ΡΠ΅ΠΌΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ.
ΠΠΎΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π²Π°ΡΠΈΠ°Π½Ρ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ°. ΠΠ° ΡΡΠΎΡ ΡΠ°Π· Ρ Π½Π΅Π³ΠΎ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, Π½ΠΎ ΠΎΠ½ Ρ ΠΎΡΠΎΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΊΠ°ΠΊ-ΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅, ΡΠΎ ΡΡΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ°ΡΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½Π° Π²Π°ΠΌ ΠΏΠΎΠ΄ΠΎΠΉΡΠΈ.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ, ΠΊΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΏΠ»ΠΎΡΠΊΠΈΠΉ (material) Π΄ΠΈΠ·Π°ΠΉΠ½, ΡΠΎ ΡΡΠ° Π±ΡΡΡΡΠ°Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ!
ΠΠ° ΡΡΡ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΌΠΎΡΡΠ΅ΡΡ Π²Π΅ΡΡ Π΄Π΅Π½Ρ! ΠΠ½Π° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΡΡ ΡΡΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠΎΡΠΌΡ ΠΈ ΡΠ²Π΅Ρ.
ΠΠΎΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΎΡΡΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠ°ΠΌΠΊΠΈ Π±Π»ΠΎΠΊΠ° Π½Π° ΡΠΈΡΡΠΎΠΌ CSS, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
ΠΠ΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎΡΡΡ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°ΡΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΊ Π²Π°ΡΠ΅ΠΌΡ ΠΏΡΠΈΡΡΡΡΡΠ²ΠΈΡ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅. Π Β«ΠΌΠΈΡΡΠ΅Ρ ΠΠ΅Π΄ΡΠ·Π°Β» ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ ΡΠΎΠΌΡ ΠΏΡΠΈΠΌΠ΅Ρ. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΠΊΠ°ΠΊ ΠΎΠ½ Π΄Π²ΠΈΠΆΠ΅ΡΡΡ ΠΏΠΎ ΡΠΊΡΠ°Π½Ρ.
ΠΠΎΠ·Π²ΠΎΠ»ΡΡΠ΅ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΡΠΌ ΡΠ°ΠΉΡΠ° ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ Π²Π°ΠΌ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠ΅ ΠΏΠΈΡΡΠΌΠΎ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ, Π° Π½Π΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»ΠΈΠΊΠ° ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅.
Π ΡΡΠΎΠΉ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΊΠΈΡΡ ΠΏΠ»Π°Π²Π°ΡΡ ΠΈ ΠΈΡΡΠ΅Π·Π°ΡΡ ΠΈΠ· ΠΏΠΎΠ»Ρ Π·ΡΠ΅Π½ΠΈΡ. ΠΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΡΠΉ Π² Π½Π΅ΠΉ Ρ ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΡΠΈΠ»Ρ ΠΈΠΌΠ΅Π΅Ρ Π³Π΅ΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ΡΠΊΡΡ ΡΠΎΡΠΌΡ ΠΈ ΡΡΠ°Π·Ρ Π±ΡΠΎΡΠ°Π΅ΡΡΡ Π² Π³Π»Π°Π·Π°.
ΠΠ΅Π»ΡΡΠΉ ΠΊΡΠ± ΠΏΠΎΠ΄ΠΏΡΡΠ³ΠΈΠ²Π°Π΅Ρ ΠΈ ΠΏΡΠΈΠΆΠΈΠΌΠ°Π΅ΡΡΡ ΠΊ ΠΊΡΠ°Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ, ΡΠΆΠΈΠΌΠ°Π΅ΡΡΡ ΠΈ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΡΠΌΠ΅Π½ΠΈΡΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅.
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠ΅Π»ΠΎΠ°Π΄Π΅Ρ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΊΠΎΠ»Π΅ΡΠΎ ΠΈ ΡΠΎΡΠΊΠ° Π³ΠΎΠ½ΡΡΡΡΡ Π΄ΡΡΠ³ Π·Π° Π΄ΡΡΠ³ΠΎΠΌ Π² ΠΏΠΎΠ»Π΅ Π·ΡΠ΅Π½ΠΈΡ.
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΏΠ»ΠΈΡΠΊΠΈ ΡΠ°Π·Π²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡΡΡ, ΡΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΊΠΎΠ½ΡΡΠ°ΡΡΠ½ΡΠΉ ΡΠ²Π΅Ρ. ΠΠ· ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π° ΠΊΠ²Π°Π΄ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΎΠ±ΡΠ°Π·ΡΠ΅ΡΡΡ ΡΡΠ΅ΡΠ°.
ΠΡΠ»ΠΈ Π²Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΡΠ΅ ΡΡΠ»ΡΠ³ΠΈ Π² ΡΡΠ΅ΡΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈΠ»ΠΈ ΠΈΡΠΊΡΡΡΡΠ²Π°, ΡΡΠ° ΡΠ²Π΅ΡΠΎΠ²Π°Ρ ΠΏΠ°Π»ΠΈΡΡΠ° Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ.
Π₯ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ Ρ Π²Π°Ρ Π½Π° ΡΠ°ΠΉΡΠ΅ Π΅ΡΡΡ ΡΠ°Ρ? ΠΡΠ° CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ°Ρ-Π±ΠΎΡΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠ΅ ΠΈ ΠΏΡΠΈ ΡΡΠΎΠΌ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.
Π₯ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ Π·Π½Π°ΡΡ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠ°ΠΉΡ Π½Π΅ ΡΠΏΠΎΡΠΎΠ±Π΅Π½ ΡΠΊΡΠ°ΡΠΈΡΡ Π»Π΅ΡΠ°ΡΡΠΈΠΉ ΡΠΎΠ±ΠΎΡ? ΠΡΠΎΡ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ Π·Π°Π±Π°Π²Π½ΡΠΉ ΠΏΠ°ΡΠ΅Π½Ρ Π»Π΅ΡΠ°Π΅Ρ ΠΏΠΎ ΡΠΊΡΠ°Π½Ρ Π½Π° Π»Π΅ΡΠ°ΡΡΠ΅ΠΉ ΡΠ°ΡΠ΅Π»ΠΊΠ΅, Π·Π°ΡΠ΅ΠΌ ΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ, ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π² ΠΏΠΎΠ»Π΅ Π·ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈ ΠΏΠΎΡΠΎΠΌ ΡΠ½ΠΎΠ²Π° ΠΈΡΡΠ΅Π·Π°Π΅Ρ.
ΠΠ°Π΄Π΅ΡΡΡ, ΡΠ΅ΠΏΠ΅ΡΡ Π²Ρ Π»ΡΡΡΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΠ΅, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΠΈΡΡΠ°Ρ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΈ ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π΅ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅. Π‘ΠΌΡΡΠ» Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ, ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΡΡ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅, Π²Π°ΡΡΠΈΡΡΠ΅ΡΡΡ ΠΎΡ ΡΡΠΏΠ΅Ρ ΠΏΡΠ°ΠΊΡΠΈΡΠ½ΠΎΠ³ΠΎ Π΄ΠΎ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π³Π»ΡΠΏΠΎΠ³ΠΎ. ΠΠ΄Π½Π°ΠΊΠΎ ΠΊΠ°ΠΆΠ΄Π°Ρ ΠΈΠ· ΡΡΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ±Π½Π° ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ Π²Π΄ΠΎΡ Π½ΠΎΠ²ΠΈΡΡ. ΠΠ°ΠΊ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°, ΡΠ°ΠΊ ΠΈ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ ΡΠ°ΠΉΡΠ°.
ΠΡΠΈΡΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈ ΡΠ²ΠΎΡΡΠ΅ΡΡΠ²Π°!
ΠΠ°Π΄ΠΈΠΌ ΠΠ²ΠΎΡΠ½ΠΈΠΊΠΎΠ²Π°Π²ΡΠΎΡ-ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΡΠΈΠΊ ΡΡΠ°ΡΡΠΈ Β«17 Cool Pure CSS AnimationsΒ»
ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΎΡΡΠ°Π²Π»ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΈ ΠΎΡΠ·ΡΠ²Ρ ΠΏΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΠ΅ΠΌΠ΅ ΡΡΠ°ΡΡΠΈ. ΠΠ° ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ, ΠΎΡΠΊΠ»ΠΈΠΊΠΈ, Π΄ΠΈΠ·Π»Π°ΠΉΠΊΠΈ, ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ, Π»Π°ΠΉΠΊΠΈ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ Π²Π°ΠΌ ΡΠΏΠ°ΡΠΈΠ±ΠΎ!
ΠΠ»Π°Π²Π½ΡΠ΅ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ transition βΒ ΠΆΡΡΠ½Π°Π» Β«ΠΠΎΠΊΡΠ°ΠΉΠΏΒ»
CSS-ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ transition
ΡΠ»ΡΠΆΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠ»Π°Π²Π½ΡΡ
ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρ Π΄Π²ΡΠΌΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΡΠ΅Π·ΠΊΠΈΡ
ΠΈΒ Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΡΡ
ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, Π΄Π΅Π»Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΠΎΠ»Π΅Π΅ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΠΈΒ ΠΏΡΠΈΡΡΠ½ΠΎΠΉ Π΄Π»Ρ Π³Π»Π°Π·.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π²Β ΠΎΠ±ΡΠ΅ΠΌ Π²ΠΈΠ΄Π΅ Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΡΠ°ΠΊ:
transition: property duration timing-function delay;
property
Β β ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ CSS-ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄. ΠΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ²ΠΎΠΉΡΡΠ², ΡΠ°Π·Π΄Π΅Π»ΠΈΠ² ΠΈΡ Β Π·Π°ΠΏΡΡΠΎΠΉ. ΠΡΠ»ΠΈ ΡΠΊΠ°Π·Π°ΡΡall
, ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ Π±ΡΠ΄ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊΠΎΒ Π²ΡΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.duration
Β β ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°. ΠΠ°Π΄Π°ΡΡΡΡ Π²Β ΡΠ΅ΠΊΡΠ½Π΄Π°Ρ (s
) ΠΈΠ»ΠΈ ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄Π°Ρ (ms
).timing-function
Β β ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΊΠΎΡΠΎΡΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° Π²Β ΡΠ°Π·Π½ΡΠ΅ ΠΌΠΎΠΌΠ΅Π½ΡΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ:linear
ease
,ease-in
,ease-out
,ease-in-out
.delay
Β β Π²ΡΠ΅ΠΌΡ Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ ΠΏΠ΅ΡΠ΅Π΄ Π½Π°ΡΠ°Π»ΠΎΠΌ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°. ΠΠ°Π΄Π°ΡΡΡΡ Π²Β ΡΠ΅ΠΊΡΠ½Π΄Π°Ρ (s
) ΠΈΠ»ΠΈ ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄Π°Ρ (ms
).
ΠΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
ΠΒ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΏΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° (background-color
) Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° p
ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°. Π€ΠΎΠ½ ΠΏΠ»Π°Π²Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ Π·Π°Β ΡΠ΅ΠΊΡΠ½Π΄Ρ.
p { background-color: blue; transition: background-color 1s ease-in-out; } p:hover { background-color: red; }ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΡΠΎΠ½Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°
π ΠΡΠ»ΠΈ Π²ΡΒ Π½Π΅Β ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΠ΅, ΡΡΠΎ Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ Π²Β ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΊΠΎΠ΄Π° ΠΈΒ ΠΎΡΠΊΡΠ΄Π° ΡΠ°ΠΌ p
, ΠΏΡΠΎΡΠΈΡΠ°ΠΉΡΠ΅ ΡΡΠ°ΡΡΡ ΠΏΡΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ.
ΠΒ ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ Π΄Π»Ρ Π΄Π²ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ² (
ΠΈΒ height
) ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° p
ΠΏΠ»Π°Π²Π½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ.
p { width: 100px; height: 100px; transition: width 2s, height 4s; } p:hover { width: 200px; height: 200px; }ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π°Β ΡΡΡΠ»ΠΊΡ.
a { color: blue; transition: color 0.3s ease-in-out; } a:hover { color: red; }ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΡΡΡΠ»ΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π°Β ΡΠ΅ΠΊΡΡ:
p { font-size: 16px; transition: font-size 0.5s ease; } p:hover { font-size: 24px; }
ΠΡΠ°Π½ΡΡ
βΉοΈΒ ΠΠ΅Β Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ. ΠΠ»Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π°Π½ΠΈΠΌΠΈΡΡΠ΅ΠΌΡΠΌ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
- Π¦Π²Π΅ΡΠΎΠ²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°:
color
,background-color
,border-color
ΠΈΒ Π΄ΡΡΠ³ΠΈΠ΅. - Π Π°Π·ΠΌΠ΅ΡΡ ΠΈΒ ΠΎΡΡΡΡΠΏΡ:
width
,height
,padding
,margin
,top
,right
,bottom
,left
ΠΈΒ Π΄ΡΡΠ³ΠΈΠ΅. - Π‘Π²ΠΎΠΉΡΡΠ²Π° ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΈ:
transform
(Π²ΠΊΠ»ΡΡΠ°Ρrotate
,scale
,translate
,skew
ΠΈΒ Π΄ΡΡΠ³ΠΈΠ΅). - ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ΅ΠΊΡΡΠ°:
font-size
,letter-spacing
,word-spacing
,line-height
. - Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ:
opacity
. - Π‘Π²ΠΎΠΉΡΡΠ²Π° Π³ΡΠ°Π½ΠΈΡΡ:
border-width
,border-radius
. - Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ:
position
.
β ΠΠ΅Β Π²ΡΠ΅ CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ²ΠΎΠΉΡΡΠ²Π° display
, content
, visibility
ΠΈΒ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ Π½Π΅Β ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ.
ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ Π½Π΅Β ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ² ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript. ΠΒ ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈΠ»ΠΈ JavaScript-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΈΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅Β ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Ρ, Π²ΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² @keyframes
ΠΈΒ animation
.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ transition
Ρ
ΠΎΡΠΎΡΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π²ΡΠ΅ΠΌΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ. ΠΠ»Ρ Π΄Π΅ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠ°ΡΠΈΡΡΡΡ ΠΊΒ ΡΠ°ΠΉΡΡ caniuse.
ΠΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ ΠΏΠΎΒ ΡΠ΅ΠΌΠ΅
- Π’ΡΠ΅Π½Π°ΠΆΡΡΡ ΠΏΠΎΒ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΡΠΌ ΠΎΡΒ HTML Academy.
- : hover, : focus, : activeΒ β ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
- Π€ΡΠ½ΠΊΡΠΈΠΈ ΠΏΠ»Π°Π²Π½ΠΎΡΡΠΈΒ β ΠΏΠΎΠ΄Π±ΠΎΡΠΊΠ° ΡΡΠ½ΠΊΡΠΈΠΉ ΠΏΠ»Π°Π²Π½ΠΎΡΡΠΈ ΠΎΡΒ ΠΠ½Π΄ΡΠ΅Ρ Π‘ΠΈΡΠ½ΠΈΠΊΠ° ΠΈΒ ΠΠ²Π°Π½Π° Π‘ΠΎΠ»ΠΎΠ²ΡΠ΅Π²Π°.
Β«ΠΠΎΠΊΡΠ°ΠΉΠΏΒ» βΒ ΠΆΡΡΠ½Π°Π» ΠΎ ΡΡΠΎΠ½ΡΠ΅Π½Π΄Π΅. Π§ΠΈΡΠ°ΠΉΡΠ΅, ΡΠ»ΡΡΠ°ΠΉΡΠ΅ ΠΈ ΡΡΠΈΡΠ΅ΡΡ Ρ Π½Π°ΠΌΠΈ.
Π’Π΅Π»Π΅Π³ΡΠ°ΠΌΠΠΎΠ΄ΠΊΠ°ΡΡΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΡΠ΅ ΡΡΠ΅Π±Π½ΠΈΠΊΠΈ
Π§ΠΈΡΠ°ΡΡ Π΄Π°Π»ΡΡΠ΅
ΠΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΠΈ ΠΎΡΠΎΡΠΌΠ»ΡΡΡ ΡΠΈΡΠ°ΡΡ
ΠΡΠ°ΡΠΈΠ²ΠΎ, ΠΏΡΠΎΡΡΠΎ ΠΈ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ΅ΠΊΡΡ Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ ΠΈ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΠ»ΠΈ.
CSS- 22Β ΠΈΡΠ½Ρ 2023
ΠΠΊΠ΅ΠΉ, ChatGPT, ΡΠ΄Π΅Π»Π°ΠΉ ΠΌΠ½Π΅ ΠΊΠ½ΠΎΠΏΠΊΡ
ΠΡΡΠΎΡΠΈΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ°Π·Π³ΠΎΠ²ΠΎΡΠ°
CSS- 21Β ΠΈΡΠ½Ρ 2023
ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ object-fit
ΠΠ°ΠΊ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΡΠΆΠΈΠΌΠ°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΏΠΎΠ΄ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±ΠΎΠΊΡΠ°.
CSS- 15Β ΠΈΡΠ½Ρ 2023
ΠΠ΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π² CSS: px, rem, em, fr, %
ΠΠ΄Π΅ ΠΈ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ.
CSS- 9Β ΠΈΡΠ½Ρ 2023
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΌΠΊΡ Π²ΠΎΠΊΡΡΠ³ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. CSS-ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ border
Π¦Π²Π΅ΡΠ½ΡΠ΅, ΡΠΎΡΠ΅ΡΠ½ΡΠ΅, ΠΏΡΠ½ΠΊΡΠΈΡΠ½ΡΠ΅ ΡΠ°ΠΌΠΊΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
CSS- 31Β ΠΌΠ°Ρ 2023
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π»ΡΠ±ΠΎΠΉ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠΈ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ animation
ΠΡΠΈΠΌΠ΅ΡΡ ΠΈ Π½ΡΠ°Π½ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
CSS- 29Β ΠΌΠ°Ρ 2023
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ΅Π½ΠΈ Π½Π° CSS: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ box-shadow
ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅, Π²Π½Π΅ΡΠ½ΠΈΠ΅, Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ β Π½Π° Π²ΡΠ΅ ΡΠ»ΡΡΠ°ΠΈ ΠΆΠΈΠ·Π½ΠΈ.
- 28Β ΠΌΠ°Ρ 2023
ΠΠ°ΠΊ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΡΠΈΠ»Ρ ΡΡΠΈΡΡΠ°. CSS-ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ font
Π‘Π΅ΠΌΠ΅ΠΉΡΡΠ²Π° ΡΡΠΈΡΡΠΎΠ², Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΠ΅ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ.
CSS- 27Β ΠΌΠ°Ρ 2023
ΠΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ transform Π² CSS Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ
ΠΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Π°Ρ ΡΡΠ°ΡΡΡ βΒ ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΌΠΈ.
CSS- 23Β ΠΌΠ°Ρ 2023
ΠΠ°ΠΊ ΠΎΡΠΎΡΠΌΠΈΡΡ ΡΠ΅ΠΊΡΡ: 11 Π³Π»Π°Π²Π½ΡΡ CSS-ΡΠ²ΠΎΠΉΡΡΠ²
ΠΠ½ΡΡΡΡΠΊΡΠΈΡ Π΄Π»Ρ Π»ΡΠ±ΠΈΡΠ΅Π»Π΅ΠΉ ΠΏΠΎΠΈΠ³ΡΠ°ΡΡΡΡ ΡΠΎ ΡΡΠΈΡΡΠ°ΠΌΠΈ.
CSS- 23Β ΠΌΠ°Ρ 2023
Grids — Pure
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² Pure Grids
Pure Grids ΠΏΡΠΎΡΡΡ Π² ΡΠ°Π±ΠΎΡΠ΅ ΠΈ ΠΎΡΠ΅Π½Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½Ρ. Π‘Π»Π΅Π΄ΡΠ΅Ρ ΠΈΠΌΠ΅ΡΡ Π² Π²ΠΈΠ΄Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΡΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΉ:
- ΠΠ»Π°ΡΡΡ ΡΠ΅ΡΠΊΠΈ ΠΈ ΠΊΠ»Π°ΡΡΡ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ
- Π§ΠΈΡΡΡΠ΅ ΡΠ΅ΡΠΊΠΈ ΡΠΎΡΡΠΎΡΡ ΠΈΠ· Π΄Π²ΡΡ
ΡΠΈΠΏΠΎΠ² ΠΊΠ»Π°ΡΡΠΎΠ²: ΠΊΠ»Π°ΡΡ ΡΠ΅ΡΠΊΠΈ (
) ΠΈ ΠΊΠ»Π°ΡΡΡ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ (pure-u
ΠΈΠ»ΠΈpure-u-*
) - Π¨ΠΈΡΠΈΠ½Π° Π΅Π΄ΠΈΠ½ΠΈΡ ΡΠ°Π²Π½Π° Π΄ΡΠΎΠ±ΡΠΌ
- Π£ Π΅Π΄ΠΈΠ½ΠΈΡ Π΅ΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΠΈΡ
ΡΠΈΡΠΈΠ½Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ,
pure-u-1-2
ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ 50%, ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊpure-u-1-5
Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΈΡΠΈΠ½Ρ 20%. - ΠΡΠ΅ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ΅ΡΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΠ°ΠΌΠΈ
- ΠΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠ΅ΡΡ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΊΠ»Π°ΡΡΠ°
pure-g
Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΠ΅ΠΉ ΡΠ΅ΡΠΊΠΈ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΊΠ»Π°ΡΡΠ°pure-u
ΠΈΠ»ΠΈpure-u-*
. - ΠΠΎΠ½ΡΠ΅Π½Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²Π½ΡΡΡΠΈ Π±Π»ΠΎΠΊΠΎΠ² ΡΠ΅ΡΠΊΠΈ
- ΠΠ΅ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, Π²ΠΈΠ΄ΠΈΠΌΡΠΉ Π»ΡΠ΄ΡΠΌ, Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡΡ Π²Π½ΡΡΡΠΈ Π±Π»ΠΎΠΊΠ° ΡΠ΅ΡΠΊΠΈ. ΠΡΠΎ Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ.
ΠΠ°ΡΠ½Π΅ΠΌ Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°. ΠΠΎΡ ΡΠ΅ΡΠΊΠ° Ρ ΡΡΠ΅ΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ:
Π’ΡΠ΅ΡΠΈΠΉ
Π’ΡΠ΅ΡΠΈΠΉ
Π’ΡΠ΅ΡΠΈΠΉ
Grids Units Sizes
Π§ΠΈΡΡΡΠ΅ ΠΊΠΎΡΠ°Π±Π»ΠΈ Ρ ΡΠ΅ΡΠΊΠΎΠΉ 5th ΠΈ 24th Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ΅ΡΠΊΠΈ. ΠΠΈΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊ pure-u-*
ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ°, Π³Π΄Π΅ *
β ΠΎΠ΄Π½Π° ΠΈΠ· Π΄ΡΠΎΠ±Π΅ΠΉ Π΅Π΄ΠΈΠ½ΠΈΡ, ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ
Π½ΠΈΠΆΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠΌΡ ΠΊΠ»Π°ΡΡΠ° ΠΌΠΎΠ΄ΡΠ»Ρ Π΄Π»Ρ ΡΠΈΡΠΈΠ½Ρ 50%: pure-u-1-2
.
ΠΠ΄ΠΈΠ½ΠΈΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ 5-ΠΉ
ΠΠ΄ΠΈΠ½ΠΈΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ 24-ΠΉ
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡ
ΠΡ ΡΠ°Π±ΠΎΡΠ°Π΅ΠΌ Π½Π°Π΄ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΡ Π»ΡΠ΄ΡΠΌ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ Pure Grids. ΠΠ΅ΡΠ²ΡΠ΅ Π½ΠΈΠ·ΠΊΠΎΡΡΠΎΠ²Π½Π΅Π²ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ, Pure Grids Rework Plugin , Π΄ΠΎΡΡΡΠΏΠ½Ρ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠΆΠ΅ ΡΠ΅Π³ΠΎΠ΄Π½Ρ β ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΡΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π±Π»ΠΎΠΊΠΎΠ² Pure.
Π§ΠΈΡΡΡΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΡΠ΅ΡΠΊΠΈ
Pure ΠΈΠΌΠ΅Π΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΡΠ΅ΡΠΊΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π΅ΠΊΠ»Π°ΡΠ°ΡΠΈΠ²Π½ΠΎ ΡΠ΅ΡΠ΅Π· ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ² CSS. ΠΡΠΎ Π½Π°Π΄Π΅ΠΆΠ½Π°Ρ ΠΈ Π³ΠΈΠ±ΠΊΠ°Ρ ΡΠ΅ΡΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΡΡΠΎΠΈΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ ΡΠ΅ΡΠΊΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
ΠΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π½Π° Π²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π½Π΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΠ°Π½Ρ, ΠΌΡ Π½Π΅ Π²ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΡΠ΅ΡΠΊΡ ΠΊΠ°ΠΊ ΡΠ°ΡΡΡ pure.css
. ΠΠ°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ Π²ΡΡΠ°ΡΠΈΡΡ Π΅Π³ΠΎ ΠΊΠ°ΠΊ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΠ» CSS. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π½Π° ΡΠ²ΠΎΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ΅Π³
.
ΠΠ±ΡΡΠ½Π°Ρ ΡΠ΅ΡΠΊΠ° Pure ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ ΡΠ΅ΡΠΊΠ°
ΠΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ½ΡΡΡ ΡΠ°Π·Π½ΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΡΠ΅ΡΠΊΠΎΠΉ Pure ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅. Π€ΡΠ°Π³ΠΌΠ΅Π½Ρ Π½ΠΈΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΠΏΠΈΡΡΡΡΡ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΡΠ΅ΡΠΊΠΈ Pure. ΠΡΠΈ ΡΠ΅ΡΠΊΠΈ Π½Π΅ ΠΎΡΠ²Π΅ΡΠ°ΡΡ. ΠΠ½ΠΈ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ΄ΡΡ width: 33.33%
, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°.
<Π΄Π΅Π»> <Π΄Π΅Π»> ... <Π΄Π΅Π»> ... <Π΄Π΅Π»> ...
Π’Π΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΡΠ΅ΡΠΊΡ. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΡΡΠΎΠΉ ΡΠ΅ΡΠΊΠ΅ Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅ΡΡ ΡΠΈΡΠΈΠ½Ρ : 100%
Π½Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ
ΡΠΊΡΠ°Π½Π°Ρ
, Π½ΠΎ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡ Π΄ΠΎ ΡΠΈΡΠΈΠ½Ρ : 33,33%
Π½Π° ΡΠΊΡΠ°Π½Π°Ρ
ΡΡΠ΅Π΄Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ Π²ΡΡΠ΅.
<Π΄Π΅Π»> <Π΄Π΅Π»> ... <Π΄Π΅Π»> ... <Π΄Π΅Π»> ...
ΠΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΡΠ΅ΡΠΎΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠ΅ΡΠΊΠΈ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΠΎΡΠΊΠ°Ρ , Π΄ΠΎΠ±Π°Π²Π»ΡΡ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ². ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΡΠ΅ΡΠΊΠΈ Pure ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠΎΡΡΠ°Π²Π»ΡΡΡΡΡ ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² ΠΈ ΡΠΎΡΠΊΠ°ΠΌΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π° ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ².
ΠΠ»ΡΡ | CSS Media Query | ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ | ΠΠΌΡ ΠΊΠ»Π°ΡΡΠ° | |||
---|---|---|---|---|---|---|
ΠΠ΅Ρ 9012 5 | ΠΠ΅Ρ | ΠΡΠ΅Π³Π΄Π° | .pure-u-* | |||
ΡΠΌ | @media ΡΠΊΡΠ°Π½ ΠΈ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 35. 5em) | β₯ 568px | .pure -Ρ- ΡΠΌ --* | |||
md | @media screen and (min-width: 48em) | β₯ 768px | .pure-u- md --* | |||
lg | @media screen and (min-width: 64em) | β₯ 1024px | .pure-u- lg --* | |||
xl | ΠΠΊΡΠ°Π½ @media ΠΈ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 80em) | β₯ 1280px | xxl | @ΡΠΊΡΠ°Π½ @media ΠΈ (ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 120em) | β₯ 1920px | .pure-u- xxl --* |
xxxl | 9001 0 @media screen and (min-width: 160em) | β₯ 2560px | .pure -Ρ- xxxl --* | |||
x4k | @media screen and (min-width: 240em) | β₯ 3840px | . pure-u- x4k -* |
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡ Π΄Π»Ρ ΡΠΈΡΠΈΠ½Ρ
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ, ΡΡΠΎ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ em
Π΄Π»Ρ ΡΠΈΡΠΈΠ½Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π² CSS Media Query Π²ΠΌΠ΅ΡΡΠΎ px
. ΠΡΠΎ Π±ΡΠ»ΠΎ ΡΠΎΠ·Π½Π°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°ΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ, ΠΊΠΎΠ³Π΄Π° Π»ΡΠ΄ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ΠΉ ΠΡΡΠ΄Π° Π€ΡΠΎΡΡΠ°, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠΏΡΠ°Π²ΠΎΡΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎΠ± ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΡ
Π΅Π΄ΠΈΠ½ΠΈΡ Π² ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠ°Ρ
.
ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΠΎΡΠ»ΠΈΡΠ½ΡΠ΅ ΠΎΡ em
, Π²Ρ Π²ΡΠ΅Π³Π΄Π° ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Β«ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡΒ». ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ em
Π² px
Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ:
1em == 16px *
* ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ em
Π² px
ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΎ Π½Π° ΡΠ°Π·ΠΌΠ΅ΡΠ΅ ΡΡΠΈΡΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΡΡΠ½ΠΎ 16px
, Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ Π² Π½Π°ΡΡΡΠΎΠΉΠΊΠ°Ρ
ΡΠ²ΠΎΠ΅Π³ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ ΡΠΈΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΡΠ΅ΡΠΎΠΊ
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ ΡΠ΅ΡΠΊΠ° Pure ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠΎΠΊΠΈ Ρ ΡΠ΅ΡΡΡΡΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ. Π‘ΡΠΎΠ»Π±ΡΡ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π½Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ
ΡΠΊΡΠ°Π½Π°Ρ
, Π·Π°Π½ΠΈΠΌΠ°ΡΡ ΡΠΈΡΠΈΠ½Ρ : 50%
Π½Π° ΡΠΊΡΠ°Π½Π°Ρ
ΡΡΠ΅Π΄Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ ΡΠΈΡΠΈΠ½Ρ : 25%
Π½Π° Π±ΠΎΠ»ΡΡΠΈΡ
ΡΠΊΡΠ°Π½Π°Ρ
.
ΠΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ ΠΏΡΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠ° .pure-u-1
Π΄Π»Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ
ΡΠΊΡΠ°Π½ΠΎΠ², .pure-u-md-1-2
Π΄Π»Ρ ΡΠΊΡΠ°Π½ΠΎΠ² ΡΡΠ΅Π΄Π½Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈ .pure-u-lg-1- 4
Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΡ
ΡΠΊΡΠ°Π½ΠΎΠ². ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΅ΡΠΊΠ° ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°Π»Π° Π½Π° ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π°.
Π‘Π΅ΡΠΊΠΈ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
Π‘ΠΈΡΡΠ΅ΠΌΠ° ΡΠ΅ΡΠΎΠΊ Pure ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π° Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ². ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΈΠΌΠ΅ΡΡ ΡΠ΅ΡΠΊΡ Π½Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ
ΡΠΊΡΠ°Π½Π°Ρ
, ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ² pure-u-*
Π΄Π»Ρ Π²Π°ΡΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
ΡΠ΅ΡΠΎΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΏΠ»Π°Π²Π½ΡΠΌΠΈ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π»ΠΈΡΡ ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°Π»ΠΈΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ, ΡΠΎΡ
ΡΠ°Π½ΡΡ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π° Π½ΠΈΡ
ΠΊΠ»Π°ΡΡ .pure-img
. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅.
ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΠΎΠ² ΠΈ Π³ΡΠ°Π½ΠΈΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΠ΅ΡΠΊΠΈ
Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΎΡΡΡΡΠΏΡ Π² Pure Grids, Ρ Π²Π°Ρ Π΅ΡΡΡ Π΄Π²Π° Π²Π°ΡΠΈΠ°Π½ΡΠ°. ΠΠ΅ΡΠ²ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ β Π²Π»ΠΎΠΆΠΈΡΡ