ΠΡΠ°ΡΠΈΠ²ΡΠ΅ css ΡΠ°ΠΌΠΊΠΈ: 5 Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΊΡΠ°ΡΠΈΠ²ΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ°ΠΌΠΎΠΊ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS|ΡΠΏΠ°ΡΠ³Π°Π»ΠΊΠΈ Π±Π»ΠΎΠ³Π΅ΡΡΠΈ
28.06.2023
Π Π°Π·Π½ΠΎΠ΅
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡΠΎΡΡΡΡ ΡΠ°ΠΌΠΎΠΊ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS
ΠΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΎΡΡΡΡ ΡΠ°ΠΌΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π΄Π΅ΡΡΡΠΈ ΡΡΠΈΠ»Π΅ΠΉ: none (Π½Π΅Ρ), hidden (ΡΠΏΡΡΡΠ°Π½Π½Π°Ρ), solid (ΡΠ΅Π»ΡΠ½Π°Ρ), dashed (ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΡΠΌΠΈ), dotted (ΡΠΎΡΠΊΠ°ΠΌΠΈ), groove (ΡΠ³Π»ΡΠ±Π»Π΅Π½Π½Π°Ρ), ridge (ΠΏΡΠΈΠΏΠΎΠ΄Π½ΡΡΠ°Ρ), double (Π΄Π²ΠΎΠΉΠ½Π°Ρ), inset (Π²Π½ΡΡΡΠ΅Π½Π½ΡΡ) ΠΈΒ outset (Π²Π½Π΅ΡΠ½ΡΡ). Π’Π°ΠΊΠΆΠ΅ Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ CSS3 Π΅ΡΡΡ ΡΡΠΈ ΡΡΠΈΠ»Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π½ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅: wave (Π²ΠΎΠ»Π½Π°), dot-dash (ΡΠΎΡΠΊΠ°ΠΌΠΈ ΠΈ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΡΠΌΠΈ), ΠΈ dot-dot-dash (ΡΠΎΡΠΊΠ°ΠΌΠΈ, ΡΠΎΡΠΊΠ°ΠΌΠΈ ΠΈΒ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ).
Π’ΠΎΠ»ΡΠΈΠ½Π° ΡΠ°ΠΌΠΎΠΊ CSS ΠΎΠ±ΡΡΠ½ΠΎ Π·Π°Π΄Π°Π΅ΡΡΡ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ΠΈΠ·-Π·Π° ΡΠΎΠ³ΠΎ, ΡΡΠΎΒ ΠΎΠ½ΠΈ ΠΎΠ±ΡΡΠ½ΠΎ ΠΎΡΠ΅Π½Ρ ΡΠΎΠ½ΠΊΠΈΠ΅ Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ². ΠΠΎ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈ ΡΠΈΡΠΈΠ½Π° ΡΠ°ΠΌΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°Π΄Π°Π½Π° Π² Π»ΡΠ±ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ CSS. ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ, ΠΊΡΠΎΠΌΠ΅ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ². Π¦Π²Π΅Ρ ΡΠ°ΠΌΠΊΠΈ ΡΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°Π΄Π°Π½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ CSS, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠ΅Β ΡΠ°ΠΌΠΊΠΈ.
ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π·Π°Π΄Π°Π½ΠΈΡ ΡΠ°ΠΌΠΎΠΊ β ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½Π°Ρ Π·Π°ΠΏΠΈΡΡ Π΄Π»Ρ Π·Π°Π΄Π°Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΡΠΈΠ»Ρ, ΡΠΎΠ»ΡΠΈΠ½Ρ ΠΈ ΡΠ²Π΅ΡΠ°, ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΡ Β ΠΏΡΠΎΠ±Π΅Π»Π°ΠΌΠΈ:
border: style thickness color;
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΠ°ΠΌΠΊΠΈ Ρ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠ³Π»Π°ΠΌΠΈ Π²ΠΎΠΊΡΡΠ³ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄Π° Π½Π°Π·Π²Π°Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΡΠΈΠ»Ρ ΡΠ°ΠΌΠΊΠΈ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ, ΠΊΠ°ΠΊΒ ΡΡΠΈ ΡΡΠΈΠ»ΠΈ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΠΈΒ Π½Π° ΠΏΡΡΠΌΡΡ ΠΈΒ Π½Π° Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΡ Β ΡΡΠ°ΡΡΠΊΠ°Ρ :
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ ΡΡΠΈΠ»Ρ ΡΠ°ΠΌΠΊΠΈ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΡΡΠ²ΡΡΠ²ΠΈΡΠ΅Π»Π΅Π½ ΠΊ ΡΠΎΠ»ΡΠΈΠ½Π΅, ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΡΡ Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΌΠ΅ΠΆΠ΄Ρ Π²Π½Π΅ΡΠ½Π΅ΠΉ ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ Π»ΠΈΠ½ΠΈΡΠΌΠΈ ΠΈ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΊΠΎΠΌ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ. Π£Π³Π»ΡΠ±Π»Π΅Π½Π½ΡΠΉ ΠΈ ΠΏΡΠΈΠΏΠΎΠ΄Π½ΡΡΡΠΉ ΡΡΠΈΠ»Ρ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΡΠ²ΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½Ρ ΠΊ ΡΠ²Π΅ΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄Π½ΡΠ΅ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΡΡΠ΅Π½ΠΊΠΎΠ² Π΄Π»Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ
ΠΈ Π²Π½Π΅ΡΠ½ΠΈΡ
Π»ΠΈΠ½ΠΈΠΉ. ΠΠ·-Π·Π° ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΈΡΡΡΡ
ΡΠ²Π΅ΡΠΎΠ², ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ Π±Π΅Π»ΡΠΉ, ΡΠ΅ΡΠ½ΡΠΉ ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π² ΡΡΠΈΡ
ΡΠ»ΡΡΠ°ΡΡ
Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π½Π΅ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉΒ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ. ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΠΈ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΡΡΠΈΠ»ΠΈ ΡΠ°ΠΌΠΊΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Ρ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΈ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΡΠ°Π»ΡΡΠΈΠ²ΠΎ, Π΅ΡΠ»ΠΈ Π·Π°Π΄Π°Π½Ρ ΠΎΡΠ΅Π½ΡΒ ΡΠΈΡΠΎΠΊΠΈΠΌΠΈ.
Π Π°ΠΌΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ°ΠΌΠΊΠΈ ΡΠ»Π΅Π²Π°, ΡΠ°ΠΌΠΊΠΈ ΡΠ½ΠΈΠ·Ρ ΠΈ Ρ.Β Π΄.,Β ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΡΡ Π·Π°ΠΏΠΈΡΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ, ΠΏΡΠ°Π²ΠΎΠΉ, Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΈ Π»Π΅Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½ ΡΠ°ΠΌΠΊΠΈ, Ρ.Β Π΅., ΠΏΠΎ ΡΠ°ΡΠΎΠ²ΠΎΠΉ ΡΡΡΠ΅Π»ΠΊΠ΅ Π½Π°ΡΠΈΠ½Π°Ρ Ρ Π²Π΅ΡΡ Π°. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΠΎΡΠ΅Π½Ρ Π΄Π΅ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°: ΡΠ²Π΅Ρ ΡΠ°ΠΌΠΊΠΈ ΡΠΏΡΠ°Π²Π°, ΡΠΈΡΠΈΠ½Π° ΡΠ°ΠΌΠΊΠΈ ΡΠ»Π΅Π²Π° ΠΈΒ Ρ.Β Π΄.
ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΠ°ΠΊΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ°ΠΌΠΊΠΈ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ Polaroid, ΠΊΠ°ΠΊ Π² Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ Π½ΠΈΠΆΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠΎΠ»ΡΠΈΠ½Π° Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΡΠ°ΠΌΠΊΠΈ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ
ΡΡΠ΅Ρ
ΡΡΠΎΡΠΎΠ½. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ΄ΠΎΠ±Π½ΠΎ Π·Π°ΠΏΠΈΡΠ°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ°ΠΌΠΊΠΈ CSS ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΒ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
img#polaroid { border: 25px solid #e8e8d3; border-bottom-width: 50px; }
ΠΠ°Π΄ΠΎ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π² ΠΎΠ±ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ Ρ SVG Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ ΡΡΠΈΠ»ΡΠΌΠΈΒ ΡΠ°ΠΌΠΊΠΈ.
ΠΠ²ΡΠΎΡ ΡΡΠΎΠΊΠ° DudleyΒ Storey
Π‘ΠΌΠΎΡΡΠΈΡΠ΅Β ΡΠ°ΠΊΠΆΠ΅:
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½Π½ΡΡ Π½ΡΠΌΠ΅ΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΏΠΈΡΠΊΠΎΠ² ΡΒ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌΒ CSS
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ ΠΏΠΎΡΠ΅ΡΠ΅Π½Π½ΡΡ ΡΡΡΠ»ΠΎΠΊ ΡΒ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌΒ SVG
- ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΡΡΠ΅ΡΠΊΠΎΠ²Β ΡΡΠΈΡΡΠΎΠ²Β OpenType
border-style | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
ΠΡΠ°ΡΠΊΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ | none |
---|---|
ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ | ΠΠ΅Ρ |
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ | ΠΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ |
Π‘ΡΡΠ»ΠΊΠ° Π½Π° ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ | http://www.![]() |
ΠΠ΅ΡΡΠΈΠΈ CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΡΠΈΠ»Ρ Π³ΡΠ°Π½ΠΈΡΡ Π²ΠΎΠΊΡΡΠ³ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠΎΠΏΡΡΡΠΈΠΌΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ ΡΡΠΎΡΠΎΠ½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | inherit
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
ΠΠ»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π²ΠΈΠ΄ΠΎΠΌ Π³ΡΠ°Π½ΠΈΡΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ²ΠΎΠΉΡΡΠ²Π° border-style. ΠΠΈΠ΄ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ³ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΡΠΎΠ»ΡΠΈΠ½Ρ Π³ΡΠ°Π½ΠΈΡΡ. Π ΡΠ°Π±Π».Β 1 ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ Π½Π°Π·Π²Π°Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΈ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌΠ°Ρ ΡΠ°ΠΌΠΊΠ° ΠΏΡΠΈ ΡΠ°Π·Π½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡΡ ΡΠΎΠ»ΡΠΈΠ½ΡΒ β 1, 3, 5 ΠΈ 7 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ².
1 ΠΏΠΈΠΊΡΠ΅Π» | 3 ΠΏΠΈΠΊΡΠ΅Π»Π° | 5 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ² | 7 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ² |
---|---|---|---|
dotted | dotted | dotted | dotted |
dashed | dashed | dashed | dashed |
solid | solid | solid | solid |
double | double | double | double |
groove | groove | groove | groove |
ridge | ridge | ridge | ridge |
inset | inset | inset | inset |
outset | outset | outset | outset |
ΠΡΠΎΠΌΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ
Π² ΡΠ°Π±Π»ΠΈΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π°.
- none
- ΠΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ ΠΈ Π΅Π΅ ΡΠΎΠ»ΡΠΈΠ½Π° (border-width) Π·Π°Π΄Π°Π΅ΡΡΡ Π½ΡΠ»Π΅Π²ΠΎΠΉ.
- hidden
- ΠΠΌΠ΅Π΅Ρ ΡΠΎΡ ΠΆΠ΅ ΡΡΡΠ΅ΠΊΡ, ΡΡΠΎ ΠΈ none Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ border-style ΠΊ ΡΡΠ΅ΠΉΠΊΠ°ΠΌ ΡΠ°Π±Π»ΠΈΡΡ, Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° border-collapse ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΊΠ°ΠΊ collapse. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²ΠΎΠΊΡΡΠ³ ΡΡΠ΅ΠΉΠΊΠΈ Π³ΡΠ°Π½ΠΈΡΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π²ΠΎΠΎΠ±ΡΠ΅.
- inherit
- ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
Π Π°Π·ΡΠ΅ΡΠ°Π΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ΄Π½ΠΎ, Π΄Π²Π°, ΡΡΠΈ ΠΈΠ»ΠΈ ΡΠ΅ΡΡΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΠ°Π·Π΄Π΅Π»ΡΡ ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠΌ. ΠΡΡΠ΅ΠΊΡ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΈ ΡΠΊΠ°Π·Π°Π½ Π² ΡΠ°Π±Π».Β 2.
Π§ΠΈΡΠ»ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ | Π Π΅Π·ΡΠ»ΡΡΠ°Ρ |
---|---|
1 | Π‘ΡΠΈΠ»Ρ Π³ΡΠ°Π½ΠΈΡΡ Π±ΡΠ΄Π΅Ρ Π·Π°Π΄Π°Π½ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΡΠΎΡΠΎΠ½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
2 | ΠΠ΅ΡΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΡΠΈΠ»Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ, Π²ΡΠΎΡΠΎΠ΅Β β Π»Π΅Π²ΠΎΠΉ ΠΈ ΠΏΡΠ°Π²ΠΎΠΉ. |
3 | ΠΠ΅ΡΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Π΅Ρ ΡΡΠΈΠ»Ρ Π²Π΅ΡΡ
Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ, Π²ΡΠΎΡΠΎΠ΅Β β
ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π»Π΅Π²ΠΎΠΉ ΠΈ ΠΏΡΠ°Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ, Π° ΡΡΠ΅ΡΡΠ΅Β β Π½ΠΈΠΆΠ½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ.![]() |
4 | ΠΠΎΠΎΡΠ΅ΡΠ΅Π΄Π½ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ ΡΡΠΈΠ»Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ, ΠΏΡΠ°Π²ΠΎΠΉ, Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΈ Π»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ. |
ΠΡΠΈΠΌΠ΅Ρ
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>border-style</title> <style> p { border-style: double; /* Π‘ΡΠΈΠ»Ρ Π»ΠΈΠ½ΠΈΠΈ Π²ΠΎΠΊΡΡΠ³ ΠΏΠ°ΡΠ°Π³ΡΠ°ΡΠ° */ padding: 5px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */ } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> </body> </html>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ. 1.
Π ΠΈΡ. 1. ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° border-style
ΠΠ±ΡΠ΅ΠΊΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ
[window.]document.getElementById(«elementID»).style.borderStyle
ΠΡΠ°ΡΠ·Π΅ΡΡ
ΠΡΠ°ΡΠ·Π΅Ρ Internet Explorer Π΄ΠΎ ΡΠ΅ΡΡΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ Π²ΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΈ ΡΠΎΠ»ΡΠΈΠ½Π΅ Π³ΡΠ°Π½ΠΈΡΡ 1px ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ dotted ΠΊΠ°ΠΊ dashed. ΠΡΠΈ ΡΠΎΠ»ΡΠΈΠ½Π΅ 2px ΠΈ Π²ΡΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ dotted ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ. ΠΡΠ° ΠΎΡΠΈΠ±ΠΊΠ° ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½Π° Π² IE7, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ Π²ΡΠ΅Ρ
Π³ΡΠ°Π½ΠΈΡ ΡΠΎΠ»ΡΠΈΠ½ΠΎΠΉ 1px. ΠΡΠ»ΠΈ ΠΎΠ΄Π½Π° ΠΈΠ· Π³ΡΠ°Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΠ»ΡΠΈΠ½Ρ 2px ΠΈ Π²ΡΡΠ΅, ΡΠΎ Π² IE7 Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ dotted ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π² dashed.
Internet Explorer Π΄ΠΎ Π²Π΅ΡΡΠΈΠΈ 7.0 Π²ΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ hidden ΠΈ inherit.
Π‘ΡΠΈΠ»Ρ Π³ΡΠ°Π½ΠΈΡΡ Π² ΡΠ°Π·Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡΡΡ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ groove, ridge, inset ΠΈΠ»ΠΈ outset.
ΠΡΠ°Π½ΠΈΡΡ
CSS ΠΏΠΎ ΡΠ΅ΠΌΠ΅
- border-style
Π‘ΡΠ°ΡΡΠΈ ΠΏΠΎ ΡΠ΅ΠΌΠ΅
Π Π΅ΡΠ΅ΠΏΡΡ CSS
43 CSS Borders
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΎΡΠΎΠ±ΡΠ°Π½Π½ΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΊΠΎΠ΄Π° HTML ΠΈ CSS border ΠΈΠ· Codepen, GitHub ΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ΅ΡΡΡΡΠΎΠ². ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΠΌΠ°ΠΉΡΠΊΠΎΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ 2021 Π³ΠΎΠ΄Π°. 15 Π½ΠΎΠ²ΡΡ ΠΏΡΠ΅Π΄ΠΌΠ΅ΡΠΎΠ².
- ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π³ΡΠ°Π½ΠΈΡ CSS
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π³ΡΠ°Π½ΠΈΡΡ
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ°Π½ΠΈΡΠ° Ρ ΡΠ°ΡΡΠΈΡΠ½ΡΠΌ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ
ΠΡΠ°Π½ΠΈΡΠ° Ρ ΡΠ°ΡΡΠΈΡΠ½ΡΠΌ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ, ΠΎΠΊΡΡΠΆΠ°ΡΡΠ°Ρ ΠΊΡΡΠ³Π»ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π²ΡΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠ½ΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° CSS ΠΈ ΠΌΠ°ΡΠΊΠΈ ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½Π°Ρ ΡΠ°ΠΌΠΊΠ° ΡΠΎ ΡΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠ³Π»Π°ΠΌΠΈ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ°Π½ΠΈΡΠ° ΡΠΎΠ½Π°
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
Π Π°ΠΌΠΊΠΈ Ρ ΡΠΈΡΡΠ½ΠΊΠΎΠΌ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠ°Ρ ΠΏΡΠ½ΠΊΡΠΈΡΠ½Π°Ρ ΡΠ°ΠΌΠΊΠ°
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ°ΡΠΎΡΠ½Π°Ρ ΡΠ°ΠΌΠΊΠ°
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅ΡΠ°Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½Π°Ρ ΡΠ°ΠΌΠΊΠ° + ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ ΡΠΎΠ½
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠΈΠ½Π΅ΠΉΠ½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ Π³ΡΠ°Π½ΠΈΡΡ + Π Π°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π‘ ΠΊΠΎΠ΄
Π£Π³Π»ΠΎΠ²Π°Ρ ΡΠ°ΠΌΠΊΠ°
ΠΡΠ°Π½ΠΈΡΠ° ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠ³Π»ΠΎΠ² (ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½ΠΈΠ΅ ΡΠ³Π»ΠΎΠ² ΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΡ).
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
8-Π±ΠΈΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π³ΡΠ°Π½ΠΈΡΡ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
8-Π±ΠΈΡΠ½Π°Ρ Π³ΡΠ°Π½ΠΈΡΠ° ΠΏΠΈΠΊΡΠ΅Π»Ρ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ Π³ΡΠ°Π½ΠΈΡΡ Π°Π²Π°ΡΠ°ΡΠ°. 15 ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΉ, 1 ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π±Π΅Π· ΠΏΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌΠΎΠ²
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ SVG Π΄Π»Ρ
border-image
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΠ΅ Π³ΡΠ°Π½ΠΈΡΡ CSS
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ°Π½ΠΈΡΡ ΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ°Π΄ΠΈΡΡΠ° Π³ΡΠ°Π½ΠΈΡΡ
ΠΡ, Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅, Π·Π½Π°Π»ΠΈ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ border-radius
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² 4 Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅, ΠΎΠ½ ΠΈΠ΄Π΅Ρ ΠΏΠΎ ΡΠ°ΡΠΎΠ²ΠΎΠΉ ΡΡΡΠ΅Π»ΠΊΠ΅ ΡΠ²Π΅ΡΡ
Ρ, ΡΠΏΡΠ°Π²Π°, ΡΠ½ΠΈΠ·Ρ, ΡΠ»Π΅Π²Π°. ΠΠΎ Π·Π½Π°Π΅ΡΠ΅ Π»ΠΈ Π²Ρ, ΡΡΠΎ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄ΠΎ 8 Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, Π΅ΡΠ»ΠΈ ΠΈΡ
ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ? ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ³ΠΎΠ» ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ 2 Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ Π² ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ°Π½ΠΈΡΠ° CSS Candy Stripe Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Clip-Path
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΏΠΎΠ»ΠΎΡΠ°ΡΡΡ Π³ΡΠ°Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° clip-path
Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΏΠΈΡΠΊΠ° Π² ul
. ΠΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π²ΡΡΠΎΡΡ, ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΈ ΡΠ²Π΅Ρ ΠΏΠΎΠ»ΠΎΡ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈ ΠΊΠ°Π΄Ρ XOR: Lively
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½Π°Ρ Π²ΠΈΠ½ΡΠ°ΠΆΠ½Π°Ρ ΡΠ°ΠΌΠΊΠ° Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠ°ΠΌΠΊΠ°ΠΌΠΈ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: bootstrap. css
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½Π°Ρ Π³ΡΠ°Π½ΠΈΡΠ°
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
Π¨Π°Π±Π»ΠΎΠ½Ρ ΠΊΡΡΠ³ΠΎΠ²ΡΡ ΡΠ°ΠΌΠΎΠΊ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
Π¨Π°Π±Π»ΠΎΠ½Ρ Π³ΡΠ°Π½ΠΈΡ ΡΠΎΠ·Π΄Π°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ clip-path
Π½Π° ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π‘ ΠΊΠΎΠ΄
ΠΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π±ΠΎΡΠ΄ΡΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ°Π½ΠΈΡΠ°, Π²Π΄ΠΎΡ Π½ΠΎΠ²Π»Π΅Π½Π½Π°Ρ ΠΊΠ°ΡΡΠΎΠΉ
ΠΠ΄ΠΎΡ
Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΉ ΠΊΠ°ΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π³ΡΠ°Π½ΠΈΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ
Π³ΡΠ°Π½ΠΈΡ
ΠΈ ΡΠ΅Π½Π΅ΠΉ
. ΠΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML Ρ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
Π Π°Π·ΠΌΡΡΠ°Ρ Π³ΡΠ°Π½ΠΈΡΠ°
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ»ΡΠ΅Π±Π½ΡΠ΅ Π³ΡΠ°Π½ΠΈΡΡ
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΡΡ ΠΈ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΡ ΡΠ°Π±Π»ΠΈΡΡ Ρ Π³ΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠ΅ΠΉΠΊΠ°ΠΌΠΈ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ°Π½ΠΈΡΠ° ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ½ΠΎΠΏΠΊΠ° Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ Π³ΡΠ°Π½ΠΈΡΡ .
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½Π°Ρ ΡΠ°ΠΌΠΊΠ°
HTML ΠΈ CSS Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½Π°Ρ Π³ΡΠ°Π½ΠΈΡΠ° Π±Π΅Π· ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠ°ΠΊΡΡΠ³Π»Π΅Π½Π½Π°Ρ ΡΡΠΎΡΠΎΠ½Π°
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΠ°ΠΌΠΊΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΠ°ΡΡΠΎΡΠΊΠ° Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΠ΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ .
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
CSS Quote Box Hover Effects
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome. css
Π ΠΊΠΎΠ΄Π΅
SVG ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΌΠΊΠΈ Π΄Π»Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΡΡ ΡΠΎΡΠΌ ΡΠ³Π»ΠΎΠ² Ρ ΡΠ΅Π½ΡΡ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΡΠ²Π΅Ρ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΊΠΈΠ·Π½Π°Ρ Π³ΡΠ°Π½ΠΈΡΠ°
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ 8 ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ 9ΠΠ½Π°ΡΠ΅Π½ΠΈΡ 0158 ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΊΡΡΡΡΠΌΠΈ. Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ Π΅Π³ΠΎ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
::before
ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΠΎΠ²Π΅ΡΡ
Π½ΠΎΡΡΠ½ΡΠΉ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
Π ΠΊΠΎΠ΄Π΅
CSS Gradient Clip-Path Borders
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS clip-path
Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΡ
Π³ΡΠ°Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΠΎΠΉ ΡΠΎΡΠΌΡ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
Π ΠΊΠΎΠ΄Π΅
CSS Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΠ΅ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ Π³ΡΠ°Π½ΠΈΡΡ
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ CSS-Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΠ΅ .
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ³ΡΠ°Π½ΠΈΡΠ½Π°Ρ Π²ΡΡΠ°Π²ΠΊΠ°
ΠΠΎΠΏΡΡΠΊΠ° Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΡΡΠ΅ΠΊΡΠ° Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ Π²ΠΎΠΊΡΡΠ³ Π±Π»ΠΎΠΊΠ° ΡΠ΅ΠΊΡΡΠ°.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅ΠΎΠ±ΡΡΠ½Π°Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠ° Π΄Π»Ρ Π±ΠΎΡΠ΄ΡΡΠ°
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡΡ ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΡ
Π’Π΅Ρ
Π½ΠΈΠΊΠ° ΠΎΠ΄Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ΡΠ°Π΄ΠΈΡΡΠ° Π³ΡΠ°Π½ΠΈΡΡ
.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ±ΡΠ°ΡΠ°Ρ Π³ΡΠ°Π½ΠΈΡΠ°
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
Π ΠΊΠΎΠ΄Π΅
8-Π±ΠΈΡΠ½ΡΠ΅ Π³ΡΠ°Π½ΠΈΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅Π½Π΅ΠΉ
8-Π±ΠΈΡΠ½ΡΠ΅ Π³ΡΠ°Π½ΠΈΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΡΠ΅Π½Π΅ΠΉ CSS3 ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Sass.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ°Π½ΠΈΡΠ° Π² ΡΡΠΈΠ»Π΅ ΠΊΠΎΠΌΠΈΠΊΡΠΎΠ²
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
Π ΠΊΠΎΠ΄Π΅
ΠΠ»Π΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΊΡΠ°Ρ ΠΈ ΡΠ°Π΄ΠΈΡΡΡ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: -
20+ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠΎΡΠΎΡΠ°ΠΌΠΎΠΊ Π½Π° CSS, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ
DigitalOcean ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΎΠ±Π»Π°ΡΠ½ΡΠ΅ ΠΏΡΠΎΠ΄ΡΠΊΡΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΡΠ°ΠΏΠ° Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΡΠ΅ΡΠ΅ΡΡΠ²ΠΈΡ. ΠΠ°ΡΠ½ΠΈΡΠ΅ Ρ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎΠ³ΠΎ ΠΊΡΠ΅Π΄ΠΈΡΠ° Π² ΡΠ°Π·ΠΌΠ΅ΡΠ΅ 200Β Π΄ΠΎΠ»Π»Π°ΡΠΎΠ² Π‘Π¨Π!
ΠΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ°ΠΌΠΊΠΈ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ CSS ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² Π²Π°ΡΠ΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. ΠΠΎΠ΄ ΠΏΡΠΎΡΡ Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΈΡΡΡΡ Π½Π° Π½Π΅ΠΌ. Π― ΠΌΠΎΠ³ Π±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ°, Π½ΠΎ ΡΡΠΎ Π²ΡΠ΅.
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ
css ΠΊΠ°Π΄ΡΡ ΠΎΡ Kkin (@wwyfmrqj-the-looper)
Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅:- cssframes
ΠΠ²ΡΠΎΡ:- Kkin
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML JS
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ Π Π΅Π°Π»ΠΈΡΡΠΈΡΠ½Π°Ρ ΡΠΎΡΠΎΡΠ°ΠΌΠΊΠ° ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡ Joe (@dope) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅:- Π Π΅Π°Π»ΠΈΡΡΠΈΡΠ½Π°Ρ ΡΠΎΡΠΎΡΠ°ΠΌΠΊΠ° ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΠ²ΡΠΎΡ:- Joe
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML JS
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ ΠΡΠ½ΠΊΡΠΈ Π¨ΡΠ΅Π΄Π΄Π΅Ρ ΠΠΈ ΠΠ°ΡΡΠΈΠ½Π° (@leemartin) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅:- ΠΡΠ½ΠΊΡΠΈ Π¨ΡΠ΅Π΄Π΅Ρ
ΠΠ²ΡΠΎΡ:- ΠΠΈ ΠΠ°ΡΡΠΈΠ½
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML JS
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ CSS ΡΠΎΡΠΎΡΠ°ΠΌΠΊΠ° ΠΡΠΈΡΠ° Π‘ΠΌΠΈΡΠ° (@chris22smith) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅: CSS Picture Frame
ΠΠ²ΡΠΎΡ: ΠΡΠΈΡ Π‘ΠΌΠΈΡ
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML JS
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ
Css Only picture Frame ΠΎΡ Lasse Diercks (@lassediercks)
Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ:- CSS Π’ΠΎΠ»ΡΠΊΠΎ ΡΠΎΡΠΎΡΠ°ΠΌΠΊΠ°
ΠΠ²ΡΠΎΡ:- ΠΠ°ΡΡΠ΅ ΠΠΈΡΠΊΡ
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML JS
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ ΠΡΠ°ΠΊΡΠΈΡΠ½Π°Ρ ΡΠ°ΠΌΠΊΠ°-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ ΡΠ°ΠΌΠΊΠ° Π΄Π»Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ ΠΎΡ Dudley Storey (@dudleystorey) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ:- ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΠ°ΠΌΠΊΠ°-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ ΡΠ°ΠΌΠΊΠ°
ΠΠ²ΡΠΎΡ:- ΠΠ°Π΄Π»ΠΈ Π‘ΡΠΎΡΠΈ
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML JS
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ ΠΠΈΠ½ΠΈ-ΠΈΠ³ΡΠ° GSAP β Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²ΠΏΡΠ°Π²ΠΎ ΠΠ»Π΅ΠΊΡΠ° Π’ΡΠΎΡΡΠ° (@a-trost) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅:- ΠΠΈΠ½ΠΈ-ΠΈΠ³ΡΠ° GSAP β Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²ΠΏΡΠ°Π²ΠΎ
ΠΠ²ΡΠΎΡ:- Alex Trost
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML JS
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ
Π€ΠΎΡΠΎΡΠ°ΠΌΠΊΠ° ΠΠΆΠ΅Π½ΠΈΡ (@janiceshaw)
Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅:- Π€ΠΎΡΠΎΡΠ°ΠΌΠΊΠ°
ΠΠ²ΡΠΎΡ:- ΠΠΆΠ΅Π½ΠΈΡ
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML JS
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ ΠΠ°Π»Π΅ΡΠ΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π±Π΅Π· ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΎΡ RΓΌdiger Alte (@drralte) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅:- ΠΠ°Π»Π΅ΡΠ΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π±Π΅Π· ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ²
ΠΠ²ΡΠΎΡ:- RΓΌdiger Alte
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML JS
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ Fun With Shapes β 100 Days of Code β Pen 10 Π ΠΈΠΊΠΈ ΠΠΊΡ Π°ΡΠ΄Ρ (@rickyeckhardt) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅: Fun With Shapes β 100 Days of Code β Pen 10
ΠΠ²ΡΠΎΡ: β Ricky Eckhardt
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML JS
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ
Π€ΠΎΡΠΎΡΠ°ΠΌΠΊΠ° Pure CSS3 ΠΎΡ ΠΡΠ°ΠΉΡΠ° Π‘Π½Π°ΠΉΠ΄Π΅ΡΠ° (@brycesnyder)
Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅: Pure CSS3 Picture Frame
ΠΠ²ΡΠΎΡ: ΠΡΠ°ΠΉΡ Π‘Π½Π°ΠΉΠ΄Π΅Ρ
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML JS
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ Π Π°ΠΌΠΊΠ° Π΄Π»Ρ ΡΠΎΡΠΎ KUCKLU (@kuck1u) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅:- Π€ΠΎΡΠΎΡΠ°ΠΌΠΊΠ°
ΠΠ²ΡΠΎΡ:- KUCKLU
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML JS
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ Π Π°Π΄ΡΠΆΠ½Π°Ρ ΡΠ°ΠΌΠΊΠ° ΠΎΡ @TimLamber (@TimLamber) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅:- ΡΠ°Π΄ΡΠΆΠ½Π°Ρ ΡΠ°ΠΌΠΊΠ°
ΠΠ²ΡΠΎΡ:- @TimLamber
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML JS
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ Π€ΠΎΡΠΎΡΠ°ΠΌΠΊΠ° Light House Reflection ΠΎΡ S G (@gssssssssss) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅:- Light House Reflection Picture Frame
ΠΠ²ΡΠΎΡ:- S G
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML JS
DEMO
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ
Π€ΠΎΡΠΎΡΠ°ΠΌΠΊΠ° Pure CSS ΠΎΡ ΠΠΆΠΎΡΡΠ° Π₯ΠΈΠ±Π±Π΅ΡΡΠ° (@joshnh)
Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅: Pure CSS Picture Frame
ΠΠ²ΡΠΎΡ: ΠΠΆΠΎΡΡΠ° Π₯ΠΈΠ±Π±Π΅ΡΡ
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML JS
DEMO
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΡΠΎΡΠ°ΠΌΠΊΠΈ ΠΎΡ micalexander (@micalexander) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅:- ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΠΎΡΠΎΡΠ°ΠΌΠΊΠ°
ΠΠ²ΡΠΎΡ:- micalexander
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML JS
DEMO
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ Π Π°Π΄ΡΠΆΠ½Π°Ρ ΡΠ°ΠΌΠΊΠ° ΠΎΡ Bailh (@cathbailh) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅:- Rainbow Frame
ΠΠ²ΡΠΎΡ:- Bailh
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML JS
DEMO
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ
ΠΡΡΠ΅ΠΊΡ ΠΊΠΎΠ²ΡΠΈΠΊΠ° ΠΈ ΡΠ°ΠΌΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS-Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ² ΠΈ ΡΠ΅Π½Π΅ΠΉ ΠΎΡ Anni Lou (@AnniLou)
Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ: ΠΡΡΠ΅ΠΊΡ ΠΌΠ°ΡΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠ°ΠΌΠΊΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS-Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠ² ΠΈ ΡΠ΅Π½Π΅ΠΉ
ΠΠ²ΡΠΎΡ:- Anni Lou
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML JS
DEMO
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ 3D Picture Box ΠΎΡ ΠΠΎΠ»Π° (@Jiminibob) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅:- 3D Picture Box
ΠΠ²ΡΠΎΡ:- Paul
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML JS
DEMO
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ CSS 3-D ΡΠΊΠΎΡΠ΅Π½Π½Π°Ρ ΡΠΎΡΠΎΡΠ°ΠΌΠΊΠ° ΠΠΆΠΎΠ½Π° Π‘ΠΊΠΎΠ²ΡΠΎΠ½ΡΠΊΠΈ (@john_skowronski) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅: CSS 3-D Beveled Picture Frame
ΠΠ²ΡΠΎΡ: John Skowronski
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML
DEMO
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ
ΠΠ°ΡΡΠΈΠ½Π½Π°Ρ Π³Π°Π»Π΅ΡΠ΅Ρ Flickr Π. Π€. ΠΠ΅ΡΠ΅ΡΠ° (@anfperez)
Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅:- ΠΠ°ΡΡΠΈΠ½Π½Π°Ρ Π³Π°Π»Π΅ΡΠ΅Ρ Flickr
ΠΠ²ΡΠΎΡ:- Π. Π€. ΠΠ΅ΡΠ΅Ρ
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML
DEMO
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ ΠΡΡΠ΅ΠΊΡ ΡΠΎΡΠΎΡΠ°ΠΌΠΊΠΈ Ρ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΎΡ Christopher Ware (@christopherware) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅: ΠΡΡΠ΅ΠΊΡ ΡΠ°ΠΌΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
ΠΠ²ΡΠΎΡ: ΠΡΠΈΡΡΠΎΡΠ΅Ρ Π£ΡΡ
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML
ΠΠΠΠ
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ Π Π°ΠΌΠΊΠ° Π΄Π»Ρ ΡΠΎΡΠΎ CSS3 ΠΎΡ Metallizer (@Metallizer) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅:- CSS3 ΡΠΎΡΠΎΡΠ°ΠΌΠΊΠ°
ΠΠ²ΡΠΎΡ:- Metallizer
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML
DEMO
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ
Pure CSS Picture Frame ΠΎΡ Brian Gioia (@Brian_Gioia)
Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅: Pure CSS Picture Frame
ΠΠ²ΡΠΎΡ: Brian Gioia
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML
DEMO
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ ΠΠ°Π»Π΅ΡΠ΅Ρ ΡΠΎΡΠΎΡΠ°ΠΌΠΎΠΊ ΠΠΆΠΎΡΠ° Π₯ΠΈΠΊΡΠ° (@JHicks) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅:- Π€ΠΎΡΠΎΡΠ°ΠΌΠΊΠ° ΠΠ°Π»Π΅ΡΠ΅Ρ
ΠΠ²ΡΠΎΡ:- ΠΠΆΠΎΡ Π₯ΠΈΠΊΡ
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML
DEMO
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ ΠΠ΅Π· Π½Π°Π·Π²Π°Π½ΠΈΡ, Π°Π²ΡΠΎΡ: Π²ΠΎΡΠ΅ΠΌΡarmshq (@EightArmsHQ) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅:- Untitled
ΠΠ²ΡΠΎΡ:- Π²ΠΎΡΠ΅ΠΌΡarmshq
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML
DEMO
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ Π€ΠΎΡΠΎΡΠ°ΠΌΠΊΠ° Π ΠΈΠΊΠΈ ΠΠΊΡ Π°ΡΠ΄ΡΠ° (@rickyeckhardt) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅:- Picture Frame
ΠΠ²ΡΠΎΡ:- Ricky Eckhardt
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS HTML
DEMO
Π‘ΠΠΠ§ΠΠ’Π¬
Π‘ΠΌ.
Leave a Comment