Π£Ρ€ΠΎΠΊ 73. Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ Π°Π²Π°Ρ‚Π°Ρ€ΠΊΠΈ ΠΊΡ€ΡƒΠ³Π»Ρ‹ΠΌΠΈ

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ Π°Π²Π°Ρ‚Π°Ρ€ΠΊΠΈ Π½Π° wordpress ΠΈ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎΠ‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ Ρ‚Ρ€Π΅Π½Π΄Ρ‹ Π½Π΅Ρ€Π΅Π΄ΠΊΠΎ приходится ΠΏΠΎΠ΄Ρ…Π²Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ всСм Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π°ΠΌ Π²Π΅Π±-сайтов, вСдь прогрСссивный Π²Π΅Π±-ΠΏΠΎΡ€Ρ‚Π°Π» Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ соврСмСнным Π½ΠΎΡ€ΠΌΠ°ΠΌ, дСмонстрируя ΡΠ΅Ρ€ΡŒΠ΅Π·Π½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄. Π§Ρ‚ΠΎ ΠΆ, ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Ρ‚Π°ΠΊΠΈΡ… Ρ‚Ρ€Π΅Π½Π΄ΠΎΠ² стали ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ Π°Π²Π°Ρ‚Π°Ρ€ΠΊΠΈ ΠΈ изобраТСния. А Π²Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ ΠΈΠ΄Π΅ΠΈ для ΠΌΠ°Π»ΠΎΠ³ΠΎ бизнСса

Как Π±Ρ‹ Ρ‚Π°ΠΌ Π½ΠΈ Π±Ρ‹Π»ΠΎ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π°Π²Π°Ρ‚Π°Ρ€ΠΊΠΈ стали ΠΊΡ€ΡƒΠ³Π»Ρ‹ΠΌΠΈ. Для Π½Π°Ρ‡Π°Π»Π° ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Π² style.css ΠΈ вносим ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ измСнСния:

.avatar img {

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-ms-border-radius: 50%;

-o-border-radius: 50%;

border-radius: 50%;

}

Π‘Ρ‹Ρ‚ΡƒΠ΅Ρ‚ ΠΌΠ½Π΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ всС эти строки ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΈ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Β border-radius: 50%. Но Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ вСсь ΠΊΠΎΠ΄, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ ΡΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.

ΠœΠΎΠΆΠ΅Ρ‚ ΡΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ ΠΈ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ΄ Π½Π΅ сработаСт Π² любом случаС. Π­Ρ‚ΠΎ ΡƒΠΆΠ΅ зависит ΠΎΡ‚ Ρ‚Π΅ΠΌΡ‹, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π² Π½Π΅ΠΉ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ класс avatar. Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΠΈΡΠΊΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄, ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π₯Ρ€ΠΎΠΌΠΎΠΌ ΠΈ ЀаСрфоксом: ΠΈΠ· Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² достаточно Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΠΎ Π½ΡƒΠΆΠ½ΠΎΠΌΡƒ элСмСнту, Ρ‚.Π΅. ΠΏΠΎ Π°Π²Π°Ρ‚Π°Ρ€Ρƒ ΠΈ ΠΏΡ€ΠΎΠΈΠ½ΡΠΏΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт. Π’ ΠΊΠΎΠ΄Π΅ Π²Ρ‹, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ класса avatar, Β ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, author-avatar. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС помСняйтС Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Π² ΠΏΠ΅Ρ€Π²ΠΎΠΉ строкС.

Π‘Π»ΠΎΠΊ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π²

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Ρ‚ΠΎ ΠΆΠ΅ самоС ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ для ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π², стоит Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΈΡΠΊΠ°Ρ‚ΡŒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ классов Π°Π²Π°Ρ‚Π°Ρ€ΠΎΠ² Π±Π»ΠΎΠΊΠ° ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π². УбСдившись, Ρ‡Ρ‚ΠΎ названия ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‚, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

.commentlist .avatar {

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-ms-border-radius: 50%;

-o-border-radius: 50%;

border-radius: 50%;

}

ПослС этого Π°Π²Π°Ρ‚Π°Ρ€Ρ‹ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΡŽΡ‰ΠΈΡ… Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΊΡ€ΡƒΠ³Π»Ρ‹ΠΌΠΈ.

Π§Ρ‚ΠΎ Ссли изобраТСния Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ?

ΠœΠΎΠΆΠ΅Ρ‚ ΡΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ изобраТСния Π°Π²Π°Ρ‚Π°Ρ€ΠΎΠ² ΠΈ вовсС Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ. Π’ этом случаС Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ Π°Π²Π°Ρ‚Π°Ρ€Ρ‹ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ Π½Π° сайтС, для этого стоит ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ – обсуТдСниС ΠΈ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ стоит Π»ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π°Ρ Π³Π°Π»ΠΎΡ‡ΠΊΠ°. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ‹Ρ€ΠΉ ΡƒΠΆΠ΅ Π·Π°Ρ‚Ρ€Π°Π³ΠΈΠ²Π°Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π°Π²Π°Ρ‚Π°Ρ€ΠΎΠ². Π’ любом случаС, Ссли Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ ΠΈ лишний Ρ€Π°Π· Π²Π½ΠΎΡΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΊΠΈ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ Ρƒ нас сайт, ΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠ² ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» Π·Π°Ρ€Π°Π½Π΅Π΅.

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

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

Π“Π»Π°Π²Π½ΠΎΠ΅ мСню