css код для кнопки

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² html css? ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ для сайта с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ

ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ πŸ˜‰

Π˜Ρ‚Π°ΠΊ ΠΈΠ· этой ΡΡ‚Π°Ρ‚ΡŒΠΈ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅:

Π’Π°ΠΊΠΆΠ΅ Π² ΠΊΠΎΠ½Ρ†Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ вас ΠΆΠ΄Π΅Ρ‚ нСбольшой бонус, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ пригодится ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΡΠ°ΠΉΡ‚ΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŽ.

Но Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎ порядку.

Для Ρ‡Π΅Π³ΠΎ Π½ΡƒΠΆΠ½Ρ‹ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° сайтС?

ΠžΡ‚Π²Π΅Ρ‚ Π½Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ΡΡ сам собой: β€œΠ”Π»Ρ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡ… Π½Π°ΠΆΠΈΠΌΠ°Π»ΠΈ!”. И, Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‰Π°ΡΡΡ симпатичная ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС внимания Ρ‡Π΅ΠΌ тусклая ΠΈ унылая ссылка. Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, Ссли вся страница Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π° разномастными ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅, ΠΏΠ΅Ρ€Π΅Π»ΠΈΠ²Π°ΡΡΡŒ ΠΈ моргая, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ внимания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, ΠΎΠ½, скорСС всСго, Π½Π΅ поняв, Ρ‡Ρ‚ΠΎ ΠΎΡ‚ Π½Π΅Π³ΠΎ трСбуСтся, Π½Π΅ Π½Π°ΠΆΠΌΠ΅Ρ‚ Π½ΠΈ Π½Π° ΠΎΠ΄Π½Ρƒ ΠΈ просто Π·Π°ΠΊΡ€ΠΎΠ΅Ρ‚ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π°Π΄ΠΎ β€œΡΠΊΠΎΠ½ΠΎΠΌΠ½ΠΎβ€, Π² ΠΈΠ΄Π΅Π°Π»Π΅ Π½Π΅ большС 1-2 Π² Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ области экрана. ΠŸΡ€ΠΈ этом ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ максимально понятно, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚, Ссли ΠΎΠ½ Π½Π°ΠΆΠΌΠ΅Ρ‚ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ.

КакиС Π±Ρ‹Π²Π°ΡŽΡ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ?

Π’ ΠΌΠΎΠ΅ΠΌ прСдставлСнии ΠΊΠ½ΠΎΠΏΠΊΠΈ Π±Ρ‹Π²Π°ΡŽ Π΄Π²ΡƒΡ… Ρ‚ΠΈΠΏΠΎΠ², для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ… я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ HTML-Ρ‚Π΅Π³ΠΈ:

Но Π·Π°Ρ‡Π΅ΠΌ это Π½ΡƒΠΆΠ½ΠΎ. ВсС Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ ΠΈ понятнСС.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π² HTML?

Π’Π΅Π³ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для создания ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΎΠΈΡΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ дСйствия, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠ° Ρ„ΠΎΡ€ΠΌΡ‹, очистка Ρ„ΠΎΡ€ΠΌΡ‹, ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ модального ΠΎΠΊΠ½Π°, Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° изобраТСния ΠΈ Ρ‚.Π΄.

ΠžΡΠ½ΠΎΠ²Π½Ρ‹ΠΌΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΠ²Π»ΡΡŽΡ‚ΡΡ:

type: button | submit | reset

НСсмотря Π½Π° слухи, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ходят Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅, ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π³ Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π³ΠΎΠ²

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Бтилизация старого Π΄ΠΎΠ±Ρ€ΠΎΠ³ΠΎ элСмСнта button

Кнопка β€” это ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Ρ‚Π΅Ρ… элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‡Π°Ρ‰Π΅ всСго ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π½Π° Π²Π΅Π±-страницах. Π’Π΅Π³ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½Ρ‘Π½ для запуска Π½Π΅ΠΊΠΎΠ΅Π³ΠΎ процСсса Π²Ρ€ΠΎΠ΄Π΅ Π²Ρ‹Π²ΠΎΠ΄Π° Π΄Π°Π½Π½Ρ‹Ρ…, открытия модального ΠΎΠΊΠ½Π°, ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Π’ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π΅, ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΡ‹ ΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠ΅ΠΌ, Ρ€Π΅Ρ‡ΡŒ ΠΏΠΎΠΉΠ΄Ρ‘Ρ‚ ΠΎ тонкостях стилизации элСмСнта button ΠΈ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΎΡ„ΠΎΡ€ΠΌΠ»ΡΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ с ΡƒΡ‡Ρ‘Ρ‚ΠΎΠΌ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ Π±Ρ‹ Π² Π»ΡŽΠ±Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ρ‚ΡƒΡ‚ Π±ΡƒΠ΄Π΅Ρ‚ рассмотрСно Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… стилСй ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠŸΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΌΡ‹ здСсь ΠΈ ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… слоТностях, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡŽΡ‚ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

Π‘Ρ‚ΠΈΠ»ΠΈ, примСняСмыС ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

ΠœΠΎΠΆΠ΅Ρ‚, Ρ€Π°Π·Π³ΠΎΠ²ΠΎΡ€ ΠΎ «стандартных стилях» покаТСтся ΠΊΠΎΠΌΡƒ-Ρ‚ΠΎ обсуТдСниСм ΠΊΠ°ΠΊΠΈΡ…-Ρ‚ΠΎ элСмСнтарных Π²Π΅Ρ‰Π΅ΠΉ, Π½ΠΎ, Π½Π° самом Π΄Π΅Π»Π΅, ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎΠ± этом довольно интСрСсно. Π’ΠΎΡ‚ стандартная Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй для ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΠ· ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π°Π³Π΅Π½Ρ‚Π° Google Chrome.

А Π²ΠΎΡ‚ ΠΊΠ°ΠΊ выглядит стандартная ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΏΡ€ΠΈ Π²Ρ‹Π²ΠΎΠ΄Π΅ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ стили ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π½Π΅ мСнялись.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

ΠŸΡ€ΠΎΡΡ‚Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Ρ‹ стандартныС стили

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

Бвойство appearance этих ΠΊΠ½ΠΎΠΏΠΎΠΊ установлСно Π² none

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

Кнопка послС сброса свойств

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ сбросили стандартныС стили ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΡ€ΠΈΡˆΠ»ΠΎ врСмя Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ дальшС. А ΠΈΠΌΠ΅Π½Π½ΠΎ, я Ρ…ΠΎΡ‡Ρƒ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΎΡΠ½ΠΎΠ²Ρ‹Π²Π°ΡΡΡŒ трСбованиях, ΠΏΡ€Π΅Π΄ΡŠΡΠ²Π»ΡΠ΅ΠΌΡ‹Ρ… ΠΊ ΠΈΡ… Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ.

Бтилизация ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ

Начнём с Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠ² ΠΎ стилизации ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… выводится лишь тСкст. На ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ рисункС прСдставлСна «анатомия» ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

Π¦Π²Π΅Ρ‚ тСкста (Text Color), Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° (Font Size), Ρ„ΠΎΠ½ (Background), скруглСниС ΡƒΠ³Π»ΠΎΠ² (Roundness), Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ отступ (Padding)

ИмСя Π²Ρ‹ΡˆΠ΅ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½Π½Ρ‹ΠΉ CSS-ΠΊΠΎΠ΄, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ, ΠΏΠΎΡ…ΠΎΠΆΡƒΡŽ Π½Π° Ρ‚Ρƒ, которая ΠΏΠΎΠΊΠ°Π·Π°Π½Π° Π½Π° ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ рисункС. ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π·Π°Π΄Π°Π½, Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ·Π°Π±ΠΎΡ‚ΠΈΡ‚ΡŒΡΡ ΠΎ внСшнСм Π²ΠΈΠ΄Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… состояниях.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

ΠžΠ±Ρ‹Ρ‡Π½ΠΎΠ΅ состояниС ΠΊΠ½ΠΎΠΏΠΊΠΈ (Normal), ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ фокуса (Focus), Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ указатСля ΠΌΡ‹ΡˆΠΈ (Hover), ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ (Disabled)

▍Бтили, примСняСмыС ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ… ΠΌΡ‹ΡˆΠΈ ΠΈ ΠΏΡ€ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠΈ ΠΈΠΌΠΈ фокуса

Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Π½Π°Π²Π΅Π΄Ρ‘Π½ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ, Π²Π°ΠΆΠ½ΠΎ ΠΎΡΠ½Π°ΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ стилСм, рассчитанным Π½Π° это событиС. Π’ΠΎ ΠΆΠ΅ самоС касаСтся ΠΈ измСнСния внСшнСго Π²ΠΈΠ΄Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠΈ Π΅ΠΉ фокуса Π² ситуации, ΠΊΠΎΠ³Π΄Π° со страницСй Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ, ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‰ΠΈΠΉ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρƒ.

Π­Ρ‚ΠΎΡ‚ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΆΠ΅Π½ порядок добавлСния стилСй, примСняСмых ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Ρ‘ ΠΌΡ‹ΡˆΠΈ ( hover ) ΠΈ ΠΏΡ€ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠΈ Π΅ΠΉ фокуса ( focus ).

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

Π₯ΠΎΡ€ΠΎΡˆΠΎ, Ссли сначала ΠΈΠ΄Ρ‘Ρ‚ ΡΡ‚ΠΈΠ»ΡŒ hover, Π° ΠΏΠΎΡ‚ΠΎΠΌ β€” ΡΡ‚ΠΈΠ»ΡŒ focus

Π’ΠΎΡ‚ ΠΊΠ°ΠΊ выглядит ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ порядок описания стилСй:

β–ΠœΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Π°Ρ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ

Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ…ΠΎΡ€ΠΎΡˆΠΎ выглядСла, ΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ. Π’Π°ΠΆΠ½ΠΎ Π·Π°Ρ€Π°Π½Π΅Π΅ ΠΎΠ± этом ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΈ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π΄Π»ΠΈΠ½Π½Ρ‹Π΅ ΠΈ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠ΅ надписи, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ…. Благодаря свойству min-width ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π’ΠΎΡ‚ моя ΡΡ‚Π°Ρ‚ΡŒΡ, Π³Π΄Π΅ Π² подробностях обсуТдаСтся это ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ свойства.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

Π‘Ρ‚ΠΎΠΈΡ‚ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ свойство ΠΊΠ½ΠΎΠΏΠΎΠΊ min-width

▍ВнутрСнниС отступы

ΠŸΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ идСя, Π² соотвСтствии с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ Π½Π΅ Π½Π°Π·Π½Π°Ρ‡Π°ΡŽΡ‚ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы. Π’Π΅Π΄ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, Π° Π·Π½Π°Ρ‡ΠΈΡ‚ β€” ΠΌΠ΅ΠΆΠ΄Ρƒ краями ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ надписями, содСрТащимися Π½Π° Π½ΠΈΡ…, Π±ΡƒΠ΄Π΅Ρ‚ достаточно мСста. Π’Π°ΠΊ? НСт, Π½Π΅ Ρ‚Π°ΠΊ. РСализация этой ΠΈΠ΄Π΅ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π½Π΅Π³Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ послСдствия Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° надпись Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ мСняСтся.

ВзглянСм Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ рисунок.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½ΠΎ Π½Π°Π·Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы

▍БСмСйство ΡˆΡ€ΠΈΡ„Ρ‚Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ для надписСй, располоТСнных Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ…

▍Бтилизация ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Ρ‘Π½Π½Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ

Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π°, ΠΊ Π½Π΅ΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ disabled ΠΈ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ срСдствами CSS.

Π’ΠΎΡ‚ HTML-ΠΊΠΎΠ΄, ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Ρ‘Π½Π½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ:

Π’ΠΎΡ‚ CSS-ΠΊΠΎΠ΄ стилизации Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ:

Когда ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π°, ΠΎΠ½Π° Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ фокус с ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ ΠΈ удаляСтся ΠΈΠ· Π΄Π΅Ρ€Π΅Π²Π° доступности элСмСнтов страницы.

β–Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ указатСля ΠΌΡ‹ΡˆΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π΅Π³ΠΎ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ

Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹ΠΉ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ, Π½Π°Π²Π΅Π΄Ρ‘Π½Π½Ρ‹ΠΉ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ, выглядит ΠΊΠ°ΠΊ стрСлка. МнС нравится этот ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° StackOverflow: «Кнопки β€” это Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ элСмСнт управлСния Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ. Π­Ρ‚ΠΎ β€” срСда, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ Π² Π²ΠΈΠ΄Π΅ Ρ€ΡƒΠΊΠΈ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ использовался Π΄ΠΎ наступлСния эры ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°. Когда Π½Π° Π²Π΅Π±-страницах стали ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ‚ΠΎΡ‚ ΠΆΠ΅ самый элСмСнт управлСния, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ просто ΠΏΡ‹Ρ‚Π°Π»ΠΈΡΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ½ΠΎΠΏΠΊΠΈ выглядСли Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π² Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… прилоТСниях».

Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ указатСля, Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ стандартный курсор-стрСлку Π½Π° курсор Π² Π²ΠΈΠ΄Π΅ Ρ€ΡƒΠΊΠΈ.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹ΠΉ курсор-стрСлка ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½Π½Ρ‹ΠΉ курсор Π² Π²ΠΈΠ΄Π΅ Ρ€ΡƒΠΊΠΈ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ обсудили Π±Π°Π·ΠΎΠ²Ρ‹Π΅ вопросы стилизации ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘ΠΌ ΠΏΠΎΠ»Π½Ρ‹ΠΉ CSS-ΠΊΠΎΠ΄, Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‰ΠΈΠΉ Π² сСбя всё Ρ‚ΠΎ, Ρ‡Π΅Π³ΠΎ ΠΌΡ‹ ΠΊΠΎΡΠ½ΡƒΠ»ΠΈΡΡŒ Π²Ρ‹ΡˆΠ΅:

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Ρ€Π°Π·Π΄Π΅Π»Π°Ρ… ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Ρ€Π°Π·Π½Ρ‹Ρ… стилях ΠΈ Ρ‚ΠΈΠΏΠ°Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² своих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ….

Кнопки со Π·Π½Π°Ρ‡ΠΊΠΎΠΌ

Иногда Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π±Ρ‹Π» Π±Ρ‹ Π½Π΅ΠΊΠΈΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ, ΠΈΠ»ΠΈ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΡ€ΠΎΠΈΠ½Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΎ Ρ€ΠΎΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π’Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ½ΠΎΠΏΠΊΠΈ со Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ Π±Ρ‹Π»ΠΈ Π±Ρ‹ доступны ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ с ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌΠΈ возмоТностями.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΊΠ½ΠΎΠΏΠΎΠΊ со Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ я воспользовался стилСм vertical-align: middle для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ ΠΈ содСрТимоС ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ.

Π’ΠΎΡ‚ HTML-ΠΊΠΎΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΈΠ΄Ρ‘Ρ‚ Ρ€Π΅Ρ‡ΡŒ:

ΠœΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ достаточно просто ΡΠΊΡ€Ρ‹Ρ‚ΡŒ элСмСнт span ΠΈ Π΄Π΅Π»ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ сдСлано:

Π₯отя ΠΏΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅ тСкст ΠΏΡ€ΠΎΠΏΠ°Π΄Π°Π΅Ρ‚, Π° Π·Π½Π°Ρ‡ΠΎΠΊ остаётся, это ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠ»ΠΎΡ…ΠΎ Π² ΠΏΠ»Π°Π½Π΅ доступности ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. ΠšΠ½ΠΎΠΏΠΊΡƒ ΡƒΠΆΠ΅ Β«Π½Π΅ видят» инструмСнты для чтСния с экрана. НапримСр, VoiceOver Π² macOS сообщаСт ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ такая ΠΊΠ½ΠΎΠΏΠΊΠ° β€” это просто Β«ButtonΒ», Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ подробностСй ΠΎ Π½Π΅ΠΉ. Π£ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Π΅ΡΡ‚ΡŒ нСсколько Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ.

β–Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ SVG-Π·Π½Π°Ρ‡ΠΊΠΎΠ²

▍Настройка Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΊΠ½ΠΎΠΏΠΊΠΈ со Π·Π½Π°Ρ‡ΠΊΠΎΠΌ

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

Кнопка, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π·Π°Π΄Π°Π½ΠΎ CSS-свойство min-width, ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ это свойство Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ

β–Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ скрытиС тСкста

▍Установка Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π° Π² 0

β–Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° aria-label

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ большС ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ… со Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ β€” взглянитС Π½Π° этот ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π».

Кнопки, содСрТащиС нСсколько строк тСкста

Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ½ΠΎΠΏΠΊΠ° содСрТала Π±Ρ‹ Π΄Π²Π΅ строки тСкста. НиТС ΠΏΠΎΠΊΠ°Π·Π°Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

Кнопка, содСрТащая Π΄Π²Π΅ строки тСкста

Π’ΡƒΡ‚ ΠΏΠΎΠΊΠ°Π·Π°Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ° для Ρ„ΠΎΡ€ΠΌΡ‹ подписки, содСрТащая основной ΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ тСкст. Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΈ ΠΏΡ€ΠΈ этом Π½Π΅ Π·Π°Π±Ρ‹Ρ‚ΡŒ ΠΎ Π΅Ρ‘ доступности для людСй с ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌΠΈ возмоТностями? Π’ΠΎΡ‚ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ HTML-ΠΊΠΎΠ΄:

БрСдство для чтСния с экрана Β«ΠΎΠ·Π²ΡƒΡ‡ΠΈΡ‚Β» эту ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΊΠ°ΠΊ Β«Subscribe to our newsletter 240K+ subscribersΒ». Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ это ΡƒΡΠ»Ρ‹ΡˆΠΈΡ‚, это Π΅Π³ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°ΠΏΡƒΡ‚Π°Ρ‚ΡŒ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π½ΠΈΡ‡Ρ‚ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·Π΄Π΅Π»ΡΡ‚ΡŒ Π΄Π²Π΅ строки тСкста, Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌΡ‹Π΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅. ВзглянитС Π½Π° ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚ инструмСнта Chrome для исслСдования доступности элСмСнтов.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. 68a1b4465f36200eeb3091667ba2c120. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-68a1b4465f36200eeb3091667ba2c120. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 68a1b4465f36200eeb3091667ba2c120. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

ИсслСдованиС доступности элСмСнтов Π² Chrome

Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΠΏΡƒΡ‚Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, я ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‘Π» Π±Ρ‹ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Π²Ρ‚ΠΎΡ€ΡƒΡŽ строку тСкста ΠΎΡ‚ срСдств для чтСния с экрана. Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ это ΠΌΠΎΠΆΠ½ΠΎ, использовав Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ aria-hidden Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌ элСмСнтС :

Если ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ нСльзя, Π΅ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΉ способ добавлСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ тСкста Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ. РСшСниС этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ показалось ΠΌΠ½Π΅ интСрСсным, я Π½Π°ΡˆΡ‘Π» Π½Π° сайтС Smashing Magazine. Оно Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ содСрТимоС, ΠΏΠΎΠ»ΡŒΠ·ΡƒΡΡΡŒ псСвдоэлСмСнтами. ΠŸΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅ срСдства для чтСния с экрана Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½ΠΈΡ‡Π΅Π³ΠΎ лишнСго. Π’ΠΎΡ‚ CSS-ΠΊΠΎΠ΄ этого Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ:

Бсылки () ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ( )?

Когда стоит ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ссылками, Π° ΠΊΠΎΠ³Π΄Π° β€” ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ? Для Π½Π°Ρ‡Π°Π»Π° Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Π΅ΠΌ ΠΎΠ½ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π°.

▍Бсылки

β–ΠšΠ½ΠΎΠΏΠΊΠΈ

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

ИспользованиС ссылок ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ

▍ЭлСмСнт Π½Π΅ обязан Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°

МнС нравится этот ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ, с ΡƒΡ‡Ρ‘Ρ‚ΠΎΠΌ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ доступности ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π° панСль-Β«Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Β». Π’Π½Π°Ρ‡Π°Π»Π΅, Ссли ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ JavaScript нСдоступСн, Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ выглядит Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ страницы Π² условиях нСдоступности JavaScript

Π’ΠΎΡ‚ HTML-ΠΊΠΎΠ΄ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π° Ρ‚Π°ΠΊΠΎΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ:

Π’ случаС доступности JavaScript Π²Ρ‹ΡˆΠ΅ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½Π½Π°Ρ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΈ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ. ДостигаСтся это ΠΏΡƒΡ‚Ρ‘ΠΌ создания ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ добавлСния Π΅Ρ‘ Π² элСмСнт

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ страницы Π² условиях, ΠΊΠΎΠ³Π΄Π° JavaScript-Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ доступна

Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ использованиС элСмСнта β€” это ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ€Π΅ΡˆΠ°Π΅Ρ‚ Π·Π°Π΄Π°Ρ‡Ρƒ разворачивания ΠΈ сворачивания Π±Π»ΠΎΠΊΠΎΠ² тСкста.

β–ΠšΠ½ΠΎΠΏΠΊΠ° Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

Бсылка для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, оформлСнная ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°

Π’ΠΎΡ‚ ΠΊΠΎΠ΄ этой ссылки:

ΠŸΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅ Π² нашСм распоряТСнии оказываСтся ссылка, стилизованная ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°, которая Π΄Π΅Π»Π°Π΅Ρ‚ своё Π΄Π΅Π»ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ лишь сСмантичСскиС структуры HTML.

Кнопки с обводкой

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

ΠžΠ±Ρ‹Ρ‡Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Ρ‘ ΠΌΡ‹ΡˆΠΈ становится ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ с ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΎΠΉ

Благодаря Ρ‚Π°ΠΊΠΎΠΌΡƒ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Ρƒ Π² нашСм распоряТСнии оказываСтся ΠΊΠ½ΠΎΠΏΠΊΠ°, Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ, ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Ρ‘ ΠΌΡ‹ΡˆΠΈ, выводятся Π΅Ρ‘ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹. ΠŸΡ€ΠΈ этом Ρ„ΠΎΠ½ ΠΊΠ½ΠΎΠΏΠΊΠΈ становится ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌ.

Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ

Когда я Ρ€Π°Π±ΠΎΡ‚Π°Π» Π½Π°Π΄ ΡΡ‚Π°Ρ‚ΡŒΡ‘ΠΉ ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ элСмСнтов, ΠΌΠ½Π΅ понадобилась ΠΊΠ½ΠΎΠΏΠΊΠ° с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΌ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ.

МнС Π±Ρ‹Π»ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π½Π΅Ρ‡Ρ‚ΠΎ, ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ рисунку.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. c495dfd572b9ad4c402a8a11d7c56976. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-c495dfd572b9ad4c402a8a11d7c56976. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° c495dfd572b9ad4c402a8a11d7c56976. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

ГрадиСнтная ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈ Π΅Ρ‘ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ с ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΎΠΉ

Π’ΡƒΡ‚ прСдставлСны Π΄Π²Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ β€” градиСнтная ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ° с ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΎΠΉ. Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Ρ‚Π°ΠΊΠΎΠ³ΠΎ внСшнСго Π²ΠΈΠ΄Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρƒ Π±Π°Π·ΠΎΠ²ΠΎΠΉ (Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½ΠΎΠΉ) ΠΊΠ½ΠΎΠΏΠΊΠΈ имСлась Π±Ρ‹ прозрачная Π³Ρ€Π°Π½ΠΈΡ†Π°. Π­Ρ‚Π° Π³Ρ€Π°Π½ΠΈΡ†Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Π½Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΊΠ½ΠΎΠΏΠΊΠΈ с ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΎΠΉ.

Π’ΡƒΡ‚ всё, Π²Ρ€ΠΎΠ΄Π΅ Π±Ρ‹, выглядит Ρ€Π°Π·ΡƒΠΌΠ½ΠΎ, Π½ΠΎ Π² Ρ…ΠΎΠ΄Π΅ Ρ€Π°Π±ΠΎΡ‚Ρ‹ я столкнулся со странной ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ. Π― Π΄Π°ΠΆΠ΅ попытался Ρ€Π΅ΡˆΠΈΡ‚ΡŒ Π΅Ρ‘, попросив ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Twitter. Π­Ρ‚Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° прСдставлСна Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ рисункС.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

ΠžΠ±Ρ‹Ρ‡Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΊΠ½ΠΎΠΏΠΊΠ° с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ (Π³Ρ€Π°Π½ΠΈΡ†Π°, Π½Π° самом Π΄Π΅Π»Π΅, прозрачная; Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΎΠ½Π° Π²Ρ‹Π²Π΅Π΄Π΅Π½Π° лишь для наглядности), ΠΊΠ½ΠΎΠΏΠΊΠ° со странными краями

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ с Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ выглядит градиСнтная ΠΊΠ½ΠΎΠΏΠΊΠ° с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Π΅ΠΉ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡŒΡ‚Π΅ ΠΌΠ½Π΅ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°Ρ… Π²Ρ‹ΡˆΠ΅ΠΎΠΏΠΈΡΠ°Π½Π½Ρ‹Ρ… странностСй.

Π― ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π» Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΡˆΠΈΡ€ΠΎΠΊΡƒΡŽ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½Π°Π±Π»ΡŽΠ΄Π°Ρ‚ΡŒ Π·Π° Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΈΠ· этого получится. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊ повторяСтся Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, ΠΈ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ соотвСтствуСт свойству padding ΠΊΠ½ΠΎΠΏΠΊΠΈ.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. 1bbd1201fe9295a028055d05bb26c0d6. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-1bbd1201fe9295a028055d05bb26c0d6. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° 1bbd1201fe9295a028055d05bb26c0d6. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

Кнопка с ΡˆΠΈΡ€ΠΎΠΊΠΈΠΌΠΈ Π³Ρ€Π°Π½ΠΈΡ†Π°ΠΌΠΈ ΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚

Π’ΠΎΡ‚, Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π° CodePen.

Π§Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ β€” height ΠΈΠ»ΠΈ padding?

▍Ѐиксированная высота

ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρ‡Ρ‚ΠΎ Ρƒ нас имССтся ΠΊΠ½ΠΎΠΏΠΊΠ°, стилизованная ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

ΠŸΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅ тСкст Π½Π΅ выравниваСтся ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ. Выглядит всё это Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

Кнопка, тСкст ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π½Π΅ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ

Но Ρƒ этого ΠΌΠ΅Ρ‚ΠΎΠ΄Π° Π΅ΡΡ‚ΡŒ минусы:

β–Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ отступ

Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ†Π΅Π½Ρ‚Ρ€ΡƒΡŽΡ‚ΡΡ ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ. А Π΅ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π΅Π΄ΡƒΡ‚ сСбя ΠΈΠ½Π°Ρ‡Π΅. Иногда для достиТСния Ρ†Π΅Π»ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ отступа Π½ΡƒΠΆΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ. ВзглянитС Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

ΠŸΠΎΠΏΡ‹Ρ‚ΠΊΠ° Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠ²ΠΊΠΈ тСкста ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π’ΠΎΡ‚ CSS-ΠΊΠΎΠ΄ стилизации этой ΠΊΠ½ΠΎΠΏΠΊΠΈ:

Π’ этом случаС содСрТимоС ΠΊΠ½ΠΎΠΏΠΊΠΈ выглядит слСгка смСщённым. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ отступа Π½ΡƒΠΆΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ:

ΠžΠ±ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π½ΠΈΠ΅ содСрТимого ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² Ρ‚Π΅Π³

Π’ Ρ…ΠΎΠ΄Π΅ экспСримСнтов я выяснил, Ρ‡Ρ‚ΠΎ Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠ²ΠΊΠ° тСкста ΠΊΠ½ΠΎΠΏΠΎΠΊ Adobe Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ сбита. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ это выглядит.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

Π¦Π΅Π½Ρ‚Ρ€ΠΎΠ²ΠΊΠ° Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ сбита

Π― исслСдовал эти ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ» интСрСсный ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±Ρ‘Ρ€Π½ΡƒΡ‚ΠΎ Π² элСмСнт с ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ фиксированной высоты для ΠΊΠ½ΠΎΠΏΠΊΠΈ.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

ИзмСнСниС высоты ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ автоматичСскоС Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π΅Ρ‘ содСрТимого

Π’ΠΎΡ‚ ΠΈ всё. Π₯ΠΎΡ‡Ρƒ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ написании Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π° ΠΌΠ½Π΅ ΠΏΠΎΠΌΠΎΠ³Π»Π° эта ΡΡ‚Π°Ρ‚ΡŒΡ.

Кнопки Π²Π½ΡƒΡ‚Ρ€ΠΈ flexbox- ΠΈΠ»ΠΈ grid-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ²

Π’ΡƒΡ‚ Ρƒ вас ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡΠ²ΠΈΡ‚ΡŒΡΡ вопрос ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊΠΎΠ΅ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΊ flex- ΠΈ grid-ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌ. ΠŸΠΎΠ·Π²ΠΎΠ»ΡŒΡ‚Π΅ ΠΌΠ½Π΅ ΠΏΡ€ΠΎΡΡΠ½ΠΈΡ‚ΡŒ этот вопрос.

Π― Ρ€Π°Π±ΠΎΡ‚Π°Π» Π½Π°Π΄ Ρ€Π°Π·Π΄Π΅Π»ΠΎΠΌ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. МнС Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ содСрТимоС. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ я использовал flex-ΠΌΠ°ΠΊΠ΅Ρ‚:

Π’ΠΎ, Ρ‡Ρ‚ΠΎ Ρƒ мСня ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ, мСня нСсколько ΡƒΠ΄ΠΈΠ²ΠΈΠ»ΠΎ.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ использования flex-ΠΌΠ°ΠΊΠ΅Ρ‚Π°

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ flex-элСмСнт растягиваСтся Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта. ИмСнно это ΠΈ ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ с ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ, прСдставлСнной Π½Π° ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ рисункС. Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ этой нСприятности, Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ свойство align-self :

Π’ΠΎΡ‚ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ послС этого.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

Кнопка выглядит Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π»ΡƒΡ‡ΡˆΠ΅

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

Кнопка, растянутая ΠΏΠΎ высотС

Задавая Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ†Π΅Π½Ρ‚Ρ€Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, ΠΌΡ‹ Ρ€Π΅ΡˆΠ°Π΅ΠΌ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚ΠΎΡ‚ ΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€.

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

РСшСниС ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ растянутой ΠΊΠ½ΠΎΠΏΠΊΠΈ

ИспользованиС Π΅Π΄ΠΈΠ½ΠΈΡ† измСрСния em

Π•Π΄ΠΈΠ½ΠΈΡ†Ρƒ измСрСния em ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΉ настройки Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ. Π­Ρ‚Π° Π΅Π΄ΠΈΠ½ΠΈΡ†Π° измСрСния Π² Ρ‚Π°ΠΊΠΎΠΉ ситуации вСсьма ΠΏΠΎΠ»Π΅Π·Π½Π°. Π•Π΄ΠΈΠ½ΠΈΡ†Π° измСрСния em Ρ€Π°Π²Π½Π° font-size элСмСнта ( px ΠΈΠ»ΠΈ rem ). ВзглянСм Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. image loader. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ„ΠΎΡ‚ΠΎ. css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ-image loader. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° css ΠΊΠΎΠ΄ для ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° image loader. ΠŸΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ! Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π° ΠΌΠΎΠΉ взгляд ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Π΅ΠΉΡˆΠΈΡ… элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΡƒΠΆΠ½Ρ‹ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ дСйствиС (ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° рассылку, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€ Π² ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ, ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π·Π²ΠΎΠ½ΠΎΠΊ ΠΈ Ρ‚.Π΄.), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΌΠΎΠ½Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΡ‹ ΠΆΠ΅ здСсь Π½Π΅ просто Ρ‚Π°ΠΊ ΡΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ ;)

Кнопки Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ²

А Π²ΠΎΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ CSS-ΠΊΠΎΠ΄Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π΅Π΄ΠΈΠ½ΠΈΡ†Π° измСрСния em :

Для ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ€Π°Π·Π½ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ° Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ классы, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… задаётся Ρ€Π°Π·Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°:

β†’ Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ использования ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° CodePen

β†’ Π’ΠΎΡ‚ моя ΡΡ‚Π°Ρ‚ΡŒΡ Π½Π° эту Ρ‚Π΅ΠΌΡƒ. Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ с Π½Π΅ΠΉ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ

Анимация ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹

Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π±Ρ‹Π»ΠΎ Π±Ρ‹ приятнСС Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ со страницСй Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ использовался Π±Ρ‹ Π½Π΅ΠΊΠΈΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄. ΠŸΡ€ΠΎΡ‰Π΅ всСго это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π² ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π°. Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π° CodePen, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ этой ΠΈΠ΄Π΅ΠΈ.

Π˜Ρ‚ΠΎΠ³ΠΈ

МнС Π±Ρ‹Π»ΠΎ ΠΎΡ‡Π΅Π½ΡŒ приятно Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄ этим ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠΌ. Π•Π³ΠΎ написаниС заняло Ρƒ мСня большС Π³ΠΎΠ΄Π°. Π― счастлив ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. НадСюсь, Π²Ρ‹ нашли здСсь Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ пригодится.

Π£Π²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ! Π˜Π·Π²Π΅ΡΡ‚Π½Ρ‹ Π»ΠΈ Π²Π°ΠΌ ΠΊΠ°ΠΊΠΈΠ΅-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ способы Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡΡ‚Π°Π»ΠΈΡΡŒ Π·Π° Ρ€Π°ΠΌΠΊΠ°ΠΌΠΈ этой ΡΡ‚Π°Ρ‚ΡŒΠΈ?

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Кнопки | CSS

ΠŸΡ€ΠΎΡΡ‚Π°Ρ HTML ΠΊΠ½ΠΎΠΏΠΊΠ° для сайта

Π•ΡΡ‚ΡŒ нСсколько Ρ‚ΠΈΠΏΠΎΠ² input для создания ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Ρ‚Π΅Π³ button [ type=»button | reset | submit» ]. Π’Π½Π΅ΡˆΠ½Π΅ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ ΠΎΠ½ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π½Π° CSS

Из ссылки, Ρ‚Π΅Π³Π° span ΠΈΠ»ΠΈ div ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΠΎΡ‡Π΅Π½ΡŒ Π΄Π°ΠΆΠ΅ ΡΠΈΠΌΠΏΠ°Ρ‚ΠΈΡ‡Π½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ: «А Π½ΡƒΠΆΠ½ΠΎ Π»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Π²ΠΈΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ с эффСктом наТатия?Β»

Надо ΠΏΡ€ΠΈΠ·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ слоТнСС всСго ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ вСсти сСбя ΠΊΠ½ΠΎΠΏΠΊΠ° Π²ΠΎ врСмя наТатия.

Код ΠΊΠ½ΠΎΠΏΠΊΠΈ для сайта

Иногда самый простой внСшний Π²ΠΈΠ΄ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΡΡ‚ΠΈΠ»ΡŒΠ½ΠΎ, Ρ‡Π΅ΠΌ наворочСнная с ΠΊΡ€ΡƒΡ‚Ρ‹ΠΌΠΈ эффСктами ΠΊΠ½ΠΎΠΏΠΊΠ°. ВзглянитС, ΠΊΠ°ΠΊ ΠΎΠ½Π° Ρ‚ΡƒΡ‚ [cssdeck.com] смотрится.

Кнопка с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ

Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ ΠΏΠ»ΠΎΡ…ΠΎ ΠΏΠΎΠ΄Π΄Π°ΡŽΡ‚ΡΡ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΏΠ»Π°Π²Π½ΠΎΠΉ смСнС Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π°. Π§Ρ‚ΠΎ ΠΆΠ΅ Π΄Π΅Π»Π°Ρ‚ΡŒ? ΠžΡ‚Π²Π΅Ρ‚: box-shadow [ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΏΠΎ ссылкС, Ρ‚Π°ΠΌ Π΅ΡΡ‚ΡŒ супСрская Ρ„ΠΎΡ€ΠΌΠ° Π²Ρ…ΠΎΠ΄Π°].

А Π²ΠΎΡ‚ всякиС пСрСмСщСния Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π½Π° ΡƒΡ€Π°.

Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ популярно Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° Π΄Π²Π° Ρ†Π²Π΅Ρ‚Π°

ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS

Кнопки Β«Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒΒ» CSS

Бтилизация ΠΊΠ½ΠΎΠΏΠΎΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

Анимированная ΠΊΠ½ΠΎΠΏΠΊΠ°: «ΡΠ²Π΅Ρ‡Π΅Π½ΠΈΠ΅ тСкста»

Π‘Ρ‚ΠΈΠ»ΡŒ ΠΊΠ½ΠΎΠΏΠΎΠΊ с Π±Π»ΠΈΠΊΠ°ΠΌΠΈ

Кнопки мСню

ΠžΠ±ΡŠΡ‘ΠΌΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° CSS

ВдавлСнная ΠΊΠ½ΠΎΠΏΠΊΠ°

Выпуклая ΠΊΠ½ΠΎΠΏΠΊΠ° HTML

ΠšΡ€ΡƒΠ³Π»Ρ‹Π΅ CSS ΠΊΠ½ΠΎΠΏΠΊΠΈ

Анимированная ΠΊΠ½ΠΎΠΏΠΊΠ° CSS

АнимированноС Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ происходит Ρ‚Π°ΠΊ (Ρ‚ΡƒΡ‚ Π½Π΅Ρ‚ лишнСго ΠΊΠΎΠ΄Π°, связанного с ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ). Π”Ρ€ΡƒΠ³ΠΈΠ΅ интСрСсныС эффСкты Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Ρ‚ΡƒΡ‚ [tympanus.net].

3d ΠΊΠ½ΠΎΠΏΠΊΠ° CSS

ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ

Кнопки сайта слСдуСт Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Π² Π΅Π΄ΠΈΠ½ΠΎΠΌ стилС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΠΎΡΡ‚Π°Π²Π°Π»ΠΎΡΡŒ сомнСний, Ρ‡Ρ‚ΠΎ Ссли здСсь Π½Π°ΠΆΠ°Ρ‚ΡŒ, Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Ρ‘Ρ‚ ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ дСйство.

ИмСнно поэтому Ρƒ Google второстСпСнныС ΠΊΠ½ΠΎΠΏΠΊΠΈ сначала плоскиС, Π° послС навСдСния ΠΌΡ‹ΡˆΠΊΠΈ ΠΎΠ±Ρ€Π΅Ρ‚Π°ΡŽΡ‚ ΠΎΠ±ΡŠΡ‘ΠΌ.

Π’Π°ΠΊΠΆΠ΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ±Π΅Π΄ΠΈΡ‚ΡŒ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π²Π΅Π»ΠΈΡ‡ΠΈΠ½ΠΎΠΉ со слона, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΡΡ‚Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠΌ Π±Π°Π½Π½Π΅Ρ€Π½ΠΎΠΉ слСпоты.

98 ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π²:

damir-tote Бпасиб NMitra, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ искал =) А Π½Π΅ моТСшь Π΅Ρ‰Π΅ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π΅ Π²Π±ΠΎΠΊ, Π° Π²Π½ΠΈΠ·)) NMitra Π‘ΠΌ. http://shpargalkablog.ru/2011/07/accordion-css.html

Π’ качСствС содСрТания добавляйтС список ol ΠΈΠ· ссылок. Π”ΠΌΠΈΡ‚Ρ€ΠΈΠΉ Π’Ρ‹ΠΏ. список это просто) Π”Π°ΠΆΠ΅ просто ввСдя Π² Π³ΡƒΠ³Π» Π²Ρ‹ΠΏ список Π½Π° цсс ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ NMitra ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ послСдний ΠΏΡ€ΠΈΠΌΠ΅Ρ€ http://shpargalkablog.ru/2012/04/display-block-inline-css.html с Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ Π½Π° ΠΏΡƒΠ½ΠΊΡ‚ мСню ΠΈΠ»ΠΈ с постановкой Π³Π°Π»ΠΎΡ‡ΠΊΠΈ справа. Π•ΡΡ‚ΡŒ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ с :focus, Π½ΠΎ Π² Π₯Ρ€ΠΎΠΌΠ΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, я Π½Π΅ стала поэтому Ρ€Π°ΡΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ.

Для высоты слоТнСС. МоТно ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡƒΡŽ height ΠΈ line-height, Π½ΠΎ line-height Π½Π΅ поддСрТиваСтся Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Opera Mini. БовсСм ΡƒΠ±Ρ€Π°Ρ‚ΡŒ padding.

Ссли для ΠΎΠ΄Π½ΠΎΠΉ страницы, Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠ° для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π² «HTML»-Ρ€Π΅ΠΆΠΈΠΌ ΠΏΡ€ΠΈ написании/Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΡΡ‚Π°Ρ‚ΡŒΠΈ. Π’ Π½ΡƒΠΆΠ½ΠΎΠ΅ мСсто добавляСтС ΠΈ стили, ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ. Волько Π² этом случаС стили Π½ΡƒΠΆΠ½ΠΎ Π²ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ

Π˜Ρ€ΠΈΠ½Π°, Π±Π»Π°Π³ΠΎΠ΄Π°Ρ€ΡŽ Π·Π° ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ! Анонимный ΠŸΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅, я Π² этих ΠΊΠΎΠ΄Π°Ρ… Π½Π΅ Ρ€Π°Π·Π±ΠΈΡ€Π°ΡŽΡΡŒ, Π½ΠΎ. ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»ΠΈΡΡŒ. сайтами Π½Π΅ занимаюсь, Π½ΠΎ красиво ΠΏΠΎΠ΄Π°Ρ‚ΡŒ ссылку Π½Π° Ρ„Π°ΠΉΠ» ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π». Ρ‚ΡƒΠΏΠΎ вставил ΠΊΠΎΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠ» адрСс Π½Π° Ρ„Π°ΠΉΠ» ΠΈ Π²Ρ€ΠΎΠ΄Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚! ΠŸΡ€ΠΈΠΌΠ΅Ρ€: http://bogoglasnik.ru/load/88-1-0-1380?l_ZeHf (Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΉ) Анонимный Π”ΠΎΠ±Ρ€Ρ‹ΠΉ дСнь. ΠŸΠΎΠ΄ΡΠΊΠ°ΠΆΠΈΡ‚Π΅ поТалуйста, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Ρ‡Ρ‚ΠΎ Π±Ρ‹ ΠΎΠ½Π° Π±Ρ‹Π»Π° ссылкой, Π²Π΅Π»Π° Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ страницу? Π“Π΄Π΅ Π²ΠΏΠΈΡΠ°Ρ‚ΡŒ ссылку
А Ρ‚Π°ΠΊ Π²Ρ€ΠΎΠ΄Π΅ со всСм разобрался ΠΈ с Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ, Π° Π²ΠΎΡ‚ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π΅ ссылкой Ρ‡Ρ‚ΠΎ Π±Ρ‹ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ страницу
Π—Π°Ρ€Π°Π½Π΅Π΅ Π±Π»Π°Π³ΠΎΠ΄Π°Ρ€Π΅Π½. NMitra Π—Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ href (ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html )

background: rgb(206, 220, 231) linear-gradient(rgb(206,220,231), rgb(89,106,114));

Π’ΠΎΡ‚ сСйчас ΠΎΠΏΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽ Π² поисках ΠΊΠ°ΠΊ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅.

ΠžΡ‡Π΅Π½ΡŒ Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚ просто ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ³ΠΎ описания, ΠΊΠ°ΠΊΠΎΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Ρ‡Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚.

ВсякиС ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ слуТСбных слов ΠΏΠ΅Ρ€Π΅ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π», Π½ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ Ρ‚Π°ΠΊ ΠΈ Π½Π΅ смог.

ΠœΠΎΠΆΠ΅Ρ‚ Ρ‡Ρ‚ΠΎ подскаТСтС. Π—Π°Ρ€Π°Π½Π΅Π΅ ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ Бпасибо!

a.button_main_ico <
float: left;
width: 200px;
height:24px;
font-size: 16px;
font: Verdana,Arial,Helvetica;
text-align:center;
border:none;
border-radius: 6px;
color:#F8F8F8;
background-color:#3895EA;
text-decoration: none;
outline: none;
user-select: none;;
transition: 0.2s;
>
a.button_main_ico:hover <
background-color: #BABABA;
>
a.button_main_ico:focus <
background-color: #D8D8D8;
>
a.button_main_ico:focus:hover <
background-color: #DFDFDF;
>

a.button_main_ico:before <
content: url(../ico_L_ready.png);
> NMitra Π’Ρ‹ ΠΈΠΊΠΎΠ½ΠΊΡƒ добавляСтС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ :before? Π’ΠΎΠ³Π΄Π° тСкст Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΊΡ€ΡƒΠΆΠΈΡ‚ΡŒ span. :before ΠΈ span Π·Π°Π΄Π°Ρ‚ΡŒ vertical-align: middle;

a.button_main_ico:before,
a.button_main_ico span <
content: url(../ico_L_ready.png);
vertical-align: middle;
>

Бпасибо Π·Π° участиС ΠΈ Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅.

Π—Π° ΠΎΡ‚ΠΊΠ»ΠΈΠΊ ΠΈ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠžΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ Бпасибо. NMitra Высота-Ρ‚ΠΎ ΡƒΠΊΠ°Π·Π°Π½Π° фиксированной height:24px; Анонимный Однако, Π½Π°ΡˆΡ‘Π» ΠΎΡ‚Π²Π΅Ρ‚ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠ½Π΅ ΠΏΠΎΠ΄ΠΎΡˆΡ‘Π».

Π² HTML
Кнопка с ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ ΠΈ тСкстом Π²Ρ‹Ρ€Π°Π²Π½Π΅Π½Π½Ρ‹Π΅ ΠΏΠΎ сСрСдинС ΠΊΠ½ΠΎΠΏΠΊΠΈ:
Кнопка

Π’ΠΎΠΆΠ΅ Π½ΠΎ Π±Π΅Π· ΠΈΠΊΠΎΠ½ΠΊΠΈ:
Кнопка

Π’ CSS
a.button_main <
float: left;
width: 200px;
height:24px;
font-size: 16px;
font: Verdana,Arial,Helvetica;
text-align:center;
border:none;
border-radius: 6px;
color:#F8F8F8;
background-color:#550000;
text-decoration: none;
outline: none;
user-select: none;;
transition: 0.2s;
>
a.button_main:hover <
background-color: #BA0000;
>
a.button_main:focus <
background-color: #D80000;
>
a.button_main:focus:hover,a.button_history:focus:hover <
background-color: #DF000;
>

Π’ΡƒΡ‚ приятно, Ρ‡Ρ‚ΠΎ класс ΠΊΠ½ΠΎΠΏΠΊΠΈ, отвязан ΠΎΡ‚ класса ΠΈΠΊΠΎΠ½ΠΊΠΈ. Π—Π½Π°Ρ‡ΠΈΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΎΠ΄ΠΈΠ½ класс Π½Π° всС ΠΊΠ½ΠΎΠΏΠΊΠΈ прилоТСния ΠΈ лишь мСняСм классы ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΏΠΎ надобности.

Бпасибо Π²Ρ‹ Π½Π°Ρ‚ΠΎΠ»ΠΊΠ½ΡƒΠ»ΠΈ Π½Π° Π²Π΅Ρ€Π½Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ, с ΡƒΠ²Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ sharpionok Анонимный ВмСсто HTML ΠΊΠΎΠ΄Π° Π½Π°ΠΏΠ΅Ρ‡Π°Ρ‚Π°Π»Π°ΡΡŒ ссылка Ρ‡Ρ‘Ρ€Ρ‚ΠΈ ΠΊΡƒΠ΄Π°. Как ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ Π² HTML Π½Π΅ понимаю.=(

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *