Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² BS3
Π― Ρ ΠΎΡΡ ΡΠΎΠ·Π΄Π°ΡΡ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² BS3(ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ ΠΊΡΡΠ³) Ρ ΠΎΠ΄Π½ΠΈΠΌ Π·Π½Π°ΡΠΊΠΎΠΌ fontawesome (4.0) Π² ΡΠ΅Π½ΡΡΠ΅.
ΠΠΎ ΡΠΈΡ ΠΏΠΎΡ Ρ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
HTML:
<a href="#"><i></i></a>
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ CSS markup, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΌ ΠΊΡΡΠ³ΠΎΠΌ?
css
twitter-bootstrap
twitter-bootstrap-3
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
ΠΡΡΠΎΡΠ½ΠΈΠΊ
alias51 Β Β
26 ΠΎΠΊΡΡΠ±ΡΡ 2013 Π² 00:03
9 ΠΎΡΠ²Π΅ΡΠΎΠ²
65
Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ — ΡΠΎ Π²ΡΠΎΠ΄Π΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΊΠ»Π°ΡΡΠ° Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠ°Π΄ΠΈΡΡΠ° Π³ΡΠ°Π½ΠΈΡΡ
HTML:
<a href="#"><i></i></a>
CSS:
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.42;
border-radius: 15px;
}
Π² ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° ΠΈΠ»ΠΈ ΠΎΡΡΡΡΠΏΡ
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
Tarik Β Β
26 ΠΎΠΊΡΡΠ±ΡΡ 2013 Π² 00:08
18
(ΠΠ΅ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π»ΡΡ Π² ΠΊΡΠΎΡΡ-Π±ΡΠ°ΡΠ·Π΅ΡΠ΅), Π½ΠΎ ΡΡΠΎ ΠΌΠΎΠΉ ΠΎΡΠ²Π΅Ρ:
.btn-circle {
width: 40px;
height: 40px;
line-height: 40px; /* adjust line height to align vertically*/
padding:0;
border-radius: 50%;
}
- Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° line-height
- Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π±Π΅ΡΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΠ±ΡΠΎΡΠ΅Π½ΠΎ
- Π³ΡΠ°Π½ΠΈΡΠ°-ΡΠ°Π΄ΠΈΡΡ, Π½Π΅ Π·Π°Π²ΠΈΡΡΡΠΈΠΉ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
chocopoche Β Β
19 ΠΌΠ°Ρ 2014 Π² 10:12
16
Boostrap 3 ΠΈΠΌΠ΅Π΅Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ. ΠΡΠΎ:
<span>100</span>
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
Citizen Β Β
22 ΠΈΡΠ½Ρ 2015 Π² 02:53
- ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² android Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π½Π° Π·Π°Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅?
Π― Ρ ΠΎΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² android. ΠΡΠΎ xml, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ: <?xml version=1.0 encoding=utf-8?> <shape xmlns:android=http://schemas.android.com/apk/res/android android:shape=oval> <solid android:color=#9F2200/> <stroke android:width=2dp android:color=#fff />…
- ΡΠ΅Π°Π»ΠΈΠ·ΡΠΉΡΠ΅ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ iOS Π² Android
Π― ΠΏΡΡΠ°ΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ iOS Π² Android. ΠΠ°ΠΊ Π²Ρ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π·Π½Π°Π΅ΡΠ΅, ΠΊΠ½ΠΎΠΏΠΊΠΈ Android ΠΈΠΌΠ΅ΡΡ ΡΠ΅ΡΡΠΉ ΡΠΎΠ½, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΠΊΡΡΠ³Π»Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° iOS ΠΈΠΌΠ΅Π΅Ρ ΡΠ΅ΡΠΊΠΈΠΉ ΡΠΎΠ½. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈΠ»ΠΈ ΠΈ ΡΠ΅ΠΌΡ. ΠΠ΄Π½Π°ΠΊΠΎ Ρ Π½Π΅ Π·Π½Π°Ρ, ΠΊΠ°ΠΊ ΡΠΎΠ±ΡΠ°ΡΡ Π²ΡΠ΅ Π²ΠΎΠ΅Π΄ΠΈΠ½ΠΎ. ΠΠ΅ ΠΌΠΎΠ³ Π±Ρ ΠΊΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ Π΄Π°ΡΡ ΠΊΠ°ΠΊΠΎΠΉ-Π½ΠΈΠ±ΡΠ΄Ρ ΡΠΎΠ²Π΅Ρ?…
5
ΠΡΠΎ Π»ΡΡΡΠ°Ρ ΡΡΡΠ»ΠΊΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠΈΡΡΠ°-awesome.
http://bootsnipp.com/snippets/featured/circle-button ?
CSS:
.btn-circle { width: 30px; height: 30px; text-align: center;padding: 6px 0;font-size: 12px;line-height: 1.428571429;border-radius: 15px;}.btn-circle.btn-lg {width: 50px;height: 50px;padding: 10px 16px;font-size: 18px;line-height:1.33;border-radius: 25px;}
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
zakaiter Β Β
08 ΠΌΠ°ΡΡΠ° 2015 Π² 21:21
3
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΡΡΠ° Awesome ICONS Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΡΡΠ³Π»ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ/ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΡΠ²Π΅ΡΠΎΠΌ ΠΏΠΎ Π²Π°ΡΠ΅ΠΌΡ Π²ΡΠ±ΠΎΡΡ.
<code>
<span></span>
</code>
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
Mir Β Β
13 Π°Π²Π³ΡΡΡΠ° 2014 Π² 11:48
2
Π£ ΠΌΠ΅Π½Ρ Π±ΡΠ»Π° ΡΠ° ΠΆΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, ΠΈ Ρ ΠΏΡΠΈΠ΄ΡΠΌΠ°Π» ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΡΠ°Π±ΠΎΡΠ°ΡΡΠ΅Π΅ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ (xs, sm, normal ΠΈ lg) Π±ΠΎΠ»Π΅Π΅ ΠΈΠ»ΠΈ ΠΌΠ΅Π½Π΅Π΅ :
.btn-circle {
border-radius: 50%;
padding: 0.1em;
width:1.8em;
}
Π Π°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ btn-xs ΠΈ-sm Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΠΈΡ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ. Π ΡΡΠΎ Π½Π΅ ΠΏΠΎΠΊΡΡΠ²Π°Π΅ΡΡΡ ΡΡΠΈΠΌ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠΌ. ΠΡΠΎΡ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠ΄Π° Π²ΡΡΠΈΡΠ»ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ°.
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
Itchy Β Β
14 ΠΈΡΠ½Ρ 2015 Π² 11:54
0
ΠΡΠ»ΠΈ Π²Ρ Π·Π°Π³ΡΡΠ·ΠΈΠ»ΠΈ ΡΡΠΈ ΡΠ°ΠΉΠ»Ρ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ Π² bootstrap-social.css, ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠ² border-radius: 50%;
.btn-social-icon.btn-lg{height:45px;width:45px;
padding-left:0;padding-right:0; border-radius: 50%; }
Π Π²ΠΎΡ HTML
<a >
<i></i>
</a>
<a>
<i></i>
</a>
<a>
<i></i>
</a>
ΠΠ»Ρ ΠΌΠ΅Π½Ρ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π³Π»Π°Π΄ΠΊΠΎ.
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
Ali Adravi Β Β
17 ΠΈΡΠ½Ρ 2014 Π² 03:39
0
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π·Π½Π°ΡΠΊΠΈ Ρ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠΌ Π½Π°Π±ΠΎΡΠΎΠΌ ΡΡΠΈΡΡΠΎΠ² (Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π° Π·Π½Π°ΡΠΊΠ°ΠΌ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ). ΠΠΎΡ Π΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ: http://fontawesome.io/examples/
.no-border {
border: none;
background-color: white;
outline: none;
cursor: pointer;
}
.color-no-focus {
color: grey;
}
.hover:hover {
color: blue;
}
.white {
color: white;
}
<button type="button" (click)="doSomething()"
class="hover color-no-focus no-border fa-stack fa-lg">
<i></i>
<span>1</span>
</button>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
Manish Jain Β Β
04 ΡΠ΅Π²ΡΠ°Π»Ρ 2017 Π² 01:38
0
Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΡ Π³ΡΠ°Π½ΠΈΡΡ Π² Π»ΡΠ±ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ border-radius
. Π― ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ ΡΡΠΎΡ ΠΊΠ»Π°ΡΡ Π»ΡΡΡΠ΅, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΅Π³ΠΎ ΠΏΡΠΈ Π»ΡΠ±ΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΡΠ»ΠΈ Π²Ρ Π·Π°Π΄Π°Π΄ΠΈΡΠ΅ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ»Π°ΡΡ «rouding» Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ.
.btn-circle {
border-radius: 50%;
}
<button>Click Me!</button>
<button>?</button>
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
Isabella Riquetti Β Β
15 ΠΎΠΊΡΡΠ±ΡΡ 2019 Π² 17:57
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ:
Π‘Π΄Π΅Π»Π°ΠΉΡΠ΅ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΡΠ°ΠΌΠΊΠΎΠΉ
Π― ΠΏΡΡΠ°ΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ ΠΈ ΡΠ²Π΅ΡΠ½ΠΎΠΉ ΡΠ°ΠΌΠΊΠΎΠΉ. ΠΠ°ΠΊ Ρ ΠΌΠΎΠ³Ρ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ? Π― ΠΏΡΠΈΠ»ΠΎΠΆΠΈΠ» ΡΠΊΡΠΈΠ½ΡΠΎΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΠΌΠΎΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ iOS, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΠ΅Π³ΠΎ Ρ Ρ ΠΎΡΡ.
ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Qt Π½Π° ΠΊΡΡΠ³Π»ΡΡ
Π― ΠΏΡΡΠ°ΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² Qt. Π ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡΠ΅ Π±ΡΠ»Π° ΡΠΎΠ·Π΄Π°Π½Π° ΠΏΡΠΎΡΡΠ°Ρ ΡΠΎΡΠΌΠ° Ρ ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ QPushButton . Π― ΠΏΡΡΠ°ΡΡΡ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡ ΡΡΠΎ Π² ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ setMask() . ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ setMask()…
Π‘Π΄Π΅Π»Π°ΠΉΡΠ΅ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² iphone sdk
Π― ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΠ½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΎΠΊΡΡΠ³Π»ΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² Π²ΠΈΠ΄Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΠΊΠ°ΠΊ Ρ Π·Π°Π³ΡΡΠ·ΠΈΠ»). ΠΠ½ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π΄Π²Π° ΡΠ³Π»Π° ΠΏΡΡΠΌΡΠ΅, Π° rest ΠΈΠΌΠ΅Π΅Ρ ΠΊΡΡΠ³Π»ΡΡ ΡΠΎΡΠΌΡ. Π― ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°Π» Ρ…
ΠΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ Π·Π½Π°Π΅Ρ ΠΊΠ°ΠΊΡΡ-Π½ΠΈΠ±ΡΠ΄Ρ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π² Windows-mobile?
ΠΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ Π·Π½Π°Π΅Ρ ΠΊΠ°ΠΊΡΡ-Π½ΠΈΠ±ΡΠ΄Ρ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π² Windows-mobile ? Π·Π°ΡΠ°Π½Π΅Π΅ ΡΠΏΠ°ΡΠΈΠ±ΠΎ
ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΡΠ³Π»ΡΡ / ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² win32 API Ρ ΠΏΠΎΠΌΠΎΡΡΡ visual c++
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Window (win32 API) Π² visual c++. Π― Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ MFC. Π― Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΡΠ³Π»ΡΡ / ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ bitmap. ΠΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΊΠΈΠ½ΡΡΡΠΉ Π²ΠΈΠ΄. ΠΠΎΠΆΠ΅Ρ Π»ΠΈ ΠΊΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ…
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² android Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π½Π° Π·Π°Π΄Π½Π΅ΠΌ ΠΏΠ»Π°Π½Π΅?
Π― Ρ ΠΎΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² android. ΠΡΠΎ xml, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ: <?xml version=1.0 encoding=utf-8?> <shape xmlns:android=http://schemas.android.com/apk/res/android…
ΡΠ΅Π°Π»ΠΈΠ·ΡΠΉΡΠ΅ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ iOS Π² Android
Π― ΠΏΡΡΠ°ΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ iOS Π² Android. ΠΠ°ΠΊ Π²Ρ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π·Π½Π°Π΅ΡΠ΅, ΠΊΠ½ΠΎΠΏΠΊΠΈ Android ΠΈΠΌΠ΅ΡΡ ΡΠ΅ΡΡΠΉ ΡΠΎΠ½, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΠΊΡΡΠ³Π»Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° iOS ΠΈΠΌΠ΅Π΅Ρ ΡΠ΅ΡΠΊΠΈΠΉ ΡΠΎΠ½. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈΠ»ΠΈ ΠΈ…
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ?
Π― Ρ ΠΎΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΡΠ³Π»ΡΡ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ. ΠΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΊΠ°ΠΊ ΠΊΡΡΠ³. ΠΡΠΎΡ ΠΊΠΎΠ΄ Π΄Π°Π΅Ρ ΠΊΡΡΠ³Π»ΡΡ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ. UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];…
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² android
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΊΠΎΡΠΎΡΡΡ Ρ ΡΡΠΏΠ΅ΡΠ½ΠΎ ΡΠ΄Π΅Π»Π°Π», Π½ΠΎ ΡΠΎ, ΡΡΠΎ Ρ Ρ ΠΎΡΡ, ΠΊΠΎΠ³Π΄Π° Ρ Π½Π°ΠΆΠΈΠΌΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΡ, Π° Π·Π°ΡΠ΅ΠΌ ΠΌΠ΅Π½ΡΡ ΡΠΎΠ½, ΡΠΈΡΡΠ΅ΠΌΡΠΉ, Π½ΠΎ ΠΊΠΎΠ³Π΄Π° Ρ Π΄Π΅Π»Π°Ρ ΡΡΠΎ, ΠΊΡΡΠ³Π»Π°Ρ…
ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Π½Π° ΠΊΡΡΠ³Π»ΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎ
ΠΠΌΠ΅Ρ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² xml, Ρ Ρ ΠΎΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π΅ ΡΠ²Π΅Ρ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π½Π΅Π΅. Π― Π΄Π΅Π»Π°Ρ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, Π½ΠΎ ΠΎΠ½ ΡΠ½ΠΎΠ²Π° ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π° ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΡ ΡΠΎΡΠΌΡ, Π° Π½Π΅ Π½Π° ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΠΊΡΡΠ³Π»ΡΡ:…
W3.CSS ΠΠ½ΠΎΠΏΠΊΠΈ. Π£ΡΠΎΠΊΠΈ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ . W3Schools Π½Π° ΡΡΡΡΠΊΠΎΠΌ
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΡΠΊΠ»ΡΡΠ΅Π½ΠΎ
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΡΠΊΠ»ΡΡΠ΅Π½ΠΎ
Button
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
Π’Π΅Π½Ρ
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°1
ΠΠ½ΠΎΠΏΠΊΠ°2
ΠΠ½ΠΎΠΏΠΊΠ°3
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
W3.CSS ΠΠ»Π°ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ
W3.CSS ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ:
ΠΠ»Π°ΡΡ | ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ |
---|---|
w3-btn | ΠΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΡΠ΅Π½ΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π¦Π²Π΅Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ΅ΡΠ½ΡΠΉ. |
w3-button | ΠΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΡΠ΅ΡΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ. Π¦Π²Π΅Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ²Π΅ΡΠ»ΠΎ-ΡΠ΅ΡΡΠΉ Π² W3.CSS Π²Π΅ΡΡΠΈΠΈ 3. Π¦Π²Π΅Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² Π²Π΅ΡΡΠΈΠΈ 4. |
w3-bar | ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²ΠΊΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ. (ΠΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ) |
w3-block | ΠΠ»Π°ΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ (100%). |
w3-circle | ΠΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΊΡΡΠ³Π»ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ. |
w3-ripple | ΠΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠ° ΡΡΠ±ΠΈ. |
ΠΠ½ΠΎΠΏΠΊΠΈ
Π ΠΊΠ»Π°ΡΡ w3-button, ΠΈ ΠΊΠ»Π°ΡΡ w3-btn Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΊ Π»ΡΠ±ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ HTML.
ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ <input type=»button»>, <button> ΠΈ <a>:
ΠΡΠΈΠΌΠ΅Ρ
Button Button
Link Button
<input type=»button» value=»Input Button»>
<button>Button Button</button>
<a href=»https://www.w3schools.com»>Link Button</a>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
Π¦Π²Π΅ΡΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ
Black
Khaki
Yellow
Red
Purple
Aqua
Blue
Indigo
Green
Teal
ΠΡΠ΅ ΠΊΠ»Π°ΡΡΡ w3-color ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ:
ΠΡΠΈΠΌΠ΅Ρ
<button>Black</button>
<button>Khaki</button>
<button>Yellow</button>
<button>Red</button>
<button>Purple</button>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
Π¦Π²Π΅ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΡ ΡΠ²Π΅ΡΠΎΠ². ΠΠΎΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅:
White
Red
Purple
Aqua
Blue
Green
Teal
ΠΠ»Π°ΡΡΡ w3-hover-color ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ:
ΠΡΠΈΠΌΠ΅Ρ
<button>Black</button>
<button>Red</button>
<button>Purple</button>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
Π€ΠΎΡΠΌΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ
Normal
Round
Rounder
and Rounder
and Rounder
Normal
Round
Rounder
and Rounder
and Rounder
ΠΠ»Π°ΡΡΡ w3-round-size ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΎΠΊΡΡΠ³Π»Π΅Π½Π½ΡΡ Π³ΡΠ°Π½ΠΈΡ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ:
ΠΡΠΈΠΌΠ΅Ρ
Round
Rounder
and Rounder
and Rounder
<button>Round</button>
<button>Rounder</button>
<button>and Rounder</button>
<button>and Rounder</button>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
Π Π°Π·ΠΌΠ΅ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ
Tiny
Small
Medium
Large
XLarge
ΠΠ»Π°ΡΡΡ w3-size ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠ΅ΠΊΡΡΠ°:
ΠΡΠΈΠΌΠ΅Ρ
<button>Tiny</button>
<button>Small</button>
<button>Medium</button>
<button>Large</button>
<button>xLarge</button>
<button>XXLarge</button>
<button>XXXLarge</button>
<button>Jumbo</button>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
ΠΡΠ°Π½ΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ»Π°ΡΡ w3-border ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π³ΡΠ°Π½ΠΈΡ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ.
ΠΠ»Π°ΡΡΡ w3-border-color ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° Π³ΡΠ°Π½ΠΈΡΡ:
ΠΡΠΈΠΌΠ΅Ρ
<button>Button</button>
<button>Button</button>
<button>Button</button>
<button>Button</button>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
Π‘ΠΎΠ²Π΅Ρ: ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠ»Π°ΡΡ w3-round-ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ Π³ΡΠ°Π½ΠΈΡΡ.
ΠΠ½ΠΎΠΏΠΊΠΈ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ
ΠΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ΅ΠΊΡ Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠΎΠΊΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°:
ΠΠ±ΡΡΠ½ΡΠΉ
Π¨ΠΈΡΠΎΠΊΠΈΠΉ
ΠΠ»Π°ΡΡ w3-wide Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠΎΠΊΠΈΠΉ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΡΡΡΠ΅ΠΊΡ:
ΠΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ ΠΊΡΡΡΠΈΠ²Π½ΡΠΉ ΠΈ ΠΆΠΈΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ:
ΠΠ±ΡΡΠ½ΡΠΉ
ΠΡΡΡΠΈΠ²Π½ΡΠΉ
ΠΠΈΡΠ½ΡΠΉ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ HTML ΡΠ΅Π³ΠΈ (<i> ΠΈ <b>), ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΡΡΡΠΈΠ²Π½ΡΠΉ ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡΠΆΠΈΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΊ ΡΠ΅ΠΊΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ:
ΠΡΠΈΠΌΠ΅Ρ
<button><i>ΠΡΡΡΠΈΠ²Π½ΡΠΉ</i></button>
<button><b>ΠΠΈΡΠ½ΡΠΉ</b></button>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
ΠΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΎΡΡΡΡΠΏΠΎΠΌ (padding)
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ»Π°ΡΡΡ w3-padding-ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΡΡΡΡΠΏΠ° Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ:
ΠΡΠΈΠΌΠ΅Ρ
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
<button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
<button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
<button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
ΠΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π² Π½Π΅Ρ ΠΊΠ»Π°ΡΡ w3-block.
ΠΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΈΡΠΈΠ½Ρ 100% ΠΈ ΠΎΡ Π²Π°ΡΡΠ²Π°ΡΡ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°:
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΡΠΈΠΌΠ΅Ρ
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
<button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
<button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
<button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
Π‘ΠΎΠ²Π΅Ρ: ΠΡΡΠΎΠ²Π½ΡΠΉΡΠ΅ ΡΠ΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠ° w3-left-align ΠΈΠ»ΠΈ w3-right-align.
Π Π°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ style=»width:».
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΡΠΈΠΌΠ΅Ρ
<button
>Button</button>
<button>Button</button>
<button>Button</button>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
ΠΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ½ΠΎΠΏΠΊΠΈ Π²ΡΠ΄Π΅Π»ΡΡΡΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΡΠ΅Π½ΠΈ, ΠΈ ΡΡΡΠ΅Π»ΠΎΡΠΊΠ° ΠΊΡΡΡΠΎΡΠ° ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π² ΡΡΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ°.
ΠΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½Ρ (ΠΏΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½Ρ) ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π·Π½Π°ΠΊ «no parking sign» («ΠΏΠ°ΡΠΊΠΎΠ²ΠΊΠ° Π·Π°ΠΏΡΠ΅ΡΠ΅Π½Π°»):
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΡΠΊΠ»ΡΡΠ΅Π½ΠΎ
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΡΠΊΠ»ΡΡΠ΅Π½ΠΎ
ΠΠ»Π°ΡΡ w3-disabled ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΠΎΠΉ (disabled) ΠΊΠ½ΠΎΠΏΠΊΠΈ (Π΅ΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ disabled Π°ΡΡΠΈΠ±ΡΡ HTML, Π²ΠΌΠ΅ΡΡΠΎ Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ disabled Π°ΡΡΠΈΠ±ΡΡ):
ΠΡΠΈΠΌΠ΅Ρ
ΠΠ½ΠΎΠΏΠΊΠ°-ΡΡΡΠ»ΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
<a href=»https://www.w3schools.com»>ΠΠ½ΠΎΠΏΠΊΠ°-ΡΡΡΠ»ΠΊΠ°</a>
<button disabled>ΠΠ½ΠΎΠΏΠΊΠ°</button>
<input type=»button» value=»Button» disabled>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
ΠΠ½ΠΎΠΏΠΊΠΈ-ΠΏΠ°Π½Π΅Π»ΠΈ (Π±Π°ΡΡ)
ΠΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°ΡΡ Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ»ΠΎΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠ° w3-bar:
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΡΠΈΠΌΠ΅Ρ
<div>
Β <button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
Β <button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
Β <button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
</div>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
ΠΠ»Π°ΡΡ w3-bar ΠΏΠΎΡΠ²ΠΈΠ»ΡΡ Π² W3.CSS Π²Π΅ΡΡΠΈΠΈ 2.93 / 2.94.
ΠΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°Π½Ρ Π±Π΅Π· ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠ° w3-bar-item:
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΡΠΈΠΌΠ΅Ρ
<div>
Β <button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
Β <button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
Β <button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
</div>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
ΠΠ°Π½Π΅Π»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠ° w3-center:
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΡΠΈΠΌΠ΅Ρ
<div>
<div>
Β <button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
Β <button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
Β <button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
</div>
</div>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π΄Π²Π΅ (ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅) ΠΏΠ°Π½Π΅Π»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠ»Π°ΡΡ w3-show-inline-block:
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΡΠΈΠΌΠ΅Ρ
Β ΠΠ½ΠΎΠΏΠΊΠ°
Β ΠΠ½ΠΎΠΏΠΊΠ°
Β ΠΠ½ΠΎΠΏΠΊΠ°
<div
>
<div>
Β <button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
Β <button
class=»w3-btn w3-teal»>ΠΠ½ΠΎΠΏΠΊΠ°</button>
Β <button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
</div>
</div>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ (Π½Π°Π²Π±Π°ΡΡ)
ΠΠ°Π½Π΅Π»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠ°Π½Π΅Π»Π΅ΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ:
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΡΠΈΠΌΠ΅Ρ
<div>
Β <button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
Β <button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
Β <button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
</div>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
Π Π°Π·ΠΌΠ΅Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ style=»width:»:
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΡΠΈΠΌΠ΅Ρ
<div>
Β <button
style=»width:33.3%»>ΠΠ½ΠΎΠΏΠΊΠ°</button>
Β <button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
Β <button
class=»w3-bar-item w3-button w3-red»>ΠΠ½ΠΎΠΏΠΊΠ°</button>
</div>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
ΠΡ ΡΠ·Π½Π°Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎΠ·ΠΆΠ΅ Π² ΡΡΠΎΠΌ ΡΡΠ΅Π±Π½ΠΈΠΊΠ΅.
ΠΠ΅Π²Π°Ρ ΠΈ ΠΏΡΠ°Π²Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠ»Π°ΡΡ .w3-left ΠΈ ΠΊΠ»Π°ΡΡ .w3-right ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ:
Π‘Π»Π΅Π²Π°
Π‘ΠΏΡΠ°Π²Π°
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ «previous/next» (ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ/ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ):
Β« Previous
Next Β»
ΠΡΠΈΠΌΠ΅Ρ
<div>
Β <button>Π‘Π»Π΅Π²Π°</button>
Β <button>Π‘ΠΏΡΠ°Π²Π°</button>
</div>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
ΠΠ½ΠΎΠΏΠΊΠΈ Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΡΡΠ±ΠΈ
The w3-ripple ΡΠΎΠ·Π΄Π°Π΅Ρ ΡΡΡΠ΅ΠΊΡ ΡΡΠ±ΠΈ (Π²ΠΎΠ»Π½Ρ) Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ (ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π½ΠΈΡ ):
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΠ½ΠΎΠΏΠΊΠ°
ΠΡΠΈΠΌΠ΅Ρ
<button>Button</button>
<button
class=»w3-button w3-ripple w3-red»>ΠΠ½ΠΎΠΏΠΊΠ°</button>
<button>ΠΠ½ΠΎΠΏΠΊΠ°</button>
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
ΠΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ W3.CSS Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ:
ΠΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ w3-button
ΠΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ w3-btn
ΠΡΠ±ΠΎΠΉ div, header, footer ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ w3-button!
ΠΡΠ±ΠΎΠΉ div, header, footer ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ w3-btn!
ΠΡΡΠ³Π»ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ»Π°ΡΡ w3-circle ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ:
+
+
ΠΠ²Π°Π΄ΡΠ°ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ:
+
+
ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π²ΠΊΠ»ΡΡΠΈΡΠ΅ JavaScript Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π², ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΡΡ Disqus.
ΠΠ½ΠΎΠΏΠΊΠΈ-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS3
ΠΠΎΠ²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS (CSS3) Π΄Π°ΡΡ Π½Π΅Π²Π΅ΡΠΎΡΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄Π»Ρ ΡΠ²ΠΎΡΡΠ΅ΡΡΠ²Π° ΠΈ ΠΏΠΎΠ»Π΅ΡΠ° ΡΠ°Π½ΡΠ°Π·ΠΈΠΈ. ΠΠ½Π΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π½ΡΠ°Π²ΠΈΡΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ ΠΈ ΡΠΎΠΌΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅. Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΠΏΠΎΠΊΠ°ΠΆΡ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠΎΠ»ΡΠΊΠΎ CSS, Π±Π΅Π· Π΅Π΄ΠΈΠ½ΠΎΠΉ ΡΡΡΠΎΡΠΊΠΈ JavaScript.
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π°ΠΌΠ΅ΡΠ°Π½ΠΈΠΉ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π½Π°ΡΠ½Π΅ΠΌ:Β
- Π― Π½Π΅ Π±ΡΠ΄Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΏΡΠ΅ΡΠΈΠΊΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Π² ΠΏΡΠΈΠΌΠ΅ΡΡ CSS-ΠΊΠΎΠ΄Π°, Π½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ ΠΈΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΡΡ ΡΠ°ΠΉΠ»Π°Ρ .
- ΠΡ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° html-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΠΎ ΠΌΠΈΠ½ΠΈΠΌΡΠΌΠ°, Π° ΡΠΎΠ»ΡΠΊΠΎ Firefox ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ/Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π΄Π»Ρ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
- ΠΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ «checkbox hack» (ΡΠΌ. Π½ΠΈΠΆΠ΅).
ΠΠΈΡΠ½ΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π±ΠΎΠΊΡ-ΠΌΠΎΠ΄Π΅Π»Ρ Π³Π΄Π΅ [width] = [element-width] + [padding] + [borders]. Π― Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°Π» Π΅Ρ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ΄Π°:
*,
*:after,
*:before {
Β Β box-sizing: border-box;
}
Π «Checkbox Hack»
Π‘heckbox hackΒ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΠΈΠΌΠ΅ΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS. ΠΠ½ ΠΎΡΠ½ΠΎΠ²ΡΠ²Π°Π΅ΡΡΡ Π½Π° ΡΠ΅ΠΊΠ±ΠΎΠΊΡΠ΅ (ΠΊΠΎΡΠΎΡΡΠΉ Π»ΠΈΠ±ΠΎ ΠΎΡΠΌΠ΅ΡΠ΅Π½, Π»ΠΈΠ±ΠΎ Π½Π΅ΠΎΡΠΌΠ΅ΡΠ΅Π½), ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ΅ :checked, ΠΈ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΠΎΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ΅ (~ ΠΈΠ»ΠΈ +). ΠΡΠ»ΠΈ Π²ΠΊΡΠ°ΡΡΠ΅, ΡΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΠΈΡΠ°ΡΡ ΡΠ°ΠΊ: «Π΅ΡΠ»ΠΈ ΡΠ΅ΠΊΠ±ΠΎΠΊΡ ΠΎΡΠΌΠ΅ΡΠ΅Π½, ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ X Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ Π·Π°ΡΠ°Π½Π΅Π΅ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ».
Π Π°Π½ΡΡΠ΅ Π΄Π»Ρ ΡΠ°ΠΊΠΈΡ ΡΠ΅Π»Π΅ΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΡΠ΅ΠΊΠ±ΠΎΠΊΡ Ρ ID ΠΈ ΡΠ΅Π³ΠΎΠΌ label, c Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ «for«, ΡΡΡΠ»Π°ΡΡΠΈΠΌΡΡ Π½Π° ID ΡΠ΅ΠΊΠ±ΠΎΠΊΡΠ°. ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ» ΡΠΊΡΡΡΡ ΡΠ΅ΠΊΠ±ΠΎΠΊΡ ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡ Π΅Π³ΠΎ, Π½Π°ΠΆΠ°Π² Π½Π° label. ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ ΡΡΠΈΠΌ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠΌ ΡΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ Safari Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π΅Π³ΠΎ.
ΠΠΎΡΡΠΎΠΌΡ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΡΠΏΠΎΡΠΎΠ±: Π΄Π΅Π»Π°Π΅ΠΌ ΡΠ΅ΠΊΠ±ΠΎΠΊΡ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡΠΌ, ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π΅Π³ΠΎ Π²ΡΡΠ΅ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² (z-index:100), Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ Π²ΡΡΠ΅ label, ΠΈ Π·Π°ΡΠ΅ΠΌ ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΊΠ»ΠΈΠΊΠ°Π΅ΡΠ΅ Π½Π° ΡΠ΅Π³ label, ΡΠΎ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π²Ρ ΠΎΡΠΌΠ΅ΡΠ°Π΅ΡΠ΅ ΡΠ΅ΠΊΠ±ΠΎΠΊΡ! ΠΠΎΠ΄ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
.switch input {
Β Β /* ΠΠ½Π°ΡΠ°Π»Π΅ Π΄Π΅Π»Π°Π΅ΠΌ Π΅Π³ΠΎ ΡΠ°Π²Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ */
Β Β position: absolute;
Β Β width: 100%;
Β Β height: 100%;
Β Β /* ΠΠ°ΡΠ΅ΠΌ, ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΠΌ Π΅Π³ΠΎ Π²Π²Π΅ΡΡ
, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΡΡΠ³ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² */
Β Β z-index: 100;
Β Β /* ΠΠ΅Π»Π°Π΅ΠΌ Π΅Π³ΠΎ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡΠΌ */
Β Β opacity: 0;
Β Β /* Π ΡΡΠΎ Π΄Π»Ρ ΡΡΠ³ΠΎΠ½ΠΎΠΌΠΈΡΠ½ΠΎΡΡΠΈ */
Β Β cursor: pointer;
}
ΠΡΠΈ 12 ΡΡΡΠΎΠΊ CSS-ΠΊΠΎΠ΄Π° Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π²ΠΎ Π²ΡΠ΅Ρ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ , Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.
ΠΡΠΈΠΌΠ΅Ρ 1
ΠΠ°Π²Π°ΠΉΡΠ΅ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠΉ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌ Π³ΠΎΡΡΡΠΈΠΌ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° ΠΎΡΠΌΠ΅ΡΠ΅Π½Π°.
Π Π°Π·ΠΌΠ΅ΡΠΊΠ°
<div>
Β Β <input type=»checkbox»>
Β Β <label></label>
</div>
ΠΠ»Π΅ΠΌΠ΅Π½ΡΒ .switch — ΡΡΠΎ Π½Π°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ. ΠΠ½ΡΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΠ΅Π³ input ΠΈ ΡΠ΅Π³ label. ΠΠ»Ρ ΡΠ΅Π³Π° input Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΈΠΏ checkbox (ID, name Π½Π΅ Π½ΡΠΆΠ½Ρ).
ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΊΠ°ΠΊΠΈΠΌ ΡΠ³ΠΎΠ΄Π½ΠΎ (ΡΡΡΠ»ΠΊΠΎΠΉ, div-ΠΎΠΌ, span-ΠΎΠΌ, label ΠΈ Ρ.Π΄.). Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ label ΠΏΠΎ ΡΡΠ°ΡΠΎΠΉ ΠΏΡΠΈΠ²ΡΡΠΊΠ΅, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΠ°Π½ΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΡΠ°ΡΡΠΉ Ρ Π°ΠΊ Π΄Π»Ρ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΠΎΠ², Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌ Π±ΡΠ» ΡΠ΅Π³ label.
CSS
ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , ΠΌΡ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π½Π°ΡΠ΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° ΡΠ°Π²Π½Ρ, ΠΈΠ½Π°ΡΠ΅ Π²Π°ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΊΡΡΠ³Π»ΠΎΠΉ. ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ ΠΌΡ ΠΏΡΡΡΠ΅ΠΌ ΡΠ΅ΠΊΠ±ΠΎΠΊΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS-ΠΊΠΎΠ΄Π°, ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π² Π½Π°ΡΠ°Π»Π΅ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ.
.switch {
Β Β width: 100px;
Β Β height: 100px;
Β Β position: relative;
}
ΠΠ°ΡΠ΅ΠΌ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠ΅Π³Π° label. ΠΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ,Β ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ°Π²Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ (ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ). ΠΠ°ΡΠ΅ΠΌ, Π·Π°Π΄Π°Π΄ΠΈΠΌ Π΅ΠΌΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ·ΠΆΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
.switch label {
Β Β display: block;
Β Β width: 100%;
Β Β height: 100%;
Β Β position: relative;
Β Β border-radius: 50%;
Β Β background: #eaeaea;
Β Β box-shadow:
Β Β Β Β 0 3px 5px rgba(0,0,0,0.25),
Β Β Β Β inset 0 1px 0 rgba(255,255,255,0.3),
Β Β Β Β inset 0 -5px 5px rgba(100,100,100,0.1),
Β Β Β Β inset 0 5px 5px rgba(255,255,255,0.3);
}
ΠΠ°ΡΠ΅ΠΌ, ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° :after Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΡΠ΅Π°Π»ΠΈΡΡΠΈΡΠ½ΠΎΡΡΠΈ, Π½Π°ΡΠΈΡΡΠ΅ΠΌ ΠΊΡΡΠ³Π»ΡΡ ΡΠ°ΠΌΠΊΡ, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΠΈ ΡΠ΅Π½ΠΈ.
.switch label:after {
Β Β content: «»;
Β Β position: absolute;
Β Β z-index: -1;
Β Β top: -8%;
Β Β right: -8%;
Β Β bottom: -8%;
Β Β left: -8%;
Β Β border-radius: inherit;
Β Β background: #ddd; /* Fallback */
Β Β background: linear-gradient(#ccc, #fff);
Β Β box-shadow:
Β Β Β Β inset 0 2px 1px rgba(0,0,0,0.15),
Β Β Β Β 0 2px 5px rgba(200,200,200,0.1);
}
Π’Π΅ΠΏΠ΅ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠΉ ΠΊΡΡΠ³, ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Π½ΡΠΉ Π² ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
.switch label:before {
Β Β content: «»;
Β Β position: absolute;
Β Β width: 20%;
Β Β height: 20%;
Β Β left: 40%;
Β Β top: 40%;
Β Β border-radius: inherit;
Β Β background: #969696; /* Fallback */
Β Β background: radial-gradient(40% 35%, #ccc, #969696 60%);
Β Β box-shadow:
Β Β Β Β inset 0 2px 4px 1px rgba(0,0,0,0.3),
Β Β Β Β 0 1px 0 rgba(255,255,255,1),
Β Β Β Β inset 0 1px 0 white;
}
ΠΡΠ°ΠΊ, ΡΠ΅ΠΏΠ΅ΡΡ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠΈΠΌΠΏΠ°ΡΠΈΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡΡ Ρ ΠΎΡΠΌΠ΅ΡΠ΅Π½Π½ΡΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅ Π½Π° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, Π²Ρ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅ Π½Π° Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡΠΉ ΡΠ΅ΠΊΠ±ΠΎΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π½Π°Π΄ ΡΠ΅Π³ΠΎΠΌ label. ΠΡΠ»ΠΈ Π²Ρ ΠΎΡΠΌΠ΅ΡΠΈΠ»ΠΈ ΡΠ΅ΠΊΠ±ΠΎΠΊΡ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ :checked ΠΈ ΡΠΎΠ΄ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΊΠ½ΠΎΠΏΠΊΠ° Π²ΠΊΠ»ΡΡΠ΅Π½Π°, ΠΌΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΠ° (ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½Ρ :before), Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ½ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
.switch input:checked ~ label { /* Button */
Β Β background: #e5e5e5; /* Fallback */
Β Β background: linear-gradient(#dedede, #fdfdfd);
}
Β
.switch input:checked ~ label:before { /* LED */
Β Β background: #25d025; /* Fallback */
Β Β background: radial-gradient(40% 35%, #5aef5a, #25d025 60%);
Β Β box-shadow:
Β Β Β Β inset 0 3px 5px 1px rgba(0,0,0,0.1),
Β Β Β Β 0 1px 0 rgba(255,255,255,0.4),
Β Β Β Β 0 0 10px 2px rgba(0, 210, 0, 0.5);
}
ΠΡΠΈΠΌΠ΅Ρ 2
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ, ΠΏΠΎΡ ΠΎΠΆΠΈΠΉ Π½Π° ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π΄ΠΎΠΌΠ΅ Π΄Π»Ρ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ\Π²ΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ°.
Π Π°Π·ΠΌΠ΅ΡΠΊΠ°
Π Π°Π·ΠΌΠ΅ΡΠΊΠ° ΡΠ°ΠΊΠ°Ρ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΠ΅ΡΠ²ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅: ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΡΠ΅ΠΊΠ±ΠΎΠΊΡ ΠΈ ΡΡΠΈΠΊΠ΅ΡΠΊΠ°:
<div>
Β Β <input type=»checkbox»>
Β Β <label></label>
</div>
CSS
ΠΠ°ΡΠ½Π΅ΠΌ Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π½Π°ΡΠ΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
.switch {
Β Β width: 50px;
Β Β height: 100px;
Β Β position: relative;
}
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ΅Π½Π΅ΠΉ Π΄Π»Ρ Π±Π»ΠΎΠΊΠ°, ΡΡΠΎΠ±Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΠΎΡΠΎΡΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅Π»Π°. ΠΠ°Π²Π°ΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΠ°ΠΊΠΆΠ΅ ΠΌΡΠ³ΠΊΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° ΠΈ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΡΠ³Π»Ρ, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΎ Π΅ΡΠ΅ ΠΌΡΠ³ΡΠ΅:
.switch label {
Β Β display: block;
Β Β width: 100%;
Β Β height: 100%;
Β Β position: relative;
Β Β background: #cbc7bc;
Β Β border-radius: 5px;
Β Β box-shadow:
Β Β Β Β inset 0 1px 0 white,
Β Β Β Β 0 0 0 1px #999,
Β Β Β Β 0 0 5px 1px rgba(0,0,0,0.2),
Β Β Β Β 0 2px 0 rgba(255,255,255,0.6),
Β Β Β Β inset 0 10px 1px #e5e5e5,
Β Β Β Β inset 0 11px 0 rgba(255,255,255,0.5),
Β Β Β Β inset 0 -45px 3px #ddd;
}
Π’Π΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠ΅ΡΠ²ΡΠΉ ΠΈΠ· Π½ΠΈΡ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠΎΡΠΏΡΡΠ°, Π²ΡΠΎΡΠΎΠΉ Π΄Π»Ρ ΠΈΠΌΠΈΡΠ°ΡΠΈΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΠΊΠΎΡΠΏΡΡΠ°:
.switch label:after {
Β Β content: «»;
Β Β position: absolute;
Β Β z-index: -1;
Β Β top: -20px;
Β Β left: -25px;
Β Β bottom: -20px;
Β Β right: -25px;
Β Β background: #ccc; /* Fallback */
Β Β background: linear-gradient(#ddd, #bbb);
Β Β border-radius: inherit;
Β Β border: 1px solid #bbb;
Β Β box-shadow:
Β Β Β Β 0 0 5px 1px rgba(0,0,0,0.15),
Β Β Β Β 0 3px 3px rgba(0,0,0,0.3),
Β Β Β Β inset 0 1px 0 rgba(255,255,255,0.5);
}
ΠΡΠΎΡΠΎΠΉ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ΅Π½, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄Π²ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ box-shadow!
.switch label:before {
Β Β content: «»;
Β Β position: absolute;
Β Β width: 8px;
Β Β height: 8px;
Β Β top: -13px;
Β Β left: 20px;
Β Β background: #666;
Β Β border-radius: 50%;
Β Β box-shadow:
Β Β Β Β 0 1px 0 white, /* Subtle reflection on the bottom of the hole */
Β Β Β Β 0 120px 0 #666, /* Faking a second screw hole… */
Β Β Β Β 0 121px 0 white; /* And its reflection */
}
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½Π°Ρ ΡΠ°ΡΡΡ (ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅Π³ΠΎΠΌ label) Π±ΡΠ΄Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΡΠ΅Π»ΠΊΠ½Π΅ΠΌ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅. Π ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ box-shadow:
.switch input:checked ~ label { /* Button */
Β Β background: #d2cbc3;
Β Β box-shadow:
Β Β Β Β inset 0 1px 0 white,
Β Β Β Β 0 0 0 1px #999,
Β Β Β Β 0 0 5px 1px rgba(0,0,0,0.2),
Β Β Β Β inset 0 -10px 0 #aaa,
Β Β Β Β 0 2px 0 rgba(255,255,255,0.1),
Β Β Β Β inset 0 45px 3px #e0e0E0,
Β Β Β Β 0 8px 6px rgba(0,0,0,0.18);
}
ΠΡΠΈΠΌΠ΅Ρ 3
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΈΠΌΠ΅Ρ Π΅ΡΠ΅ ΠΊΡΡΡΠ΅. ΠΠ½ Π²Π·ΡΡ ΠΈΠ· ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°Β ΠΎΡ ΡΠ°Π»Π°Π½ΡΠ»ΠΈΠ²ΠΎΠ³ΠΎ Piotr Kwiatkowski. ΠΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΎΡΠ΅Π½Ρ ΡΠΈΠΌΠΏΠ°ΡΠΈΡΠ½ΠΎ, Π½Π΅ ΡΠ°ΠΊ Π»ΠΈ?
Π Π°Π·ΠΌΠ΅ΡΠΊΠ°
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ, Π½Π°ΠΌ Π½ΡΠΆΠ΅Π½ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π΄Π»Ρ ΡΡΠΎΠΉ ΡΠ΅Π»ΠΈ ΡΠ΅Π³ <i>.
<div>
Β Β <input type=»checkbox»>
Β Β <label><i></i></label>
</div>
CSS
ΠΡΠ°ΠΊ, Π΅ΡΠ΅ ΡΠ°Π·, ΠΌΡ ΡΠΊΡΡΠ²Π°Π΅ΠΌ ΡΠ΅ΠΊΠ±ΠΎΠΊΡ ΠΈ Π·Π°Π΄Π°Π΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΡ Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
.switch {
Β Β width: 180px;
Β Β height: 50px;
Β Β position: relative;
}
ΠΠ°ΡΠ΅ΠΌ ΠΌΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅: label Π±ΡΠ΄Π΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ. Π ΡΠ΅Π³ <i> ΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΌ. ΠΠΎΡΡΠΎΠΌΡ ΡΠ΅Π³Β label Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΡΡΠΉ ΡΠΎΠ½ Ρ ΡΠ΅Π½ΡΠΌΠΈ, Π½Π΅ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ³ΠΎ. ΠΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅.
.switch label {
Β Β display: block;
Β Β width: 100%;
Β Β height: 100%;
Β Β position: relative;
Β Β background: #a5a39d;
Β Β border-radius: 40px;
Β Β box-shadow:
Β Β Β Β inset 0 3px 8px 1px rgba(0,0,0,0.2),
Β Β Β Β 0 1px 0 rgba(255,255,255,0.5);
}
ΠΡΠΎ «ΡΠ°ΠΌΠΊΠ° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°», ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΡ Π·Π°Π΄Π°Π΅ΠΌ Π΅ΠΉ ΠΏΡΠΈΡΡΠ½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΅Π½ΠΈ Π΄Π»Ρ Π±Π»ΠΎΠΊΠ°.
.switch label:after {
Β Β content: «»;
Β Β position: absolute;
Β Β z-index: -1;
Β Β top: -8px; right: -8px; bottom: -8px; left: -8px;
Β Β border-radius: inherit;
Β Β background: #ccc; /* Fallback */
Β Β background: linear-gradient(#f2f2f2, #ababab);
Β Β box-shadow: 0 0 10px rgba(0,0,0,0.3),
Β Β Β Β 0 1px 1px rgba(0,0,0,0.25);
}
ΠΡΠΎΡ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΡΠ³ΠΊΠΎΠ³ΠΎ ΡΠ³Π»ΡΠ±Π»Π΅Π½ΠΈΡ Π²ΠΎΠΊΡΡΠ³ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΠΈ ΡΠ΅Π½ΠΈ. ΠΠ΅Π±ΠΎΠ»ΡΡΠΎΠ΅ ΡΠ»ΡΡΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Chrome Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΈΠ»ΡΡΡΠ° blur, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΡΠ΅ΠΊΡ Π΅ΡΠ΅ ΠΌΡΠ³ΡΠ΅.
.switch label:before {
Β Β content: «»;
Β Β position: absolute;
Β Β z-index: -1;
Β Β top: -18px; right: -18px; bottom: -18px; left: -18px;
Β Β border-radius: inherit;
Β Β background: #eee; /* Fallback */
Β Β background: linear-gradient(#e5e7e6, #eee);
Β Β box-shadow: 0 1px 0 rgba(255,255,255,0.5);
Β Β -webkit-filter: blur(1px); /* Smooth trick */
Β Β filter: blur(1px); /* Future-proof */
}
ΠΡΠ°ΠΊ, ΡΠ΅ΠΏΠ΅ΡΡ Ρ Π½Π°Ρ Π΅ΡΡΡ ΠΎΡΠ΅Π½Ρ ΠΊΡΠ°ΡΠΈΠ²Π°Ρ ΡΠ°ΠΌΠΊΠ° Π΄Π»Ρ Π½Π°ΡΠΈΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉ. Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΡΠ°ΠΌΠΈΠΌ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΡΠΌ.
Π‘Π΄Π΅Π»Π°Π΅ΠΌ Π΅Π³ΠΎ Π±Π»ΠΎΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, Π·Π°Π΄Π°Π΄ΠΈΠΌ Π΅ΠΌΡ Π²ΡΡΠΎΡΡ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ΅ΠΌ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ ΡΠΈΡΠΈΠ½Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ. ΠΡ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠΌ Π΅Π³ΠΎ ΡΠ»Π΅Π²Π° ΠΎΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΈ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π΅ΠΌΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠΈΠ»ΠΈ (ΡΠ΅Π½ΠΈ ΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ):
.switch label i {
Β Β display: block;
Β Β height: 100%;
Β Β width: 60%;
Β Β position: absolute;
Β Β left: 0;
Β Β top: 0;
Β Β z-index: 2;
Β Β border-radius: inherit;
Β Β background: #b2ac9e; /* Fallback */
Β Β background: linear-gradient(#f7f2f6, #b2ac9e);
Β Β box-shadow:
Β Β Β Β inset 0 1px 0 white,
Β Β Β Β 0 0 8px rgba(0,0,0,0.3),
Β Β Β Β 0 5px 5px rgba(0,0,0,0.2);
}
ΠΡΠΎΡ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ ΡΡΡΠ΅ΡΠΈΠΊΠΈ: ΠΎΠ½ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΡΠΈΠΌΠΏΠ°ΡΠΈΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ.
.switch label i:after {
Β Β content: «»;
Β Β position: absolute;
Β Β left: 15%;
Β Β top: 25%;
Β Β width: 70%;
Β Β height: 50%;
Β Β background: #d2cbc3; /* Fallback */
Β Β background: linear-gradient(#cbc7bc, #d2cbc3);
Β Β border-radius: inherit;
}
ΠΡΠΎΡΡΠΌ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ»ΠΎΠ²ΠΎ «ON» ΠΈΠ»ΠΈ «OFF», Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ content, ΡΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π½ΡΠΆΠ½ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ, ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΡΠΈΡΡΠΎΠ², ΡΡΠΎΠ±Ρ ΠΎΠ½Π° Π²ΡΠ³Π»ΡΠ΄Π΅Π»Π°, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ ΠΎΠ½Π° Π²ΡΠ³ΡΠ°Π²ΠΈΡΠΎΠ²Π°Π½Π° Π½Π° ΡΠΎΠ½Π΅:
.switch label i:before {
Β Β content: «off»;
Β Β position: absolute;
Β Β top: 50%;
Β Β right: -50%;
Β Β margin-top: -12px;
Β Β color: #666; /* Fallback */
Β Β color: rgba(0,0,0,0.4);
Β Β font-style: normal;
Β Β font-weight: bold;
Β Β font-family: Helvetica, Arial, sans-serif;
Β Β font-size: 24px;
Β Β text-transform: uppercase;
Β Β text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
}
Π’Π΅ΠΏΠ΅ΡΡ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΡΠΌΠ±Π»Π΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ Π½Π°ΡΠΈΡΠΎΠ²Π°Π» Piotr, Π²Π΅ΡΠ½ΠΎ?
Π’Π΅ΠΏΠ΅ΡΡ Π·Π°ΠΉΠΌΠ΅ΠΌΡΡΒ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° «Π²ΠΊΠ»ΡΡΠ΅Π½Π°». Π’ΡΠΈ Π²Π΅ΡΠΈ Π±ΡΠ΄ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ ΠΊΠΎΠ³Π΄Π° ΠΌΡ Π½Π°ΠΆΠΌΠ΅ΠΌ Π½Π° ΡΠ»Π°ΠΆΠΎΠΊ: ΡΠ²Π΅Ρ ΡΠΎΠ½Π°, ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ, ΠΈ ΡΠ»ΠΎΠ²ΠΎ («ON» ΠΈΠ»ΠΈ «OFF»):
.switch input:checked ~ label { /* Background */
Β Β background: #9abb82;
}
Β
.switch input:checked ~ label i { /* Toggle */
Β Β left: auto;
Β Β right: -1%;
}
Β
.switch input:checked ~ label i:before { /* On/off */
Β Β content: «on»;
Β Β right: 115%;
Β Β color: #82a06a;
Β Β text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #6b8659;
}
ΠΡΠΈΠΌΠ΅Ρ 4
ΠΠ°Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° Π΄ΡΡΠ³ΠΎΠΉ ΡΠ°Π±ΠΎΡΠ΅ ΠΎΡ Piotr Kwiatkowski, Π½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΌΠ½ΠΎΡ, ΡΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ΅ ΠΆΠ΅ ΡΠ²Π΅ΡΠ°, ΡΡΠΎ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ.
Π Π°Π·ΠΌΠ΅ΡΠΊΠ°
Π Π°Π·ΠΌΠ΅ΡΠΊΠ° Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡΡΠΈ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅, ΠΊΠ°ΠΊ Π² ΡΡΠ΅ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅. ΠΠ»Π°ΡΡ Π΄Π»Ρ ΡΠ΅Π³Π° <i> Π½ΡΠΆΠ΅Π½ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ FontAwesome.
<div>
Β Β <input type=»checkbox»>
Β Β <label><i></i></label>
</div>
CSS
Π― Π½Π΅ Π±ΡΠ΄Ρ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ Π·Π΄Π΅ΡΡ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ FontAwesome, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Ρ ΡΠ²Π΅ΡΠ΅Π½, ΡΡΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΡΠΆΠ΅ ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ Ρ Π½ΠΈΠΌ. ΠΡΠΎΡΡΠΎ ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ
- Π² Π²Π°ΡΠ΅ΠΌ @font-face ΡΠΊΠ°Π·Π°Π½ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΠΏΡΡΡ ΠΊ ΡΠ°ΠΉΠ»Π°ΠΌ,
- ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΡΠΈΡ CSS-ΡΠ°ΠΉΠ»ΠΎΠ² Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΡΡΠΈΠ»ΠΈ FontAwesome.
ΠΡΠ°ΠΊ, Π΄Π°Π²Π°ΠΉΡΠ΅ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΠΎΡΠ½ΠΎΠ²: ΡΠΏΡΡΡΠ΅ΠΌ ΡΠ΅ΠΊΠ±ΠΎΠΊΡ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°:
.switch {
Β Β width: 150px;
Β Β height: 150px;
Β Β position: relative;
}
Π’Π΅ΠΏΠ΅ΡΡ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ·Π°Π±ΠΎΡΠΈΠΌΡΡ ΠΎ ΡΡΠΈΠΊΠ΅ΡΠΊΠ΅, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈ Π±ΡΠ΄Π΅Ρ Π½Π°ΡΠ΅ΠΉ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΌΡ Π²ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΡΡΠ΄Π° Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΡΠΈΡΡΠΎΠ². ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²ΡΠ΅ ΠΎΠ½ΠΈ Π½Π°ΡΠ»Π΅Π΄ΡΡΡΡΡ, ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Ρ ΠΊ ΡΠ΅Π³Ρ <i> (Π·Π½Π°ΡΠΎΠΊ).
.switch label {
Β Β display: block;
Β Β width: 100%;
Β Β height: 100%;
Β Β position: relative;
Β Β color: #a5a39d;
Β Β font-size: 70px;
Β Β text-align: center;
Β Β line-height: 115px;
Β Β text-shadow: 0 2px 1px rgba(0,0,0,0.25);
Β Β border-radius: 50%;
Β Β background: #b25244; /* Fallback */
Β Β background: linear-gradient(#f7f2f6, #b2ac9e);
Β Β transition: all 0.3s ease-out;
Β Β z-index: -1;
Β Β box-shadow:
Β Β Β Β inset 0 2px 3px rgba(255,255,255,0.13),
Β Β Β Β 0 5px 8px rgba(0,0,0,0.3),
Β Β Β Β 0 10px 10px 4px rgba(0,0,0,0.3);
}
ΠΠ±Π° ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄Π»Ρ ΡΡΠΈΠΊΠ΅ΡΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΈΠΌΠΏΠ°ΡΠΈΡΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° Π²ΠΎΠΊΡΡΠ³ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΠΈΠ»ΡΡΡ ΡΠ°Π·ΠΌΡΡΠΈΡ Π΄Π»Ρ :before, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ½ΠΊΠΈΠΌ.
.switch label:before {
Β Β content: «»;
Β Β position: absolute;
Β Β left: -10px;
Β Β right: -10px;
Β Β top: -10px;
Β Β bottom: -10px;
Β Β z-index: -1;
Β Β border-radius: inherit;
Β Β box-shadow: inset 0 10px 10px rgba(0,0,0,0.13);
Β Β -webkit-filter:blur(1px); /* Smooth trick */
Β Β filter: blur(1px); /* Future-proof */
}
Β
.switch label:after {
Β Β content: «»;
Β Β position: absolute;
Β Β left: -20px;
Β Β right: -20px;
Β Β top: -20px;
Β Β bottom: -20px;
Β Β z-index: -2;
Β Β border-radius: inherit;
Β Β box-shadow:
Β Β Β Β inset 0 1px 0 rgba(255,255,255,0.1),
Β Β Β Β 0 1px 2px rgba(0,0,0,0.3),
Β Β Β Β 0 0 10px rgba(0,0,0,0.15);
}
Π’Π΅ΠΏΠ΅ΡΡ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌΡΡ Ρ Π½Π°ΡΠΈΠΌΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ: <i>. FontAwesome ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ :before ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ. ΠΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ :after, ΠΈ ΠΌΡ ΡΠ°ΠΊ ΠΈ ΠΏΠΎΡΡΡΠΏΠΈΠΌ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΡΠΎ-ΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Ρ Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΡΡ Π½Π°ΡΠ΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ, ΠΌΡ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π΅ΠΉ ΡΠΈΠΌΠΏΠ°ΡΠΈΡΠ½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ, ΡΠΎΠ½ΠΊΠΈΠ΅ ΡΠ΅Π½ΠΈ Ρ 1px ΡΠ°Π·ΠΌΡΡΠΈΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π΅ Π±ΠΎΠ»Π΅Π΅ Π³Π»Π°Π΄ΠΊΠΎΠΉ.
.switch .icon-off:after {
Β Β content: «»;
Β Β display: block;
Β Β position: absolute;
Β Β width: 70%;
Β Β height: 70%;
Β Β left: 50%;
Β Β top: 50%;
Β Β z-index: -1;
Β Β margin: -35% 0 0 -35%;
Β Β border-radius: 50%;
Β Β background: #d2cbc3; /* Fallback */
Β Β background: linear-gradient(#cbc7bc, #d2cbc3);
Β Β box-shadow:
Β Β Β Β 0 -2px 5px rgba(255,255,255,0.05),
Β Β Β Β 0 2px 5px rgba(255,255,255,0.1);
Β Β -webkit-filter:blur(1px); /* Smooth trick */
Β Β filter: blur(1px); /* Future-proof */
}
Π’Π΅ΠΏΠ΅ΡΡ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΎΡΠΌΠ΅ΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ: Π·Π½Π°ΡΠΎΠΊ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π·Π΅Π»Π΅Π½ΡΠΌ, Π° ΠΊΠ½ΠΎΠΏΠΊΠ° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π°ΠΆΠ°ΡΠΎΠΉ:
.switch input:checked ~ label { /* Button */
Β Β color: #9abb82;
Β Β box-shadow:
Β Β Β Β inset 0 2px 3px rgba(255,255,255,0.13),
Β Β Β Β 0 5px 8px rgba(0,0,0,0.35),
Β Β Β Β 0 3px 10px 4px rgba(0,0,0,0.2);
}
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Π½Π°Π΄Π΅ΡΡΡ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΠΎΡΡ
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ
ΠΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΡΠ°ΡΡΠΈ Ρ http://tympanus.net
ΠΡΠ»ΠΈ Ρ ΠΠ°Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ Π²ΠΎΠΏΡΠΎΡΡ, ΡΠΎ Π΄Π»Ρ ΡΠΊΠΎΡΠ΅ΠΉΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΠΎΡΠ²Π΅ΡΠ° ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π½Π°ΡΠΈΠΌ ΡΠΎΡΡΠΌΠΎΠΌ
Π‘ΡΠΈΠ»ΠΈ CSS ΠΊΠ½ΠΎΠΏΠΎΠΊ, CSS ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅, Π² ΡΡΠΎΠΉ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΡΠ΅ΡΡΡΠ΅ ΠΊΡΡΠ³Π»ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π²ΡΠΏΠΎΠ»Π½Π΅Π½Π½ΡΠ΅ Π½Π° CSS ΠΈ HTML, Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ ΠΈ ΡΠΎΡΠΎΡΠΎΠΏΠ°. ΠΡΠ»ΠΈ ΠΏΠΎΡΠ°Π½ΡΠ°Π·ΠΈΡΠΎΠ²Π°ΡΡ, ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡΠΈΠΌ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ. Π― ΡΠ΅ΡΠΈΠ» ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°ΡΡ ΠΈ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π²Π°ΠΌ ΠΈΡ
, ΠΏΠΎΡΠΎΠΌΡ β ΡΡΠΎ ΠΌΠ½Π΅ ΡΠ°ΠΌΠΎΠΌΡ ΠΎΠ½ΠΈ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΠΈΡΡ. Π‘ΠΌΠΎΡΡΡΡΡΡ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΡΡΠΈ CSS ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ β ΡΠ°ΠΊΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎ.
ο»Ώ
Π‘ΠΌΠΎΡΡΠ΅ΡΡ ΠΏΡΠΈΠΌΠ΅Ρ
ΠΡΡΠ°ΡΠΈ, ΡΡΠΈΠ»ΠΈ CSS ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π΅ ΡΠ°ΠΊΠΈΠ΅ ΡΠΆ ΠΈ Π΄Π»ΠΈΠ½Π½ΡΠ΅, ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ Π±ΡΠ²Π°ΡΡ. Π’Π°ΠΊ ΡΡΠΎ ΠΊΠΎΠΌΡ ΠΏΡΠΈΠ³Π»ΡΠ½ΡΠ»ΠΈΡΡ ΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΎΡΠΊΠΈ, Π±Π΅ΡΠΈΡΠ΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Ρ ΡΠ΅Π±Ρ Π½Π° ΡΠ°ΠΉΡΠ΅. Π ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠ΅ ΠΎΠ½ΠΈ Π±ΡΠ»ΠΈ ΡΠΎΠ²ΠΌΠ΅ΡΠ΅Π½Ρ, Ρ ΡΠ°Π·Π΄Π΅Π»ΠΈΠ» ΡΡΠΈΠ»ΠΈ ΠΏΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΡΡΠΈ Π΄Π»Ρ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° ΠΈ Π²ΠΎΡ ΡΡΠΎ Ρ ΠΌΠ΅Π½Ρ Π² ΠΈΡΠΎΠ³Π΅ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ :
HTML ΠΊΠΎΠ΄ ΠΊΠ½ΠΎΠΏΠΎΠΊ
Π‘ΠΈΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ° :
<a href="#"></a>
ΠΡΠ°ΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° :
<a href="#"></a>
ΠΠ΅Π»Π΅Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° :
<a href="#"></a>
ΠΠ΅Π»ΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° :
<a href="#"></a>
Π‘ΡΠΈΠ»ΠΈ CSS ΠΊΠ½ΠΎΠΏΠΎΠΊ
Π‘ΠΈΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ° :
.btn-blue { background: #108FE8; border: 3px solid #fff; border-radius: 100%; box-shadow: 0 -2px 0 3px #0d72b8 inset, 0 5px 5px rgba(3, 25, 41, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset; cursor: pointer; display: inline-block; height: 75px; width: 75px; } .btn-blue:hover { background: #333; box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset; }
ΠΡΠ°ΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° :
.btn-red { background: #E53030; border: 3px solid #fff; border-radius: 100%; box-shadow: 0 -2px 0 3px #c91919 inset, 0 5px 5px rgba(65, 8, 8, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset; cursor: pointer; display: inline-block; height: 75px; width: 75px; } .btn-red:hover { background: #333; box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset; }
ΠΠ΅Π»Π΅Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° :
.btn-green { background: #0EC518; border: 3px solid #fff; border-radius: 100%; box-shadow: 0 -2px 0 3px #0b9512 inset, 0 5px 5px rgba(0, 7, 1, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset; cursor: pointer; display: inline-block; height: 75px; width: 75px; } .btn-green:hover { background: #333; box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset; }
ΠΠ΅Π»ΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° :
.btn-yellow { background: #FFC334; border: 3px solid #fff; border-radius: 100%; box-shadow: 0 -2px 0 3px #ffb401 inset, 0 5px 5px rgba(103, 73, 0, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset; cursor: pointer; display: inline-block; height: 75px; width: 75px; } .btn-yellow:hover { background: #333; box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset; }
β ΠΠ»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ Π½Π΅ Π·Π½Π°Π΅Ρ ΠΊΠ°ΠΊ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ ΡΡΠΈ ΠΊΡΡΠ³Π»ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS, Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΈΠ½ΡΡΡΡΠΊΡΠ°ΠΆ:
ΠΠΎΠΏΠΈΡΡΠΉΡΠ΅ Π½ΡΠΆΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ CSS ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΠΈΡ
Π² ΡΠ°ΠΌΠΎΠ΅ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΠ΅ ΡΠ°ΠΉΠ»Π° style.css
ΡΠ²ΠΎΠ΅ΠΉ ΡΠ΅ΠΌΡ. Π ΠΏΠΎΡΠΎΠΌ, ΠΏΠ΅ΡΠ΅Π΄ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ Π·Π°ΠΏΠΈΡΠΈ ΠΎΡΡΠ°Π½Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ HTML ΠΊΠΎΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ Π²ΡΡΠ°Π²ΠΈΠ² ΡΠ²ΠΎΡ ΡΡΡΠ»ΠΊΡ Π²ΠΌΠ΅ΡΡΠΎ Π·Π½Π°ΠΊΠ° #
, Π² Π»ΡΠ±ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π±ΡΠ΄ΡΡΡΠ΅ΠΉ ΡΡΠ°ΡΡΠΈ.
ΠΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΎΡΠ±Π»Π°Π³ΠΎΠ΄Π°ΡΠΈΡΡ Π°Π²ΡΠΎΡΠ°
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΠΏΠΎ Π’Π΅Π³Π°ΠΌ ΡΡΠ°ΡΡΠΈ
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°? ΠΡΠΈΠΌΠ΅ΡΡ Π³ΠΎΡΠΎΠ²ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° HTML+CSS.
Π ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ΅ Ρ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΈΠ» Π΄Π»Ρ Π²Π°Ρ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΡ ΠΈΠ· 100 ΠΊΡΠ°ΡΠΈΠ²ΡΡ Π³ΠΎΡΠΎΠ²ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° ΡΠ°ΠΉΡ. ΠΡΡΡ ΠΏΡΠΈΠΌΠ΅ΡΡ, Π΅ΡΡΡ ΡΡΡΠ»ΠΊΠΈ Π³Π΄Π΅ ΡΠΊΠ°ΡΠ°ΡΡ. Π’Π°ΠΊΠΆΠ΅ Ρ Π² ΠΊΠΎΠ½ΡΠ΅ Π·Π°ΠΏΠΈΡΠΈ ΡΠ°ΡΡΠΊΠ°Π·Π°Π», ΠΊΠ°ΠΊ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΆΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΈΠ»ΠΈ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΡ.
ΠΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ΡΡ Π½Π° Π·Π΄ΠΎΡΠΎΠ²ΡΠ΅.
ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ Π² Π·Π°ΠΊΠ»Π°Π΄ΠΊΠΈ.
ΠΡΠ°ΡΠΈΠ²ΡΠ΅ Π³ΠΎΡΠΎΠ²ΡΠ΅ HTML+CSS ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
CSS3 Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ-ΠΈΠΊΠΎΠ½ΠΊΠΈ
ΠΠ΅ΠΌΠΎ
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
Β«ΠΠΈΠ·Π½Π΅Ρ ΠΠ ΠΒ» ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° CSS3
ΠΠ΅ΠΌΠΎ
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
Π‘ΠΎΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ΅ΠΌΠΎ
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
ΠΡΠΎΡΡΡΠ΅ 3Π ΠΊΠ½ΠΎΠΏΠΊΠΈ-ΠΌΠ΅ΡΠΊΠΈ
ΠΠ΅ΠΌΠΎ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
HTML CSS ΠΠ½ΠΎΠΏΠΊΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
Π‘Π²Π΅ΡΡΡΠΈΠ΅ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ΅ΠΌΠΎ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
ΠΠ±Π»Π°ΠΊΠΎ ΡΠ΅Π³ΠΎΠ² Ρ CSS-ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠΎΠΉ
ΠΠ΅ΠΌΠΎ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
ΠΡΡΠ³Π»ΡΠ΅ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ΅ΠΌΠΎ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
CSS β ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ΅ΠΉ
ΠΠ΅ΠΌΠΎ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΡΡΡΡΠΊΡΠΈΡ
ΠΠΈΠ»ΡΠ΅ CSS ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ΅ΠΌΠΎ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
ΠΠ½ΠΎΠΏΠΊΠΈ Ρ CSS-Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ
ΠΠ΅ΠΌΠΎ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
3Π ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΠΌΠ΅Π΄ΠΈΠ°
ΠΠ΅ΠΌΠΎ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
ΠΡΠΈΠ³Π΅Π½Π½ΡΠ΅ CSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ΅ΠΌΠΎ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
CSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠΠΈΡΡ Π°Π±Β»
ΠΠ΅ΠΌΠΎ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠΈ-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ
ΠΠ΅ΠΌΠΎ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ
ΠΠ½ΠΎΠΏΠΊΠΈ Π½Π° CSS3 Ρ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
ΠΠ΅ΠΌΠΎ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ
3Π Π²Π΅Π±-ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ΅ΠΌΠΎ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ΅ΠΌΠΎ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ
Π Π°Π΄ΠΈΠΎ-ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΡΠ΅Π½ΡΡ
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½Π°Ρ ΠΏΠΎΠΏΡΡΠΊΠ° ΠΏΡΠΈΠ±Π°Π²ΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ Π² ΡΡΠΈΠ»Π΅ Β«flatΒ» Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π³Π»ΡΠ±ΠΈΠ½Ρ.
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠΎΡΡΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠΎ ΡΡΡΠ΅Π»Π°ΠΌΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠΈ ΠΎΡΠΎΡΠΌΠ»Π΅Π½Π½ΡΠ΅ Π² Π²ΠΈΠ΄Π΅ ΡΠΏΠΈΡΠΊΠ°
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠΊΠ°ΠΏ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ ΠΈΠ΄Π΅ΠΈ Ρ Π½Π΅ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΡΡΠΈΠ»ΠΈΡΡΠΈΠΊΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΎΠΊ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠΈ Π² ΡΡΠΈΠ»Π΅ Β«Π€Π»ΡΡΒ»
Π‘ΠΊΠ°ΡΠ°ΡΡ
Flat-ΠΊΠ½ΠΎΠΏΠΊΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠ»ΡΡΠ΅ flat-ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° HTML+CSS Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌ hover-ΡΡΡΠ΅ΠΊΡΠΎΠΌ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠΈ Β«ΠΊΠ°ΠΊ Ρ ΠΡΠ³Π»Π°Β»
Π‘ΠΊΠ°ΡΠ°ΡΡ
Π Π°ΡΠΊΡΠ°ΡΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΊΠΎΡΠ·ΠΈΠ½ΡΒ»
Π‘ΠΊΠ°ΡΠ°ΡΡ
CSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ΅ΡΠ°Π»Π»ΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°
Π‘ΠΊΠ°ΡΠ°ΡΡ
Π‘ΡΠΈΠ»ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π»Π°ΠΉΠΊ-ΠΊΠ½ΠΎΠΏΠΊΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
Π Π°Π΄ΠΈΠΎ-Π±Π°ΡΡΠΎΠ½Ρ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° ΠΈ ΡΠ΅ΠΊΠ»ΠΈΡΡΠ°
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² ΡΡΠΈΠ»Π΅ Β«ΡΠ»ΡΡΒ»
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠ°ΡΠΈΠ²ΡΠ΅ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° HTML
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠ°ΡΠΈΠ²ΡΠ΅ ΡΠ²Π΅ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° CSS Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΡΠΎΠ²ΡΠ΅ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΡΠ°ΠΉΡ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠΈ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ΅ΠΉ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
ΠΠ΅ΠΌΠΎ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΡΠΎΠ²ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠΈ Π² ΡΡΠΈΠ»Π΅ Β«ΠΠ΅ΡΠΎΠΈ 2Β»
Π‘ΠΊΠ°ΡΠ°ΡΡ
Toggle-ΠΊΠ½ΠΎΠΏΠΊΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Β«Π‘ΠΊΠ°ΡΠ°ΡΡΒ» Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠ°-ΠΊΠΎΠΌΠΏΠ°Ρ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ°Π±ΠΎΡ ΠΏΡΠΎΡΡΡΡ ΠΈ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠ°-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠΈ Π² ΡΡΠΈΠ»Π΅ Π‘ΡΠ°Ρ-ΡΡΠ΅ΠΊΠ°
Π‘ΠΊΠ°ΡΠ°ΡΡ
CSS3 Β«HexagonΒ» ΠΠ½ΠΎΠΏΠΊΠΈ
ΠΠ΅ΠΌΠΎ
ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°Π½ΠΈΡ
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Π½Π° CSS+HTML Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ?
Π¦Π²Π΅ΡΠ½ΡΠ΅ CSS-ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
ΠΠ°Π±ΠΎΡ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠΈΠΏΠΎΠ² CSS ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² ΡΠ°Π·Π½ΡΡ ΡΠ²Π΅ΡΠ°Ρ .
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠ°ΡΠΈΠ²ΡΠ΅ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π»Ρ ΡΠΊΡΠ°ΡΠ΅Π½ΠΈΡ ΡΠ°ΠΉΡΠ°.
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠΈ-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ Π² ΡΡΠΈΠ»Π΅ ΠΡΡΡΡΡΡΠ°ΠΏΠ°
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ°Π±ΠΎΡ ΡΠ²Π΅ΡΠ»ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΡΡΡΡ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°
Π‘ΠΊΠ°ΡΠ°ΡΡ
SCSS ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ FontAwesome
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠΈ Π‘Π°Π»Π»ΠΈΠ²Π°Π½Π°
ΠΡΠΎΡΡΡΠ΅ ΠΈ ΡΠΈΡΡΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ΄Π΅Π»Π°Π½Π½ΡΠ΅ Π½Π° CSS, ΠΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ· FontAwesome.
Π‘ΠΊΠ°ΡΠ°ΡΡ
8-Π±ΠΈΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΡΠ΅Π½ΠΈΡΠ΅ ΡΡΠΈ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΡΠ΅ Π²ΠΎΡΡΠΌΠΈΠ±ΠΈΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
Π‘ΠΊΠ°ΡΠ°ΡΡ
3Π ΠΊΠ½ΠΎΠΏΠΊΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
Π‘ΡΠ΅ΠΊΠ»ΡΠ½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
Π Π½Π°Π±ΠΎΡΠ΅ ΡΡΠ΅ΠΊΠ»ΡΠ½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ CSS-Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π΄Π»Ρ ΠΏΡΠΈΠ΄Π°Π½ΠΈΡ 3Π-Π²ΠΈΠ΄Π°.
Π‘ΠΊΠ°ΡΠ°ΡΡ
CSS3 Β«ΠΠΊΠ».Β»/Β«ΠΡΠΊΠ».Β» ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ
ΠΡΠΈΠΊΠΎΠ»ΡΠ½ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Π½ΡΠ΅ Π½Π° HTML ΠΈ CSS3. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ jQuery.
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° Π·Π°Π³ΡΡΠ·ΠΊΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠ° Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅ΠΉ ΠΊΠ°ΡΡΠΎΡΠΊΠΎΠΉ
ΠΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΠΊΠ°ΠΊ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ, Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΠΈΠ· ΠΊΠ°ΡΠΌΠ°ΡΠΊΠΎΠ². ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ ΡΠΊΡΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π΄ΠΎ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²ΡΠ±Π΅ΡΠ΅Ρ ΠΊΠ°ΡΡΠΎΡΠΊΡ.
Π‘ΠΊΠ°ΡΠ°ΡΡ
CSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
Π§ΠΈΡΡΡΠ΅ ΠΌΡΠ³ΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠΈ
ΠΡΡΠ³ΠΎΠ²ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΎΠΊΠ°Π½ΡΠΎΠ²ΠΊΠΎΠΉ ΠΎΠΊΡΡΠΆΠ½ΠΎΡΡΠΈ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠΎΡΠΈΡΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° ΠΎ ΡΡΠΊΠΎΠ΄Π΅Π»ΠΈΠΈ
ΠΠ½ΠΎΠΏΠΊΠΈ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΠΏΡΠΎΡΡΡΠΎΡΠ΅Π½Π½ΡΠΌΠΈ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ CSS.
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ ΠΌΠ΅Π½Ρ Π°Π΄ΠΌΠΈΠ½ΠΈΡΡΡΠ°ΡΠΎΡΠ° Π½Π° ΡΠ°ΠΉΡΠ΅
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠ°-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ (ΡΠ»Π°ΠΉΠ΄Π΅Ρ) Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠ° Π² Π²ΠΈΠ΄Π΅ ΠΏΠΎΠΊΠ΅ΡΠ½ΠΎΠΉ ΡΠΈΡΠΊΠΈ
ΠΠΎΠΆΠ΅Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π΅.
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠΎΡΡΡΠ΅ CSS ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
ΠΠ°Π±ΠΎΡ ΠΏΡΠΎΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΏΠΎΠ΄ ΡΠ΅Π±Ρ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ. ΠΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π»Π΅Π³ΠΊΠΎ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°Π½ Ρ Font-Awesome.
Π‘ΠΊΠ°ΡΠ°ΡΡ
Π‘ΠΎΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠΎΡΡΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠ»ΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°
ΠΠΎΠ»ΡΡΠ°Ρ ΠΌΠ°ΡΡΠΈΠ²Π½Π°Ρ ΡΠ²Π΅ΡΡΡΠ°ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΡΠ΅Π½ΠΈ.
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΡΡ ΠΈΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Π½Π° Css3
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ ΠΈ 3Π΄-ΡΠ΅Π½Ρ.
Π‘ΠΊΠ°ΡΠ°ΡΡ
3Π ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«Π‘ΠΊΠ°ΡΠ°ΡΡΒ» Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠΎΡΡΡΠ΅ ΠΈ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ ΠΏΡΡ-ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
Π‘ΠΊΠ°ΡΠ°ΡΡ
Π‘ΠΎΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
Π ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΡΠΎΡΡΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ CSS β Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ, ΡΠ΅Π½ΠΈ, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΡΠΎΠ²ΡΠ΅ ΡΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΡΡΠ³Π°Ρ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° ΡΠ°ΠΉΡ.
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Ρ Β«ΠΌΠ΅ΡΠ°Π»Π»ΠΈΡΠ΅ΡΠΊΠΈΠΌΒ» ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠΌ
Π‘ΠΊΠ°ΡΠ°ΡΡ
3Π Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠ°ΡΠΈΠ²ΡΠ΅ Β«ΠΌΡΠ³ΠΊΠΈΠ΅Β» ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΡΠ°ΠΉΡ
Π ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠΈΠΌΠ²ΠΎΠ»Ρ ΡΠ½ΠΈΠΊΠΎΠ΄Π°, Π½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ»ΠΈ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠΉ ΡΡΠΈΡΡ.
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΡΠΎΠ²ΡΠ΅ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΡΡΠ³Π»ΡΠ΅, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΡΡΠΈΠ΅ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΡΠ°ΠΉΡ.
Π‘ΠΊΠ°ΡΠ°ΡΡ
Π ΠΎΠΆΠ΄Π΅ΡΡΠ²Π΅Π½ΡΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΡΠ°ΠΉΡ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠ°ΡΠΈΠ²ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠΏΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Π² ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΡΡ Β»
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠ΅ΠΊΡΠ°ΡΠ½ΡΠ΅ ΠΏΠ»ΠΎΡΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΠΏΠ»ΠΎΡΠΊΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° Π»ΡΠ±ΡΠ΅ ΡΠ»ΡΡΠ°ΠΈ. ΠΠ΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ ΠΈ ΡΡΡΠ΅ΠΊΡΠΎΠ².
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠ°ΡΠΈΠ²ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
Π’Π΅ΠΌΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ-ΠΊΡΡΠΆΠΊΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ jQuery, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ.
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠ΅Π½Π΄ΠΎΠ²ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΡΠ°ΠΉΡ
ΠΠ΅Π· ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΈΠ»ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ, ΠΏΡΠΎΡΡΠΎ HTML&CSS ΠΊΠ½ΠΎΠΏΠΊΠΈ Π±ΡΠ΅Π½Π΄ΠΎΠ² Π½Π° Π²Π°Ρ ΡΠ°ΠΉΡ.
Π‘ΠΊΠ°ΡΠ°ΡΡ
3Π-ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΏΠ΅ΡΠ΅Π²ΠΎΡΠΎΡΠ°
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ CSS3.
Π‘ΠΊΠ°ΡΠ°ΡΡ
CSS3-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
3D CSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠ΄ΡΠ²Π΅ΡΠΈΠ²Π°ΡΡΠΈΠ΅ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΡΠ»ΠΈΡΠ½ΠΎ! Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ ΡΠΌΠ΅Π΅ΡΠ΅ Π΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠΎΠΉ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS, Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΡΠΎΡΠΎΠΏΠ°.
Π‘ΠΊΠ°ΡΠ°ΡΡ
CSS3 ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΊΡΡΡΡΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
CSS3 Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
CSS3 toggle-ΠΊΠ½ΠΎΠΏΠΊΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠ°ΡΠΈΠ²ΡΠ΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΡΠ΅ ΠΊΡΡΠ³Π»ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΡΠ°ΠΉΡ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΡΠΎΠ²ΡΠ΅ ΠΊΡΡΠ³Π»ΡΠ΅ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ½ΠΎΠΏΠΊΠΈ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ
Π‘ΠΊΠ°ΡΠ°ΡΡ
Π‘ΠΎΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ 3D-ΡΡΡΠ΅ΠΊΡΠΎΠΌ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ 3D-ΠΊΠ½ΠΎΠΏΠΎΠΊ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠ°ΡΠΈΠ²Π°Ρ ΡΠΎΠ·ΠΎΠ²Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ°ΠΊ ΡΠ°ΠΌΠΎΠΌΡ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°?
ΠΠ΄Π΅ΠΌ Π½Π° Sanwebe CSS3 button generator. Π§ΡΠΎ ΡΠ°ΠΌ? ΠΠ΅Π½Π΅ΡΠ°ΡΠΎΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π²ΠΎΡ ΡΠ°ΠΊΠΎΠΉ:
ΠΠΈΠ΄ΠΈΠΌ ΡΠ°ΠΌ ΠΌΠΈΠ»Π»ΠΈΠΎΠ½ Π½Π°ΡΡΡΠΎΠ΅ΠΊ ΠΈ ΠΏΡΠΎΠ±ΡΠ΅ΠΌ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ. ΠΠΎΡ ΡΡΠΎ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ Ρ ΠΌΠ΅Π½Ρ.
ΠΠΎΠ²ΠΎΡΠΈΡΡ ΡΡΡ Π½Π΅ΡΠ΅Π³ΠΎ, ΡΡΠΎ ΡΠ²Π½ΠΎ ΡΠ΅Π΄Π΅Π²Ρ. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΈ Π²Ρ.
ΠΠ°ΠΊ ΡΠ°ΠΌΠΎΠΌΡ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° (ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ)?
ΠΡΠ΅Π³Π΄Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ·Π°ΠΈΠΌΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΡΠΆΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ. Π‘ΡΠΎ ΡΠ°Π· ΡΠ°ΠΊ Π΄Π΅Π»Π°Π». ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π½ΠΈ ΠΎΠ΄Π½Π° HTML-ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° Π²ΡΡΠ΅ Π²Π°ΠΌ Π½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ ΠΈ Π²Ρ Π΄ΡΠΌΠ°Π΅ΡΠ΅ Β«ΠΏΠΎΠΉΠ΄Ρ ΡΠ½ΠΎΠ²Π° Π³ΡΠ³Π»ΠΈΡΡ Π² Π―Π½Π΄Π΅ΠΊΡΠ΅Β».
ΠΠ΄Π΅ΡΠ΅ Π²Ρ Π½Π° ΡΠ°ΠΉΡ Π―Π½Π΄Π΅ΠΊΡΠ°, Π³Π΄Π΅ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΈΠΊ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ yandex.ru Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ. ΠΠΎΡ ΡΠ°ΠΊ:
ΠΠ°Ρ ΠΎΡΠ΅Π½ΡΠ΅Ρ β ΡΡΠ° Π±ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½Π°Ρ ΠΆΠ΅Π»ΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠΎΠ²Π½ΠΎ ΡΠΎ, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ. ΠΠΎΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°Π΄ΠΏΠΈΡΡ Π½Π΅ ΡΠ°. ΠΠ° ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ Β«ΠΠ°Β», Π° Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ β Β«Π‘ΠΊΠ°ΡΠ°ΡΡΒ». ΠΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, ΠΎΡΠΊΡΡΠ²Π°Π΅ΠΌ ΠΈΠ½ΡΠΏΠ΅ΠΊΡΠΎΡ Π₯ΡΠΎΠΌΠ° (Π€12) β ΠΌΠ΅Π½ΡΠ΅ΠΌ Π² ΠΊΠΎΠ΄Π΅ Β«ΠΠ°Β» Π½Π° Β«Π‘ΠΊΠ°ΡΠ°ΡΡΒ».
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΡΠ»ΠΈΡΠ½ΠΎ! Π’ΠΎ ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ. Π’Π΅ΠΏΠ΅ΡΡ ΠΈΠ΄Π΅ΠΌ Π² Π€ΠΎΡΠΎΡΠΎΠΏ (ΠΈΠ»ΠΈ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°ΠΌΠΈ), Π²ΡΠ΄Π΅Π»ΡΠ΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΈ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΠΌ Π΅Π΅ ΠΏΠΎ ΠΊΡΠ°Ρ. Π ΠΌΠΎΠ΅ΠΉ Π²Π΅ΡΡΠΈΠΈ Π½Π° Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΎΠΌ ΡΠ·ΡΠΊΠ΅ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ Β«ΠΡΠΎΠΏΒ»:
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΡΠ»ΠΈΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ, ΠΊΠ°ΠΊ ΠΏΠΎ ΠΌΠ½Π΅! Π Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ.
ΠΡ Ρ ΠΎΡΠΎΡΠΎ, Π° ΡΡΠΎ Π½Π° ΡΡΠ΅Ρ HTML-CSS Π²Π΅ΡΡΠΈΠΈ ΡΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ? ΠΠ΄Π΅ΡΡ ΡΠΎΠΆΠ΅ Π½ΠΈΡΠ΅Π³ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎΠ³ΠΎ. ΠΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡβ¦ Π‘ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ CSS-ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΈΠ· ΠΈΠ½ΡΠΏΠ΅ΠΊΡΠΎΡΠ° Π₯ΡΠΎΠΌΠ°. ΠΠ½ΠΎΠΏΠΊΠ° Π½ΠΈΠΆΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½Π° ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS:
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ΅Π±Π΅ ΠΊΠ½ΠΎΠΏΠΊΡ Π½Π° ΡΠ°ΠΉΡ. ΠΡ Π° ΠΊΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ Π² html ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Ρ ΡΠΆΠ΅ ΡΠ°ΡΡΠΊΠ°Π·ΡΠ²Π°Π». Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.
Material Design Lite. Button
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² MDL.
ΠΠ½ΠΎΠΏΠΊΠΈ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ³ΠΎ html-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° button. ΠΠΎΠΆΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΠ΅ΠΊΡΡ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΠΎΡΡΡΠΏΠ½Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²ΠΈΠ΄ΠΎΠ² ΠΊΠ½ΠΎΠΏΠΊΠΈ: ΠΏΠ»ΠΎΡΠΊΠ°Ρ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ), ΠΏΠΎΠ΄Π½ΠΈΠΌΠ°ΡΡΠ°Ρ, FAB Π΄Π²ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°-Π·Π½Π°ΡΠΎΠΊ. ΠΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠΎΡΡΡΠΌΠΈ (ΡΠ²Π΅ΡΠ»ΠΎ-ΡΠ΅ΡΡΠ΅) ΠΈ ΡΠ²Π΅ΡΠ½ΡΠΌΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ Π±ΡΡΡ Π² Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ.
ΠΠ»Π°ΡΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ.
- mdl-button — ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ
- mdl-js-button — ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ
- mdl-button—raised — Π²ΡΠΏΡΠΊΠ»ΡΠΉ ΡΡΡΠ΅ΠΊΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ fab, mini-fab, icon
- mdl-button—fab — ΠΡΡΠ³Π»Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° FAB. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ fab, mini-fab, icon
- mdl-button—mini-fab — ΠΠ°Π»Π΅Π½ΡΠΊΠ°Ρ ΠΊΡΡΠ³Π»Π°Ρ FAB. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ fab, mini-fab, icon
- mdl-button—icon — ΠΡΡΠ³Π»Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°-Π·Π½Π°ΡΠΎΠΊ.
- mdl-button—colored — Π¦Π²Π΅ΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° (primary ΠΈΠ»ΠΈ accent color, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΠΏΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ). Π¦Π²Π΅ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ Π² material.min.css
- mdl-button—primary — Π¦Π²Π΅Ρ primary. Π¦Π²Π΅ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ Π² material.min.css
- mdl-button—accent — Π¦Π²Π΅Ρ accent. Π¦Π²Π΅ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ Π² material.min.css
- mdl-js-ripple-effect — ΡΡΡΠ΅ΠΊΡ ripple. ΠΠΎΠΆΠ½ΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ button ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ².
<button>ΠΠ½ΠΎΠΏΠΊΠ° ΡΡΠ°Π½Π΄Π°ΡΡΠ½Π°Ρ</button>
ΠΡΠΈΠΌΠ΅ΡΡ
FAB-ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ripple (ΠΏΡΠΎΡΡΠ°Ρ ΠΈ ΡΠ²Π΅ΡΠ½Π°Ρ)
add
add
ΠΠΈΠ½ΠΈ-FAB
add
add
ΠΡΠΏΡΠΊΠ»Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°
add
add
Π¦Π²Π΅ΡΠ½ΡΠ΅ Π²ΡΠΏΡΠΊΠ»ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ (ΡΡΠ°Π½Π΄Π°ΡΡ ΠΈ Π°ΠΊΡΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ)
add
add
ΠΠ»ΠΎΡΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ (Π‘ΡΠ°Π½Π΄Π°ΡΡ, ripple, disabled
add
add
add
Π ΡΠ°ΠΊΠΆΠ΅ ΡΠΎ ΡΠ²Π΅ΡΠ°ΠΌΠΈ Prmary ΠΈ Accent
add
add
ΠΠ½ΠΎΠΏΠΊΠ°-Π·Π½Π°ΡΠΎΠΊ (ΠΊΡΡΠ³Π»Π°Ρ) — ΠΎΠ±ΡΡΠ½Π°Ρ ΠΈ ΡΠ²Π΅ΡΠ½Π°Ρ
add
add
ΠΠ΅ΡΠ½ΡΡΡΡΡ Π½Π° ΠΎΠ±ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Material Design Lite
Π Π΅ΠΊΠ»Π°ΠΌΠ°
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π»Ρ ΡΠ°ΠΉΡΠΎΠ² | HTML ΠΈ CSS
Π‘Π΅ΡΠ³Π΅ΠΉ ΠΠΈΠ½ΠΊΠΈΠ½Π²Β ΡΡΠ±ΡΠΈΠΊΡ HTML ΠΈ CSS
16 ΠΈΡΠ»Ρ 2008
15
3.4 ΠΈΠ· 5
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π»Ρ ΡΠ°ΠΉΡΠΎΠ²
ΠΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΡΡΠ°Π»ΠΊΠΈΠ²Π°Π΅ΡΡΡΡ Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ ΠΏΠΎΠ΄ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°, Π° ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π½Π΅ ΡΠ΄ΠΎΠ±Π½ΠΎ, Π΄Π° ΠΈ Π½Π΅ ΠΏΡΠ°ΠΊΡΠΈΡΠ½ΠΎ.
ΠΠ΄Π΅ΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ 9 ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΡΡΠ°ΡΠ΅ΠΉ Π½Π° ΡΠ΅ΠΌΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΡΡΠ³Π»ΡΡ ΡΡΡΠ»ΠΎΠΊ-ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
ΠΠΈΠ½ΡΡ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π° Π² Π½Π°Π»ΠΈΡΠΈΠΈ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° span-ΠΎΠ² ΠΈ Π½Π°Π»ΠΈΡΠΈΠ΅ Π΄Π²ΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΎΠ½Π°. Π ΠΏΠ»ΡΡΠ°ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ½Π΅ΡΡΠΈ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡΡΡ ΡΠ°ΠΌΠΎΡΠΊΡ Π²ΠΎΠΊΡΡΠ³ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡΡΠΊΠΎΠΉ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π²ΡΡΠΎΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΠ»Π°Π΄ΠΈΠΌΠΈΡ Π’ΠΎΠΊΠΌΠ°ΠΊΠΎΠ²: Π Π°ΠΌΠΊΠΈ, ΡΠ΅Π½ΠΈ, ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΠ»Π°ΡΠΊΠΈ
Π ΠΌΠΈΠ½ΡΡΠ°ΠΌ ΠΏΠΎΠΆΠ°Π»ΡΠΉ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ½Π°Ρ ΡΠ΅Π»ΠΈΠ·Π°ΡΠΈΡ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±Π°. Π ΠΏΠ»ΡΡΠ°ΠΌ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΡΠΎ, ΡΡΠΎ Π·Π΄Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ PNG Ρ ΡΠΆΠ΅ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΡΠΌ Π±Π°Π³ΠΎΠΌ Π² IE. Π‘ΡΠ°ΡΡΡ Π½Π° ΡΡΡΡΠΊΠΎΠΌ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌΡΠΌΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ
ΠΠΈΠ½ΡΡ: ΡΠ΅Π³ button Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΡΠ΄ΠΎΠ±Π΅Π½ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ. ΠΠ»ΡΡ: ΡΡΡΠ΅ΠΊΡ Π½Π°ΠΆΠ°ΡΠΈΡ.
ΠΡΡΠ³Π»ΡΠ΅ ΡΠ³ΠΎΠ»ΠΊΠΈ, ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ
ΠΠΈΠ½ΡΡ: ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ΅Π³ΠΎΠ² i ΠΏΡΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ. ΠΠ»ΡΡ: ΠΠ»ΡΡ: Π²ΡΠ΅Π³ΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ» Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ, Π½Π΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡΠΈΡΡΠ°, Π±ΡΡΡΡΠΎΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΊΠΈΠ½Π°, Π½Π΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΎΠ½Π° Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌΠ»Π΅ΠΆΠΈΡ, ΠΏΡΠΈ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°Ρ Π±Π΅Π»Π°Ρ ΡΡΡΠ»ΠΊΠ° Π±ΡΠ΄Π΅Ρ Π½Π° Π½ΡΠΆΠ½ΠΎΠΌ ΡΠΎΠ½Π΅ (Π²Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΡΠ°Π½ΠΆΠ΅Π²ΠΎΠΌ). Π‘ΡΠ°ΡΡΡ Π½Π° ΡΡΡΡΠΊΠΎΠΌ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊΒ ΡΠ°ΠΉΡΠ°Β Ρ ΠΏΡΠΎΡΡΡΠΌ CSS ΠΈ HTML
ΠΠΈΠ½ΡΡ: ΠΏΡΠΎΡΡΠΎΡΠ° ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ. ΠΠ»ΡΡΡ: Π½Π΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ°, Π²ΡΠ΅Π³ΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ» Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ Π΅Π΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΈ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠ°Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ.
CSS ΠΎΠ²Π°Π»ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ°ΠΉΡΠ°
ΠΠΈΠ½ΡΡ: Π½Π°Π»ΠΈΡΠΈΠ΅ div`Π° ΠΏΡΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ, Π΄Π²Π° ΡΠ°ΠΉΠ»Π° ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ.
ΠΡΠΎΡΡΡΠ΅ ΠΊΡΡΠ³Π»ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ°ΠΉΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS (Wii Buttons)
ΠΠ»ΡΡs: Π²ΡΠ΅Π³ΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ» Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Π΅Π΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ, ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠ°Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅.
ΠΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ°ΠΉΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ Β«ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΡ Π΄Π²Π΅ΡΠ΅ΠΉΒ»
ΠΠΈΠ½ΡΡΡ: Π΄Π²Π° ΡΠ°ΠΉΠ»Π° ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΠ»ΡΡΡ: ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΠ°ΠΉΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
Π ΠΌΠΈΠ½ΡΡΠ°Ρ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π° ΡΠ°ΠΊ ΠΆΠ΅ Π½Π°Π»ΠΈΡΠΈΠ΅ Π΄Π²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ Π΄Π»Ρ ΡΠΎΠ½ΠΎΠ². ΠΠ»ΡΡ: ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠ°Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ.
ΠΠ²ΡΠΎΡ: Π‘Π΅ΡΠ³Π΅ΠΉ ΠΠΈΠ½ΠΊΠΈΠ½
ΠΠ°Π½ΠΈΠΌΠ°Π΅ΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΎΠΉ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠΎΠ², ΡΠΈΡΠΌΠ΅Π½Π½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ, Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΡΠ°ΠΉΡΠΎΠ². www.sergeyminkin.ru.
Π Π°ΡΡΠΊΠ°ΠΆΠΈΡΠ΅ Π΄ΡΡΠ·ΡΡΠΌ
- ΠΡΠ΅Π½ΠΈΡΠ΅ ΡΡΠ°ΡΡΡ:
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠ³Π»Π°ΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
Π CSS3 Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠ΄Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΡΠ³Π»Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° border-radius. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΡΡΠΎ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅.
ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρ Π²Π°Ρ Π΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ°Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°.
Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ div Π²ΠΈΠ΄ΠΈΠΌΡΠΌ, ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ Π΅Π³ΠΎ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π΅ΠΌΡ ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°.
.red_div {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: ΠΊΡΠ°ΡΠ½ΡΠΉ;
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π²ΡΡΠ΅ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ.
Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π³ΡΠ°Π½ΠΈΡΡ Π±Π»ΠΎΠΊΠ° Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌΠΈ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΡΠΈΠ»Ρ:
ΠΡΡΠ΅ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ°Π΄ΠΈΡΡ 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² Π²Π΅ΡΡ Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ, Π²Π΅ΡΡ Π½Π΅ΠΌ ΠΏΡΠ°Π²ΠΎΠΌ, Π½ΠΈΠΆΠ½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΌ ΠΏΡΠ°Π²ΠΎΠΌ ΡΠ³Π»Π°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π§Π΅ΠΌ Π²ΡΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π΄ΠΈΡΡΠ°, ΡΠ΅ΠΌ Π±ΠΎΠ»Π΅Π΅ ΡΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΊΡΠ°ΠΉ.
ΠΠΈΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ Π²ΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ border-radius
ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΈΡΠ°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ.
Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ΅ΡΡΡΠ΅Ρ ΠΊΡΠ°Π΅Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ°Π΄ΠΈΡΡ ΡΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ: 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π‘ Π΄Π²ΡΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ ΠΏΠ΅ΡΠ²ΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ Π²Π΅ΡΡ Π½Π΅ΠΌΡ Π»Π΅Π²ΠΎΠΌΡ ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΌΡ ΠΏΡΠ°Π²ΠΎΠΌΡ ΡΠ³Π»Ρ, Π° Π²ΡΠΎΡΠΎΠ΅ — ΠΊ Π²Π΅ΡΡ Π½Π΅ΠΌΡ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΌΡ Π»Π΅Π²ΠΎΠΌΡ ΡΠ³Π»Π°ΠΌ
ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ: 15px 15px 15px;
ΠΡΠΈ ΡΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡΡ ΠΏΠ΅ΡΠ²ΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ³Π»Π°, Π²ΡΠΎΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡΠ³Π»ΠΎΠ², Π° ΡΡΠ΅ΡΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΎ ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΌΡ ΠΏΡΠ°Π²ΠΎΠΌΡ ΡΠ³Π»Ρ.
ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ: 15px 15px 15px 15px;
ΠΡΡΠ΅ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ ΡΠ²Π½ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ.ΠΡΡΠ΅ΡΠΏΠΎΠΌΡΠ½ΡΡΠΎΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ΅ CSS, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π½ΠΎ Π΄Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ.
Π³ΡΠ°Π½ΠΈΡΠ°-Π²Π΅ΡΡ
-Π»Π΅Π²ΡΠΉ-ΡΠ°Π΄ΠΈΡΡ: 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°-Π²Π΅ΡΡ
-ΠΏΡΠ°Π²ΡΠΉ-ΡΠ°Π΄ΠΈΡΡ: 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°-Π½ΠΈΠΆΠ½ΠΈΠΉ-ΠΏΡΠ°Π²ΡΠΉ-ΡΠ°Π΄ΠΈΡΡ: 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π³ΡΠ°Π½ΠΈΡΠ°-Π½ΠΈΠΆΠ½ΠΈΠΉ-Π»Π΅Π²ΡΠΉ-ΡΠ°Π΄ΠΈΡΡ: 15 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΠΎΠΌ Π½Π°ΠΌΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΊΡΠ°Π΅Π². ΠΡ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ°Π·Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ΅Π±ΡΠ°, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅.
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΡ ΡΠ³Π»ΠΎΠ² ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ
border-radius ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈ Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².ΠΠΈΠΆΠ΅ ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΡ ΡΠ³Π»ΠΎΠ² ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅.
ΠΊΠ½ΠΎΠΏΠΊΠ° {
ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
ΠΠ½ΠΎΠΏΠΊΠ° Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
ΠΠΎΡ Π΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π³ΠΎΡΠΎΠ²ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ
ion-button: Ionic Framework API Docs
ΠΠ½ΠΎΠΏΠΊΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΡΠΎΡΠΌΠ°Ρ ΠΈΠ»ΠΈ Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅, Π³Π΄Π΅ ΡΡΠ΅Π±ΡΡΡΡΡ ΠΏΡΠΎΡΡΡΠ΅ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠ΅ΠΊΡΡ, Π·Π½Π°ΡΠΊΠΈ ΠΈΠ»ΠΈ ΠΈ ΡΠΎ, ΠΈ Π΄ΡΡΠ³ΠΎΠ΅.ΠΠ½ΠΎΠΏΠΊΠ°ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π°ΡΡΠΈΠ±ΡΡΠΎΠ², ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ.
ΠΡΠΎΡ Π°ΡΡΠΈΠ±ΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ²Π»ΡΡΡΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌΠΈ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ, Π½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΡΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ° ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±Π»ΠΎΠΊΠ° ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠ΅ΡΠ°Π»ΠΈ |
---|---|
Π±Π»ΠΎΠΊ | ΠΠ½ΠΎΠΏΠΊΠ° Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ Ρ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠ³Π»Π°ΠΌΠΈ. |
ΠΏΠΎΠ»Π½ΡΠΉ | ΠΠ½ΠΎΠΏΠΊΠ° Π²ΠΎ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ Ρ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΠΌΠΈ ΡΠ³Π»Π°ΠΌΠΈ ΠΈ Π±Π΅Π· ΡΠ°ΠΌΠΊΠΈ ΡΠ»Π΅Π²Π° ΠΈΠ»ΠΈ ΡΠΏΡΠ°Π²Π°. |
ΠΡΠΎΡ Π°ΡΡΠΈΠ±ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΈ Π³ΡΠ°Π½ΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠΌΠ΅ΡΡ ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠΎΠ½, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π²Π½ΡΡΡΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΠΈ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Ρ Π½Π΅Π΅ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ ΡΠΎΠ½.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠ΅ΡΠ°Π»ΠΈ |
---|---|
ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ | ΠΠ½ΠΎΠΏΠΊΠ° Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ, Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡΡΠΈΠΌ ΠΏΠ»ΠΎΡΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ. |
ΠΊΠΎΠ½ΡΡΡ | ΠΠ½ΠΎΠΏΠΊΠ° Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ ΠΈ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΡΠ°ΠΌΠΊΠΎΠΉ. |
ΡΠ΅Π»ΡΠ½ΡΠΉ | ΠΠ½ΠΎΠΏΠΊΠ° Ρ Π·Π°ΠΊΡΠ°ΡΠ΅Π½Π½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ. ΠΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ². |
ΠΡΠΎΡ Π°ΡΡΠΈΠ±ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΡΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ° ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ Π²ΡΡΠΎΡΡ ΠΈ ΠΎΡΡΡΡΠΏ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠ΅ΡΠ°Π»ΠΈ |
---|---|
ΠΌΠ°Π»ΡΠΉ | ΠΡΠ³ΠΎΠ²ΠΈΡΠ° Ρ ΠΌΠ΅Π½ΡΡΠ΅ΠΉ Π²ΡΡΠΎΡΠΎΠΉ ΠΈ Π½Π°Π±ΠΈΠ²ΠΊΠΎΠΉ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅. |
ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ | ΠΠ½ΠΎΠΏΠΊΠ° Ρ Π²ΡΡΠΎΡΠΎΠΉ ΠΈ ΠΎΡΡΡΡΠΏΠΎΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.ΠΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅. |
Π±ΠΎΠ»ΡΡΠΎΠΉ | ΠΡΠ³ΠΎΠ²ΠΈΡΠ° Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΠΎΠΉ ΠΈ Π½Π°Π±ΠΈΠ²ΠΊΠΎΠΉ. |
ΠΠ½ΠΎΠΏΠΊΠΈ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ: 5 ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΡ ΠΏΡΠ»Π΅Π½Π΅ΠΏΡΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡΠΌΠΈ ΠΈ ΠΊΡΠ°ΡΠΈΠ²ΡΠΌΠΈ
ΠΡΠ»ΠΈ Π²Π°ΡΠ° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ° — ΡΡΠΎ Π²Π°Ρ ΠΌΠ°Π³Π°Π·ΠΈΠ½, Π° Π²Π°ΡΠ° ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½Π°Ρ ΠΏΠΎΡΡΠ° — ΡΡΠΎ Π²ΠΈΡΡΠΈΠ½Π° Π²Π°ΡΠ΅Π³ΠΎ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°, ΡΠΎ Π²Π°ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ (CTA) — ΡΡΠΎ ΠΏΠΎΡΡΡΡΠ°ΡΡΠ°Ρ Π²ΠΈΡΡΠΈΠ½Π°, ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΡΠ°Ρ Π»ΡΠ΄Π΅ΠΉ. ΠΠ»ΠΈ ΡΡΠΎ-ΡΠΎ Π² ΡΡΠΎΠΌ ΡΠΎΠ΄Π΅. ΠΠΎΡ ΠΌΠ΅ΡΠ°ΡΠΎΡΠ°, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π·Π΄Π΅ΡΡ ΡΠ°Π·Π²Π°Π»ΠΈΠ»Π°ΡΡ.
ΠΠ·Π»ΠΈΡΠ½Π΅ Π³ΠΎΠ²ΠΎΡΠΈΡΡ, ΡΡΠΎ Π²Π°Ρ CTA — ΠΎΠ΄Π½Π° ΠΈΠ· ΡΠ°ΠΌΡΡ Π²Π°ΠΆΠ½ΡΡ ΡΠ°ΡΡΠ΅ΠΉ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΏΠΈΡΡΠΌΠ°.Π Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ ΡΡΡΠ΄Π½ΠΎ Π½Π°ΠΉΡΠΈ, ΡΠ»ΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠ»ΠΎΠΌΠ°ΡΡ, Π²Π°ΡΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠΈ ΡΠ±Π΅Π³ΡΡ. (ΠΠ΅Π³ΠΈ!)
ΠΠΎ Π½Π΅ Π²ΠΎΠ»Π½ΡΠΉΡΠ΅ΡΡ. ΠΡ Π·Π΄Π΅ΡΡ, ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²Π°ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° CTA — ΡΡΠΎ Π½Π΅ ΠΊΡΠΎΠ²ΠΎΠΆΠ°Π΄Π½ΡΠΉ ΠΊΡΠΎΠ»ΠΈΠΊ, ΠΎΡΠ³ΠΎΠ½ΡΡΡΠΈΠΉ Π²Π°ΡΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠΎΠ². Π ΡΡΠΎΠΌ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΈ Π±Π»ΠΎΠ³Π° ΠΌΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΌΠ΅ΡΠΎΠ΄Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΠΎΠ½ΠΈ Π½Π°Π΄Π΅ΠΆΠ½Ρ Π΄Π»Ρ Π²Π°ΡΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠΎΠ².
ΠΡΠΈΠ³ΠΎΡΠΎΠ²ΡΡΠ΅ΡΡ ΡΡΠΈΡΡΡΡ:
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΏΡΠ»Π΅Π½Π΅ΠΏΡΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°?
ΠΡΠ»Π΅Π½Π΅ΠΏΡΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
— ΡΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠ΄Π° Π²ΠΌΠ΅ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°Π΄Π΅ΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΈ GIF, PNG ΠΈ JPEG Π½Π° HTML ΠΈ CSS. ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ΄Π° ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π²ΠΎ Π²ΡΠ΅Ρ ΠΏΠΎΡΡΠΎΠ²ΡΡ ΠΊΠ»ΠΈΠ΅Π½ΡΠ°Ρ Π΄Π°ΠΆΠ΅ Ρ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΈΡ Β«ΠΏΡΠ»Π΅Π½Π΅ΠΏΡΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡΠΌΠΈΒ».
ΠΠΎΠ»Π΅Π΅ ΡΠΎΠ³ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈ ΡΡΠΈΠ»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΏΡΠΎΡΡΠΎ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π² HTML-ΡΠ°Π±Π»ΠΎΠ½. ΠΠ°ΠΌ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΡΠ°ΡΠΈΡΡ Π²ΡΠ΅ΠΌΡ Π½Π° ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² ΡΠ°ΠΊΠΎΠΌ ΡΡΠ΅Π΄ΡΡΠ²Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠ°ΠΊ Photoshop, Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ HTML.
ΠΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π― ΡΠΊΠ°ΠΆΡ ΡΡΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π· ΠΈ Π±ΠΎΠ»ΡΡΠ΅ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΠΊΠ°ΠΆΡ.ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½Π°Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠ»Π΅Π½Π΅ΠΏΡΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° — ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
* Π²Π·Π΄ΠΎΡ *
Π― Π·Π½Π°Ρ. ΠΠΎ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°ΡΡ, ΡΡΠΎ Π²Π°ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ Π² 100% ΠΏΠΎΡΡΠΎΠ²ΡΡ ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ². ΠΠΎΡΠΎΠΌΡ ΡΡΠΎ Π²ΡΠ΅ ΠΌΡ Π·Π½Π°Π΅ΠΌ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½Π΅ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ Π½Π°ΡΠΈ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΠ΅ ΠΏΠΈΡΡΠΌΠ° ΠΌΠΎΠ³ΡΡ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π² ΡΠ°Π·Π½ΡΡ ΠΏΠΎΡΡΠΎΠ²ΡΡ ΠΊΠ»ΠΈΠ΅Π½ΡΠ°Ρ , ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .
ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΡΠΎ, Π²Ρ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ. ΠΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ ΡΠ΅ΡΡΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Ρ ΠΈΠ·-Π·Π° Π±Π»ΠΎΠΊΠΈΡΠΎΠ²ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈ ΠΎΠ½ΠΈ Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½Ρ Π΄Π»Ρ Π²Π°ΡΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π° (ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎΠ± ΡΡΠΎΠΌ ΡΠ΅ΡΠ΅Π· ΡΠ΅ΠΊΡΠ½Π΄Ρ).
ΠΠ½ΠΎΠΏΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅ΡΡΠ΅Ρ ΡΡΡΠ΅ΠΊΡ, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Ρ.
ΠΡΠ»ΠΈ Π²Π°ΡΠΈ ΠΏΡΠΈΠ·ΡΠ²Ρ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡ Π² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ , Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠ°Ρ Π²Π΅ΡΠΎΡΡΠ½ΠΎΡΡΡ, ΡΡΠΎ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠΈ ΡΠΏΡΡΡΠΈΠ»ΠΈ Π²Π°ΡΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅. Π₯ΡΠΆΠ΅ ΡΠΎΠ³ΠΎ, ΠΎΠ½ΠΈ Π½Π΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΡΡ Ρ Π²Π°ΡΠΈΠΌΠΈ ΠΊΠ°ΠΌΠΏΠ°Π½ΠΈΡΠΌΠΈ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠ°ΠΊΠΆΠ΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ Π²Π°ΡΠ΅ΠΉ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ. ΠΡΠ»ΠΈ Π²Ρ ΡΠΊΡΡΠ²Π°Π΅ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΏΡΠΈΠ·ΡΠ²Π° ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π²Π½ΡΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π° ΠΌΠΎΠ³ΡΡ Π½Π΅ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ ΠΈΡ , ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π΅Ρ Π²Π°ΡΡ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΠΏΠΎΡΡΡ Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΉ Π΄Π»Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠΎΠ² Ρ ΠΎΡΠ»Π°Π±Π»Π΅Π½Π½ΡΠΌ Π·ΡΠ΅Π½ΠΈΠ΅ΠΌ.
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π·Π½Π°Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΡΡΠΎ ΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΠ΅ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Π²Π΅ΡΠ½ΠΎ. ΠΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΏΠΎΡΡΠΎΠ²ΠΎΠΌ ΠΊΠ»ΠΈΠ΅Π½ΡΠ΅ , Π³Π΄Π΅ Π²ΠΊΠ»ΡΡΠ΅Π½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π° . Π’Π°ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»ΠΈ ΠΎΠ½ΠΈ ΠΏΡΠ»Π΅Π½Π΅ΠΏΡΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡΠ΅? ΠΠ΅Ρ, ΠΎΠ½ΠΈ Π½Π΅. Π ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ±Π° ΡΡΠΈΡ Π²ΡΡΠ΅ΡΠΏΠΎΠΌΡΠ½ΡΡΡΡ ΡΠ»ΡΡΠ°Ρ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΡΠ»Π΅Π΄ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ³ΠΎ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ, Π²Ρ Π½Π΅ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊΠΎΠΉ ΠΏΡΠΎΡΠ΅Π½Ρ Π²Π°ΡΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠΎΠ² ΠΈΡΠΏΡΡΡΠ²Π°Π΅Ρ ΡΠ°ΠΊΠΎΠΉ Π½Π΅Π³Π°ΡΠΈΠ²Π½ΡΠΉ ΠΎΠΏΡΡ.
Π’Π°ΠΊ ΡΡΠΎ ΠΎΡΠΊΠ°ΠΆΠΈΡΠ΅ΡΡ ΠΎΡ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠ² ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ ΠΈ ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π²ΠΈΠ΄Π΅ΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²Π°ΡΠΈ ΠΏΡΠΈΠ·ΡΠ²Ρ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ.
ΠΠ°Π΄Π°ΡΠΊΠΈ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΊΠ½ΠΎΠΏΠΎΠΊ
ΠΠ½ΠΎΠΏΠΊΠΈ — ΡΡΠΎ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ ΠΊΠΎΠ΄. ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΊΡΠΎΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π΅Π»Π°ΡΡ Π²Π°ΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ΄ΠΎΠ±Π½ΡΠΌΠΈ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ.
Π€ΠΎΡΠΌΠ° ΠΏΡΠ³ΠΎΠ²ΠΈΡΡ
Π‘Π΄Π΅Π»Π°ΠΉΡΠ΅ Π²Π°ΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΡ ΠΎΠΆΠΈΠΌΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΡΠ΅ ΠΌΡ Π»ΡΠ±ΠΈΠΌ Π΄Π΅Π»Π°ΡΡ Π·Π°Π±Π°Π²Π½ΡΠ΅ ΠΈ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½ΠΎ ΡΠ°ΡΡΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π΄Π°Π»Π΅ΠΊΠΎ ΠΎΡΠΊΠ»ΠΎΠ½ΠΈΡΠ΅ΡΡ ΠΎΡ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΠΎΠ³ΠΎ, ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠΈ ΡΠΏΡΡΡΡΡ ΡΠ΅Π»Ρ ΠΈ Π½Π΅ ΠΏΡΠ΅Π΄ΠΏΡΠΈΠΌΡΡ Π½ΠΈΠΊΠ°ΠΊΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ.ΠΠ°, ΡΠ»ΠΎΠ²Π° ΠΌΠΎΠ³ΡΡ ΠΎΠ·Π½Π°ΡΠ°ΡΡ, ΡΡΠΎ ΡΡΠΎ-ΡΠΎ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΡΡ, Π½ΠΎ, ΠΊΠ°ΠΊ Π³ΠΎΠ²ΠΎΡΠΈΡΡΡ, Β«ΠΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΡΠΎΠΈΡ ΡΡΡΡΡΠΈ ΡΠ»ΠΎΠ²Β».
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΉ ΡΠΎΡΠΌΡ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ²Π»Π΅ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π»ΡΠ΄Π΅ΠΉ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΡΠΊΠ°Π½ΠΈΡΡΡΡ. Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΡΠΎΡΠΌΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ:
- ΠΠ°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΡΠ³Π»Ρ
- Π£Π³ΠΎΠ» ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΠΉ
- Π’Π°Π±Π»Π΅ΡΠΊΠ° Π² ΡΠΎΡΠΌΠ΅
- ΠΠ½ΠΎΠΏΠΊΠ° ΠΏΡΠΈΠ·ΡΠ°ΠΊΠ°
- ΠΠ½ΠΎΠΏΠΊΠ° Ρ Π·Π°ΡΠ΅ΠΌΠ½Π΅Π½ΠΈΠ΅ΠΌ
ΠΡΠΎ Π½Π΅ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ Π½Π΅Π»ΡΠ·Ρ Π΄Π΅Π»Π°ΡΡ Π·Π°Π±Π°Π²Π½ΡΠ΅ Π²Π΅ΡΠΈ. Magic Spoon Π΄ΠΎΠ±Π°Π²ΠΈΠ»Π° ΠΊ ΡΠ²ΠΎΠΈΠΌ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π°Π±Π°Π²Π½ΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ GIF-ΡΠ°ΠΉΠ»ΠΎΠ², ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ²Π»Π΅ΡΡ ΠΊ Π½ΠΈΠΌ Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ.
Π Π°Π·ΠΌΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π±ΠΎΠ»Π΅Π΅ 40% ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠΎΠ² ΠΎΡΠΊΡΡΠ²Π°ΡΡ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΠ΅ ΠΏΠΈΡΡΠΌΠ° Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ Π½Π°ΡΠΈΠΌ Π΅ΠΆΠ΅Π³ΠΎΠ΄Π½ΡΠΌ Π΄Π°Π½Π½ΡΠΌ ΠΎ ΡΡΠ½ΠΎΡΠ½ΠΎΠΉ Π΄ΠΎΠ»Π΅ ΠΏΠΎΡΡΠΎΠ²ΡΡ ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ², Π²Π°ΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ Π²Π°ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΡΠ»Π° ΡΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½Π° ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½Π° ΡΠ°Π±ΠΎΡΠ°Π»Π° Π½Π° Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .
ΠΡΠ»ΠΈ Π²Π°ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ°Π»Π°, Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Π±ΡΠ΄Π΅Ρ ΡΠ»ΠΎΠΆΠ½ΠΎ Π½Π°ΠΆΠΈΠΌΠ°ΡΡ. ΠΡΠ»ΠΈ ΠΎΠ½ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±ΠΎΠ»ΡΡΠΎΠΉ, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΠ΅ ΠΏΠΎΡ ΠΎΠΆ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, Π° Π±ΠΎΠ»ΡΡΠ΅ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΡΠ»ΠΎ ΠΏΡΠΎΠ²Π΅Π΄Π΅Π½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° ΡΠ΅Π½ΡΠΎΡΠ½ΡΡ ΡΠΊΡΠ°Π½Π°Ρ , Π½ΠΎ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΡ, ΠΏΠΎΡ ΠΎΠΆΠ΅, ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ²ΠΎΠ΄ΡΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΌΠΈΠ»Π»ΠΈΠΌΠ΅ΡΡΠΎΠ² Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ Π΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ.Π§ΡΠΎ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ. ΠΠΎ Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ ΠΏΡΠΈΠ»ΠΈΡΠ½ΠΎΠ΅ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΌΠΈΠ»Π»ΠΈΠΌΠ΅ΡΡΠ° ΠΊ ΠΏΠΈΠΊΡΠ΅Π»Ρ.
Π’Π΅ΠΏΠ΅ΡΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π»Ρ ΡΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ Π½Π°ΠΆΠ°ΡΠΈΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΎΡ 42 Π΄ΠΎ 72 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ (ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ 11-19 ΠΌΠΌ). ΠΡΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΡΠ΅Π΄Π½ΡΡ Π²ΡΡΠΎΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅, ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π·Π΄Π΅ΡΡ, Π² Litmus, ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠΏΠ°Π΄Π°ΡΡ Π² ΡΡΠΎΡ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½.
Π ΠΎΠ΄Π½ΠΎΠΌ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠΈ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ²Π΅Π»ΠΈΡΠΈΠ»ΠΎΡΡ Π΄ΠΎ 30 ΠΌΠΌ, ΡΠΎΡΠ½ΠΎΡΡΡ ΠΎΡ ΠΏΡΠΈΠΊΠΎΡΠ½ΠΎΠ²Π΅Π½ΠΈΡ ΠΊ ΡΠ΅Π»ΡΠΊΡ ΡΠΏΠ°Π»Π° Π΄ΠΎ 20 ΠΌΠΌ, ΡΠ°ΠΊ ΡΡΠΎ Π΅ΡΡΡ ΠΌΠΎΠΌΠ΅Π½Ρ, ΠΊΠΎΠ³Π΄Π° ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
ΠΠ΅ΡΡΠΎ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ
Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π²ΠΎΠΊΡΡΠ³ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π²ΡΠ΄Π΅Π»ΡΠ»ΠΈΡΡ. ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΡΠΈΠΌ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠ°ΠΌ Π½Π°ΠΆΠΈΠΌΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ.
ΠΡΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠ΅ ΠΏΠΈΡΡΠΌΠΎ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΡΡΡΠ»ΠΎΠΊ Π² ΠΎΠ΄Π½ΠΎΠΌ Π°Π±Π·Π°ΡΠ΅. ΠΡΠ»ΠΈ Π²Ρ ΡΠ³ΡΡΠΏΠΏΠΈΡΡΠ΅ΡΠ΅ ΡΠ²ΠΎΠΈ ΡΡΡΠ»ΠΊΠΈ Π±Π»ΠΈΠ·ΠΊΠΎ Π΄ΡΡΠ³ ΠΊ Π΄ΡΡΠ³Ρ, Π²Π°ΡΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠΈ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π±ΡΠ΄ΡΡ ΡΠΎΡΠ½ΠΎ Π½Π°ΠΆΠΈΠΌΠ°ΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π»ΠΈ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .
ΠΠΈΠ·ΡΠ°Π»ΡΠ½Π°Ρ ΠΎΠ±ΡΠ°ΡΠ½Π°Ρ ΡΠ²ΡΠ·Ρ
ΠΠ΅ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΏΠΎΡΡΠΎΠ²ΡΠΉ ΠΊΠ»ΠΈΠ΅Π½Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½ΠΎ ΡΠ°ΠΌ, Π³Π΄Π΅ ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ Π΄Π»Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΠ²ΡΠ·ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠ°ΠΌ Π·Π½Π°ΡΡ, ΡΡΠΎ ΠΈΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°Π½ΠΎ.
ΠΠ»Ρ Π½ΠΈΡ ΡΡΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ Π·Π½Π°ΠΊ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π½Π° ΡΡΠΎ-ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΆΠ°ΡΡ.
ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΡΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ°, ΡΠ°ΠΊ ΠΈ ΡΠ»ΠΎΠΆΠ½ΠΎΠ΅ ΠΏΠΎ Π²Π°ΡΠ΅ΠΌΡ ΠΆΠ΅Π»Π°Π½ΠΈΡ. (ΠΡ Π·Π½Π°Π΅ΠΌ, ΡΡΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° Π·Π΄ΠΎΡΠΎΠ²ΠΎ Π²ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ ΠΈΠ·ΠΎ Π²ΡΠ΅Ρ ΡΠΈΠ», ΠΏΠΎΡΡΠΎΠΌΡ Π½Π΅ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°ΠΉΡΠ΅ΡΡ — Π½ΠΎ Π·Π½Π°ΠΉΡΠ΅, ΠΊΠΎΠ³Π΄Π° ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ΅Π±Ρ.)
ΠΠ°ΡΠ° ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½Π°Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ°, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΡΡΠ΅ΠΊΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΠΎ ΠΌΡ ΡΠΎΠΆΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°Π»ΠΈ ΠΊΠΎΠ΅-ΡΡΠΎ Π½ΠΎΠ²Π΅Π½ΡΠΊΠΎΠ΅ ΠΈ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ²Π΅ΡΠ΅Π»ΠΈΠ»ΠΈΡΡ Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ ΡΠ½Π²Π°ΡΡΠΊΠΎΠΉ ΡΠ°ΡΡΡΠ»ΠΊΠΈ. ΠΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ»ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ Β«ΠΏΠΎΠ΄ΡΠΎΠ»ΠΊΠ½ΡΡΡΒ».β
Π’Π΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΠ΅ΡΠΆΠΈΡΠ΅ Π²Π°ΡΡ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΡΡ ΠΊΠΎΠΏΠΈΡ Ρ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΈΠ»ΠΈ ΡΡΠ»ΡΠΊ Π°ΠΊΡΡΠ°Π»ΡΠ½ΡΠΌ ΠΈ ΠΏΠΎ ΡΡΡΠ΅ΡΡΠ²Ρ. Π‘ΠΎΠΎΠ±ΡΠΈΡΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠ°ΠΌ, ΡΡΠΎ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΡΠ΄Π΅Π»Π°Π»ΠΈ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠ½Π΅Π΅ ΠΈ ΠΊΡΠ°ΡΠΊΠΎ.
ΠΠ±ΡΡΠ½ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΎΡ 1 Π΄ΠΎ 5 ΡΠ»ΠΎΠ².
ΠΡΠ° Π΄Π»ΠΈΠ½Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΊΠ°Π½ΠΈΡΠΎΠ²Π°ΡΡ Π²Π°ΡΡ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΠΏΠΎΡΡΡ. Π Π΅ΡΠ»ΠΈ Π΅ΡΡΡ ΡΡΠΎ ΡΠΊΠ°Π·Π°ΡΡ? ΠΠΊΠ»ΡΡΠΈΡΠ΅ Π΅Π³ΠΎ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π½Π°Π΄ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ. Π Π΅Π³ΡΠ»ΡΡΠ½ΠΎ ΡΠΎΡ ΡΠ°Π½ΡΡ ΠΏΡΠΈΠ·ΡΠ²Ρ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ ΠΎΡ 1 Π΄ΠΎ 5 ΡΠ»ΠΎΠ², ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΡΠΎΡ ΡΠ΅Π΄ΠΊΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π΅Π³ΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΠ΅, Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ Π·Π½Π°ΡΠΈΠΌΡΠΌ.
5 ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠ»Π΅Π½Π΅ΠΏΡΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ
Π‘ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌ 300 000 ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ, Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»ΠΈ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΠΎ Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²Π΅Π·Π΄Π΅?
Π§ΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΏΠΎΡΡΠΈ Π²Π΅Π·Π΄Π΅. Π Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π½ΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π²Π°ΡΠΈΡ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΠ΅ΠΉ. ΠΡΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΈΡ , ΡΡΠΎΠ±Ρ Π²ΡΡΡΠ½ΠΈΡΡ, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π²Π°ΡΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΈΠΊΠΎΠ².
1. ΠΠ½ΠΎΠΏΠΊΠ° ΡΡΠ»ΠΎΠ²Π½ΠΎΠ³ΠΎ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ ΠΠ°ΡΠΊΡ Π ΠΎΠ±Π±ΠΈΠ½ΡΡ Π·Π° ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΡΡΠ»ΠΎΠ²Π½ΡΠΌ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ.ΠΡΠΎ ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π·Π΄Π΅ΡΡ, Π² Litmus.
ΠΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΡΡΠ»ΠΊΠΈ, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ ΡΡΠΈΠ»Ρ Π΄Π»Ρ Π²ΡΠ΅Ρ , ΠΊΡΠΎΠΌΠ΅ Outlook. ΠΠ°ΡΠ΅ΠΌ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠ»ΠΎΠ²Π½ΡΠΉ ΠΊΠΎΠ΄ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΠΎΠ³ΠΎ Π΄Π»Ρ Outlook. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Outlook ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Outlook, Π½Π΅ Π²Π»ΠΈΡΡ Π½Π° Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² Π΄ΡΡΠ³ΠΈΡ ΠΏΠΎΡΡΠΎΠ²ΡΡ ΠΊΠ»ΠΈΠ΅Π½ΡΠ°Ρ .
ΠΠ°ΠΊ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΊΡΡΠ³Π»ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² Π±ΡΡΡΡΡΠ°ΠΏΠ΅ 4?
<
html
>
<
Π³Π»Π°Π²Π°
>
ΠΠ°ΠΊ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΊΡΡΠ³Π»ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
Π² Π±ΡΡΡΡΡΠ°ΠΏΠ΅ 4?
Π½Π°Π·Π²Π°Π½ΠΈΠ΅
>
<
ΠΌΠ΅ΡΠ°
ΠΊΠΎΠ΄ΠΈΡΠΎΠ²ΠΊΠ°
=
"utf-8"
9000
<
meta
name
=
"viewport"
content
=
"width = device-width, initial-scale = 1"
>
<
ΡΡΡΠ»ΠΊΠ°
rel
=
Β«ΡΠ°Π±Π»ΠΈΡΠ° ΡΡΠΈΠ»Π΅ΠΉΒ»
href
=
<
ΡΠΊΡΠΈΠΏΡ
src
0
ΡΡΠ΅Π½Π°ΡΠΈΠΉ
>
90 008
<
ΡΠΊΡΠΈΠΏΡ
src
=
ΡΠΊΡΠΈΠΏΡ
>
<
ΡΠΊΡΠΈΠΏΡ
8
ΡΠΊΡΠΈΠΏΡ
>
<
ΡΡΠΈΠ»Ρ
ΡΠΈΠΏ
=
"ΡΠ΅ΠΊΡΡ / css"
>
ΡΠ²Π΅Ρ: Π·Π΅Π»Π΅Π½ΡΠΉ;
}
.xyz {
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°: Π°Π²ΡΠΎ;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΠΏΠΎ ΡΠ΅Π½ΡΡΡ;
padding-top: 100px;
}
.btn-circle.btn-sm {
ΡΠΈΡΠΈΠ½Π°: 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΎΡΡΡΡΠΏ: 6px 0px;
border-radius: 15px;
font-size: 8px;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΠΏΠΎ ΡΠ΅Π½ΡΡΡ;
}
.btn-circle.btn-md {
ΡΠΈΡΠΈΠ½Π°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΎΡΡΡΡΠΏ: 7px 10px;
border-radius: 25px;
font-size: 10px;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΠΏΠΎ ΡΠ΅Π½ΡΡΡ;
}
.btn-circle.btn-xl {
ΡΠΈΡΠΈΠ½Π°: 70 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 70 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΎΡΡΡΡΠΏ: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ 16 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
border-radius: 35px;
font-size: 12px;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΠΏΠΎ ΡΠ΅Π½ΡΡΡ;
}
ΡΡΠΈΠ»Ρ
>
Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
>
ΠΊΠΎΡΠΏΡΡ <
ΠΊΠ»Π°ΡΡ
ΠΊΠΎΡΠΏΡΡ =
"xyz"
>
<
h2
> GeeksforGeeks
h2
>
ΠΡΡΠ³Π»ΡΠΉ> ΠΠ±ΡΡΠ½ΡΠΉ ΠΠ½ΠΎΠΏΠΊΠΈ
h5
>
<
ΠΊΠ½ΠΎΠΏΠΊΠ°
ΡΠΈΠΏ
=
"ΠΊΠ½ΠΎΠΏΠΊΠ°"
ΠΊΠ»Π°ΡΡ
=
"btn btn-primary btn-circle"
> Π‘ΠΈΠ½ΠΈΠΉ
ΠΊΠ½ΠΎΠΏΠΊΠ°
>
<
ΠΊΠ½ΠΎΠΏΠΊΠ°
ΡΠΈΠΏ
= 9000 8
Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β»
ΠΊΠ»Π°ΡΡ
=
Β«btn btn-secondary btn-circle btn-smΒ»
> ΡΠ΅ΡΡΠΉ
ΠΊΠ½ΠΎΠΏΠΊΠ°
>
<
ΠΊΠ½ΠΎΠΏΠΊΠ°
ΡΠΈΠΏ
=
Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β»
ΠΊΠ»Π°ΡΡ
=
Β«btn btn-success btn-circle btn-smΒ»
> ΠΠ΅Π»Π΅Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°
>
<
ΠΊΠ½ΠΎΠΏΠΊΠ°
ΡΠΈΠΏ
=
Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β»
ΠΊΠ»Π°ΡΡ
=
Β«btn btn-dangerous btn-circle btn-smΒ»
> ΠΡΠ°ΡΠ½Π°Ρ
ΠΊΠ½ΠΎΠΏΠΊΠ°
>
<
ΠΊΠ½ΠΎΠΏΠΊΠ°
ΡΠΈΠΏ
=
Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β»
ΠΊΠ»Π°ΡΡ
=
Β«btn btn-warning btn-circle btn-smΒ»
> ΠΠ΅Π»ΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°
>
<900 08
ΠΊΠ½ΠΎΠΏΠΊΠ°
ΡΠΈΠΏ
=
Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β»
ΠΊΠ»Π°ΡΡ
=
Β«btn btn-light btn-circle btn-smΒ»
> ΠΠ΅Π»Π°Ρ
ΠΊΠ½ΠΎΠΏΠΊΠ°
>
<
ΠΊΠ½ΠΎΠΏΠΊΠ°
ΡΠΈΠΏ
=
Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β»
ΠΊΠ»Π°ΡΡ
=
Β«btn btn-dark btn-circle btn-smΒ»
> Π§Π΅ΡΠ½ΡΠΉ
ΠΊΠ½ΠΎΠΏΠΊΠ°
>
<
h5
> ΠΠΎΠ»ΡΡΠΈΠ΅ ΠΊΡΡΠ³Π»ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
h5
>
<
ΠΊΠ½ΠΎΠΏΠΊΠ°
ΡΠΈΠΏ ΠΊΠ½ΠΎΠΏΠΊΠΈ
=
"
"
" class
=
"btn btn-primary btn-circle btn-xl"
> Π‘ΠΈΠ½ΠΈΠΉ
ΠΊΠ½ΠΎΠΏΠΊΠ°
>
<
ΠΊΠ½ΠΎΠΏΠΊΠ°
ΡΠΈΠΏ
= 90 008
Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β»
ΠΊΠ»Π°ΡΡ
=
Β«btn btn-secondary btn-circle btn-xlΒ»
> ΡΠ΅ΡΡΠΉ
ΠΊΠ½ΠΎΠΏΠΊΠ°
>
<
ΠΊΠ½ΠΎΠΏΠΊΠ°
ΡΠΈΠΏ
=
Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β»
ΠΊΠ»Π°ΡΡ
=
Β«btn btn-success btn-circle btn-xlΒ»
> ΠΠ΅Π»Π΅Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°
>
<
ΠΊΠ½ΠΎΠΏΠΊΠ°
ΡΠΈΠΏ
=
Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β»
ΠΊΠ»Π°ΡΡ
=
Β«btn btn-dangerous btn-circle btn-xlΒ»
> ΠΡΠ°ΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°
>
ΠΊΠ½ΠΎΠΏΠΊΠ°
ΡΠΈΠΏ
=
Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β»
ΠΊΠ»Π°ΡΡ
=
Β«btn btn-warning btn-circle btn-xlΒ»
> ΠΠ΅Π»ΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°
>
<9 0008
ΠΊΠ½ΠΎΠΏΠΊΠ°
ΡΠΈΠΏ
=
Β«ΠΊΠ½ΠΎΠΏΠΊΠ°Β»
ΠΊΠ»Π°ΡΡ
=
Β«btn btn-light btn-circle btn-xlΒ»
> ΠΠ΅Π»ΡΠΉ
ΠΊΠ½ΠΎΠΏΠΊΠ°
>
<
button
type
=
Β«buttonΒ»
class
=
Β«btn btn-dark btn-circle btn-xlΒ»
> Π§Π΅ΡΠ½ΡΠΉ
button
>
ΠΊΠΎΡΠΏΡΡ
>
html
>
Borders Β· Bootstrap
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΈΠ»ΠΈΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π³ΡΠ°Π½ΠΈΡ, ΡΡΠΎΠ±Ρ Π±ΡΡΡΡΠΎ Π·Π°Π΄Π°ΡΡ ΡΡΠΈΠ»Ρ Π³ΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠ°Π΄ΠΈΡΡΠ° Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΠ»ΠΈ Π»ΡΠ±ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠ°Π½ΠΈΡΠ°
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΈΠ»ΠΈΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π³ΡΠ°Π½ΠΈΡ, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ»ΠΈ ΡΠ΄Π°Π»ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠ±ΠΈΡΠ°ΠΉΡΠ΅ ΠΈΠ· Π²ΡΠ΅Ρ Π³ΡΠ°Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ.
ΠΡΠΈΡΠ°Π΄ΠΊΠ°
Π‘ΡΠ±ΡΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠ΅
Π¦Π²Π΅Ρ ΡΠ°ΠΌΠΊΠΈ
ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ²Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΈΠ»ΠΈΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ²Π΅ΡΠΎΠ² Π½Π°ΡΠ΅ΠΉ ΡΠ΅ΠΌΡ.
Π Π°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊΠ»Π°ΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΡΠΎΠ±Ρ Π»Π΅Π³ΠΊΠΎ ΡΠΊΡΡΠ³Π»ΠΈΡΡ Π΅Π³ΠΎ ΡΠ³Π»Ρ.
ΠΡΠΈΠΌΠ΅Ρ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ 75x75 ΠΡΠΈΠΌΠ΅Ρ ΡΠΊΡΡΠ³Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ 75x75 ΠΡΠΈΠΌΠ΅Ρ ΡΠΊΡΡΠ³Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠΏΡΠ°Π²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ 75x75 ΠΡΠΈΠΌΠ΅Ρ ΡΠΊΡΡΠ³Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π²Π½ΠΈΠ·Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ 75x75 ΠΡΠΈΠΌΠ΅Ρ ΡΠΊΡΡΠ³Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅Π²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ 75x75 ΠΠΎΠ»Π½ΠΎΡΡΡΡ ΠΊΡΡΠ³Π»ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ 75x75 ΠΠΊΡΡΠ³Π»Π΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π±Π»Π΅ΡΠΊΠΈ 150x75 ΠΡΠΈΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±Π΅Π· Π·Π°ΠΊΡΡΠ³Π»Π΅Π½ΠΈΠΉ (ΠΎΡΠΌΠ΅Π½ΡΠ΅Ρ ΠΎΠΊΡΡΠ³Π»Π΅Π½ΠΈΠ΅, ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Π½ΠΎΠ΅ Π³Π΄Π΅-Π»ΠΈΠ±ΠΎ Π΅ΡΠ΅) 75x75
Π Π°Π·ΠΌΠ΅ΡΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ . Round-lg
ΠΈΠ»ΠΈ . Round-sm
Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΠΈΠ»ΠΈ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π΄ΠΈΡΡΠ° Π³ΡΠ°Π½ΠΈΡΡ.
ΠΡΠΈΠΌΠ΅Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠ³ΠΎ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ 75x75 ΠΡΠΈΠΌΠ΅Ρ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ 75x75
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΡΠΎ ΡΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠ³Π»Π°ΠΌΠΈ Π² CSS
CSS ΠΠ½ΠΎΠΏΠΊΠΈ ΡΠΎ ΡΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠ³Π»Π°ΠΌΠΈ - ΠΌΡ Π²ΡΠ΅ Π»ΡΠ±ΠΈΠΌ ΠΈΡ , Π½ΠΎ ΠΊΠ°ΠΊ, ΡΠ΅ΡΡ Π²ΠΎΠ·ΡΠΌΠΈ, Π²Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML ΠΈ CSS?
Π₯ΠΎΡΠΎΡΠΈΠ΅ Π½ΠΎΠ²ΠΎΡΡΠΈ: ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ.
ΠΠ°Π΄Π΅ΡΡΡ, Π²Ρ Π½ΠΎΠ²ΠΈΡΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΎΡΡΠΎ Ρ ΠΎΡΠ΅Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΡΡΠ΅ΠΊΡ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½ΠΎ Π½Π΅ Π·Π½Π°Π΅Ρ, Ρ ΡΠ΅Π³ΠΎ Π½Π°ΡΠ°ΡΡ.
ΠΠΈΡΠ΅Π³ΠΎ ΡΡΡΠ°ΡΠ½ΠΎΠ³ΠΎ, Π½Π°ΠΌ Π²ΡΠ΅ΠΌ Π½ΡΠΆΠ½ΠΎ Ρ ΡΠ΅Π³ΠΎ-ΡΠΎ Π½Π°ΡΠΈΠ½Π°ΡΡ, ΠΈ Ρ Π·Π΄Π΅ΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ Π² ΡΡΠΎΠΌ.
ΠΠ½ΠΎΠΏΠΊΠ° CSS
ΠΠ΅Π»Π΅Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΈ Π±Π΅Π»ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ ΡΡΡΠ»ΠΊΠΈ.
ΠΠ½ΠΎΠΏΠΊΠ° CSS Ρ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠ³Π»Π°ΠΌΠΈ
Π‘ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠ³Π»Π°ΠΌΠΈ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ
, Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½Π° Π±ΡΠ»Π° Π΅ΡΠ΅ ΡΡΡΡ-ΡΡΡΡ, Π½Π΅ ΡΠ°ΠΊ Π»ΠΈ?
Π Π°Π·ΠΌΠ΅ΡΠΊΠ° HTML:
ΠΡΠ΅ Π΄Π΅Π»ΠΎ Π² ΠΊΠ»Π°ΡΡΠ΅ css, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΠΎΠΌ Π·Π΄Π΅ΡΡ ΠΊ ΡΡΡΠ»ΠΊΠ΅.
ΠΊΠ½ΠΎΠΏΠΊΠ° CSS Ρ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠ³Π»Π°ΠΌΠΈ
CSS:
ΠΠ°ΡΠ΅ΠΌ ΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΎΡΡΡΡΠΏ, ΡΠ²Π΅Ρ ΡΠΎΠ½Π°, Π±Π΅Π»ΡΠΉ ΡΠ΅ΠΊΡΡ ΡΡΡΠ»ΠΊΠΈ, ΡΠΈΡΠΈΠ½Ρ, ΡΠ΄Π°Π»ΡΠ΅ΠΌ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΡΡΡΠ»ΠΊΠΈ ΠΈ ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡ. ΠΠ°, ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π³ΡΠ°Π½ΠΈΡΡ Ρ ΡΠ°Π΄ΠΈΡΡΠΎΠΌ 8 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
.css-button-rounded {
ΡΠΎΠ½: # 2fc974;
ΡΠ²Π΅Ρ: #fff;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ;
ΠΎΡΡΡΡΠΏ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΡΠ΅Π½ΡΡ;
ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ;
ΡΠΈΡΠΈΠ½Π°: 350 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ: 8 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; // Π·Π΄Π΅ΡΡ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΡΠ³Π»Ρ
}
.css-button-Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΉ { background: # 2fc974; ΡΠ²Π΅Ρ: #fff; Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ; ΠΎΡΡΡΡΠΏ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΠΏΠΎ ΡΠ΅Π½ΡΡΡ; ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ; ΡΠΈΡΠΈΠ½Π°: 350 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ: 8 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; // Π·Π΄Π΅ΡΡ ΡΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΡΠ³Π»Ρ } |
ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅ ΠΏΡΠ΅ΡΠΈΠΊΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° CSS3:
ΠΡΠ»ΠΈ ΡΡΠΎ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ»Π°, Π΄Π°ΠΉΡΠ΅ ΠΌΠ½Π΅ Π·Π½Π°ΡΡ, ΠΈ Ρ Π΄ΠΎΠ±Π°Π²Π»Ρ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ ΠΎ ΠΏΡΠ΅ΡΠΈΠΊΡΠ°Ρ
ΠΏΠΎΡΡΠ°Π²ΡΠΈΠΊΠΎΠ² Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
.css-button-rounded {
-webkit-border-radius: 8 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
-moz-border-radius: 8 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
-ms-border-radius: 8 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
-o-border-radius: 8 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
.css-button-Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΉ { -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } |
Π, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, ΡΡΡΠ΅ΠΊΡ Π·Π°Π²ΠΈΡΠ°Π½ΠΈΡ:
.css-button-rounded: hover {
ΡΠΎΠ½: # EC2951;
}
.css-button-roundround: hover { background: # EC2951; } |
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² CSS
Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΡΡΠ³Π»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ, ΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ ΡΡΠΎΠΊΠ° Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ²ΠΎΠΈ HTML-ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΡ ΠΎΠΆΠΈΠΌΠΈ Π½Π° ΠΊΡΡΠ³.
Π¨Π°Π³ 1. ΠΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ Π² HTML
ΠΠ΅ΡΠ²ΡΠΉ ΡΠ°Π³ Π²ΡΠ΅Π³Π΄Π° ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ ΠΏΡΡΠΌΠΎΠΉ. ΠΡΠ°ΠΊ, ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΡΡΡΠΊΡΡΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML ΠΈ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΠΌ Π² Π½Π΅Π΅ ΠΊΠ»Π°ΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΆΠ΅ ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π΅Π΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
<ΠΊΠ½ΠΎΠΏΠΊΠ°> ΠΠ!
Π¨Π°Π³ 2. ΠΡΠ΅Π²ΡΠ°ΡΠΈΡΠ΅ Π΅Π³ΠΎ Π² ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ
Π§ΡΠΎΠ±Ρ Π½Π°ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΡΠ»Π° ΠΊΡΡΠ³ΠΎΠΌ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅Π»Π° ΠΊΠ°ΠΊ ΠΊΠ²Π°Π΄ΡΠ°Ρ. Π― ΠΈΠΌΠ΅Ρ Π² Π²ΠΈΠ΄Ρ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° ΠΈΠΌΠ΅Π»ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ .Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΠΌ 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
.redondo { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ; ΡΠΈΡΠΈΠ½Π°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π²ΡΡΠΎΡΠ°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; }
Π¨Π°Π³ 3. ΠΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ 50% Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ ΡΠΎΠ±ΠΈΡΠ°Π΅ΠΌΡΡ ΡΠ΄Π΅Π»Π°ΡΡ Π½Π°Ρ ΠΊΠ²Π°Π΄ΡΠ°Ρ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌ. Π‘ ΡΠ°Π΄ΠΈΡΡΠΎΠΌ ΠΊΡΠ°Ρ 50% ΠΌΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΊΡΡΠ³Π»ΠΎΠΉ.
.redondo { Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ; ΡΠΈΡΠΈΠ½Π°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π²ΡΡΠΎΡΠ°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ: 50%; }
ΠΠΎΡΠ΅ΠΌΡ ΡΠ°Π΄ΠΈΡΡ ΠΊΡΠΎΠΌΠΊΠΈ 50%?
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS βborder-radiusβ Π΄Π°Π΅Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠ³Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ .ΠΡΠ»ΠΈ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Β«50%Β», ΠΌΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ, ΡΡΠΎ ΡΠ°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 50% ΡΠΈΡΠΈΠ½Ρ / Π²ΡΡΠΎΡΡ Π½Π°ΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΠΈΠΌ ΠΆΠ΅, Π΅ΡΠ»ΠΈ ΠΌΡ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠΌ Β«50%Β» ΠΊΠ°ΠΊ Β«25 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉΒ». ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ 50%, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡΠΈΠΌΠ΅Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ "border-radius" ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ :
ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ Π²Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΠ΅ ΡΠ°Π΄ΠΈΡΡ 50% ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ³Π»Π°ΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΊΠΎΠ½Π΅ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΊΠ²Π°Π΄ΡΠ°Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΊΡΡΠ³ΠΎΠΌ.
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ: ΠΊΡΡΠ³Π»Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°
ΠΠΎΠ½Π΅ΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ - ΠΊΡΡΠ³Π»Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅:
Π₯ΠΎΡΠΎΡΠΎ!
ΠΡΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅ΡΠ° ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.Π‘ΠΎΠΎΠ±ΡΠΈΡΠ΅ Π½Π°ΠΌ, Π΅ΡΠ»ΠΈ Ρ Π²Π°Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΈΠ»ΠΈ Π²ΠΎΠΏΡΠΎΡΡ. ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ Π±ΠΎΠ»ΡΡΠ΅ΠΌΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ.
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°Ρ ΡΠ°ΠΊΠΆΠ΅ Π·Π°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅Ρβ¦
ΠΠΎΠ΄ΠΏΠΈΡΠΈΡΠ΅ΡΡ Π½Π° Π½Π°ΡΡ ΡΠ°ΡΡΡΠ»ΠΊΡ
.