ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ css Ρ€Π°ΠΌΠΊΠΈ: 5 Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² красивых Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Ρ€Π°ΠΌΠΎΠΊ с использованиСм CSS|ΡˆΠΏΠ°Ρ€Π³Π°Π»ΠΊΠΈ Π±Π»ΠΎΠ³Π΅Ρ€ΡˆΠΈ


28.06.2023 Facebook Twitter LinkedIn Google+ Π Π°Π·Π½ΠΎΠ΅


Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ простых Ρ€Π°ΠΌΠΎΠΊ с использованиСм CSS

ΠšΠ°ΠΆΠ΄ΠΎΠΌΡƒ элСмСнту HTML ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· дСсяти стилСй: none (Π½Π΅Ρ‚), hidden (спрятанная), solid (Ρ†Π΅Π»ΡŒΠ½Π°Ρ), dashed (подчСркиваниями), dotted (Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ), groove (углублСнная), ridge (приподнятая), double (двойная), inset (внутрСнняя) ΠΈΒ outset (внСшняя). Π’Π°ΠΊΠΆΠ΅ Π² спСцификации CSS3 Π΅ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ стиля, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅: wave (Π²ΠΎΠ»Π½Π°), dot-dash (Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ ΠΈ подчСркиваниями), ΠΈ dot-dot-dash (Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ, Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ ΠΈΒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ).

Π’ΠΎΠ»Ρ‰ΠΈΠ½Π° Ρ€Π°ΠΌΠΎΠΊ CSS ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ задаСтся Π² пиксСлях ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΒ ΠΎΠ½ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Ρ‚ΠΎΠ½ΠΊΠΈΠ΅ Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ². Но тСхничСски ΡˆΠΈΡ€ΠΈΠ½Π° Ρ€Π°ΠΌΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π΄Π°Π½Π° Π² Π»ΡŽΠ±Ρ‹Ρ… Π΅Π΄ΠΈΠ½ΠΈΡ†Π°Ρ… измСрСния CSS. ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ, ΠΊΡ€ΠΎΠΌΠ΅ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ΠΎΠ². Π¦Π²Π΅Ρ‚ Ρ€Π°ΠΌΠΊΠΈ Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π΄Π°Π½ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ любой Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ систСмы CSS, Ρ‡Ρ‚ΠΎ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹Π΅Β Ρ€Π°ΠΌΠΊΠΈ.

НаиболСС распространСнный способ задания Ρ€Π°ΠΌΠΎΠΊ β€” сокращСнная запись для задания Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ стиля, Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρ‹ ΠΈ Ρ†Π²Π΅Ρ‚Π°, Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ…Β ΠΏΡ€ΠΎΠ±Π΅Π»Π°ΠΌΠΈ:

border: style thickness color;

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅ ΠΌΡ‹ создали Ρ€Π°ΠΌΠΊΠΈ с Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΌΠΈ ΡƒΠ³Π»Π°ΠΌΠΈ Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Π° названия Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ стиля Ρ€Π°ΠΌΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, как эти стили выглядят ΠΈΒ Π½Π° прямых ΠΈΒ Π½Π° закруглСнных участках:

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ ΡΡ‚ΠΈΠ»ΡŒ Ρ€Π°ΠΌΠΊΠΈ особСнно чувствитСлСн ΠΊ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Π΅, распрСдСляя Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ число пиксСлСй ΠΌΠ΅ΠΆΠ΄Ρƒ внСшнСй ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΉ линиями ΠΈ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΎΠΌ ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ. Π£Π³Π»ΡƒΠ±Π»Π΅Π½Π½Ρ‹ΠΉ ΠΈ приподнятый ΡΡ‚ΠΈΠ»ΡŒ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Ρ‡ΡƒΠ²ΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ ΠΊ Ρ†Π²Π΅Ρ‚Ρƒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄Π½Ρ‹Π΅ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° для создания ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠΎΠ² для Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… ΠΈ Π²Π½Π΅ΡˆΠ½ΠΈΡ… Π»ΠΈΠ½ΠΈΠΉ. Из-Π·Π° этого использованиС чистых Ρ†Π²Π΅Ρ‚ΠΎΠ², Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Π±Π΅Π»Ρ‹ΠΉ, Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π½Π΅ рСкомСндуСтся, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π² этих случаях Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Π½Π΅ получится ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ красивый  Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ эффСкт. Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ ΠΈ внСшний стили Ρ€Π°ΠΌΠΊΠΈ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Ρ‹ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΈ выглядят Ρ„Π°Π»ΡŒΡˆΠΈΠ²ΠΎ, Ссли Π·Π°Π΄Π°Π½Ρ‹ ΠΎΡ‡Π΅Π½ΡŒΒ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΌΠΈ.

Π Π°ΠΌΠΊΡƒ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ сторонС элСмСнта ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойства Ρ€Π°ΠΌΠΊΠΈ слСва, Ρ€Π°ΠΌΠΊΠΈ снизу ΠΈ Ρ‚.Β Π΄.,Β ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠΎΠΊΡ€Π°Ρ‰Π΅Π½Π½ΡƒΡŽ запись, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ значСния для Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ, ΠΏΡ€Π°Π²ΠΎΠΉ, Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΈ Π»Π΅Π²ΠΎΠΉ сторон Ρ€Π°ΠΌΠΊΠΈ, Ρ‚.Β Π΅., ΠΏΠΎ часовой стрСлкС начиная с Π²Π΅Ρ€Ρ…Π°. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΎΡ‡Π΅Π½ΡŒ Π΄Π΅Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ свойства: Ρ†Π²Π΅Ρ‚ Ρ€Π°ΠΌΠΊΠΈ справа, ΡˆΠΈΡ€ΠΈΠ½Π° Ρ€Π°ΠΌΠΊΠΈ слСва ΠΈΒ Ρ‚.Β Π΄.

Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ свойства Ρ€Π°ΠΌΠΊΠΈ, ΠΌΠΎΠΆΠ½ΠΎ привСсти Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ Polaroid, ΠΊΠ°ΠΊ Π² дСмонстрации Π½ΠΈΠΆΠ΅, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Π° Π½ΠΈΠΆΠ½Π΅ΠΉ стороны Ρ€Π°ΠΌΠΊΠΈ отличаСтся ΠΎΡ‚ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… Ρ‚Ρ€Π΅Ρ… сторон. Π’ этом случаС ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ Π·Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ свойства Ρ€Π°ΠΌΠΊΠΈ CSS ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΒ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

img#polaroid {
        border: 25px solid #e8e8d3;
        border-bottom-width: 50px;
}

Надо Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π² ΠΎΠ±Ρ‰Π΅ΠΌ случаС Ρƒ SVG Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС контроля Π½Π°Π΄ стилями рамки.

Автор ΡƒΡ€ΠΎΠΊΠ° DudleyΒ Storey

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅Β Ρ‚Π°ΠΊΠΆΠ΅:

  • Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π½Ρ‹Ρ… Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… списков с использованиСм CSS
  • Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ стилСй для посСщСнных ссылок с использованиСм SVG
  • Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½Ρ‹Π΅ типографичСскиС эффСкты с использованиСм Ρ€ΠΎΡΡ‡Π΅Ρ€ΠΊΠΎΠ²Β ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²Β OpenType

border-style | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

ΠšΡ€Π°Ρ‚ΠΊΠ°Ρ информация

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽnone
НаслСдуСтсяНСт
ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡΠšΠΎ всСм элСмСнтам
Бсылка Π½Π° ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽhttp://www. w3.org/TR/CSS21/box.html#propdef-border-style

ВСрсии CSS

CSS 1CSS 2CSS 2.1CSS 3

ОписаниС

УстанавливаСт ΡΡ‚ΠΈΠ»ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π²ΠΎΠΊΡ€ΡƒΠ³ элСмСнта. Допустимо Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ стили для Ρ€Π°Π·Π½Ρ‹Ρ… сторон элСмСнта.

Бинтаксис

border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | inherit

ЗначСния

Для управлСния Π²ΠΈΠ΄ΠΎΠΌ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ прСдоставляСтся нСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ свойства border-style. Π’ΠΈΠ΄ зависит ΠΎΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρ‹ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹. Π’ Ρ‚Π°Π±Π».Β 1 ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ названия стилСй ΠΈ получаСмая Ρ€Π°ΠΌΠΊΠ° ΠΏΡ€ΠΈ Ρ€Π°Π·Π½Ρ‹Ρ… значСниях Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρ‹Β β€” 1, 3, 5 ΠΈ 7 пиксСлов.

Π’Π°Π±Π». 1. Π’ΠΈΠ΄ Ρ€Π°ΠΌΠΊΠΈ Π² зависимости ΠΎΡ‚ стиля ΠΈ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρ‹ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ элСмСнта
1 пиксСл3 пиксСла5 пиксСлов7 пиксСлов

dotted

dotted

dotted

dotted

dashed

dashed

dashed

dashed

solid

solid

solid

solid

double

double

double

double

groove

groove

groove

groove

ridge

ridge

ridge

ridge

inset

inset

inset

inset

outset

outset

outset

outset

ΠšΡ€ΠΎΠΌΠ΅ пСрСчислСнных Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова.

none
НС ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ ΠΈ Π΅Π΅ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Π° (border-width) задаСтся Π½ΡƒΠ»Π΅Π²ΠΎΠΉ.
hidden
Π˜ΠΌΠ΅Π΅Ρ‚ Ρ‚ΠΎΡ‚ ΠΆΠ΅ эффСкт, Ρ‡Ρ‚ΠΎ ΠΈ none Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ примСнСния border-style ΠΊ ячСйкам Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства border-collapse установлСно ΠΊΠ°ΠΊ collapse. Π’ этом случаС Π²ΠΎΠΊΡ€ΡƒΠ³ ячСйки Π³Ρ€Π°Π½ΠΈΡ†Π° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π²ΠΎΠΎΠ±Ρ‰Π΅.
inherit
НаслСдуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ родитСля.

Π Π°Π·Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎ, Π΄Π²Π°, Ρ‚Ρ€ΠΈ ΠΈΠ»ΠΈ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ значСния, раздСляя ΠΈΡ… ΠΌΠ΅ΠΆΠ΄Ρƒ собой ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠΌ. Π­Ρ„Ρ„Π΅ΠΊΡ‚ зависит ΠΎΡ‚ количСства ΠΈ ΡƒΠΊΠ°Π·Π°Π½ Π² Ρ‚Π°Π±Π».Β 2.

Π’Π°Π±Π». 2. Π—Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π° использования ΠΎΡ‚ числа Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ
Число Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉΠ Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚
1Π‘Ρ‚ΠΈΠ»ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π΄Π°Π½ для всСх сторон элСмСнта.
2ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ устанавливаСт ΡΡ‚ΠΈΠ»ΡŒ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹, Π²Ρ‚ΠΎΡ€ΠΎΠ΅Β β€” Π»Π΅Π²ΠΎΠΉ ΠΈ ΠΏΡ€Π°Π²ΠΎΠΉ.
3ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Π΅Ρ‚ ΡΡ‚ΠΈΠ»ΡŒ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹, Π²Ρ‚ΠΎΡ€ΠΎΠ΅Β β€” ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π»Π΅Π²ΠΎΠΉ ΠΈ ΠΏΡ€Π°Π²ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹, Π° Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅Β β€” Π½ΠΈΠΆΠ½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹.
4ΠŸΠΎΠΎΡ‡Π΅Ρ€Π΅Π΄Π½ΠΎ устанавливаСтся ΡΡ‚ΠΈΠ»ΡŒ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ, ΠΏΡ€Π°Π²ΠΎΠΉ, Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΈ Π»Π΅Π²ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-style</title>
  <style>
   p { 
    border-style: double; /* Π‘Ρ‚ΠΈΠ»ΡŒ Π»ΠΈΠ½ΠΈΠΈ Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Π° */
    padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */
   }
  </style> 
 </head> 
 <body> 
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 </body> 
</html>

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° рис. 1.

Рис. 1. ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ свойства border-style

ΠžΠ±ΡŠΠ΅ΠΊΡ‚Π½Π°Ρ модСль

[window.]document.getElementById(«elementID»).style.borderStyle

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ Internet Explorer Π΄ΠΎ ΡˆΠ΅ΡΡ‚ΠΎΠΉ вСрсии Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Π΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ 1px ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ dotted ΠΊΠ°ΠΊ dashed. ΠŸΡ€ΠΈ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Π΅ 2px ΠΈ Π²Ρ‹ΡˆΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ dotted Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ. Π­Ρ‚Π° ошибка исправлСна Π² IE7, Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для всСх Π³Ρ€Π°Π½ΠΈΡ† Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½ΠΎΠΉ 1px. Если ΠΎΠ΄Π½Π° ΠΈΠ· Π³Ρ€Π°Π½ΠΈΡ† Π±Π»ΠΎΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρƒ 2px ΠΈ Π²Ρ‹ΡˆΠ΅, Ρ‚ΠΎ Π² IE7 Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ dotted прСвращаСтся Π² dashed.

Internet Explorer Π΄ΠΎ вСрсии 7.0 Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ значСния hidden ΠΈ inherit.

Π‘Ρ‚ΠΈΠ»ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΌΠΎΠΆΠ΅Ρ‚ нСсколько Ρ€Π°Π·Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ использовании Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ groove, ridge, inset ΠΈΠ»ΠΈ outset.

Π“Ρ€Π°Π½ΠΈΡ†Ρ‹

CSS ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅

  • border-style

Π‘Ρ‚Π°Ρ‚ΡŒΠΈ ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅

Π Π΅Ρ†Π΅ΠΏΡ‚Ρ‹ CSS

43 CSS Borders

ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π½Π½Ρ‹Ρ… бСсплатных ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΊΠΎΠ΄Π° HTML ΠΈ CSS border ΠΈΠ· Codepen, GitHub ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… рСсурсов. ОбновлСниС майской ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ 2021 Π³ΠΎΠ΄Π°. 15 Π½ΠΎΠ²Ρ‹Ρ… ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚ΠΎΠ².

  1. Анимация Π³Ρ€Π°Π½ΠΈΡ† CSS
О кодС

АнимированноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

Π“Ρ€Π°Π½ΠΈΡ†Π° с частичным Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ

Π“Ρ€Π°Π½ΠΈΡ†Π° с частичным Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ, ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰Π°Ρ ΠΊΡ€ΡƒΠ³Π»ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ коничСского Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° CSS ΠΈ маски Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

ГрадиСнтная Ρ€Π°ΠΌΠΊΠ° со скруглСнными ΡƒΠ³Π»Π°ΠΌΠΈ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

Π“Ρ€Π°Π½ΠΈΡ†Π° Ρ„ΠΎΠ½Π°

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

Π Π°ΠΌΠΊΠΈ с рисунком

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠ°Ρ пунктирная Ρ€Π°ΠΌΠΊΠ°

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

ΠšΡ€Π°ΡΠΎΡ‡Π½Π°Ρ Ρ€Π°ΠΌΠΊΠ°

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

ГрадиСнтная Ρ€Π°ΠΌΠΊΠ° + ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Ρ„ΠΎΠ½

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

Π›ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ + Радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

Π‘ ΠΊΠΎΠ΄

Угловая Ρ€Π°ΠΌΠΊΠ°

Π“Ρ€Π°Π½ΠΈΡ†Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΡƒΠ³Π»ΠΎΠ² (позволяСт Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½ΠΈΠ΅ ΡƒΠ³Π»ΠΎΠ² ΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½ΡƒΡŽ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ).

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

8-Π±ΠΈΡ‚Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

8-битная Π³Ρ€Π°Π½ΠΈΡ†Π° пиксСля

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π°Π²Π°Ρ‚Π°Ρ€Π°. 15 объявлСний, 1 элСмСнт, Π±Π΅Π· псСвдонимов

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ SVG для

border-image

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹Π΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ CSS

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

Π“Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

НСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ радиуса Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

Π’Ρ‹, Π½Π°Π²Π΅Ρ€Π½ΠΎΠ΅, Π·Π½Π°Π»ΠΈ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ border-radius элСмСнта Π² 4 значСния, ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ сокращСниС, ΠΎΠ½ ΠΈΠ΄Π΅Ρ‚ ΠΏΠΎ часовой стрСлкС свСрху, справа, снизу, слСва. Но Π·Π½Π°Π΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹, Ρ‡Ρ‚ΠΎ Π½Π° самом Π΄Π΅Π»Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΄ΠΎ 8 Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, Ссли ΠΈΡ… Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ? ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ 2 значСния, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

Π“Ρ€Π°Π½ΠΈΡ†Π° CSS Candy Stripe с использованиСм Clip-Path

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΡƒΡŽ ΠΏΠΎΠ»ΠΎΡΠ°Ρ‚ΡƒΡŽ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства clip-path для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта списка Π² ul . ΠžΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ высоту, Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΈ Ρ†Π²Π΅Ρ‚ полос.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΈ ΠΊΠ°Π΄Ρ€ XOR: Lively

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

ΠŸΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½Π°Ρ винтаТная Ρ€Π°ΠΌΠΊΠ° с нСсколькими Ρ€Π°ΠΌΠΊΠ°ΠΌΠΈ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: bootstrap. css

О кодС

ГрадиСнтная Π³Ρ€Π°Π½ΠΈΡ†Π°

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

Π¨Π°Π±Π»ΠΎΠ½Ρ‹ ΠΊΡ€ΡƒΠ³ΠΎΠ²Ρ‹Ρ… Ρ€Π°ΠΌΠΎΠΊ Π½Π° чистом CSS

Π¨Π°Π±Π»ΠΎΠ½Ρ‹ Π³Ρ€Π°Π½ΠΈΡ† ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ clip-path Π½Π° псСвдоэлСмСнтС.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

Π‘ ΠΊΠΎΠ΄

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ способ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π±ΠΎΡ€Π΄ΡŽΡ€Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

Π“Ρ€Π°Π½ΠΈΡ†Π°, вдохновлСнная ΠΊΠ°Ρ€Ρ‚ΠΎΠΉ

Π’Π΄ΠΎΡ…Π½ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΠΉ эффСкт Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ с использованиСм слоТСнных Π³Ρ€Π°Π½ΠΈΡ† ΠΈ Ρ‚Π΅Π½Π΅ΠΉ . Один элСмСнт HTML с CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

Размытая Π³Ρ€Π°Π½ΠΈΡ†Π°

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: —

О кодС

Π’ΠΎΠ»ΡˆΠ΅Π±Π½Ρ‹Π΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ΠΈ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ с Π³Ρ€Π°Π½ΠΈΡ†Π°ΠΌΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ ячСйками.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О кодС

Π“Ρ€Π°Π½ΠΈΡ†Π° ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ

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

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О кодС

ГрадиСнтная Ρ€Π°ΠΌΠΊΠ°

HTML ΠΈ CSS градиСнтная Π³Ρ€Π°Π½ΠΈΡ†Π° Π±Π΅Π· псСвдоэлСмСнтов.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О кодС

ЗакруглСнная сторона

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О кодС

Анимированная Ρ€Π°ΠΌΠΊΠ° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

ΠšΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ° с Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΉ Π»Π΅Π²ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Π΅ΠΉ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ .

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О кодС

CSS Quote Box Hover Effects

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: font-awesome. css

О кодС

SVG ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ€Π°ΠΌΠΊΠΈ для ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌ ΡƒΠ³Π»ΠΎΠ² с Ρ‚Π΅Π½ΡŒΡŽ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: —

О кодС

Эскизная Π³Ρ€Π°Π½ΠΈΡ†Π°

ИспользованиС 8 радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ 9ЗначСния 0158 ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ довольно ΠΊΡ€ΡƒΡ‚Ρ‹ΠΌΠΈ. Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ Π΅Π³ΠΎ использованиС для элСмСнта ΠΈ Π΅Π³ΠΎ псСвдоэлСмСнта ::before ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ повСрхностный внСшний Π²ΠΈΠ΄.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: -

О кодС

CSS Gradient Clip-Path Borders

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство CSS clip-path для создания Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹Ρ… Π³Ρ€Π°Π½ΠΈΡ† Ρ€Π°Π·Π»ΠΈΡ‡Π½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

Зависимости: -

О кодС

CSS Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹Π΅ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Π΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ CSS-Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Π΅ .

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: -

О кодС

ΠŸΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π½Π°Ρ вставка

ΠŸΠΎΠΏΡ‹Ρ‚ΠΊΠ° Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ эффСкта Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π²ΠΎΠΊΡ€ΡƒΠ³ Π±Π»ΠΎΠΊΠ° тСкста.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: -

О кодС

НСобычная ΠΊΠΎΡ€ΠΎΠ±ΠΊΠ° для Π±ΠΎΡ€Π΄ΡŽΡ€Π°

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: -

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ рисованной Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

Π’Π΅Ρ…Π½ΠΈΠΊΠ° ΠΎΠ΄Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ радиуса Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ .

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: -

О кодС

Зубчатая Π³Ρ€Π°Π½ΠΈΡ†Π°

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: -

О кодС

8-Π±ΠΈΡ‚Π½Ρ‹Π΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ с использованиСм Ρ‚Π΅Π½Π΅ΠΉ

8-Π±ΠΈΡ‚Π½Ρ‹Π΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ с использованиСм Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ‚Π΅Π½Π΅ΠΉ CSS3 ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Sass.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: -

О кодС

Π“Ρ€Π°Π½ΠΈΡ†Π° Π² стилС комиксов

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: -

О кодС

ΠŸΠ»Π΅Ρ‚Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΊΡ€Π°ΡŽ ΠΈ радиусу

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Зависимости: -

20+ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„ΠΎΡ‚ΠΎΡ€Π°ΠΌΠΎΠΊ Π½Π° CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ прямо сСйчас

DigitalOcean прСдоставляСт ΠΎΠ±Π»Π°Ρ‡Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ этапа вашСго ΠΏΡƒΡ‚Π΅ΡˆΠ΅ΡΡ‚Π²ΠΈΡ. НачнитС с бСсплатного ΠΊΡ€Π΅Π΄ΠΈΡ‚Π° Π² Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅ 200Β Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² БША!

Π­Ρ‚ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Ρ€Π°ΠΌΠΊΠΈ для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ CSS ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² вашСм Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. Код прост для понимания ΠΈ использования, поэтому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° Π½Π΅ΠΌ. Π― ΠΌΠΎΠ³ Π±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚Π°, Π½ΠΎ это всС.

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ css ΠΊΠ°Π΄Ρ€Ρ‹ ΠΎΡ‚ Kkin (@wwyfmrqj-the-looper) Π½Π° КодПСнС.

НазваниС:- cssframes


Автор:- Kkin
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML JS

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ РСалистичная Ρ„ΠΎΡ‚ΠΎΡ€Π°ΠΌΠΊΠ° ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ элСмСнта ΠΎΡ‚ Joe (@dope) Π½Π° КодПСнС.

НазваниС:- РСалистичная Ρ„ΠΎΡ‚ΠΎΡ€Π°ΠΌΠΊΠ° ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ элСмСнта


Автор:- Joe
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML JS

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ Бэнкси Π¨Ρ€Π΅Π΄Π΄Π΅Ρ€ Π›ΠΈ ΠœΠ°Ρ€Ρ‚ΠΈΠ½Π° (@leemartin) Π½Π° КодПСнС.

НазваниС:- Бэнкси Π¨Ρ€Π΅Π΄Π΅Ρ€


Автор:- Π›ΠΈ ΠœΠ°Ρ€Ρ‚ΠΈΠ½
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML JS

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ CSS Ρ„ΠΎΡ‚ΠΎΡ€Π°ΠΌΠΊΠ° ΠšΡ€ΠΈΡΠ° Π‘ΠΌΠΈΡ‚Π° (@chris22smith) Π½Π° КодПСнС.

НазваниС: CSS Picture Frame


Автор: ΠšΡ€ΠΈΡ Π‘ΠΌΠΈΡ‚
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML JS

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ Css Only picture Frame ΠΎΡ‚ Lasse Diercks (@lassediercks) Π½Π° КодПСнС.

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ:- CSS Волько Ρ„ΠΎΡ‚ΠΎΡ€Π°ΠΌΠΊΠ°


Автор:- ЛассС Диркс
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML JS

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π½Π°Ρ Ρ€Π°ΠΌΠΊΠ°-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: адаптивная Ρ€Π°ΠΌΠΊΠ° для Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ ΠΎΡ‚ Dudley Storey (@dudleystorey) Π½Π° КодПСнС.

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ:- ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠ°Ρ Ρ€Π°ΠΌΠΊΠ°-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: адаптивная Ρ€Π°ΠΌΠΊΠ°


Автор:- Π”Π°Π΄Π»ΠΈ Π‘Ρ‚ΠΎΡ€ΠΈ
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML JS

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ Мини-ΠΈΠ³Ρ€Π° GSAP β€” Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²ΠΏΡ€Π°Π²ΠΎ АлСкса Вроста (@a-trost) Π½Π° КодПСнС.

НазваниС:- Мини-ΠΈΠ³Ρ€Π° GSAP – Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²ΠΏΡ€Π°Π²ΠΎ


Автор:- Alex Trost
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML JS

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ Π€ΠΎΡ‚ΠΎΡ€Π°ΠΌΠΊΠ° ДТСнис (@janiceshaw) Π½Π° КодПСнС.

НазваниС:- Π€ΠΎΡ‚ΠΎΡ€Π°ΠΌΠΊΠ°


Автор:- ДТСнис
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML JS

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ ГалСрСя Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π±Π΅Π· мСдиазапросов ΠΎΡ‚ RΓΌdiger Alte (@drralte) Π½Π° КодПСнС.

НазваниС:- ГалСрСя Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π±Π΅Π· ΠΌΠ΅Π΄ΠΈΠ°-запросов


Автор:- RΓΌdiger Alte
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML JS

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ Fun With Shapes β€” 100 Days of Code β€” Pen 10 Π ΠΈΠΊΠΈ Π­ΠΊΡ…Π°Ρ€Π΄Ρ‚ (@rickyeckhardt) Π½Π° КодПСнС.

НазваниС: Fun With Shapes β€” 100 Days of Code β€” Pen 10


Автор: β€” Ricky Eckhardt
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML JS

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ Π€ΠΎΡ‚ΠΎΡ€Π°ΠΌΠΊΠ° Pure CSS3 ΠΎΡ‚ Брайса Π‘Π½Π°ΠΉΠ΄Π΅Ρ€Π° (@brycesnyder) Π½Π° КодПСнС.

НазваниС: Pure CSS3 Picture Frame


Автор: Брайс Π‘Π½Π°ΠΉΠ΄Π΅Ρ€
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML JS

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ Π Π°ΠΌΠΊΠ° для Ρ„ΠΎΡ‚ΠΎ KUCKLU (@kuck1u) Π½Π° КодПСнС.

НазваниС:- Π€ΠΎΡ‚ΠΎΡ€Π°ΠΌΠΊΠ°


Автор:- KUCKLU
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML JS

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ РадуТная Ρ€Π°ΠΌΠΊΠ° ΠΎΡ‚ @TimLamber (@TimLamber) Π½Π° КодПСнС.

НазваниС:- радуТная Ρ€Π°ΠΌΠΊΠ°


Автор:- @TimLamber
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML JS

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ Π€ΠΎΡ‚ΠΎΡ€Π°ΠΌΠΊΠ° Light House Reflection ΠΎΡ‚ S G (@gssssssssss) Π½Π° КодПСнС.

НазваниС:- Light House Reflection Picture Frame


Автор:- S G
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML JS
DEMO

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ Π€ΠΎΡ‚ΠΎΡ€Π°ΠΌΠΊΠ° Pure CSS ΠΎΡ‚ Π”ΠΆΠΎΡˆΡƒΠ° Π₯ΠΈΠ±Π±Π΅Ρ€Ρ‚Π° (@joshnh) Π½Π° КодПСнС.

НазваниС: Pure CSS Picture Frame


Автор: Π”ΠΆΠΎΡˆΡƒΠ° Π₯ΠΈΠ±Π±Π΅Ρ€Ρ‚
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML JS
DEMO

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ ДинамичСскоС ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Ρ„ΠΎΡ‚ΠΎΡ€Π°ΠΌΠΊΠΈ ΠΎΡ‚ micalexander (@micalexander) Π½Π° КодПСнС.

НазваниС:- ДинамичСская Ρ„ΠΎΡ‚ΠΎΡ€Π°ΠΌΠΊΠ°


Автор:- micalexander
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML JS
DEMO

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ РадуТная Ρ€Π°ΠΌΠΊΠ° ΠΎΡ‚ Bailh (@cathbailh) Π½Π° КодПСнС.

НазваниС:- Rainbow Frame


Автор:- Bailh
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML JS
DEMO

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΊΠΎΠ²Ρ€ΠΈΠΊΠ° ΠΈ Ρ€Π°ΠΌΠΊΠΈ изобраТСния с использованиСм CSS-Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΈ Ρ‚Π΅Π½Π΅ΠΉ ΠΎΡ‚ Anni Lou (@AnniLou) Π½Π° КодПСнС.

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ: Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΌΠ°Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния ΠΈ Ρ€Π°ΠΌΠΊΠΈ с использованиСм CSS-Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΈ Ρ‚Π΅Π½Π΅ΠΉ


Автор:- Anni Lou
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML JS
DEMO

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ 3D Picture Box ΠΎΡ‚ Пола (@Jiminibob) Π½Π° КодПСнС.

НазваниС:- 3D Picture Box


Автор:- Paul
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML JS
DEMO

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ CSS 3-D скошСнная Ρ„ΠΎΡ‚ΠΎΡ€Π°ΠΌΠΊΠ° Π”ΠΆΠΎΠ½Π° Бковронски (@john_skowronski) Π½Π° КодПСнС.

НазваниС: CSS 3-D Beveled Picture Frame


Автор: John Skowronski
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML
DEMO

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ ΠšΠ°Ρ€Ρ‚ΠΈΠ½Π½Π°Ρ галСрСя Flickr А. Π€. ΠŸΠ΅Ρ€Π΅ΡΠ° (@anfperez) Π½Π° КодПСнС.

НазваниС:- ΠšΠ°Ρ€Ρ‚ΠΈΠ½Π½Π°Ρ галСрСя Flickr


Автор:- А. Π€. ΠŸΠ΅Ρ€Π΅Ρ
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML
DEMO

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ Π­Ρ„Ρ„Π΅ΠΊΡ‚ Ρ„ΠΎΡ‚ΠΎΡ€Π°ΠΌΠΊΠΈ с псСвдоэлСмСнтами ΠΎΡ‚ Christopher Ware (@christopherware) Π½Π° КодПСнС.

НазваниС: Π­Ρ„Ρ„Π΅ΠΊΡ‚ Ρ€Π°ΠΌΠΊΠΈ изобраТСния с псСвдоэлСмСнтами


Автор: ΠšΡ€ΠΈΡΡ‚ΠΎΡ„Π΅Ρ€ Уэр
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML
Π”Π•ΠœΠž

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ Π Π°ΠΌΠΊΠ° для Ρ„ΠΎΡ‚ΠΎ CSS3 ΠΎΡ‚ Metallizer (@Metallizer) Π½Π° КодПСнС.

НазваниС:- CSS3 Ρ„ΠΎΡ‚ΠΎΡ€Π°ΠΌΠΊΠ°


Автор:- Metallizer
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML
DEMO

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ Pure CSS Picture Frame ΠΎΡ‚ Brian Gioia (@Brian_Gioia) Π½Π° КодПСнС.

НазваниС: Pure CSS Picture Frame


Автор: Brian Gioia
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML
DEMO

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ ГалСрСя Ρ„ΠΎΡ‚ΠΎΡ€Π°ΠΌΠΎΠΊ Π”ΠΆΠΎΡˆΠ° Π₯икса (@JHicks) Π½Π° КодПСнС.

НазваниС:- Π€ΠΎΡ‚ΠΎΡ€Π°ΠΌΠΊΠ° ГалСрСя


Автор:- Π”ΠΆΠΎΡˆ Π₯икс
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML
DEMO

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ Π‘Π΅Π· названия, Π°Π²Ρ‚ΠΎΡ€: восСмьarmshq (@EightArmsHQ) Π½Π° КодПСнС.

НазваниС:- Untitled


Автор:- восСмьarmshq
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML
DEMO

БКАЧАВЬ

Π‘ΠΌ. ΠΏΠ΅Ρ€ΠΎ Π€ΠΎΡ‚ΠΎΡ€Π°ΠΌΠΊΠ° Π ΠΈΠΊΠΈ Π­ΠΊΡ…Π°Ρ€Π΄Ρ‚Π° (@rickyeckhardt) Π½Π° КодПСнС.

НазваниС:- Picture Frame


Автор:- Ricky Eckhardt
Π‘Π΄Π΅Π»Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS HTML
DEMO

БКАЧАВЬ

Π‘ΠΌ.

Comments