Π Π°Π·Π½ΠΎΠ΅

Css ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ: Π Π°Π±ΠΎΡ‚Π° с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ (изобраТСниями) Π² CSS

28.04.2021

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

Π‘ΠΈΡ‚Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ vs CSS

ΠŸΠ΅Ρ€Π΅Ρ„Ρ€Π°Π·ΠΈΡ€ΡƒΡ устойчивоС Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: broken image happens. И Ρ€Π°Π· ΡƒΠΆ ΠΎΠ½ΠΈ всС Ρ€Π°Π²Π½ΠΎ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΡΠ²ΠΈΡ‚ΡŒΡΡ Π½Π° вашСм сайтС, Ρ‚ΠΎ с Π½ΠΈΠΌΠΈ Π½ΡƒΠΆΠ½ΠΎ Ρ‡Ρ‚ΠΎ Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ, Ρ‚.Π΅. ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ управлСния ΠΈΡ… внСшним Π²ΠΈΠ΄ΠΎΠΌ, вмСсто стандартного повСдСния Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ возмоТности JS, Π³Π΄Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π»Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ события onerror ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° window, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π»ΡŽΠ±ΡƒΡŽ Π»ΠΎΠ³ΠΈΠΊΡƒ дальнСйшСго повСдСния (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΠΎΡ‚ΠΎΠΊΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ„Ρ€ΠΎΠ½Ρ‚-Π΅Π½Π΄ ошибок Π½Π° сСрвСрС). ΠœΡ‹ остановимся Π½Π° CSS Ρ‚Ρ€ΡŽΠΊΠ°Ρ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ наши Π±ΠΈΡ‚Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

ΠžΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠΌ исслСдования станСт ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ HTML ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

<img src=»Π‘Π»ΠΎΠΌΠ°Π½Π½Ρ‹ΠΉ ΡƒΡ€Π»» alt=»Broken image» />

<img

Β Β  src=»Π‘Π»ΠΎΠΌΠ°Π½Π½Ρ‹ΠΉ ΡƒΡ€Π»»

Β Β 

Β Β 

Β Β  alt=»Broken image» />

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° Ρ‚Π°ΠΊΠΎΠ³ΠΎ <IMG> (Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΠΎΠΉ для Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ²) Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π² Π½Π°Ρ‡Π°Π»Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ.

ΠŸΡ€ΡΡ‡Π΅ΠΌ ΠΊΠ°Π»Π΅ΠΊΡƒ

ΠŸΠ΅Ρ€Π²ΠΎΠ΅ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ β€” это ΡΠΏΡ€ΡΡ‚Π°Ρ‚ΡŒ ΠΏΠΎΠΊΠ°Π»Π΅Ρ‡Π΅Π½Π½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅, пустой ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ выглядит Π»ΡƒΡ‡ΡˆΠ΅. Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ это просто:

img { text-indent: -10000px; }

img {

Β Β text-indent: -10000px;

}

Если ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΏΡ€ΠΎΠ³Ρ€ΡƒΠ·ΠΈΠ»ΠΎΡΡŒ, Ρ‚ΠΎ вмСсто Π½Π΅Ρ‘ Π±ΡƒΠ΄Π΅Ρ‚ пустоС пространство.

ЗамСняСм Π±ΠΈΡ‚ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ своим ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ

Аналогично Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ сайты ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π½ΡƒΡŽ страницу вмСсто стандартной 404ΠΉ ошибки, Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π·Π΄ΠΎΡ€ΠΎΠ²ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ вмСсто Π±ΠΈΡ‚ΠΎΠ³ΠΎ изобраТСния.

Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с надписью β€” Β«ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° подготавливаСтся», Ρ‚ΡƒΡ‚ ваша фантазия Π΄ΠΎΠ»ΠΆΠ½Π° Π²Π°ΠΌ ΠΏΠΎΠ΄ΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Π³Ρ€Π°Ρ‚ΡŒ Π΄Π°Π½Π½ΡƒΡŽ ΡΠΈΡ‚ΡƒΠ°Ρ†ΠΈΡŽ.

Β«Π Π΅Π·Π΅Ρ€Π²Π½ΠΎΠ΅Β» ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ цСпляСтся ΠΊΠ°ΠΊ background-image самого Ρ‚Π΅Π³Π° IMG ΠΈΠ»ΠΈ Π΅Π³ΠΎ псСвдо-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ². ΠŸΡ€ΠΈΠΌΠ΅Ρ€ стилСй:

img { position: relative; } img::before { width: 100%; height: 100%; position: absolute; content: «»; background: #fff url(https://ВАША-КАРВИНКА) center center no-repeat; background-size: contain; }

img {

Β Β position: relative;

}

Β 

img::before {

Β Β width: 100%;

Β Β height: 100%;

Β Β position: absolute;

Β Β content: «»;

Β Β background: #fff url(https://ВАША-КАРВИНКА) center center no-repeat;

Β Β background-size: contain;

}

По сути ясно, Ρ‡Ρ‚ΠΎ сам ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ IMG ΠΈ Π΅Π³ΠΎ псСвдо-элСмСнты, ΠΈΠ΄ΡƒΡ‚ ΠΏΠΎΠ²Π΅Ρ€Ρ… слоя Β«Π±ΠΈΡ‚ΠΎΠΉΒ» ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, ΠΈ, Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΌΠ°ΡΠΊΠΈΡ€ΡƒΡŽΡ‚ Π΅Ρ‘ ΠΎΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

Как Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ Π΄Π²Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML-CSS?



Π― искал нСсколько часов ΠΈ Π½Π΅ нашСл Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ своСй ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹.

Π― Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ Π΄Π²Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ, нСсмотря Π½Π° дСсятки ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠΎΠ² ΠΏΠΎ этому ΠΏΠΎΠ²ΠΎΠ΄Ρƒ, я Π½Π΅ ΡΠΎΠ±ΠΈΡ€Π°ΡŽΡΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΡ… ΠΊ своСму Π΄Π΅Π»Ρƒ.

Π― Π±Ρ‹Π» Π² состоянии Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· эти ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠΈ, CSS ΠΈΠΌΠ΅Π΅Ρ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ «z-index», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π² Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… изобраТСниях. Π― Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ свойство Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ полоТСния, Π½ΠΎ я Π½Π΅ ΡƒΠ²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠ΅ΠΉ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ связано с этими свойствами.

Π²ΠΎΡ‚ Ρ‚Π° Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠΎΠ΄Π°, Π³Π΄Π΅ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ своСй ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹:

<img src='schema.png'>
<a href="#"><img src='Linkedin.png' ></a>
<a href="#"><img src='twitter.png'  ></a> 

Π²ΠΎΡ‚ ΠΌΠΎΠΉ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ html:

<!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="menuStyle.css" />
    <title>Antoine</title>
 </head>
<body>
    <div>
        <header>
            <div>
                    <h2>Titre</span></h2>    
                    <h3>Sous titre</h3>
                    <br>
            </div>
        </header>
        <ul>
                <li><a href="#">menu 1 ?</a></li>
                <li><a href="#">menu 2</a></li>
                <li><a href="#">menu 3</a></li>
                <li><a href="#">menu 4</a></li>
        </ul>
            <img src='schema.png'>
            <a href="#"><img src='Linkedin.png' ></a>
            <a href="#"><img src='twitter.png'  ></a> 
        <ul>
            <br>
                <li><a href="#">Plan du site</a></li>
                <li><a href="#">Mentions lΓ©gales</a></li>
                <li><a href="#">Nous contacter</a></li>
        <ul>
    </div>
</body>

Π—Π°Ρ€Π°Π½Π΅Π΅ Π±Π»Π°Π³ΠΎΠ΄Π°Ρ€ΡŽ вас Π·Π° Π²Π°ΡˆΡƒ ΠΏΠΎΠΌΠΎΡ‰ΡŒ.

html css image z-index
ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ Millet Antoine Β  Β  26 мая 2016 Π² 08:51

3 ΠΎΡ‚Π²Π΅Ρ‚Π°




4

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

.top {
  position: absolute;
  left: 100px;
  top: 100px;
  border: 1px solid black;
  z-index: 1;
 }
<div>

<img src="http://placehold.it/150x150">
<img src="http://placehold.it/150x150">

</div>

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Nil Llisterri Β  Β  26 мая 2016 Π² 09:00



1

На самом Π΄Π΅Π»Π΅ эти свойства-ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Допустим, ваши изобраТСния ΠΈΠΌΠ΅ΡŽΡ‚ класс .overlay-img . ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ ΠΈΡ… Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ с классом .img-container .

.img-container {
  position: relative;
}

.overlay-img {
  position: absolute;
  top: 0;
  left: 0;
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ изобраТСния Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π΅. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойство z-index , Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ… находится свСрху. Π§Π΅ΠΌ Π²Ρ‹ΡˆΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ Π΄Π°Π΅Ρ‚Π΅, Ρ‚Π΅ΠΌ Π²Ρ‹ΡˆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ элСмСнт.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ваш ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ располоТСн ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, всС Π΅Π³ΠΎ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π±ΡƒΠ΄ΡƒΡ‚ располоТСны ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅Π³ΠΎ, Π° Π½Π΅ всСй страницы.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ GMchris Β  Β  26 мая 2016 Π² 08:59



1

Π‘Π½Π°Ρ‡Π°Π»Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ваши изобраТСния. НапримСр, это ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ div .

Π­Ρ‚ΠΎΡ‚ элСмСнт Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ position: relative . ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ Ρ‚ΡƒΠ΄Π° свои изобраТСния с position: absolute ΠΈ установитС top: 0; left:0 .

Π”Π°Π»Π΅Π΅ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ z-index , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ²Π΅Ρ€Ρ… Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ.

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π² основном Ρƒ вас Π±ΡƒΠ΄Π΅Ρ‚ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅:

<div>
  <img src='schema.png'>
  <img src='Linkedin.png' >
  <img src='twitter.png'  >
</div>

Π° Π² вашСм css Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

.container{
  position: relative;
}
.container > img{
  position: absolute;
  top:0;
  left:0;
}
.container > img:first-child{
  z-index: 2;
}

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ свойства, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ width, height, overflow, display , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΆΠ΅Π»Π°Π΅ΠΌΡ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚.

Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ распространСнная Π²Π΅Ρ‰ΡŒ Π² HTML, ΠΈ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅ Π΅Π΅ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ (css ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ наслСдованиС), Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ это Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠ·ΠΆΠ΅.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Charleshaa Β  Β  26 мая 2016 Π² 09:04


  • Как я ΠΌΠΎΠ³Ρƒ Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ Π΄Π²Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² CSS?

    Π― Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΄Π²Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅ мСсто Π½Π° Π²Π΅Π± — страницС-Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π° (ΠΏΠΎΠ·ΠΆΠ΅ я добавлю нСсколько Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ webkit, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ двигались Π² Π΄Π²ΡƒΡ… Ρ€Π°Π·Π½Ρ‹Ρ… направлСниях, Π½ΠΎ Π½Π°Ρ‡Π°Π»ΡŒΠ½Π°Ρ Ρ‚ΠΎΡ‡ΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ). Π£ мСня Π΅ΡΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ css (Π²ΠΎΡ‚ jsfiddle ). CSS здСсь выглядит…

  • Как Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π° html Π½Π° ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ jQuery?

    Π£ мСня Π΅ΡΡ‚ΡŒ стороннСС Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для опроса. Один вопрос просит ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ввСсти Π½ΠΎΠΌΠ΅Ρ€. ВмСсто этого я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚Π°ΠΌ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ, Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Ρ‡Π΅Π³ΠΎ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π½Π° числовой шкалС ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½ΠΎ Π² ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π° чисСл прилоТСния. Π― Π½Π΅ ΠΌΠΎΠ³Ρƒ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ HTML, ΠΏΠΎΡΡ‚ΡƒΠΏΠ°ΡŽΡ‰ΠΈΠ΅ ΠΈΠ·…


ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ вопросы:


Как Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΎΠ΄Π½Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ?

Какой Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ способ Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΎΠ΄Π½Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ Π² HTML, CSS ΠΈΠ»ΠΈ jQuery?


Как Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΎΠ΄Π½Ρƒ Ρ„ΠΎΡ€ΠΌΡƒ Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ?

Как Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΎΠ΄Π½Ρƒ Ρ„ΠΎΡ€ΠΌΡƒ Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ Π² C#?


Как я ΠΌΠΎΠ³Ρƒ Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ нСсколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML/CSS ΠΈΠ»ΠΈ JavaScript, Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ position:absolute?

Π― Π»ΡŽΠ±ΠΈΡ‚Π΅Π»ΡŒ Google, ΠΈ поэтому я довольно Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ охотился Π²ΠΎΠΊΡ€ΡƒΠ³, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΡ€ΠΈΠ΅Ρ…Π°Ρ‚ΡŒ сюда. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, я просто Π½Π΅Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»Π΅Π½, ΠΈΠ»ΠΈ моя ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡ΠΊΠ° ΠΊ скиммингу возвращаСтся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΡƒΡΠΈΡ‚ΡŒ мСня, Π½ΠΎ я Π½Π΅…


Как Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с Ρ†Π²Π΅Ρ‚ΠΎΠΌ Π² CSS?

ЦСль Π― Ρ…ΠΎΡ‡Ρƒ Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π½Π° этот элСмСнт Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. Как я ΠΌΠΎΠ³Ρƒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это с CSS? Код HTML <header id=header> <div class=row> <div class=col-xs-12> … </div> </div>…


Как Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML, CSS

МоТно Π»ΠΈ Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ тСкст Π²Π½ΡƒΡ‚Ρ€ΠΈ <img> ? Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Π½ΠΈΠΆΠ΅. Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Bootstrap Π²ΠΎΡ‚ ΠΊΠ°ΠΊ я ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ: html <div…


Как я ΠΌΠΎΠ³Ρƒ Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ Π΄Π²Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² CSS?

Π― Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΄Π²Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅ мСсто Π½Π° Π²Π΅Π± — страницС-Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π° (ΠΏΠΎΠ·ΠΆΠ΅ я добавлю нСсколько Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ webkit, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ двигались Π² Π΄Π²ΡƒΡ… Ρ€Π°Π·Π½Ρ‹Ρ… направлСниях, Π½ΠΎ Π½Π°Ρ‡Π°Π»ΡŒΠ½Π°Ρ…


Как Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π° html Π½Π° ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ jQuery?

Π£ мСня Π΅ΡΡ‚ΡŒ стороннСС Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ для опроса. Один вопрос просит ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ввСсти Π½ΠΎΠΌΠ΅Ρ€. ВмСсто этого я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚Π°ΠΌ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ, Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Ρ‡Π΅Π³ΠΎ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π½Π° числовой…


Как я ΠΌΠΎΠ³Ρƒ Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ Π΄Π²Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ вмСстС Π² Java?

Π― ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ Π²Π·ΡΡ‚ΡŒ Π΄Π²Π° Π±ΡƒΡ„Π΅Ρ€ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹Ρ… изобраТСния ΠΈ Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΎΠ΄Π½ΠΎ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠ΅. НапримСр, я Ρ…ΠΎΡ‡Ρƒ Π½Π°Ρ‡Π°Ρ‚ΡŒ с этого изобраТСния Π² качСствС основы: Π—Π°Ρ‚Π΅ΠΌ я Ρ…ΠΎΡ‡Ρƒ Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ это ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ²Π΅Ρ€Ρ… Π½Π΅Π³ΠΎ: ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ…


Как Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ тСкст Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML Π±Π΅Π· CSS?

Π― Ρ…ΠΎΡ‚Π΅Π» ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡ€Π°Π·ΠΌΠ΅Ρ€Π½Ρ‹ΠΉ Π±Π°Π½Π½Π΅Ρ€ call-to-action Π½Π° Π²Π΅Π±-сайтС ΠΌΠΎΠ΅Π³ΠΎ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°. Π¨Π°Π±Π»ΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΅ΡΡ‚ΡŒ Ρƒ ΠΌΠΎΠ΅Π³ΠΎ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°, Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ CSS, поэтому я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ ΠΊΠ°ΠΊ ΡΡ‚Π°Ρ€ΡƒΡŽ ΡˆΠΊΠΎΠ»Ρƒ HTML для создания…


Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ всСго лишь HTML + CSS

Π― ΠΌΠΎΠ³Ρƒ ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML ΠΈ CSS. НаТав Π½Π° ΡΡ€Π΅Π΄Π½ΡŽΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, я Ρ…ΠΎΡ‡Ρƒ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π΅Π΅ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ справа ΠΈ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Π΅Π΅ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ.

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ Π±Π»ΠΎΠΊΠ°. CSS свойство object-fit

Часто Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ Π±Π»ΠΎΠΊΠ° с сохранСниСм ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ искаТалось. ΠŸΡ€ΠΈ этом Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π±Ρ‹Π²Π°Π΅Ρ‚ Π½ΡƒΠΆΠ΅Π½ Ρ€Π°Π·Π½Ρ‹ΠΉ. Иногда Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ всё пространство Π±Π»ΠΎΠΊΠ°. А ΠΈΠ½ΠΎΠ³Π΄Π° Π²Π°ΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ всю ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ. Для этого Π² CSS Π΅ΡΡ‚ΡŒ свойство object-fit. Оно ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ значСния:

object-fit: fill — ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° просто заполняСт Π±Π»ΠΎΠΊ Π±Π΅Π· сохранСния ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)

object-fit: cover — ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ заполняСт всё пространство Π±Π»ΠΎΠΊΠ°. ΠšΡ€Π°Ρ изобраТСния ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ±Ρ€Π΅Π·Π°Π½Ρ‹ ΠΈΠ· Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Ρ„ΠΎΡ€ΠΌΠ° Π±Π»ΠΎΠΊΠ° Π½Π΅ совпадаСт с Ρ„ΠΎΡ€ΠΌΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

object-fit: contain — вся ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° отобраТаСтся Π² Π±Π»ΠΎΠΊΠ΅. Π§Π°ΡΡ‚ΡŒ Π±Π»ΠΎΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π° ΠΈΠ· Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Ρ„ΠΎΡ€ΠΌΠ° Π±Π»ΠΎΠΊΠ° Π½Π΅ совпадаСт с Ρ„ΠΎΡ€ΠΌΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

object-fit: none — ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° отобраТаСтся Π² своём Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ ΠΌΠ°ΡΡˆΡ‚Π°Π±Π΅

object-fit: scale-down — соотвСтствуСт Π»ΠΈΠ±ΠΎ contain Π»ΠΈΠ±ΠΎ none. Из этих Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ мСньшС.

object-fit: initial — Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Ссли Ρ€Π°Π½Π΅Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π±Ρ‹Π»ΠΎ установлСно Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅

object-fit: inherit — Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ принимаСтся ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ использования свойства object-fit выглядит Ρ‚Π°ΠΊ:

fill

cover

contain

none

scale-down

КаТдоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства object-fit ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для своих Ρ†Π΅Π»Π΅ΠΉ:

  • cover примСняСтся Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π·Π°ΠΏΠΎΠ»Π½ΠΈΠ»Π° вСсь Π±Π»ΠΎΠΊ ΠΈ Π² Π½Ρ‘ΠΌ Π½Π΅ Π±Ρ‹Π»ΠΎ пустых пространств. НапримСр, это Π½ΡƒΠΆΠ½ΠΎ ΠΊΠΎΠ³Π΄Π° Π½Π° страницС нСсколько ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΈ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ стилС. Π£ всСх ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ одинаковая Ρ„ΠΎΡ€ΠΌΠ° ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹. Но Π½ΡƒΠΆΠ½ΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ Π²ΠΈΠ΄Π½Π°.
  • contain ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, Ссли Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ всю ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ. Но Ρ„ΠΎΡ€ΠΌΠ° Π±Π»ΠΎΠΊΠ° отличаСтся ΠΎΡ‚ Ρ„ΠΎΡ€ΠΌΡ‹ изобраТСния. Π§Π°ΡΡ‚ΡŒ Π±Π»ΠΎΠΊΠ° остаётся пустой. Π—Π°Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ растягиваСтся максимально, насколько позволяСт Π±Π»ΠΎΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠ³ Π΅Π³ΠΎ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ.
  • none Π½ΡƒΠΆΠ½Π° для спСцифичСских ситуаций, ΠΊΠΎΠ³Π΄Π° нСльзя ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Π½ΠΎ для Π½Π΅Ρ‘ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ΅ пространство Π½Π° страницС.
  • scale-down ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Ρ‚Π΅Ρ… ΠΆΠ΅ Ρ†Π΅Π»Π΅ΠΉ, Ρ‡Ρ‚ΠΎ contain. Но ΠΌΡ‹ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ мСньшС Π±Π»ΠΎΠΊΠ°. contain Π² этом случаС растянСт ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ Π±Π»ΠΎΠΊΠ° ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ получится Ρ€Π°Π·ΠΌΡ‹Ρ‚Ρ‹ΠΌ. А Π²ΠΎΡ‚ scale-down Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. И получится малСнькая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π² большом Π±Π»ΠΎΠΊΠ΅.

Π§Ρ‚ΠΎΠ±Ρ‹ свойство object-fit Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΎ, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹. Когда ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π² Π±Π»ΠΎΠΊΠ΅, ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹: 100%. На самом Π΄Π΅Π»Π΅, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π±Π»ΠΎΠΊΠ°. ΠŸΡ€ΠΎΡΡ‚ΠΎ Ρ‡Π°Ρ‰Π΅ всСго свойство ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΊΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ Π±Π»ΠΎΠΊΠ°. Но Ρ€Π°Π±ΠΎΡ‚Π° object-fit зависит ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² изобраТСния Π° Π½Π΅ ΠΎΡ‚ внСшнСго Π±Π»ΠΎΠΊΠ°.

Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π±Π»ΠΎΠΊ, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π² Π½Π΅Ρ‘ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΈ растянСм Π΅Ρ‘ ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ Π±Π»ΠΎΠΊΠ°:

Π‘Ρ‚ΠΈΠ»ΡŒ:

+

7
8
9
10
11
12
13
14
15
16
17
18

div
  {
  width: 100px;
  height: 130px;
  border: 1px solid Red;
  }
img
  {
  width: 100%;
  height: 100%;
  object-fit: contain;
  }

HTML ΠΊΠΎΠ΄:

22

<div><img src="sizeimage.jpg"></div>

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ позиционируСтся ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ. Бвойство object-position позволяСт ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ изобраТСния ΠΈ ΡΠ΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ Π΅Π³ΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π±Π»ΠΎΠΊΠ°. Π’ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ указываСтся Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π» Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π±Ρ‹Π²Π°Π΅Ρ‚: left, center, right, Π° Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π±Ρ‹Π²Π°Π΅Ρ‚: top, center, bottom. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ смСщСния Π² Π΅Π΄ΠΈΠ½ΠΈΡ†Π°Ρ… измСрСния CSS. Π’ΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΠΎΡ‚ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ Π»Π΅Π²ΠΎΠ³ΠΎ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ ΡƒΠ³Π»Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

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

18

object-position: left top;

CSS: Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ

CSS: Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

ΠžΠ±Ρ‰Π°Ρ функция CSS β€” Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ тСкста ΠΈΠ»ΠΈ изобраТСния. ЀактичСски, сущСствуСт Ρ‚Ρ€ΠΈ Π²ΠΈΠ΄Π° цСнтрирования:

Π’ послСдних рСализациях CSS Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ возмоТности Уровня 3 (CSS3), ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ элСмСнты:

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ строк тСкста

Π‘Π°ΠΌΡ‹ΠΉ распространённый ΠΈ (ΠΏΠΎΡ‚ΠΎΠΌΡƒ) самый Π»Ρ‘Π³ΠΊΠΈΠΉ Ρ‚ΠΈΠΏ цСнтрирования β€” это Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ строк тСкста Π² Π°Π±Π·Π°Ρ†Π΅ ΠΈΠ»ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅. Для этого CSS ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ свойством ‘text-align’:

P { text-align: center }
h3 { text-align: center }

ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ строку Π² Π°Π±Π·Π°Ρ†Π΅ P ΠΈΠ»ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ h3 ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΌΠ΅ΠΆΠ΄Ρƒ полями, Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:

ВсС строки Π² этом Π°Π±Π·Π°Ρ†Π΅ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ полями Π°Π±Π·Π°Ρ†Π°. Π­Ρ‚ΠΎ стало Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌ благодаря Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ ‘center’ свойства CSS ‘text-align’.

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° ΠΈΠ»ΠΈ изобраТСния

Иногда Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½ΠΎ Π½Π΅ тСкст, Π° Π±Π»ΠΎΠΊ Π² Ρ†Π΅Π»ΠΎΠΌ. Или, ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ говоря: ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π°Π²ΠΎΠ΅ ΠΈ Π»Π΅Π²ΠΎΠ΅ поля Π±Ρ‹Π»ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌΠΈ. Для этого Π½ΡƒΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ поля Π½Π° ‘auto’. Π­Ρ‚ΠΎ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π±Π»ΠΎΠΊΠΎΠ² с фиксированной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ссли Π±Π»ΠΎΠΊ сам ΠΏΠΎ сСбС Π³ΠΈΠ±ΠΊΠΈΠΉ, ΠΎΠ½ просто Π·Π°ΠΉΠΌΡ‘Ρ‚ всю Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ. Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<P>Π­Ρ‚ΠΎΡ‚ довольно ...

Π­Ρ‚ΠΎΡ‚ довольно ΡƒΠ·ΠΊΠΈΠΉ Π±Π»ΠΎΠΊ тСкста Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½. Π—Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ строки Π²Π½ΡƒΡ‚Ρ€ΠΈ Π±Π»ΠΎΠΊΠ° Π½Π΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ (ΠΎΠ½ΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹ Π²Π»Π΅Π²ΠΎ), Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°.

Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для цСнтрирования изобраТСния: помСститС Π΅Π³ΠΎ Π² собствСнный Π±Π»ΠΎΠΊ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚Π΅ свойства ΠΏΠΎΠ»Π΅ΠΉ. НапримСр:

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG src="..." alt="...">

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ:

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

CSS уровня 2 Π½Π΅ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ свойством Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ цСнтрирования. ВСроятно, ΠΎΠ½ΠΎ появится Π² вСрсии CSS уровня 3 (см. Π½ΠΈΠΆΠ΅). Но Π΄Π°ΠΆΠ΅ Π² CSS2 Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ комбинирования Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… свойств. Π₯ΠΈΡ‚Ρ€ΠΎΡΡ‚ΡŒ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ внСшний Π±Π»ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ ΠΊΠ°ΠΊ ячСйка Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Ρ‚.ΠΊ. содСрТимоС ячСйки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ΠΎ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π½ΠΈΠΆΠ΅, дСмонстрируСт Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π°Π±Π·Π°Ρ†Π° Π²Π½ΡƒΡ‚Ρ€ΠΈ Π±Π»ΠΎΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ Π·Π°Π΄Π°Π½Π½ΡƒΡŽ высоту. ΠžΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π°Π±Π·Π°Ρ†, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ Π² ΠΎΠΊΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ находится Π²Π½ΡƒΡ‚Ρ€ΠΈ Π±Π»ΠΎΠΊΠ°, ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΈ ΠΏΠΎ высотС ΠΎΠΊΠ½Π°.

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV>
  <P>Π­Ρ‚ΠΎΡ‚ малСнький Π°Π±Π·Π°Ρ†...
</DIV>

Π­Ρ‚ΠΎΡ‚ малСнький Π°Π±Π·Π°Ρ† Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ.

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ Π² CSS уровня 3

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ 3 CSS ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ возмоТности. На ΠΌΠΎΠΌΠ΅Π½Ρ‚ написания этой ΡΡ‚Π°Ρ‚ΡŒΠΈ (2014 Π³ΠΎΠ΄), Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ способ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ выравнивания Π±Π»ΠΎΠΊΠ° Π±Π΅Π· использования Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования (Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊ частичному ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Ρ‚ΠΈΡŽ тСкста) всё Π΅Ρ‰Ρ‘ обсуТдаСтся. Но Ссли Π²Π°ΠΌ извСстно, Ρ‡Ρ‚ΠΎ частичноС ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ тСкста Π½Π΅ станСт ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ Π² вашСм Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство ‘transform’, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ элСмСнт. НапримСр:

Π­Ρ‚ΠΎΡ‚ Π°Π±Π·Π°Ρ† Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

Для Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ выглядит Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:

<div class=container3>
  <p>Π­Ρ‚ΠΎΡ‚ абзац…
</div>

Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй выглядит Ρ‚Π°ΠΊ:

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π°:

  1. Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ (position: relative), Ρ‡Ρ‚ΠΎ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ Π΅Π³ΠΎ Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ для Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… элСмСнтов.
  2. Π‘Π°ΠΌ элСмСнт сдСлайтС Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ (position: absolute).
  3. ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ элСмСнт посСрСдинС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ‘top: 50%’. (Π—Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ ‘50%’ здСсь ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‚ 50% высоты ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.)
  4. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ translate, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ элСмСнт Π²Π²Π΅Ρ€Ρ… Π½Π° ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ своСй собствСнной высоты. ( ‘50%’ Π² ‘translate(0, -50%)’ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ Π½Π° высоту самого элСмСнта.)

НСдавно (начиная ΠΏΡ€ΠΈΠ±Π»ΠΈΠ·ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ с 2015-Π³ΠΎ Π³ΠΎΠ΄Π°) Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… рСализациях CSS стала доступна новая Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ°. Она основана Π½Π° Π½ΠΎΠ²ΠΎΠΌ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΌ словС ‘flex’ для свойства ‘display’. Π­Ρ‚ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ слово ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΎ для использования Π² графичСском интСрфСйсС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ (GUI), Π½ΠΎ Π½ΠΈΡ‡Ρ‚ΠΎ Π½Π΅ ΠΌΠ΅ΡˆΠ°Π΅Ρ‚ Π²Π°ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅, Ссли Ρƒ этого Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Π°Ρ структура.

Π­Ρ‚ΠΎΡ‚ Π°Π±Π·Π°Ρ† Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ.

Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

div.container5 {
  height: 10em;
  display: flex;
  align-items: center }
div.container5 p {
  margin: 0 }

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² CSS уровня 3

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ ΠΎΠ±Π° ΠΌΠ΅Ρ‚ΠΎΠ΄Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ.

ΠŸΠΎΠ±ΠΎΡ‡Π½Ρ‹ΠΉ эффСкт Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования Π°Π±Π·Π°Ρ†Π° состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π°Π±Π·Π°Ρ† становится Ρ€ΠΎΠ²Π½ΠΎ Ρ‚Π°ΠΊΠΈΠΌ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΌ, ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ (Ссли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΡ‹ явно Π½Π΅ ΡƒΠΊΠ°ΠΆΠ΅ΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρƒ). Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅ ΠΌΡ‹ ΠΈΠΌΠ΅Π½Π½ΠΎ этого ΠΈ Ρ…ΠΎΡ‚ΠΈΠΌ: ΠΌΡ‹ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π΅ΠΌ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π°Π±Π·Π°Ρ† ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ слова (β€œΠ¦Π΅Π½Ρ‚Ρ€!β€œ), Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π° Π°Π±Π·Π°Ρ†Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π²Π½Π° ΡˆΠΈΡ€ΠΈΠ½Π΅ этого слова.

Π–Ρ‘Π»Ρ‚Ρ‹ΠΉ Ρ„ΠΎΠ½ наглядно дСмонстрируСт, Ρ‡Ρ‚ΠΎ Π°Π±Π·Π°Ρ† Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ‚ΠΎΠΉ ΠΆΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹, Ρ‡Ρ‚ΠΎ ΠΈ Π΅Π³ΠΎ содСрТимоС. ΠœΡ‹ ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° ΠΎΡΡ‚Π°Π»Π°ΡΡŒ ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΉ:

<div class=container4>
  <p>Π¦Π΅Π½Ρ‚Ρ€!
</div>

Π’ ΠΏΠ»Π°Π½Π΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ цСнтрирования эта Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй схоТа с Ρ‚Π°Π±Π»ΠΈΡ†Π΅ΠΉ ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°. Но Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ Π΅Ρ‰Ρ‘ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅ΠΌ элСмСнт Π½Π° ΠΏΠΎΠ»ΠΏΡƒΡ‚ΠΈ Ρ‡Π΅Ρ€Π΅Π· ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΡ€Π°Π²ΠΈΠ»Π° ‘left: 50%’ ΠΈ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ сдвигаСм Π΅Π³ΠΎ Π²Π»Π΅Π²ΠΎ Π½Π° ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ своСй собствСнной ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π² ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠΈ ‘translate’:

div.container4 {
    height: 10em;
    position: relative }
div.container4 p {
    margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚, Π·Π°Ρ‡Π΅ΠΌ трСбуСтся ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ‘margin-right: -50%’.

Когда Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅Ρ€ CSS ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ‘flex’, всё становится Π΅Ρ‰Ρ‘ Π»Π΅Π³Ρ‡Π΅:

с этой Ρ‚Π°Π±Π»ΠΈΡ†Π΅ΠΉ стилСй:

div.container6 {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center }
div.container6 p {
  margin: 0 }

Ρ‚.Π΅. СдинствСнным Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ являСтся ‘justify-content: center’. Π’ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅, ΠΊΠ°ΠΊ ‘align-items’ опрСдСляСт Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ содСрТимого ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, ‘justify-content’ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ опрСдСляСт Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅. (На самом Π΄Π΅Π»Π΅ всё нСсколько слоТнСС, ΠΊΠ°ΠΊ слСдуСт ΠΈΠ· ΠΈΡ… Π½Π°Π·Π²Π°Π½ΠΈΠΉ, Π½ΠΎ Π² простом случаС, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ это ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊ.). ΠŸΠΎΠ±ΠΎΡ‡Π½Ρ‹ΠΉ эффСкт ΠΎΡ‚ примСнСния свойства ‘flex’ состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ элСмСнт, Π² нашСм случаС это Π , автоматичСски становится Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠ°Π»Ρ‹ΠΌ, насколько это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ.

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² области просмотра Π² CSS уровня 3

ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠΌ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… элСмСнтов являСтся ΠΎΠ±Π»Π°ΡΡ‚ΡŒ просмотра. (Π’ случаС c Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ это ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°). Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнта Π² области просмотра Π½Π΅ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ слоТности. Π”Π°Π»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€. (Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ использован синтаксис HTML5.)

<html>
  <style>
    body {
        background: white }
    section {
        background: black;
        color: white;
        border-radius: 1em;
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%) }
  </style>
  <section>
    <h2>ΠšΡ€Π°ΡΠΈΠ²ΠΎ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ</h2>
    <p>Π­Ρ‚ΠΎΡ‚ тСкстовый Π±Π»ΠΎΠΊ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.
    <p>И Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ, Ссли ΠΎΠΊΠ½ΠΎ достаточно ΡˆΠΈΡ€ΠΎΠΊΠΎΠ΅.
  </section>

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅.

ΠŸΡ€Π°Π²ΠΈΠ»ΠΎ ‘margin-right: -50%’ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ для компСнсации ‘left: 50%’. ΠŸΡ€Π°Π²ΠΈΠ»ΠΎ ‘left’ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΡƒΡŽ для элСмСнта ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π½Π° 50%. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ‚ΠΎΡ€ постараСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π»ΠΈΠ½ΠΈΠΈ длиною Π½Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ‹ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. Π£ΠΊΠ°Π·Π°Π² Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΡ€Π°Π²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ элСмСнта находится ΠΏΡ€Π°Π²Π΅Π΅ Π½Π° Ρ‚Ρƒ ΠΆΠ΅ ΡΠ°ΠΌΡƒΡŽ Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Ρƒ, ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎ максимальная Π΄Π»ΠΈΠ½Π° Π»ΠΈΠ½ΠΈΠΈ снова равняСтся ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠΊΠ½Π°: Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ находится Π½Π° ΠΎΠ΄Π½ΠΎΠΉ строкС, ΠΊΠΎΠ³Π΄Π° ΠΎΠΊΠ½ΠΎ достаточно ΡˆΠΈΡ€ΠΎΠΊΠΎΠ΅. Волько Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΎΠΊΠ½ΠΎ слишком ΡƒΠ·ΠΊΠΎΠ΅ для всСго прСдлоТСния, это ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·Π±ΠΈΡ‚ΠΎ Π½Π° нСсколько строк. Когда Π²Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ‘margin-right: -50%’ ΠΈ снова ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠΊΠ½Π°, Π²Ρ‹ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ прСдлоТСния Π±ΡƒΠ΄ΡƒΡ‚ ΡƒΠΆΠ΅ Ρ€Π°Π·Π±ΠΈΡ‚Ρ‹, хотя ΠΎΠΊΠ½ΠΎ всС Π΅Ρ‰Π΅ ΡˆΠΈΡ€Π΅ строк тСкста Π² Π΄Π²Π° Ρ€Π°Π·Π°.

(ИспользованиС свойства ‘translate’ для цСнтрирования Π² области просмотра Π±Ρ‹Π»ΠΎ Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ β€œCharlie” Π² ΠΎΡ‚Π²Π΅Ρ‚Π΅ Π½Π° сайтС Stack Overflow.)

Created 5 May 2001;
Last updated

rendering | HTML ΠΈ CSS с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ ΠΊΠΎΠ΄Π°

Бвойство image-rendering сообщаСт Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, ΠΊΠ°ΠΊΠΈΠΌ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠΎΠΌ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±Π° Π² ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ, Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹, композиция

Бинтаксис

/* Keyword values */
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;

ЗначСния

auto
Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ примСняСт встроСнный Π² Π½Π΅Π³ΠΎ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ интСрполяции, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ примСняСтся бикубичСский ΠΌΠ΅Ρ‚ΠΎΠ΄.
crisp-edges
ЦСль Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠ° β€” быстроС ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, для Ρ‡Π΅Π³ΠΎ примСняСтся ΠΌΠ΅Ρ‚ΠΎΠ΄ интСрполяции ΠΏΠΎ блиТайшим Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌ. Он Π½Π΅ создаёт сглаТивания Π²ΠΎΠΊΡ€ΡƒΠ³ Π»ΠΈΠ½ΠΈΠΉ ΠΈ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Ρ‚ΡŒ Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° трСбуСтся ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΈ Ρ€Π΅Π·ΠΊΠΎΡΡ‚ΡŒ ΠΊΡ€Π°Ρ‘Π².
pixelated
ΠŸΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ сохраняСт контраст ΠΈ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Ρ‹ изобраТСния, Π½Π΅ допуская размытия Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΈ ΠΊΠΎΠ½Ρ‚ΡƒΡ€ΠΎΠ². ΠŸΡ€ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π΅Π½ auto.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅

  • Chrome вмСсто crisp-edges ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ -webkit-optimize-contrast.
  • Opera ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ -o-crisp-edges.
  • Firefox ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ -moz-crisp-edges.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ-ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ:

ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΠ΅Ρ‚ΡΡ ΠΊ изобраТСниям, Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌ, <video>, <canvas>

Π‘ΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ

ОписаниС ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>image-rendering</title>
    <style>
      img {
        border: 1px solid #ccc;
      }
      .fast {
        image-rendering: pixelated;
      }
    </style>
  </head>
  <body>
    <p>
      <img
        src="image/russia.png"
        alt="Ѐлаг России"
       
      />
      <img
        src="image/russia.png"
        alt="Ѐлаг России"
       
       
      />
    </p>
  </body>
</html>

ΠšΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ любоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² CSS

МногиС вСбмастСра ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ сайтов Π½Π΅ Ρ€Π°Π· задавались вопросом: «Как пСрСвСсти ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² CSSΒ»! ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽ Π’Π°ΠΌ Ρ‚Ρ€ΠΈ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅Π»Π°ΡŽΡ‚ эту Π·Π°Π΄Π°Ρ‡Ρƒ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΉ!

Β 

β„–1

ΠšΠ°Ρ‡Π΅ΡΡ‚Π²ΠΎ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ†Π΅Π½ΠΈΡ‚ΡŒ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ (ΠΏΡ€ΠΈΠΌΠ΅Ρ€ сдСлан Π² этом Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π΅) :

Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! Данная страница ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ‚ΠΎΡ€ΠΌΠΎΠ·ΠΈΡ‚ΡŒ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π½ΠΈΠΆΠ΅ прСдставлСны ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹ΠΌ стилСм CSS

ΠšΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ JPG Π² CSS

Β 

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°

Β 

Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΡ‹ сдСлали ΠΈΠ· Β«ΠšΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€Π° изобраТСния Π² CSS, Π½Π° основС Ρ‚Π΅Π½Π΅ΠΉΒ», Ρ‚ΠΎ ΠΈ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ Π΅Π³ΠΎ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅!

Π’ ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Π΄Π°Π½Π½Ρ‹ΠΉ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ изобраТСния ΠΈΠ· Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° .jpg (ΠΎΠ½ Π½Π΅ ΡƒΠΌΠ΅Π΅Ρ‚ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ, которая присутствуСт Π² .png) ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ пСрСвСсти Π² CSS Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½!

Β 

HTML

Для Π²Ρ‹Π²ΠΎΠ΄Π° стиля ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π² Π½ΡƒΠΆΠ½ΠΎΠ΅ мСсто div (я ΠΏΡ€ΠΈΠ²Π΅Π΄Ρƒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ использовал Π½Π° этой страницС для дСмонстрации)

<div>
<div> <!-- css ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° --></div>
</div>

МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ:

<div> <!-- css ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° --> </div>

Π‘Π°ΠΌ Ρ„Π°ΠΉΠ» CSS я Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄Ρƒ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎ ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹ΠΉ


β„–2

НСмного Ρ…ΠΎΡ‡Ρƒ ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Β«ΠšΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ любого изобраТСния Π² CSS, с эффСктом прозрачности» 

ΠžΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ изобраТСния 300x150px. Π€ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹: jpg, png, gif. ΠŸΡ€Π΅ΠΊΡ€Π°ΡΠ½ΠΎ справляСтся с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ! ( Π±Π΅Ρ‚Π° вСрсия )

ΠšΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ JPG, PNG, GIF Π² CSS ( Π±Π΅Ρ‚Π° вСрсия )

Β 

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°

Β 


β„–3

И Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Β«ΠšΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ любого изобраТСния Π² CSS» 

ΠšΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ (PNG).

ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ с нСбольшого изобраТСния. CSS Ρ„Π°ΠΉΠ» Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ большой!

ΠšΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ любого изобраТСния Π² CSS

Β 

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°

Β 


Π’ΠΎΡ‚ ΠΈ всё!

ΠŸΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ! Π‘ΡƒΠ΄Ρƒ Ρ€Π°Π΄ Ссли это Π’Π°ΠΌ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π² осущСствлСнии своих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²!


Π‘Ρ‚Π°Ρ‚ΡŒΠΈ ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅
Раскрутка Π² соцсСтях

Π’ Π΄Π°Π½Π½ΠΎΠΌ Π±Π»ΠΎΠ³Π΅ описано Π³Π΄Π΅ ΠΈ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π°ΠΊΡ€ΡƒΡ‚ΠΊΡƒ Π³Ρ€ΡƒΠΏΠΏ, сообщСств ΠΈ Π»ΠΈΡ‡Π½Ρ‹Ρ… страничСк Π² популярных ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтях ΠΈ тСст ΠΏΠ»Π°Ρ‚Π½Ρ‹Ρ… сайтов Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‰ΠΈΡ…ΡΡ Π½Π°ΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ.

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² Π‘Π»ΠΎΠ³

способы задания ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты

ΠžΡ‚ Π°Π²Ρ‚ΠΎΡ€Π°: ΠΏΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ вас. ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ β€” практичСски ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых Π²Π°ΠΆΠ½Ρ‹Ρ… элСмСнтов Π½Π° Π²Π΅Π±-страницах. Благодаря ΠΈΠΌ Π½Π°ΠΌ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ ΠΈ интСрСснСС Π²ΠΎΡΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ Π½Π° экранС. Но Ссли Π·Π°Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Ρ€Π΅Ρ‡ΡŒ ΠΎΠ± ΠΈΡ… встраивании Π² Π²Π΅Π±-страницы, Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² html. ИмСнно ΠΎΠ± этом ΠΌΡ‹ сСгодня ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ.

Бпособы Π·Π°Π΄Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСниям

Π‘ΡƒΠ΄Π΅ΠΌ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всС Π½Π° ΠΎΡ‡Π΅Π½ΡŒ простом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅. Π’ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠΉ Π΅ΡΡ‚ΡŒ ΠΊΠΎΠ΄:

<div id = «img»> <img src = «tiger.jpg»> </div>

<div id = «img»>

<img src = «tiger.jpg»>

</div>

Π­Ρ‚ΠΎ Π±Π»ΠΎΠΊ с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ, Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π»Π΅ΠΆΠΈΡ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°. ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρ‡Ρ‚ΠΎ наш Π±Π»ΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ‚ фиксированныС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹. Для наглядности Π·Π°Π΄Π°Π΄ΠΈΠΌ Π΅Ρ‰Π΅ ΠΈ ΠΊΡ€Π°ΡΠ½ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‡Π΅Ρ‚ΠΊΠΎ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π΅Π³ΠΎ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹:

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

#img{ width: 200px; height: 160px; border: 2px solid red; }

#img{

width: 200px;

height: 160px;

border: 2px solid red;

}

Π˜Ρ‚Π°ΠΊ, ΡˆΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° β€” 200 пиксСлСй, Π° высота β€” 160. И Π²ΠΎΡ‚ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² Π½Π΅Π³ΠΎ вписалось Ρ„ΠΎΡ‚ΠΎ. Но Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Ρ‹ Π΅Π΅, допустим, ΠΌΡ‹ Π½Π΅ Π·Π½Π°Π΅ΠΌ. Ну Π»Π°Π΄Π½ΠΎ, я ΠΌΠΎΠ³Ρƒ Π²Π°ΠΌ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ я сдСлал ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ 300 Π½Π° 200 пиксСлСй, Π² Ρ‚Π°ΠΊΠΎΠΌ случаС Ρ„ΠΎΡ‚ΠΎ попросту Π½Π΅ Π²Π»Π΅Π·Π΅Ρ‚ Π² Π±Π»ΠΎΠΊ. Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚:

На этом ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π΅ ΠΎΡ‡Π΅Π½ΡŒ Ρ‡Π΅Ρ‚ΠΊΠΎ Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ красной Ρ€Π°ΠΌΠΊΠΈ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π½Π΅ вписываСтся Π² Π±Π»ΠΎΠΊ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π²Π½ΡƒΡ‚Ρ€ΠΈ. Каким ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΡΠΈΡ‚ΡƒΠ°Ρ†ΠΈΡŽ?

ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρ‡Ρ‚ΠΎ Ρ„ΠΎΡ‚ΠΎ Π»Π΅ΠΆΠΈΡ‚ Π½Π° сСрвСрС ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ нСпосрСдствСнно Π΅Π΅ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту нСльзя. Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² β€” Π·Π°Π΄Π°Ρ‚ΡŒ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Ρ‚Π΅Π³Π° img: width ΠΈ height.

<img width = «200» height = «160» src = «tiger.jpg»>

<img width = «200» height = «160» src = «tiger.jpg»>

Π’ΠΎΡ‚, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ всС идСально вписалось Π² Π±Π»ΠΎΠΊ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠ΅ ΠΆΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, ΠΊΠ°ΠΊ ΠΈ ΠΎΠ½ сам. Но ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅ ΠΎΠ΄Π½Ρƒ Π²Π°ΠΆΠ½ΡƒΡŽ Π΄Π΅Ρ‚Π°Π»ΡŒ: Ссли Π²Ρ‹ сами прописываСтС ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту, Ρ‚ΠΎ, скорСС всСго, Π½Π°Ρ€ΡƒΡˆΠ°Π΅Ρ‚Π΅ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ. Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π½Π°Ρ€ΡƒΡˆΠ°Ρ‚ΡŒ ΠΈΡ…, Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ (ΡˆΠΈΡ€ΠΈΠ½Ρƒ). Π’ΠΎΠ³Π΄Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ посчитаСт сам, Π½Π΅ Π½Π°Ρ€ΡƒΡˆΠ°Ρ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

<img width = «200» src = «tiger.jpg»>

<img width = «200» src = «tiger.jpg»>

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ высотС Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Π½Π΅ всС доступноС мСсто, Π½ΠΎ Π·Π°Ρ‚ΠΎ Π΅Π΅ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ Π½Π΅ Π½Π°Ρ€ΡƒΡˆΠ΅Π½Ρ‹.

БобствСнно, Ρ‚Π°ΠΊΠΎΠΉ способ задания Ρ€Π°Π·ΠΌΠ΅Ρ€Π° (прямо Π² html Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹) годится лишь Π² Ρ‚ΠΎΠΌ случаС, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ с ΠΊΠ°ΠΊΠΈΠΌ-Ρ‚ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π½Π° ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ страницы. Если Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π³Ρ€ΡƒΠΏΠΏΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ Ρ„Π°ΠΉΠ» стилСй, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π°.

Π’ css ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ (Π²Ρ‹Π΄Π΅Π»ΠΈΠ² Π΅Π΅ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ), Π³Ρ€ΡƒΠΏΠΏΠ΅ (прописав ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ класс ΠΈΠ»ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π΄Ρ€ΡƒΠ³ΠΈΡ… доступных сСлСкторов) Π»ΠΈΠ±ΠΎ сразу всСм, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΠ²ΡˆΠΈΡΡŒ ΠΏΠΎ сСлСктору img.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π² css Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ?

Для этого ΡƒΠΆΠ΅ Π΄Π°Π²Π½ΠΎ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ‚Π°ΠΊΠΎΠΉ достаточно простой ΠΊΠΎΠ΄:

img{ max-width: 100%; height: auto; display: block; }

img{

max-width: 100%;

height: auto;

display: block;

}

Π’ΠΎ Π΅ΡΡ‚ΡŒ максимальная ΡˆΠΈΡ€ΠΈΠ½Π° 100% ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, автоматичСская высота (Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ рассчитываСт сам, Π½Π΅ Π½Π°Ρ€ΡƒΡˆΠ°Ρ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ) ΠΈ Π±Π»ΠΎΡ‡Π½ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. ПослСднСС вовсС Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈ Ссли Π΅Π³ΠΎ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ, это Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ скаТСтся Π½Π° ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ.

Если ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ width ΠΈΠ· html-ΠΊΠΎΠ΄Π°, Ρ‚ΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π±ΡƒΠ΄Π΅ΠΌ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΌ:

Но Π·Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² Π±Π»ΠΎΠΊΠ°-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ растягиваСтся ΡƒΠΆΠ΅ Π½Π° Π½ΠΎΠ²Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, Π±Π΅Π· Π½Π°Ρ€ΡƒΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ. ΠŸΡ€ΠΈ этом, Ссли Π²Ρ‹ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅Ρ‚Π΅ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π±Π»ΠΎΠΊΠ°, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π½Π΅ Π²Ρ‹Π»Π΅Π·Π΅Ρ‚ Π·Π° Π½Π΅Π³ΠΎ, Π° всС Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΏΠΎΡΠ»ΡƒΡˆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒΡΡ Π² Π½Π΅Π³ΠΎ ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅. Π’ΠΎΡ‚ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ β€œΡ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹Π΅β€ ΠΈ, ΠΏΠΎ сути, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

Π˜Ρ‚Π°ΠΊ, сСгодня я ΠΏΠΎΠΊΠ°Π·Π°Π» Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π² html ΠΈ css. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ эти знания ΠΈ изобраТСния Π½Π° Π²Π°ΡˆΠΈΡ… сайтах Π±ΡƒΠ΄ΡƒΡ‚ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΡΡ Ρ€ΠΎΠ²Π½ΠΎ ΠΈ красиво.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

PSD to HTML

ВСрстка сайта Π½Π° HTML5 ΠΈ CSS3 с нуля

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ

Как я Π½Π°Ρ‡Π°Π» Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ изобраТСния CSS. МСня вдохновляСт Π³Ρ€Π°Ρ„ΠΈΠΊΠ°, Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅β€¦ | Π°Π²Ρ‚ΠΎΡ€: Sasha

CSS Girl

МСня Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π»ΡΡŽΡ‚ Π³Ρ€Π°Ρ„ΠΈΠΊΠ°, Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΌΠΈΠ»Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ. Но, ΠΊ соТалСнию, Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚ Ρ€ΡƒΠΊΠΈ я Π½Π΅ ΡƒΠΌΠ΅ΡŽ. МнС нравится ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² Π½Π° Dribbble, ΠΈ ΠΌΠ½Π΅ Π±Ρ‹Π»ΠΎ Π·Π°Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ ΠΌΠΈΠ»Ρ‹Π΅ ΠΈ замысловатыС ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΈ Ρ‚Π°ΠΊ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹.

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΌΠΎΠΉ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ рисунок Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Paper.

ВрСмя рассказа. Π’ΠΎΠ·ΡŒΠΌΠΈΡ‚Π΅ чипсы, этот пост заставит вас ΠΏΡ€ΠΎΠ³ΠΎΠ»ΠΎΠ΄Π°Ρ‚ΡŒΡΡ.

Π― наткнулся Π½Π° Codepen, исслСдуя интСрСсныС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π£Π²ΠΈΠ΄Π΅Π² мноТСство Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ красивых Ρ€ΡƒΡ‡Π΅ΠΊ, ΠΌΠ½Π΅ Ρ‚ΠΎΠΆΠ΅ Π·Π°Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ красивоС.

Π― ΠΈΠ·ΡƒΡ‡Π°Π», ΠΊΠ°ΠΊ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ рисовали классныС слоТныС Ρ„ΠΎΡ€ΠΌΡ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ холста. Π― Ρ€Π΅ΡˆΠΈΠ» ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ холст. Π― боролся с холстом, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ сильно зависСл ΠΎΡ‚ ΠΌΠ°Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠΈ ΠΈ JavaScript. Π― Ρ…ΠΎΡ‚Π΅Π» ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… эффСктах большС, Ρ‡Π΅ΠΌ Π½Π° ΠΌΠ°Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. НСт ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π½Π° холст (ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅, ΠΏΠΎΠΊΠ°).

Π—Π°Ρ‚Π΅ΠΌ Π±Ρ‹Π»ΠΎ испытаниС Codevember, Π³Π΄Π΅ Π²Ρ‹ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ дСнь Π² ноябрС ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΎΠ²Π°Π»ΠΈΡΡŒ Π² ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ.Π”Π΅Π½ΡŒ 1 ΠΈ Π”Π΅Π½ΡŒ 2 Π±Ρ‹Π»ΠΈ тяТСлыми, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ я всС Π΅Ρ‰Π΅ учился ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π²ΠΎ всСх рСсурсах, доступных Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅.

Π’ Day 3 я Ρ€Π΅ΡˆΠΈΠ» Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π»ΠΈΡ†ΠΎ ΠŸΠΈΠΊΠ°Ρ‡Ρƒ Π½Π° вСсь экран. Π’ Ρ‚ΠΎ врСмя Pokemon GO всС Π΅Ρ‰Π΅ Π±Ρ‹Π» Π² Ρ…ΠΎΠ΄Ρƒ, ΠΈ я Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ обоТаю ΠŸΠΈΠΊΠ°Ρ‡Ρƒ. Annnd Π΅Ρ‰Π΅ ΠΈ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π±Ρ‹Π» супСр простым ΠΈ состоял Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ· ΠΊΡ€ΡƒΠ³ΠΎΠ² ΠΈ CSS border-radius. Π― Π΄ΠΎΠ±Π°Π²ΠΈΠ» ΠΊ Π½Π΅ΠΌΡƒ аудиоэлСмСнт HTML5, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π΅Ρ‰Π΅ симпатичнСС. Π― Π±Ρ‹Π» ΠΎΡ‡Π΅Π½ΡŒ Π΄ΠΎΠ²ΠΎΠ»Π΅Π½ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠΌ. Π­Ρ‚ΠΎ Π±Ρ‹Π»ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ±ΡƒΠ΄ΠΈΠ»ΠΎ мСня ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒ усСрдно Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ большС ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΎ CSS.

Pikachu

К 8-ΠΌΡƒ дню Codevember я смог ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ€ΡƒΡ‡ΠΊΡƒ для зарядки аккумулятора, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π»ΠΎΡΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ jQuery / JS. Π― усСрдно Ρ€Π°Π±ΠΎΡ‚Π°Π» ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ дСнь ΠΈ учился, создавая Π½ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ я исслСдовал.

Battery Charging

Π― Π½Π°Ρ‡Π°Π» ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ плоский Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π° Dribbble ΠΈ задался вопросом, ΠΌΠΎΠ³Ρƒ Π»ΠΈ я ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ эти плоскиС изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS? Π”Π°, это Π±Ρ‹Π» ΠΌΠΎΠΉ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π²Ρ‹Π·ΠΎΠ².

На 14-ΠΉ дСнь Codevember я ΠΏΡ€ΠΈΠ³ΠΎΡ‚ΠΎΠ²ΠΈΠ» ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Ρ‡Π°ΡˆΠΊΡƒ ΠΊΠΎΡ„Π΅ с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript, Π³Π΄Π΅ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°ΠΌΠΈ: Π°ΠΌΠ΅Ρ€ΠΈΠΊΠ°Π½ΠΎ, Π»Π°Ρ‚Ρ‚Π΅, ΠΊΠ°ΠΏΡƒΡ‡ΠΈΠ½ΠΎ ΠΈΠ»ΠΈ Π²ΠΎΠ΄Π° (для разнообразия ΠΊΠΎΡ„Π΅ΠΈΠ½Π°).

Coffee Cup

К 21 дню Codevember я экспСримСнтировал с CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΈ использовал Π±Π°Π·ΠΎΠ²Ρ‹Π΅ CSS-Ρ„ΠΎΡ€ΠΌΡ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ ΠΈ ΠΊΡ€ΡƒΠ³, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ этот ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ ΠΈ ΠΊΠΎΡ„Π΅ΠΉΠ½ΡƒΡŽ Ρ‡Π°ΡˆΠΊΡƒ. Π’ΠΈΠ΄ΠΈΠΌΠΎ, я понял, Ρ‡Ρ‚ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Ρ€Π°Π·Π΄Π΅Π»ΡΡŽΡ‚ мою любовь ΠΊ ΠΊΠΎΡ„Π΅!

http://codepen.io/sashatran/full/BQWNRe

На 25-ΠΉ дСнь Codevember , я Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ всС Π΅Ρ‰Π΅ использовал ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΡ€ΡƒΠ³ΠΎΠ² CSS Π² своих рисунках, ΠΊΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· этого рисунка, посвящСнного Π·Π°Π²Ρ‚Ρ€Π°ΠΊΡƒ. ΠŸΡ€ΠΈΡˆΠ»ΠΎ врСмя ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΡΡ Π² царство Ρ„ΠΎΡ€ΠΌ ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½Π½ΠΎΠΉ слоТности.

Π―ΠΉΡ†ΠΎ ΠΈ сковородка

Π’ дСнь 28 Codevember я Ρ€Π΅ΡˆΠΈΠ» ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ CSS, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π·Π²Π΅Π·Π΄Ρ‹ ΠΈ Ρ‚Ρ€Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΈ. Π’ Ρ‚Π°ΠΊΠΎΠΌ вСсСльС я Ρ€Π°Π±ΠΎΡ‚Π°Π» Π½Π°Π΄ Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠΉ роТдСствСнской Π΅Π»ΠΊΠΎΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ свою ΠΏΠ΅Ρ€Π²ΡƒΡŽ Π½Π°ΡΡ‚ΠΎΡΡ‰ΡƒΡŽ Π΅Π»ΠΊΡƒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ я ΠΊΡƒΠΏΠΈΠ» для своСго Π΄ΠΎΠΌΠ°.

РоТдСствСнская Π΅Π»ΠΊΠ°

Π’ ΠΊΠΎΠ½Ρ†Π΅ Codevember ΠΌΠ½Π΅ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»ΠΎΡΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ эти ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠ΅ ΠΌΠΈΠ»Ρ‹Π΅ CSS-изобраТСния, я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ€ΠΎΡΠΈΡ‚ΡŒ сСбС Π²Ρ‹Π·ΠΎΠ² ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ слоТныС изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойств CSS, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ box-shadow, для создания ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Ρ‚. Π”. Но ΠΌΠ½Π΅ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»ΠΎΡΡŒ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ ΠΈ ΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²Π΅Π½Π½ΠΎΡΡ‚ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ я построил с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ участвовали Π² этом мСроприятии вмСстС со ΠΌΠ½ΠΎΠΉ.

Π˜Ρ‚Π°ΠΊ, я подписался Π½Π° Daily CSS Images Challenge Майкла ΠœΠ°Π½Π³ΠΈΠ°Π»Π°Ρ€Π΄ΠΈ. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ дСнь Π½Π°ΠΌ Π΄Π°Π²Π°Π»ΠΈ Ρ‚Π΅ΠΌΡƒ ΠΈΠ»ΠΈ Ρ‚Π΅ΠΌΡƒ, ΠΈ Π½Π°ΠΌ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS для Π΅Π΅ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ. Π­Ρ‚ΠΎΡ‚ Π²Ρ‹Π·ΠΎΠ² Π΄Π°Π» ΠΌΠ½Π΅ структуру ΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ дСнь. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠ³Π»ΠΎ ΠΌΠ½Π΅ творчСски ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ Π½ΠΎΠ²Ρ‹Ρ… способах самовыраТСния ΠΈ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ² CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ смоТСтС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.

Π”Π΅Π½ΡŒ 1: Π”Π΅Ρ‚Π΅Π½Ρ‹Ρˆ

ΠŸΠ΅Ρ€Π²Π°Ρ Π·Π°Π΄Π°Ρ‡Π° Π±Ρ‹Π»Π° довольно простой: Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠ΅Π΄Π²Π΅ΠΆΠΎΠ½ΠΊΠ° Π±Π°Π·ΠΎΠ²ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΡ€ΡƒΠ³Π°.Но я люблю Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠΈΠ»Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ, я Π΄Π°Π»Π° Π΅ΠΌΡƒ соску, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π½Π΅ ΠΏΠ»Π°ΠΊΠ°Π» слишком ΠΌΠ½ΠΎΠ³ΠΎ. https://codepen.io/sashatran/full/BpoLeE

Π”Π΅Π½ΡŒ 2: Π‘Π»ΠΎΠ½

О Π½Π΅Ρ‚, ΠΊΠ°ΠΊ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Ρ…ΠΎΠ±ΠΎΡ‚ слона? Π― ΠΈΠ³Ρ€Π°Π» с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ CSS, искал ссылки, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ CSS Tricks. ПослС Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… часов исслСдований я ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π» эту Π²Π΅Ρ‰ΡŒ. https://codepen.io/sashatran/full/JEGJyz

Π”Π΅Π½ΡŒ 3: Π‘ΠΈΠ²Π΅Ρ€

PBJ? Π― Π½Π΅ ΠΌΠΎΠ³Π»Π° ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ выглядит Π±ΠΎΠ±Ρ€.МнС ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Π»ΠΎΡΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ‚ΡΠ½ΡƒΡ‚ΡŒ это. Π― искал изобраТСния Π±ΠΎΠ±Ρ€Π° Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ ΠΈ Ρ‡Π΅Ρ€ΠΏΠ°Π» Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… источников, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π²ΠΎΠ΅Π΄ΠΈΠ½ΠΎ. Π‘ΠΎΠ±Π΅Ρ€ ΠΏΠΎΠ΄Π°Π» заявку Π½Π° Ρ€Π°Π±ΠΎΡ‚Ρƒ, ΠΈ я Ρ…ΠΎΡ‚Π΅Π» ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π΅Π³ΠΎ поиски, поэтому Π΄Π°Π» Π΅ΠΌΡƒ галстук Π½Π° всякий случай! https://codepen.io/sashatran/full/NdNqPo

Π”Π΅Π½ΡŒ 4: Π’ΠΈΠ³Ρ€

Rawr. Π‘Π½ΠΎΠ²Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ простыС Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈ радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹, я сдСлал полосатого Ρ‚ΠΈΠ³Ρ€Π°. МСня Π²Π΄ΠΎΡ…Π½ΠΎΠ²ΠΈΠ»ΠΎ Ρ‚ΠΎ, ΠΊΠ°ΠΊ тСкст ΠΈ Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π±Ρ‹Π»ΠΈ прСдставлСны Π² стилС плоского Π΄ΠΈΠ·Π°ΠΉΠ½Π°, поэтому я заставил Ρ‚ΠΈΠ³Ρ€Π° Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π³Π°Π·Π΅Ρ‚Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π² курсС Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΡ… событий.https://codepen.io/sashatran/full/egZbKo

Π”Π΅Π½ΡŒ 5: Π›ΡŽΠ±ΠΈΠΌΠΎΠ΅ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΆΠΈΠ²ΠΎΡ‚Π½ΠΎΠ΅

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, Майк Вазовски! Π― большой ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊ Pixar. Π― экспСримСнтировал с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Ρ‚Ρ€ΡŽΠΊΠ°ΠΌΠΈ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ€ΠΎΠ³Π° ΠΈ Ρ€ΠΎΡ‚. ΠŸΡΠ΅Π²Π΄ΠΎΡΠ΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ: before ΠΈ: after, Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ ΠΏΡ€ΠΈ создании составных Ρ„ΠΈΠ³ΡƒΡ€ с ΠΎΠ΄Π½ΠΈΠΌ элСмСнтом div. https://codepen.io/sashatran/full/YNWYQy

Π”Π΅Π½ΡŒ 6: Часы

ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ часы. ВИК Π’Π°ΠΊ. Π― ΠΎΠ±ΠΌΠ°Π½ΡƒΠ» JavaScript с этим ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ρ…ΠΎΡ‚Π΅Π», Ρ‡Ρ‚ΠΎΠ±Ρ‹ часы ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΈ фактичСскоС Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ врСмя.Π― использовал Π²Π°Π½ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ JavaScript, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ врСмя, ΠΈ использовал Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ setInterval для увСличСния ΡƒΠ³Π»Π° часовой, ΠΌΠΈΠ½ΡƒΡ‚Π½ΠΎΠΉ ΠΈ сСкундной стрСлок. https://codepen.io/sashatran/full/OWbJzG/

Π”Π΅Π½ΡŒ 7: Π›ΠΈΠ½Π΅ΠΉΠΊΠ°

Π― снова Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ схитрил ΠΈ использовал JavaScript, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π»ΠΈΠ½ΠΈΠΈ сантимСтра Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ, Π½ΠΎ быстро понял, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эти строки Π»Π΅Π³ΠΊΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства box-shadow. https://codepen.io/sashatran/full/jyVzXP/

Π”Π΅Π½ΡŒ 8: Π‘Π»ΠΎΠΊΠ½ΠΎΡ‚

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ большС Javascript, я создал ΠΊΠΎΠ»ΡŒΡ†ΠΎ Π±Π»ΠΎΠΊΠ½ΠΎΡ‚Π°, отвСрстия ΠΈ использовал SVG для Π»ΠΈΡ†Π°: стр.На Ρ‚ΠΎΡ‚ ΠΌΠΎΠΌΠ΅Π½Ρ‚ я Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΡƒΠ·Π½Π°Π» ΠΎ CSS, Π½ΠΎ я всС Π΅Ρ‰Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Π» Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с SASS ΠΈ Π½Π΅ осознавал, ΠΊΠ°ΠΊΡƒΡŽ ΠΌΠΎΡ‰ΡŒ SASS даст ΠΌΠ½Π΅, ΠΏΠΎΠΊΠ° ΠΊΡ‚ΠΎ-Ρ‚ΠΎ Π½Π° самом Π΄Π΅Π»Π΅ Π½Π΅ Ρ€Π°Π·Π΄Π²ΠΎΠΈΠ» мою Ρ€ΡƒΡ‡ΠΊΡƒ Π½Π° Codepen ΠΈ Π½Π΅ восстановил Π΅Π³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SASS. Мой Ρ€Π°Π·ΡƒΠΌ Π±Ρ‹Π» Π²Π·ΠΎΡ€Π²Π°Π½. Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΌΠΎΠΈΠΌ испытаниСм Π±Ρ‹Π»ΠΎ освоСниС SASS. https://codepen.io/sashatran/full/LxxWqq/

Π”Π΅Π½ΡŒ 9: ΠšΠ°Π»Π΅Π½Π΄Π°Ρ€ΡŒ

Π― наткнулся Π½Π° сайт Π›ΠΈΠ½Π½ Π€ΠΈΡˆΠ΅Ρ€, Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ a.singlediv.com, ΠΎΠ½Π° Π΄Π΅Π»Π°Π΅Ρ‚ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠ΅ изобраТСния CSS, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ div. Π”ΠΎ этого ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° я создавал ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ элСмСнты div для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ Π² ΠΌΠΎΠΈΡ… изобраТСниях.Π­Ρ‚ΠΎ Π²Π΄ΠΎΡ…Π½ΠΎΠ²ΠΈΠ»ΠΎ мСня ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ сСгодняшнюю Π·Π°Π΄Π°Ρ‡Ρƒ СдинствСнной. https://codepen.io/sashatran/full/BpWLbN

Day 10: Pencil Jar

Π’Π΄ΠΎΡ…Π½ΠΎΠ²Π»Π΅Π½ΠΎ использованиСм большСго количСства SASS Π² ΠΌΠΎΠ΅ΠΌ CSS. Π­Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°Ρ€Π°Π½Π΄Π°ΡˆΠ΅ΠΉ Π±Ρ‹Π»ΠΎ создано с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ SASS @each. https://codepen.io/sashatran/full/VPpqRV

Π”Π΅Π½ΡŒ 11: ΠŸΠΈΡ†Ρ†Π°

Π― большой Π³ΡƒΡ€ΠΌΠ°Π½. Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ это Π±Ρ‹Π» лишь вопрос Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, ΠΊΠΎΠ³Π΄Π° я Π½Π°ΠΏΡ€Π°Π²ΠΈΠ» свою любовь ΠΊ Π΅Π΄Π΅ Π² ΠΎΠ±Ρ€Π°Π·Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ создавал.Π£ мСня появился этот шанс, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ Π²Ρ‹Π·ΠΎΠ²ΠΎΠΌ стала ΠΏΠΈΡ†Ρ†Π°! Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ простых Ρ„ΠΈΠ³ΡƒΡ€, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ ΠΊΡ€ΡƒΠ³ ΠΈ Ρ‚Ρ€Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ кусок ΠΏΠΈΡ†Ρ†Ρ‹! Π― Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠ» CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ для плавлСния сыра. Π― Π±Ρ‹ Ρ…ΠΎΡ‚Π΅Π», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΈΡ‰ΠΈ Π±Ρ‹Π»ΠΎ Ρ‚Π°ΠΊΠΈΠΌ простым. https://codepen.io/sashatran/full/QdgvLw

Π”Π΅Π½ΡŒ 12: Π“Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€

Π― ΡƒΠ·Π½Π°Π» ΠΎ Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π΅ для Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния ΠΈ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠΌ! Π― использовала Π΅Π³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒ сСмСна ΠΊΡƒΠ½ΠΆΡƒΡ‚Π° Π½Π° Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π±ΡƒΠ»ΠΎΡ‡ΠΊΠ΅. Π”Π΅Ρ€ΠΆΠΈΡ‚Π΅ ΠΈΠ½Π³Ρ€Π΅Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌΠΈ нСбольшим пространством, Π²Ρ‹Π΄Π΅Π»ΠΈΠ² ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт Π±ΡƒΡ€Π³Π΅Ρ€Π°.Π­Ρ‚ΠΎ испытаниС заставило мСня ΠΏΠΎ-настоящСму ΠΏΡ€ΠΎΠ³ΠΎΠ»ΠΎΠ΄Π°Ρ‚ΡŒΡΡ! https://codepen.io/sashatran/full/vgJNxE

Π”Π΅Π½ΡŒ 13: Taco

Π― снова использовал Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π½Π° Ρ‚Π°ΠΊΠΎ, я Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π» ΠΊΠ°Π½Π°Π» YouTube, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ своим ΠΎΠΏΡ‹Ρ‚ΠΎΠΌ кодирования. Π΄Ρ€ΡƒΠ³ΠΈΠ΅. https://codepen.io/sashatran/full/RKZdgw

Watch Me Practice — CSS Taco

Day 14: Cheesecake

МнС ΠΎΡ‡Π΅Π½ΡŒ понравился Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ этого тСста. Π― ΡƒΠ·Π½Π°Π» ΠΎ rotateX, Π³Π΄Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ ΠΏΠΎ оси X! Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ rotateY ΠΈ rotateZ.Π― использовал это свойство, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ²Π΅Ρ€Π½ΡƒΡ‚ΡŒ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ слой Ρ‡ΠΈΠ·ΠΊΠ΅ΠΉΠΊΠ°. https://codepen.io/sashatran/full/ggGeZr

Watch Me Practice — CSS Cheesecake

Day 15: Pumpkin Pie

Π£ этого ΠΏΠΈΡ€ΠΎΠ³Π° Π΅ΡΡ‚ΡŒ простыС Ρ„ΠΎΡ€ΠΌΡ‹ CSS ΠΈ box-shadow для создания Ρ‚Π΅Π½Π΅ΠΉ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠΎΡ€ΠΎΡ‡ΠΊΡƒ ΠΏΠΈΡ€ΠΎΠ³Π°, я использовал Ρ‚Ρ€ΠΈ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π° ΠΈ ΠΏΠΎΠ²Π΅Ρ€Π½ΡƒΠ» ΠΈΡ… ΠΏΠΎΠ΄ Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ ΡƒΠ³Π»Π°ΠΌΠΈ, Π·Π°ΠΊΡ€ΡƒΠ³Π»ΠΈΠ» ΡƒΠ³Π»Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ border-radius. Π― проголодался ΠΏΠΈΡΠ°Ρ‚ΡŒ это, Π° Ρ‚Ρ‹? https://codepen.io/sashatran/full/vgWyWd

Watch Me Practice — Π’Ρ‹ΠΊΠ²Π΅Π½Π½Ρ‹ΠΉ ΠΏΠΈΡ€ΠΎΠ³

Π”Π΅Π½ΡŒ 16: Π€Ρ€Π°Π½ΠΊΠ΅Π½ΡˆΡ‚Π΅ΠΉΠ½

Π― Π½Π΅ Ρ„Π°Π½Π°Ρ‚ уТасов, Π½ΠΎ ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΠΏΡ€Π΅ΠΎΠ΄ΠΎΠ»Π΅Ρ‚ΡŒ свои страхи Ρ€Π°Π΄ΠΈ выдСрТивая Π²Ρ‹Π·ΠΎΠ².К настоящСму Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ я ΠΏΡ€ΠΈΠ²Ρ‹ΠΊ ΡΠΎΡ‡Π΅Ρ‚Π°Ρ‚ΡŒ мноТСство простых Ρ„ΠΎΡ€ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ€Π°Π·ΠΈΡ‚ΡŒ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ я Ρ…ΠΎΡ‚Π΅Π» Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ. Π― сосрСдоточился Π½Π° ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠΈ ΡΡ‚Ρ€Π°ΡˆΠ½Ρ‹Ρ… Π²Π΅Ρ‰Π΅ΠΉ Π² Π±ΠΎΠ»Π΅Π΅ ΠΌΠΈΠ»Ρ‹Π΅ изобраТСния, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΡ‚ΠΈΠ»ΡŒ плоского Π΄ΠΈΠ·Π°ΠΉΠ½Π°. https://codepen.io/sashatran/full/bgajNZ

Watch Me Practice — CSS Frankenstein

Π”Π΅Π½ΡŒ 17: Π—ΠΎΠΌΠ±ΠΈ

Π—ΠΎΠΌΠ±ΠΈ слоТно ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ симпатичными, поэтому я Π½Π°ΠΊΡ€Ρ‹Π»Π° Π΅Π³ΠΎ вкусным Ρ‚ΠΎΡ€Ρ‚ΠΎΠΌ. НС Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ Π΅ΠΌΡƒ Π½Ρ€Π°Π²ΠΈΠ»ΠΎΡΡŒ Π±Ρ‹Ρ‚ΡŒ ΡƒΡ‚ΠΎΠΏΠ°ΡŽΡ‰ΠΈΠΌ Π² сладости! https://codepen.io/sashatran/full/rjJYqy

Π”Π΅Π½ΡŒ 18: Π’Π°ΠΌΠΏΠΈΡ€

Π― Ρ…ΠΎΡ‚Π΅Π» ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΌΡƒ Π²Π°ΠΌΠΏΠΈΡ€ΠΎΠ².МСня Π²Π΄ΠΎΡ…Π½ΠΎΠ²ΠΈΠ»Π° повязка, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ я Π±Ρ‹Π» (Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ опасно). Π”ΠΎ мСня дошло, Ρ‡Ρ‚ΠΎ эти повязки малСнькиС кровососы. Мини Π²Π°ΠΌΠΏΠΈΡ€Ρ‹ IRL! Π― Π΄ΠΎΠ±Π°Π²ΠΈΠ» ΡΠΎΡ‡Π½ΡƒΡŽ ΠΊΡ€ΠΎΠ²ΡŒ для драматичСского эффСкта (Ρ€Π΅ΠΏΠ»ΠΈΠΊΠ°: драматичСский Π·Π²ΡƒΠΊΠΎΠ²ΠΎΠΉ эффСкт). https://codepen.io/sashatran/full/OWvNKv

Watch Me Practice — Band Aid Vampire

Π”Π΅Π½ΡŒ 19: Π’Ρ‹Π±ΠΎΡ€ монстра

Π­Ρ‚ΠΎ Π±Ρ‹Π»ΠΎ нСпросто для мСня, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ я ΡƒΠΆΠ΅ нарисовал своСго любимого монстра (Майк Вазовский). Π― Ρ€Π΅ΡˆΠΈΠ» ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ своСго ΠΌΠΈΠ»ΠΎΠ³ΠΎ малСнького монстра, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΡΡ‚Π°Ρ‚ΡŒ ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ слюни.Π― Π½Π°Π·Π²Π°Π» Π΅Π³ΠΎ Π‘ΠΈΠ±ΠΈ. https://codepen.io/sashatran/full/zNjoje

Π”Π΅Π½ΡŒ 20: Π‘ΡƒΠΏΠ΅Ρ€ΠΌΠ΅Π½

Π― Ρ€Π΅ΡˆΠΈΠ» Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ людСй с простыми Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ Π½Π° CSS. Π― смотрСл ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ ΠΏΠΎ Adobe Illustrator Π½Π° YouTube ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ людСй простыми Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ. Π­Ρ‚ΠΎ Π±Ρ‹Π»Π° моя пСрвая ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ°, ΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ приблиТался Π”Π΅Π½ΡŒ святого Π’Π°Π»Π΅Π½Ρ‚ΠΈΠ½Π°, я Ρ…ΠΎΡ‚Π΅Π» ΠΏΠΎΠΌΠΎΡ‡ΡŒ мистСру ΠšΠ΅Π½Ρ‚Ρƒ Π½Π°ΠΉΡ‚ΠΈ свиданиС. Π‘ΠΌΠ°Ρ…Π½ΠΈΡ‚Π΅ Π²ΠΏΡ€Π°Π²ΠΎ, Π΄Π°ΠΌΡ‹! https://codepen.io/sashatran/full/egjBar

Watch Me Practice — CSS Superman

Как Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS .Они ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹ ΠΏΠΎ , ΠΈ с ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅ΠΉ Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ, , Ρ‡Ρ‚ΠΎΠ±Ρ‹ изобраТСния ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… мСстах Π½Π° страницС. Π’ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ изобраТСния, Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ, выровняСтС Π»ΠΈ Π²Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΏΠ»Π°Π²Π°Π΅Ρ‚Π΅.

Π’Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Π½Ρ‹Π΅ изобраТСния Π½Π΅ пСрСносят тСкст Π²ΠΎΠΊΡ€ΡƒΠ³ Π½ΠΈΡ…. ΠŸΡ€ΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ слСва, справа ΠΈΠ»ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ с тСкстом, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ Π΄ΠΎ ΠΈ послС изобраТСния. ПослС выравнивания Π½Π° вашСм сайтС остаСтся довольно ΠΌΠ½ΠΎΠ³ΠΎ Π±Π΅Π»ΠΎΠ³ΠΎ пространства. Π’Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Π±Π΅Π»ΠΎΠ΅ пространство, ΠΊΠΎΠ³Π΄Π° ΠΏΡ€ΠΎΠΉΠ΄Π΅Ρ‚Π΅ Ρ‡Π΅Ρ€Π΅Π· ΡΠ΅ΠΊΡ†ΠΈΡŽ выравнивания.

ΠŸΠ»Π°Π²Π°ΡŽΡ‰Π΅Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ позволяСт тСксту ΠΎΠ±Ρ‚Π΅ΠΊΠ°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠ°ΠΊ Π² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ ΠΊΠ½ΠΈΠ³Π΅ ΠΈΠ»ΠΈ Π³Π°Π·Π΅Ρ‚Π΅. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΈΡΡŒ Π½Π° вашСм сайтС Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ. Π­Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ для отобраТСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π²ΠΈΠ΄Π΅ Π³Π°Π»Π΅Ρ€Π΅ΠΈ. Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Ρ€Π°Π·Π΄Π΅Π»Π°Ρ… ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ΡΡ, ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ, Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΈ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ, ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΈ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° div ΠΈ встроСнного стиля CSS. ВСкст НЕ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ просто Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹.НиТС ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ΡΡ, ΠΊΠ°ΠΊ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ изобраТСния Π²Π»Π΅Π²ΠΎ, Π²ΠΏΡ€Π°Π²ΠΎ ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.

Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ

Π‘Ρ‚Ρ€ΠΎΠΊΠ° ΠΊΠΎΠ΄Π° Π½ΠΈΠΆΠ΅ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для выравнивания изобраТСния ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ.

 

Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ строка ΠΊΠΎΠ΄Π° ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для цСнтрирования изобраТСния.

 

Π’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ строка ΠΊΠΎΠ΄Π° содСрТит Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ CSS для выравнивания ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ.

 

ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния с использованиСм CSS

ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ изобраТСниям Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ тСксту ΠΎΠ±Ρ‚Π΅ΠΊΠ°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ . Π”Π°Π»Π΅Π΅ Π±ΡƒΠ΄Π΅Ρ‚ объяснСно Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста.

ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния слСва для пСрСноса тСкста

  

Nunc pulvinar lacus id purus ultrices id sagittis neque convallis.Nunc vel libero orci. Vivamus at dolor a nibh aliquet luctus. Duis imperdiet mi id lorem pellentesque tempus. Ut quis felis posuere tellus feugiat ultrices. Praesent id ΠΌΡƒΡ‡ΠΈΡ‚Π΅Π»ΡŒ non tellus viverra placerat. Vivamus euismod nisi a leo interdum molestie ornare tellus conctetur.

Nullam cursus varius tellus, id laoreet magna hendrerit at. Nulla sit amet purus at nunc blandit ultricies eu a urna. Proin euismod porttitor neque id ultricies. Proin faucibus convallis elit. Maecenas rhoncus arcu at arcu.Proin libero. Proin adipiscing. Π’ quis lorem vitae elit consctetuer pretium. Nullam ligula urna, adipiscing nec, iaculis ut, elementum non, turpis. Fusce pulvinar.

Π’Π°ΠΆΠ½ΠΎ! ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°, Ссли ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅Π΅ Π½Π΅ ΠΎΡ‡ΠΈΡ‰Π΅Π½ΠΎ. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅Ρ‚Π΅ Ρ‡Π΅Ρ‚ΠΊΠΈΠΉ ΠΊΠΎΠ΄ с ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅ΠΉ запятой послС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΠ»Π°Π²Π°Π΅Ρ‚ вашС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΊΠΎΠ΄ для очистки Π²Π°ΡˆΠΈΡ… ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ².

 

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

 

Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.

ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния ΠŸΡ€Π°Π²ΠΎ Π½Π° пСрСнос тСкста

  

Pellentesque mattis tincidunt porttitor. Maecenas condimentum iaculis ligula, sit amet scelerisque nibh aliquam in. Quisque ornare gravida est ut fermentum. Nam venenatis pretium enim, in laoreet nibh aliquam. id laoreet magna hendrerit at.Nulla sit amet purus at nunc blandit ultricies eu a urna. Proin euismod porttitor neque id ultricies. Aenean sed turpis. Pellentesque ΠΎΠ±ΠΈΡ‚Π°Ρ‚Π΅Π»ΡŒ morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sem eros, ornare ut, Commodo eu, tempor nec, risus. Donec laoreet dapibus ligula. Praesent orci leo, bibendum nec, ornare et, nonummy in, elit. Donec interdum feugiat leo. Vestibulum ante ipsum primis Π² faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque feugiat ullamcorper ipsum.

ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния Π²Π»Π΅Π²ΠΎ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ

Π‘ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ‚ΠΎΡ‚ ΠΆΠ΅ ΠΊΠΎΠ΄, Ρ‡Ρ‚ΠΎ ΠΈ Ρ€Π°Π½ΡŒΡˆΠ΅ (см. НиТС). Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ просто Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ ΠΎΠ΄Π½ΠΎ Π·Π° Π΄Ρ€ΡƒΠ³ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π»ΠΈΡΡŒ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ.

  

ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния, располоТСнныС Π½Π° ΠΎΠ΄Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ, — Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ способ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ваши изобраТСния Π² Π²ΠΈΠ΄Π΅ Π³Π°Π»Π΅Ρ€Π΅ΠΈ. На этом ΠΌΡ‹ Π·Π°Π²Π΅Ρ€ΡˆΠ°Π΅ΠΌ, ΠΊΠ°ΠΊ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния с CSS . ΠŸΡ€ΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ сообщСству сСйчас, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΠΏΠΎΠΌΠΎΡ‰ΡŒ ΠΏΠΎ HTML ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ, ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ прСдлоТСния хостинга ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅! Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΡƒΡ€ΠΎΠΊΠ΅ ΠΌΡ‹ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ простоС Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню CSS.Π£ нас Ρ‚Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ полСзная ΡΡ‚Π°Ρ‚ΡŒΡ ΠΎ Π²Π½Π΅ΡˆΠ½ΠΈΡ…, Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… ΠΈ встроСнных стилях CSS.

НуТна Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ ΠΏΠΎΠΌΠΎΡ‰ΡŒ ΠΏΠΎ CSS? ΠžΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с нашим Π²Π²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ Π² руководство ΠΏΠΎ CSS!

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ изобраТСния Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ соврСмСнных Π²Π΅Π±-сайтов Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹. А Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° этом сайтС, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Π΄Π΅Π»Π°Ρ‚ΡŒ изобраТСния ΠΏΠ»Π°Π²Π½Ρ‹ΠΌΠΈ ΠΈΠ»ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.

ΠŸΠ°Ρ€Ρƒ нСдСль Π½Π°Π·Π°Π΄ я ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π» ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰Π΅Π΅ Π²ΠΈΠ΄Π΅ΠΎ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ΡΡ, ΠΊΠ°ΠΊ шаг Π·Π° шагом ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π²Π΅Π±-сайт.Π’ Π²ΠΈΠ΄Π΅ΠΎ ΠΌΡ‹ сдСлали ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ. Но Π² этом постС я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ изобраТСния Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Ρ‰ΠΈΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΏΡ‹Ρ‚Π°Π΅Ρ‚Π΅ΡΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ изобраТСния Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ, ΠΈ я ΠΏΠΎΡΡ‚Π°Ρ€Π°ΡŽΡΡŒ ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ ΠΈΡ… Ρ€Π΅ΡˆΠΈΡ‚ΡŒ.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ изобраТСния Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΈΠ»ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹Π΅ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹?

Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ»Π°Π²Π½Ρ‹ΠΌ ΠΈΠ»ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π½Π° самом Π΄Π΅Π»Π΅ довольно просто. Когда Π²Ρ‹ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° свой Π²Π΅Π±-сайт, ΠΎΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΡ… ΠΎΠ±Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΈΡΠ²ΠΎΠΈΡ‚ΡŒ Π΅Π³ΠΎ свойству ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π½ΠΎΠ²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. Π’ΠΎΠ³Π΄Π° высота изобраТСния автоматичСски измСнится.

Π’Π°ΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ всСгда Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹ для свойства ΡˆΠΈΡ€ΠΈΠ½Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚, Π° Π½Π΅ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹Π΅ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ пиксСли.

  img {
  ΡˆΠΈΡ€ΠΈΠ½Π°: 500 пиксСлСй;
}  

НапримСр, Ссли Π²Ρ‹ опрСдСляСтС Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 500 пиксСлСй, вашС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π΅Π΄ΠΈΠ½ΠΈΡ†Π° измСрСния Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ.

  img {
  ΡˆΠΈΡ€ΠΈΠ½Π°: 50%;
}  

Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π²Π°ΠΌ слСдуСт вмСсто этого Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρƒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ 50%. Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ сдСлаСт ваши изобраТСния ΠΏΠ»Π°Π²Π½Ρ‹ΠΌΠΈ, ΠΈ ΠΎΠ½ΠΈ смогут ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ свой Ρ€Π°Π·ΠΌΠ΅Ρ€ нСзависимо ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° экрана.

Π‘Ρ‚ΠΎΠΈΡ‚ Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Π΄ΠΈΠ°-запросы?

Один ΠΈΠ· вопросов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠ½Π΅ Ρ‡Π°Ρ‰Π΅ всСго Π·Π°Π΄Π°ΡŽΡ‚, — слСдуСт Π»ΠΈ Π²Π°ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Π΄ΠΈΠ°-запросы ΠΈΠ»ΠΈ Π½Π΅Ρ‚.

МСдиа-запрос — Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° ваТная функция CSS, которая ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Π΅Π±-сайт Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ. Π― Π½Π΅ Π±ΡƒΠ΄Ρƒ Π²Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Π² подробности здСсь, Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΌΠΎΠΉ пост ΠΏΠΎΠ·ΠΆΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Π΄ΠΈΠ°-запросы Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ.

ΠžΡ‚Π²Π΅Ρ‚ Π½Π° этот вопрос: Β«Π² зависимости ΠΎΡ‚ ΠΎΠ±ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΡΡ‚Π²Β». Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ вашС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π»ΠΎ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ устройства ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Π΄ΠΈΠ°-запросы. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС Π²Ρ‹ этого Π½Π΅ сдСлаСтС.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ для этого ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° вашС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 50% для любого экрана. Но Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΏΠΎΠ»Π½ΠΎΡ€Π°Π·ΠΌΠ΅Ρ€Π½Ρ‹ΠΌ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств, Π²Π°ΠΌ понадобится ΠΏΠΎΠΌΠΎΡ‰ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠ΅Π΄ΠΈΠ°-запросов:

  @media only screen and (max-width: 480px) {
  img {
    ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
  }
}  

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π² соотвСтствии с ΠΏΡ€Π°Π²ΠΈΠ»ΠΎΠΌ ΠΌΠ΅Π΄ΠΈΠ°-запроса любоС устройство Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΠΌΠ΅Π½Π΅Π΅ 480 пиксСлСй Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ экрана.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎΠ²Π΅Ρ€ΡΠΈΡŽ этого поста Π½ΠΈΠΆΠ΅:

ΠŸΠΎΡ‡Π΅ΠΌΡƒ свойство max-width Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅?

Π”Ρ€ΡƒΠ³ΠΎΠΉ способ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ изобраТСния, — это свойство max-width. Однако это Π½Π΅ всСгда Π»ΡƒΡ‡ΡˆΠΈΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π΅ для всСх Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² экрана ΠΈ устройств.

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΌΡ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ рассмотрСниС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, сначала Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ свойство max-width.

Бвойство max-width устанавливаСт ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ для элСмСнта, которая Π½Π΅ позволяСт ΡˆΠΈΡ€ΠΈΠ½Π΅ этого элСмСнта Π±Ρ‹Ρ‚ΡŒ большС, Ρ‡Π΅ΠΌ Π΅Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ max-width (Π½ΠΎ ΠΎΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ мСньшС).

НапримСр, Ссли ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 500 пиксСлСй, Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ вашСго экрана составляСт всСго 360 пиксСлСй, Π²Ρ‹ Π½Π΅ смоТСтС ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ нСдостаточно мСста:

  img {
  максимальная ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
  ΡˆΠΈΡ€ΠΈΠ½Π°: 500 пиксСлСй; // ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ это Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ
}  

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ свойство max-width для изобраТСния ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° 100%, Ρ‡Ρ‚ΠΎ сТимаСт ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с 500 пиксСлСй Π΄ΠΎ 360 пиксСлСй. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Ρ‹ смоТСтС ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° экранС мСньшСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π°.

Π₯ΠΎΡ€ΠΎΡˆΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ»Π°Π²Π½Ρ‹ΠΌ Π½Π° любом устройствС мСньшС 500 пиксСлСй.

К соТалСнию, Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана Π±ΡƒΠ΄Π΅Ρ‚ нСсколько большС 500 пиксСлСй, Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ измСнится, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π΅Π³ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ составляСт 500 пиксСлСй. Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Π½Π°Ρ€ΡƒΡˆΠΈΡ‚ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ изобраТСния.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ это, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ снова ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство width, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ бСсполСзным свойство max-width.

А Ρ‡Ρ‚ΠΎ насчСт высоты?

Другая распространСнная ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒΡΡ, связана со свойством высоты.ΠžΠ±Ρ‹Ρ‡Π½ΠΎ высота изобраТСния автоматичСски измСняСтся, поэтому Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π½Π°Π·Π½Π°Ρ‡Π°Ρ‚ΡŒ свойство высоты вашим изобраТСниям (ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ это ΠΊΠ°ΠΊ Π±Ρ‹ Π»ΠΎΠΌΠ°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅).

Но Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях Π²Π°ΠΌ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, придСтся Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с изобраТСниями, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ высоту. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π°Π·Π½Π°Ρ‡Π°Π΅Ρ‚Π΅ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ высоту изобраТСния, ΠΎΠ½ΠΎ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌ, Π½ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ.

  img {
  ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
  высота: 300 пиксСлСй;
}  

К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, Π΅ΡΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ свойство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ CSS ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ этой проблСмы…

РСшСниС: свойство Object-Fit

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ больший ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ вашими изобраТСниями, CSS прСдоставляСт Π΄Ρ€ΡƒΠ³ΠΎΠ΅ свойство, Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΠΎΠ΅ object-fit.Π”Π°Π²Π°ΠΉΡ‚Π΅ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ свойством ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° ΠΈ присвоим Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ внСшний Π²ΠΈΠ΄ вашСго изобраТСния:

  img {
  ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
  высота: 300 пиксСлСй;
  ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚: ΠΊΡ€Ρ‹ΡˆΠΊΠ°;
  позиция ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°: снизу;
}  

ΠŸΡ€ΠΈ нСобходимости Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство object-position (Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ object-fit), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΡ„ΠΎΠΊΡƒΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ части изобраТСния. МногиС люди Π½Π΅ Π·Π½Π°ΡŽΡ‚ ΠΎ свойствС соотвСтствия ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌ, Π½ΠΎ это ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ.

НадСюсь, этот пост ΠΏΠΎΠΌΠΎΠ³ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΈ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ ваши ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ изобраТСниями.Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅, заглянитС Π½Π° ΠΌΠΎΠΉ ΠΊΠ°Π½Π°Π» Π½Π° Youtube.

Бпасибо за вниманиС!

ΠŸΡƒΡ‚Π΅Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ ΠΏΠΎ ΠΈ srcset — Smashing Magazine

Об Π°Π²Ρ‚ΠΎΡ€Π΅

Π­Ρ€ΠΈΠΊ — СвангСлист-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π² Cloudinary ΠΈ ΠΆΠΈΠ²Π΅Ρ‚ Π½Π° прСкрасном островС косаток. Он Π»ΡŽΠ±ΠΈΡ‚ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅, ΠΎΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€Π΅ΠΏΠΎΠ΄Π°Π²Π°Π½ΠΈΠ΅ ΠΈ ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΡΡ‚Π²ΠΎ, Π° такТС… Π‘ΠΎΠ»ΡŒΡˆΠ΅ ΠΎ Π­Ρ€ΠΈΠΊ ↬

НСсколько Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ ΠΌΡ‹ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π»ΠΈ ΡΡ‚Π°Ρ‚ΡŒΡŽ ΠΎ Picturefill 2.0, идСальном ΠΏΠΎΠ»ΠΈΡ„ΠΈΠ»Π»Π΅ для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.БСгодняшняя ΡΡ‚Π°Ρ‚ΡŒΡ дополняСт ΡΡ‚Π°Ρ‚ΡŒΡŽ Π’ΠΈΠΌΠ° Π Π°ΠΉΡ‚Π° ΠΈ ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚, ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ прСдстоящий элСмСнт ΠΈ srcset, с простыми ΠΎΡ‚ΠΊΠ°Ρ‚Π°ΠΌΠΈ для ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ². [НСт ΠΏΡ€ΠΈΡ‡ΠΈΠ½ ΠΆΠ΄Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ; ΠΌΡ‹ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ смоТСм ΠΈΡ… ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ скоро.

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΎΠ΄Π½ΠΈΠΌΠΈ ΠΈΠ· самых Π²Π°ΠΆΠ½Ρ‹Ρ… частСй ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅, Π½ΠΎ Π·Π° 25-Π»Π΅Ρ‚Π½ΡŽΡŽ ΠΈΡΡ‚ΠΎΡ€ΠΈΡŽ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° ΠΎΠ½ΠΈ совсСм Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹. ВсС ΠΎ Π½ΠΈΡ… Π±Ρ‹Π»ΠΎ ΡƒΠΏΠΎΡ€Π½ΠΎ исправлСно: ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΈ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ, вСсь Π½Π°Π±ΠΎΡ€ Π² ΠΊΠ°ΠΌΠ½Π΅ ΠΎΠ΄Π½ΠΎΠΉ ЦБИ .

«ВсС, Ρ‡Ρ‚ΠΎ я сказал Π΄ΠΎ сих ΠΏΠΎΡ€, ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π·ΡŽΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ: ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ страницы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.… Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Ρ… страниц — это Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° доступных страниц. И, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π΅Π»ΠΈΠΊΠΎΠ΅ ΠΎΠ±Π΅Ρ‰Π°Π½ΠΈΠ΅ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π΅Ρ‰Π΅ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ, — это Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ, нСзависимо ΠΎΡ‚ трудности, ΠΊ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ «.

— Π”ΠΆΠΎΠ½ Оллсопп, Π”Π°ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°

Авторы HTML Π½Π°Ρ‡Π°Π»ΠΈ ΠΏΠΎ-настоящСму ΠΎΡ‰ΡƒΡ‰Π°Ρ‚ΡŒ эти ограничСния, ΠΊΠΎΠ³Π΄Π° экраны с высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΏΠΎΡ€Π°Π·ΠΈΠ»ΠΈ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚, ΠΊΠ°ΠΊ ΠΎΠ΄ΠΈΠ½-Π΄Π²Π° ΡƒΠ΄Π°Ρ€Π°.Авторы, ТСлая, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡ… изобраТСния выглядСли Ρ‡Π΅Ρ‚ΠΊΠΈΠΌΠΈ Π² ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ… ΠΈ ​​на экранах с высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ, Π½Π°Ρ‡Π°Π»ΠΈ Ρ€Π°ΡΡΡ‹Π»Π°Ρ‚ΡŒ всСм всС большиС ΠΈ большиС источники; срСдний Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ€Π°Π·Π΄ΡƒΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° изобраТСния; ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠΌΠ½Ρ‹Π΅ люди Π½Π°Π·Π²Π°Π»ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ «нСвСроятно ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌΒ».

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Π±Ρ‹Π»ΠΈ прСпятствиСм Π½ΠΎΠΌΠ΅Ρ€ ΠΎΠ΄ΠΈΠ½ Π½Π° ΠΏΡƒΡ‚ΠΈ ΠΊ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Ρ… ΠΈ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Ρ… страниц — страниц, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ Π²Π²Π΅Ρ€Ρ…, Ρ‚Π°ΠΊ ΠΈ Π²Π½ΠΈΠ·, эффСктивно Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΡΡΡŒ ΠΊΠ°ΠΊ ΠΊ ограничСниям, Ρ‚Π°ΠΊ ΠΈ ΠΊ возмоТностям контСкста просмотра.

Π­Ρ‚ΠΎ скоро измСнится.

ПослСдняя спСцификация элСмСнта — Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΌΠ½ΠΎΠ³ΠΎΠ»Π΅Ρ‚Π½ΠΈΡ… споров ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния. Π­Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π°Π²Ρ‚ΠΎΡ€Π°ΠΌ сСмантичСскиС способы ΡΠ³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ нСсколько вСрсий ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ изобраТСния, ΠΏΡ€ΠΈΡ‡Π΅ΠΌ каТдая вСрсия ΠΈΠΌΠ΅Π΅Ρ‚ тСхничСскиС характСристики, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅Π»Π°ΡŽΡ‚ Π΅Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ»ΠΈ ΠΌΠ΅Π½Π΅Π΅ подходящСй для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Новая спСцификация достигла ΡˆΠΈΡ€ΠΎΠΊΠΎΠ³ΠΎ согласия ΠΈ внСдряСтся Π² Chrome, Opera, Firefox ΠΈ Edge (ссылка) ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ я ΠΏΠ΅Ρ‡Π°Ρ‚Π°ΡŽ.

ΠŸΠΎΡ€Π° Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ этот ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» сСйчас !

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅ ( shiny! New! ), Π΄Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ способы измСнСния срСды просмотра, Ρ‚.Π΅.Π΅. способы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ наши изобраТСния.

  1. Наши изобраТСния Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Ρ‡Π΅Ρ‚ΠΊΠΈΠΌΠΈ ΠΏΡ€ΠΈ Ρ€Π°Π·Π½ΠΎΠΌ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ пиксСлСй устройства сСк. ΠœΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π° экранах с высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΈΡΡŒ изобраТСния с высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ, Π½ΠΎ ΠΌΡ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ эти изобраТСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ увидят всС эти лишниС пиксСли. НазовСм это Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ использования Π½Π° устройство с ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ΠΌ пиксСлСй .
  2. Если наш ΠΌΠ°ΠΊΠ΅Ρ‚ Π³ΠΈΠ±ΠΊΠΈΠΉ (Ρ‚. Π•. Адаптивный), наши изобраТСния Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ ΡΠΆΠΈΠΌΠ°Ρ‚ΡŒΡΡ ΠΈ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π΅ΠΌΡƒ. ΠœΡ‹ Π½Π°Π·ΠΎΠ²Π΅ΠΌ этот Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ использования с ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½Ρ‹ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.
  3. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ эти Π΄Π²Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° использования тСсно связаны: Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ ΠΎΠ±Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ наши изобраТСния Π±Ρ‹Π»ΠΈ доступны Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ эффСктивно ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ. ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΎΠ±Π΅ΠΈΡ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ использования ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°
  4. Иногда Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ наши изобраТСния способами, выходящими Π·Π° Ρ€Π°ΠΌΠΊΠΈ простого ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΌΡ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΠΌ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ изобраТСния ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ слСгка ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΡ… содСрТаниС. ΠœΡ‹ Π½Π°Π·ΠΎΠ²Π΅ΠΌ это Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ использования Π°Ρ€Ρ‚-Π΄ΠΈΡ€Π΅ΠΊΡ†ΠΈΠΈ.
  5. НаконСц, Ρ€Π°Π·Π½Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΌΡ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΠΌ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚, Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ WebP, Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π΅Π³ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ, ΠΈ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ ΠΊ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΌ старым Ρ„Π°ΠΉΠ»Π°ΠΌ JPEG Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ этого Π½Π΅ Π΄Π΅Π»Π°ΡŽΡ‚. ΠœΡ‹ Π½Π°Π·ΠΎΠ²Π΅ΠΌ это Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ использования с ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Ρ‚ΠΈΠΏΠΎΠ².

Новая спСцификация Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ для всСх этих случаСв. Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° Π½ΠΈΡ… ΠΏΠΎ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΠΈ.

ΠŸΠ΅Ρ€Π΅ΡƒΠΏΠΎΡ€ΡΠ΄ΠΎΡ‡ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ для Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ просто, ΠΎΠ΄Π½Π°ΠΊΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Ρ€Π°Π·Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ (ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΡ…) Π² зависимости ΠΎΡ‚ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ довольно слоТна.Ну, большС Π½Π΅Ρ‚. (Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прСдоставлСно)

device-pixel-ratio Use Case

Π”Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ просто с изобраТСния фиксированной ΡˆΠΈΡ€ΠΈΠ½Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊ Ρ€Π°Π·Π½Ρ‹ΠΌ device-pixel-ratio s. Для этого ΠΌΡ‹ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ инструмСнтом, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π°Π΅Ρ‚ новая спСцификация для Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ ΠΈ описания источников ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ: Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ srcset .

Допустим, Ρƒ нас Π΅ΡΡ‚ΡŒ Π΄Π²Π΅ вСрсии изобраТСния:

  • small.jpg (320 Γ— 240 пиксСлСй)
  • большоС.jpg (640 Γ— 480 пиксСлСй)

ΠœΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ large.jpg Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ с экранами высокого Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ srcset , ΠΌΡ‹ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΈΠΌ нашС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

  Π Π°Π΄ΡƒΠΆΠ½Ρ‹ΠΉ Π²ΠΎΠ»ΠΊ
  

Атрибут srcset ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ список URL-адрСсов ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… запятыми, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ с дСскриптором x , ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ с ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ΠΌ пиксСлСй устройства , для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ этот Ρ„Π°ΠΉΠ».

src ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ srcset . РазумССтся, alt Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ изобраТСния. Один элСмСнт ΠΈ Ρ‚Ρ€ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Π΄Π°ΡŽΡ‚ Π½Π°ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ выглядит Ρ‡Π΅Ρ‚ΠΊΠΈΠΌ Π½Π° устройствах с высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ эффСктивно Π΄Π΅Π³Ρ€Π°Π΄ΠΈΡ€ΡƒΠ΅Ρ‚ Π²ΠΏΠ»ΠΎΡ‚ΡŒ Π΄ΠΎ тСкста. НС слишком ΠΏΠΎΡ‚Π΅Ρ€Ρ‚Ρ‹ΠΉ!

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ использования Π³ΠΈΠ±ΠΊΠΈΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°

Π­Ρ‚Π° Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Π½Π΅ позволяСт эффСктивно ΡΠΆΠΈΠΌΠ°Ρ‚ΡŒ ΠΈ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π³ΠΈΠ±ΠΊΠΎΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚Π΅.ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΈΡŽ этого Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° использования Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ изобраТСния, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹.

ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ — это, ΠΏΠΎ словам Π‘Ρ‚ΠΈΠ²Π° БодСрса, «самоС большоС ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…Β». Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ часто ΡΠ²Π»ΡΡŽΡ‚ΡΡ самыми тяТСлыми элСмСнтами Π½Π° страницС; Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΈΡ… ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ скорСС Π² интСрСсах всСх. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΏΠ΅Ρ€Π²ΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ сдСлаСт со страницСй, — просканируСт HTML Π½Π° ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚ URL-адрСсов ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π½Π°Ρ‡Π½Π΅Ρ‚ ΠΈΡ… Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ. Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ Π΄Π΅Π»Π°Π΅Ρ‚ это Π·Π°Π΄ΠΎΠ»Π³ΠΎ Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ построит DOM, Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ внСшний CSS ΠΈΠ»ΠΈ раскрасит ΠΌΠ°ΠΊΠ΅Ρ‚.Π’ΠΎΠ³Π΄Π° Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ сцСнария использования ΠΆΠΈΠ΄ΠΊΠΎΠ³ΠΎ изобраТСния нСпросто; Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π²Ρ‹Π±Ρ€Π°Π» источник, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΎΠ½ ΡƒΠ·Π½Π°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ изобраТСния.

Π§Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ всСгда Π·Π½Π°Π΅Ρ‚, Ρ‚Π°ΠΊ это срСду, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΎΠ½ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Π² : Ρ€Π°Π·ΠΌΠ΅Ρ€ области просмотра, Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ экрана ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ Ρ‚ΠΎΠΌΡƒ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ эту ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, ΠΊΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΌΠ΅Π΄ΠΈΠ°-запросы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΡŽΡ‚ наши ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΊ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ срСдам просмотра.

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΠΎΠΉΡ‚ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ, Π² ΠΏΠ΅Ρ€Π²Ρ‹Ρ… прСдлоТСниях ΠΏΠΎ функциям Ρ„Π»ΡŽΠΈΠ΄-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π»ΠΎΡΡŒ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»ΡΡ‚ΡŒ ΠΌΠ΅Π΄ΠΈΠ°-запросы ΠΊ источникам.ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΎΡΠ½ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ наш ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ Π²Ρ‹Π±ΠΎΡ€Π° источника Π½Π° Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅ области просмотра, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π·Π½Π°Π΅Ρ‚ Π²ΠΎ врСмя Π²Ρ‹Π±ΠΎΡ€Π°, Π° Π½Π΅ Π½Π° ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΎΠ½ Π½Π΅ Π·Π½Π°Π΅Ρ‚.

Π Π°Π±ΠΎΡ‚Π° с Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ изобраТСниями оказалась настоящим ΠΊΠΎΡˆΠΌΠ°Ρ€ΠΎΠΌ. Π›ΡƒΡ‡ΡˆΠΈΠΉ способ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ своСй срСдС — просто ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния. ΠžΡ‚Ρ‡Π°ΡΡ‚ΠΈ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, ΠΏΡ€Π°Π²Π΄Π°. (Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прСдоставлСно)

Как оказалось, это плохая идСя. Π₯отя это тСхничСски Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΠΌΠΎ, вычислСниС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Ρ… ΠΌΠ΅Π΄ΠΈΠ°-запросов ΡƒΡ‚ΠΎΠΌΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈ Ρ‡Ρ€Π΅Π²Π°Ρ‚ΠΎ ошибками.Π›ΡƒΡ‡ΡˆΠ΅ всСго просто ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния !

Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΡ‹ сообщаСм Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, сколько пиксСлСй Π΅ΠΌΡƒ Π½ΡƒΠΆΠ½ΠΎ (с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½ΠΎΠ²ΠΎΠ³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°, Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ) ΠΈ сколько пиксСлСй ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· источников ΠΈΠΌΠ΅Π΅Ρ‚ (с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ дСскрипторов w Π² srcset ), Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ источник становится Ρ‚Ρ€ΠΈΠ²ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌ. Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ наимСньший источник, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ всС Ρ€Π°Π²Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ достаточно Ρ‡Π΅Ρ‚ΠΊΠΎ Π² своСм ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅.

Π”Π°Π²Π°ΠΉΡ‚Π΅ сдСлаСм этот Π±Π΅Ρ‚ΠΎΠ½, развивая наш ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€.ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ нас Π΅ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ вСрсии нашСго изобраТСния:

  • large.jpg (1024 Γ— 768 пиксСлСй)
  • medium.jpg (640 Γ— 480 пиксСлСй)
  • small.jpg (320 Γ— 240 пиксСлСй)

И ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΈΡ… Π² Π³ΠΈΠ±ΠΊΠΎΠΉ сСткС — сСткС, которая начинаСтся с ΠΎΠ΄Π½ΠΎΠ³ΠΎ столбца, Π½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π½Π° Ρ‚Ρ€ΠΈ столбца Π² Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΎΠΊΠ½Π°Ρ… просмотра, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ сСтки. (Π‘ΠΌ. Π”Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ)

Π’ΠΎΡ‚ ΠΊΠ°ΠΊ ΠΌΡ‹ это Ρ€Π°Π·ΠΌΠ΅Ρ‡Π°Π΅ΠΌ:

  Π Π°Π΄ΡƒΠΆΠ½Ρ‹ΠΉ Π²ΠΎΠ»ΠΊ
  

ΠœΡ‹ снова ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ srcset , Π½ΠΎ вмСсто дСскрипторов x ΠΌΡ‹ прикрСпляСм дСскрипторы w ΠΊ нашим источникам. Они ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ Ρ„Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° Π² пиксСлях. Π˜Ρ‚Π°ΠΊ, Ссли Π²Ρ‹ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ для Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°β€¦Β» с Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ 1024 Γ— 768 пиксСлСй, Ρ‚ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅ этот источник Π² srcset ΠΊΠ°ΠΊ 1024w .

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρƒ изобраТСния .ΠŸΠΎΡ‡Π΅ΠΌΡƒ Ρ‚ΠΎΠΆΠ΅ Π½Π΅ высоты? Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Π² нашСм ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Ρ‹ ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅; ΠΈΡ… ΡˆΠΈΡ€ΠΈΠ½Π° явно задаСтся CSS, Π° высота — Π½Π΅Ρ‚. ΠŸΠΎΠ΄Π°Π²Π»ΡΡŽΡ‰Π΅Π΅ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π΄ΠΈΠΊΠΎΠΉ ΠΏΡ€ΠΈΡ€ΠΎΠ΄Π΅ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‚ ограничСния ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅, поэтому спСцификация ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ, работая Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ. Π•ΡΡ‚ΡŒ нСсколько вСских ΠΏΡ€ΠΈΡ‡ΠΈΠ½ для Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ высоты, Π½ΠΎ ΠΏΠΎΠΊΠ° Π½Π΅Ρ‚.

Π˜Ρ‚Π°ΠΊ, это w Π² srcset , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ описываСт, сколько пиксСлСй ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½Π°ΡˆΠΈΡ… источников ΠΈΠΌΠ΅Π΅Ρ‚ . Π”Π°Π»Π΅Π΅, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² .Атрибут sizes сообщаСт Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, сколько пиксСлСй Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ , описывая ΠΊΠΎΠ½Π΅Ρ‡Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ изобраТСния. ΠŸΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… ΠΊΠ°ΠΊ ΠΎ способС Π΄Π°Ρ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ страницы Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π½ΡŒΡˆΠ΅ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ ΠΌΠΎΠ³ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ источник Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ ΠΏΡ€ΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈΠ»ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ CSS страницы.

ΠœΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ это, пСрСдавая Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Π΄Π»ΠΈΠ½Ρƒ CSS, которая описываСт ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎ изобраТСния. Π”Π»ΠΈΠ½Π° CSS ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠΉ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, 99px ΠΈΠ»ΠΈ 16em ) ΠΈΠ»ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ области просмотра ( 33.3vw , ΠΊΠ°ΠΊ Π² нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅). Π­Ρ‚Π° Ρ‡Π°ΡΡ‚ΡŒ Β«ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ области просмотра» позволяСт изобраТСниям ΡΠ³ΠΈΠ±Π°Ρ‚ΡŒΡΡ.

Если нашС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Ρ‚Ρ€Π΅Ρ‚ΡŒ области просмотра, Ρ‚ΠΎ наш Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ sizes Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

  sizes = "33.3vw"
  

Наш ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π΅ Ρ‚Π°ΠΊ прост. Наш ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚ΠΎΡ‡ΠΊΡƒ останова Π² 36 ems. Когда ΠΎΠ±Π»Π°ΡΡ‚ΡŒ просмотра ΡƒΠΆΠ΅, Ρ‡Π΅ΠΌ 36 em, ΠΌΠ°ΠΊΠ΅Ρ‚ измСняСтся. НиТС этой Ρ‚ΠΎΡ‡ΠΊΠΈ останова ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ 100% ΡˆΠΈΡ€ΠΈΠ½Ρ‹ области просмотра. Как ΠΌΡ‹ Π·Π°ΠΊΠΎΠ΄ΠΈΡ€ΡƒΠ΅ΠΌ эту ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π² нашСм Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ sizes ?

ΠœΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ это ΠΏΡƒΡ‚Π΅ΠΌ объСдинСния ΠΌΠ΅Π΄ΠΈΠ°-запросов с Π΄Π»ΠΈΠ½Π°ΠΌΠΈ:

  sizes = "(min-width: 36em) 33.3Π²Π²,
   100vw "
  

Π­Ρ‚ΠΎ Π΅Π³ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚:

  sizes = "[ΠΌΠ΅Π΄ΠΈΠ°-запрос] [Π΄Π»ΠΈΠ½Π°],
   [ΠΌΠ΅Π΄ΠΈΠ°-запрос] [Π΄Π»ΠΈΠ½Π°],
   Ρ‚Π°ΠΊ далСС…
   [Π΄Π»ΠΈΠ½Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ] "
  

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ просматриваСт ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΌΠ΅Π΄ΠΈΠ°-запрос, ΠΏΠΎΠΊΠ° Π½Π΅ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ подходящий, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΏΠ°Ρ€Π½ΡƒΡŽ Π΄Π»ΠΈΠ½Ρƒ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ запроса. Если ΠΌΠ΅Π΄ΠΈΠ°-запросы Π½Π΅ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‚, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π΄Π»ΠΈΠ½Ρƒ Β«ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽΒ», Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π»ΡŽΠ±ΡƒΡŽ Π²ΡΡ‚Ρ€Π΅Ρ‡Π½ΡƒΡŽ Π΄Π»ΠΈΠ½Ρƒ, Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‰ΡƒΡŽ ΠΏΠ°Ρ€Π½ΠΎΠ³ΠΎ запроса.

Обладая ΠΊΠ°ΠΊ Π΄Π»ΠΈΠ½ΠΎΠΉ sizes , Ρ‚Π°ΠΊ ΠΈ Π½Π°Π±ΠΎΡ€ΠΎΠΌ источников с дСскрипторами w Π² srcset Π½Π° Π²Ρ‹Π±ΠΎΡ€, Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Π΅ΡΡ‚ΡŒ всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ для эффСктивной Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ изобраТСния Π² Π³ΠΈΠ±ΠΊΠΎΠΌ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚Π΅.

Π—Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΈ w Π² srcset Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ достаточно ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‰Π΅ΠΌΡƒΡΡ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ пиксСлСй устройства s. ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΡ Π΄Π»ΠΈΠ½Ρƒ CSS, ΠΌΡ‹ Π΄Π°Π΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² пиксСлСй Π² CSS; ΠΈ, ΡƒΠΌΠ½ΠΎΠΆΠΈΠ² это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… пиксСлСй устройства , Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π·Π½Π°Π΅Ρ‚ количСство пиксСлСй устройства, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π΅ΠΌΡƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ — нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠ²ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ΅ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ пиксСлСй устройства .

Π˜Ρ‚Π°ΠΊ, хотя ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΈΠ· нашСго Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° использования с ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ΠΌ пиксСлСй устройства Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с фиксированной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΈ ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ экраны 1x ΠΈ 2x, этот ΠΏΡ€ΠΈΠΌΠ΅Ρ€ srcset ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ использованиС ΠΆΠΈΠ΄ΠΊΠΈΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. случаС, Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ адаптируСтся ΠΊ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠΉ плотности экрана.

ΠœΡ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ сразу ΠΎΠ±Π΅ Π·Π°Π΄Π°Ρ‡ΠΈ. На языкС, ΠΈΠ·Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΌ Π² Π½Π°Ρ‡Π°Π»Π΅ этой ΡΡ‚Π°Ρ‚ΡŒΠΈ, w Π² srcset ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ использования ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°.

Π§Ρ‚ΠΎ Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, эта Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Ρ‚Π°ΠΊΠΆΠ΅ Π΄Π°Π΅Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ пространство для ΠΌΠ°Π½Π΅Π²Ρ€Π° . ΠŸΡ€ΠΈΠ²ΡΠ·ΠΊΠ° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… условий просмотра ΠΊ источникам ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ ΠΈΡ… Π½Π° основС строгого Π½Π°Π±ΠΎΡ€Π° условий. «Если экран высокого Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ, - Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΌΡ‹ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, - Ρ‚ΠΎ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот источник».Β«ΠŸΡ€ΠΎΡΡ‚ΠΎ описав Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ рСсурсов с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ w Π² srcset ΠΈ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ , ΠΌΡ‹ Π΄Π°Π΅ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ свои Π±ΠΎΠ³Π°Ρ‚Ρ‹Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ знания ΠΎ срСдС Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ для Π²Ρ‹Π±ΠΎΡ€Π° источника. ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°. БпСцификация позволяСт Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌ, скаТСм, Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ источники мСньшСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΊΠΎΠ³Π΄Π° полоса пропускания низкая ΠΈΠ»ΠΈ дорогая.

Π•Ρ‰Π΅ ΠΊΠΎΠ΅-Ρ‡Ρ‚ΠΎ. Π’ нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния всСгда составляСт простой ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ ΠΎΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ области просмотра.Π§Ρ‚ΠΎ, Ссли Π±Ρ‹ наш ΠΌΠ°ΠΊΠ΅Ρ‚ объСдинил ΠΊΠ°ΠΊ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΡƒΡŽ, Ρ‚Π°ΠΊ ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π΄Π»ΠΈΠ½Ρƒ, скаТСм, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ панСль ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 12 см ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ ΠΈΠ· Ρ‚Ρ€Π΅Ρ… столбцов, ΠΊΠ°ΠΊ это?

ΠœΠ°ΠΊΠ΅Ρ‚ сочСтаСт Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΡƒΡŽ ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π΄Π»ΠΈΠ½Ρƒ. (Π‘ΠΌ. Π”Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ)

ΠœΡ‹ Π±Ρ‹ использовали ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ calc () Π² нашСм Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ sizes .

  sizes = "(min-width: 36em) calc (.333 * (100vw - 12em)),
   100vw "
  

Π˜β€¦ Π³ΠΎΡ‚ΠΎΠ²ΠΎ!

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования Art-Direction

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π³ΠΎΡ‚ΠΎΠ²ΠΈΠΌ Π½Π° Π³Π°Π·Ρƒ! ΠœΡ‹ ΡƒΠ·Π½Π°Π»ΠΈ, ΠΊΠ°ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ‡Π°Ρ‚ΡŒ изобраТСния Ρ€Π°Π·Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ эффСктивно ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π½ΠΈΠ·, обСспСчивая Ρ‡Π΅Ρ‚ΠΊΡƒΡŽ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ Π½Π° всСх Π±Π΅Π· ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ…, ΠΎΠΊΠ½Π°Ρ… просмотра ΠΈ экранах.

Но Ρ‡Ρ‚ΠΎ, Ссли ΠΌΡ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΠΎΠΉΡ‚ΠΈ дальшС? Π§Ρ‚ΠΎ, Ссли Π±Ρ‹ ΠΌΡ‹ Π·Π°Ρ…ΠΎΡ‚Π΅Π»ΠΈ большС Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ?

Когда Apple прСдставила iPad Air Π² ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΌ Π³ΠΎΠ΄Ρƒ, Π½Π° Π΅Π΅ Π²Π΅Π±-сайтС Π±Ρ‹Π»ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΎ ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ этого устройства. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Π½ΠΈΡ‡Π΅ΠΌ Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ, Ссли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ - ΠΊΠ°ΠΊ это Π΄Π΅Π»Π°ΡŽΡ‚ Π³ΠΈΠΊΠΈ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° - ΠΏΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Когда ΠΎΠ±Π»Π°ΡΡ‚ΡŒ просмотра Π±Ρ‹Π»Π° достаточно ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠΉ, iPad сдСлал Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π²Π΅Ρ‰ΡŒ: ΠΎΠ½ повСрнулся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ области просмотра!

ΠœΡ‹ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌ это Β«Π°Ρ€Ρ‚-Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΎΠΌΒ».

Apple создала своС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, злоупотрСбляя HTML ΠΈ CSS: Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΈΠ»Π° своС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ - ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ явно содСрТало - ΠΊΠ°ΠΊ пустой div ΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΠ»Π° Π΅Π³ΠΎ background-image с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.Новая спСцификация позволяСт Π°Π²Ρ‚ΠΎΡ€Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ худоТСствСнноС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ Π½Π° основС Ρ‚ΠΎΡ‡Π΅ΠΊ останова ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π² HTML.

БпСцификация ΠΎΠ±Π»Π΅Π³Ρ‡Π°Π΅Ρ‚ это ΠΏΡƒΡ‚Π΅ΠΌ налоТСния Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ источников ΠΏΠΎΠ²Π΅Ρ€Ρ… srcset : ΠΈ source .

ВСрнСмся ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ. ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρ‡Ρ‚ΠΎ вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ Π½Π°ΡˆΠ΅ΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π·Π°ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ области просмотра Π½Π° ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… экранах, ΠΌΡ‹ ΠΎΠ±Ρ€Π΅Π·Π°Π΅ΠΌ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ изобраТСния, увСличивая ΠΌΠ°ΡΡˆΡ‚Π°Π± Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΠΎΠΉ части ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° ΠΈ прСдставляСм эту ΠΌΠ°Π»Π΅Π½ΡŒΠΊΡƒΡŽ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½ΡƒΡŽ ΠΎΠ±Ρ€Π΅Π·ΠΊΡƒ фиксированного Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΡƒΡŽ Π²Π»Π΅Π²ΠΎ. , оставляя ΠΌΠ½ΠΎΠ³ΠΎ мСста для ΠΎΠΏΠΈΡΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ тСкста, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ с изобраТСниями, ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Π΅Π½Π½Ρ‹ΠΌΠΈ с ΠΎΠΏΠΈΡΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ тСкстом.(Π‘ΠΌ. Π”Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ)

Для этого Π½Π°ΠΌ понадобится ΠΏΠ°Ρ€Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… источников ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ:

  • cropped-small.jpg (96 Γ— 96 пиксСлСй)
  • cropped-large.jpg (192 Γ— 192 пиксСлСй)
  • small.jpg (320 Γ— 240 пиксСлСй)
  • medium.jpg (640 Γ— 480 пиксСлСй)
  • large.jpg (1024 Γ— 768 пиксСлСй)

Как ΠΌΡ‹ ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ‡Π°Π΅ΠΌ ? Π’ΠΎΡ‚ Ρ‚Π°ΠΊ:

  <ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°>
   
   
   Π Π°Π΄ΡƒΠΆΠ½Ρ‹ΠΉ Π²ΠΎΠ»ΠΊ

  

Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ слоТСн, насколько это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π² Π½Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ всС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ рассмотрСли Π΄ΠΎ сих ΠΏΠΎΡ€. Π”Π°Π²Π°ΠΉΡ‚Π΅ разбСрСмся.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ содСрТит Π΄Π²Π° источника s ΠΈ img . Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ s ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π΄Π²Π΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ худоТСствСнныС вСрсии изобраТСния (ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½ΠΎΠ΅ ΠΊΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΊΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅).(ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ) img слуТит нашим запасным Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ. Как ΠΌΡ‹ вскорС ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠΌ, Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΎΠ½ выполняСт Π·Π° кулисами.

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ посмотрим Π½Π° этот ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ источник :

  
  

Π­Ρ‚ΠΎΡ‚ исходный ΠΊΠΎΠ΄ прСдставляСт собой ΠΏΠΎΠ»Π½ΡƒΡŽ Π½Π΅ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ нашСго изобраТСния. ΠœΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Ρ‚Ρ€Π΅Ρ…ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚Π΅, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΊΠΎΠ³Π΄Π° ΠΎΠ±Π»Π°ΡΡ‚ΡŒ просмотра ΡˆΠΈΡ€Π΅ 36 em.ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ здСсь, media = Β«(min-width: 36em)Β» , Π΄Π΅Π»Π°Π΅Ρ‚ это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌ. Если запрос Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ media оцСниваСтся ΠΊΠ°ΠΊ true , Ρ‚ΠΎΠ³Π΄Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот источник ; Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС ΠΎΠ½ пропускаСтся.

Π”Π²Π° Π΄Ρ€ΡƒΠ³ΠΈΡ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° источника - srcset ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² - Π² основном скопированы ΠΈΠ· нашСго ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°. Одно ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅: ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ этот источник Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π±Ρ€Π°Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Ρ‚Ρ€Π΅Ρ…ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, для нашСго Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° sizes трСбуСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½Π° Π΄Π»ΠΈΠ½Π°, 33.3vw .

Когда ΠΎΠ±Π»Π°ΡΡ‚ΡŒ просмотра ΡƒΠΆΠ΅, Ρ‡Π΅ΠΌ 36 ems, ΠΌΠ΅Π΄ΠΈΠ°-запрос ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ источника Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ†Π΅Π½ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ false , ΠΈ ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌΡƒ:

  
  

Π­Ρ‚ΠΎ наш нСбольшой ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹ΠΉ ΡƒΡ€ΠΎΠΆΠ°ΠΉ. Π­Ρ‚Π° вСрсия отобраТаСтся с фиксированной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ, Π½ΠΎ ΠΌΡ‹ всС ΠΆΠ΅ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»Π°ΡΡŒ Ρ‡Π΅Ρ‚ΠΊΠΎ Π½Π° экранах с высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΌΡ‹ прСдоставили вСрсии 1x ΠΈ 2x ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΈΠ»ΠΈ ΠΈΡ… простыми дСскрипторами x .

НаконСц, ΠΌΡ‹ подошли ΠΊ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π°ΠΆΠ½ΠΎΠΌΡƒ ( Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ трСбуСтся! ) img .

Π›ΡŽΠ±ΠΎΠΉ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ элСмСнт audio ΠΈΠ»ΠΈ video , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ являСтся источником , рассматриваСтся ΠΊΠ°ΠΊ Ρ€Π΅Π·Π΅Ρ€Π²Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈ скрываСтся Π² ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Ρ‚ΠΎ ΠΆΠ΅ самоС ΠΈ с img здСсь. ΠΠ΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ! ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ фактичСски видят элСмСнт img , ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ . Π‘Π΅Π· img Π½Π΅Ρ‚ изобраТСния; ΠΈ всС Π΅Π³ΠΎ источники ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΏΠΎΠ΄Π°Ρ‡ΠΈ Π½Π° Π½Π΅Π³ΠΎ источника.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ? Одна ΠΈΠ· основных ΠΏΡ€Π΅Ρ‚Π΅Π½Π·ΠΈΠΉ ΠΊ ΠΏΠ΅Ρ€Π²ΠΎΠΉ спСцификации Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π»Π°ΡΡŒ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° Π·Π°Π½ΠΎΠ²ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π΅Π»Π° колСсо, ΠΎΠΏΠΈΡ€Π°ΡΡΡŒ Π½Π° ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½ΠΎΠ²Ρ‹ΠΉ ΠΌΠ΅Π΄ΠΈΠ°-элСмСнт HTML, Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΉ строкам audio ΠΈ video , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² основном Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Π»ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ img . Дублированная Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚ ΠΏΠΎ Π²Π½Π΅Π΄Ρ€Π΅Π½ΠΈΡŽ ΠΈ ΠΎΠ±ΡΠ»ΡƒΠΆΠΈΠ²Π°Π½ΠΈΡŽ - Ρ€Π°Π±ΠΎΡ‚Ρƒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ поставщики Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π½Π΅ Ρ…ΠΎΡ‚Π΅Π»ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ.

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π² Π½ΠΎΠ²ΠΎΠΉ спСцификации ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ΅ использованиС img . сам ΠΏΠΎ сСбС Π½Π΅Π²ΠΈΠ΄ΠΈΠΌ, Ρ‡Π΅ΠΌ-Ρ‚ΠΎ ΠΏΠΎΡ…ΠΎΠΆ Π½Π° Π²ΠΎΠ»ΡˆΠ΅Π±Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ»Π΅Ρ‚ . Π•Π³ΠΎ исходный ΠΊΠΎΠ΄ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΌΠΎΠ³ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ вСрсии изобраТСния. ПослС Π²Ρ‹Π±ΠΎΡ€Π° исходного URL-адрСса этот URL-адрСс пСрСдаСтся Π½Π° img . На ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π»ΡŽΠ±Ρ‹Π΅ стили, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, max-width: 100% ), Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΊ img , Π° Π½Π΅ ΠΊ .

Π₯ΠΎΡ€ΠΎΡˆΠΎ, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ нашСй послСднСй Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ.

Π’Π°Ρ€ΠΈΠ°Π½Ρ‚ использования ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Ρ‚ΠΈΠΏΠΎΠ²

ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρ‡Ρ‚ΠΎ вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄Π΅Π»Π°Ρ‚ΡŒ всС это сТатиС, растягиваниС ΠΈ Π°Π΄Π°ΠΏΡ‚Π°Ρ†ΠΈΡŽ ΠΊ бСсчислСнным условиям области просмотра, ΠΌΡ‹ просто Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Ρ„Π°ΠΉΠ»Π° ΠΈ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ запасной Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ для Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² . Для этого ΠΌΡ‹ слСдуСм ΡˆΠ°Π±Π»ΠΎΠ½Ρƒ, установлСнному Π°ΡƒΠ΄ΠΈΠΎ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ : Ρ‚ΠΈΠΏ источника .

  <рисунок>
   
   
   RadWolf, Inc.

  

Если Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ распознаСт Ρ‚ΠΈΠΏ носитСля image / svg , ΠΎΠ½ пропускаСт ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ источник ; Ссли ΠΎΠ½ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½ΡΡ‚ΡŒ image / png , ΠΎΠ½ возвращаСтся ΠΊ img ΠΈ GIF.

Π’ΠΎ врСмя Ρ‡Ρ€Π΅Π·Π²Ρ‹Ρ‡Π°ΠΉΠ½ΠΎ Π±ΠΎΠ»Π΅Π·Π½Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠ΅Ρ€ΠΈΠΎΠ΄Π° ΠΎΡ‚ GIF ΠΊ PNG Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π±Ρ‹Π»ΠΈ Π±Ρ‹ ΡƒΠ±ΠΈΡ‚Ρ‹ ΠΈΠ·-Π·Π° Ρ‚Π°ΠΊΠΎΠΉ возмоТности. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ Π΄Π°Π΅Ρ‚ Π½Π°ΠΌ это, закладывая основу для Π½ΠΎΠ²Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π»Π΅Π³ΠΊΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ Π² блиТайшиС Π³ΠΎΠ΄Ρ‹.

Π’ΠΎΡ‚ ΠΈ всС!

Π’ΠΎΡ‚ ΠΈ всС: каТдая функция Π² Π½ΠΎΠ²ΠΎΠΉ спСцификации ΠΈ обоснованиС ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· Π½ΠΈΡ…. Π’ Ρ†Π΅Π»ΠΎΠΌ, srcset , x , w , Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² , , source , media ΠΈ type Π΄Π°ΡŽΡ‚ Π½Π°ΠΌ Π±ΠΎΠ³Π°Ρ‚Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ инструмСнтов, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ изобраТСния ΠΏΠΎ-настоящСму. Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΠΎΡΡ‚ΡŒ - изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ( Π½Π°ΠΊΠΎΠ½Π΅Ρ†! ) эффСктивно ΠΏΠ΅Ρ€Π΅Ρ‚Π΅ΠΊΠ°Ρ‚ΡŒ Π² Π³ΠΈΠ±ΠΊΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΈ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ спСктр устройств.

БпСцификация Π΅Ρ‰Π΅ Π½Π΅ ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ . ΠŸΠ΅Ρ€Π²Ρ‹Π΅ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ находятся Π² стадии Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈ находятся ΠΏΠΎΠ΄ ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ Ρ„Π»Π°Π³Π°ΠΌΠΈ; Π΅Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈ Π°Π²Ρ‚ΠΎΡ€Ρ‹ Π΅ΠΆΠ΅Π΄Π½Π΅Π²Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ вмСстС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄Π΅Ρ‚Π°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π΄Π΅Ρ‚Π°Π»ΠΈ спСцификации. ВсС это происходит ΠΏΠΎΠ΄ эгидой сообщСства Responsive Images Community Group. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π·Π° новостями, ΠΏΡ€ΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΠΊ Π³Ρ€ΡƒΠΏΠΏΠ΅, заглянитС Π½Π° IRC-ΠΊΠ°Π½Π°Π», Π²Π·Π²Π΅ΡΡŒΡ‚Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ GitHub ΠΈΠ»ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΡŒΡ‚Π΅ Π½ΠΎΠ²ΡƒΡŽ, ΠΏΠΎΠ΄ΠΏΠΈΡˆΠΈΡ‚Π΅ΡΡŒ Π½Π° ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π±ΡŽΠ»Π»Π΅Ρ‚Π΅Π½ΡŒ ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡˆΠΈΡ‚Π΅ΡΡŒ Π½Π° RICG Π² Twitter.

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π»ΠΈΡ‚Π΅Ρ€Π°Ρ‚ΡƒΡ€Π° ΠΏΠΎ SmashingMag:
(il, al)

Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² с ΠΆΠΈΠ΄ΠΊΠΈΠΌΠΈ изобраТСниями с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ нСбольшого ΠΊΠΎΠ΄Π° CSS Padding

ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ°

Π‘Ρ†Π΅Π½Π°Ρ€ΠΈΠΉ: изобраТСния с ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ изобраТСния Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ, ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ сначала каТутся свСрнутыми.

ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° здСсь Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ высоты, ΠΈ установка фиксированной высоты Π±Ρ‹Π»Π° Π±Ρ‹ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΉ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΡ‹ Π½Π΅ Π·Π½Π°Π΅ΠΌ, сколько мСста эти изобраТСния с Π³ΠΈΠ±ΠΊΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ.

.grumpy-image-wrapper {
    ΡˆΠΈΡ€ΠΈΠ½Π°: 90%;
    Π³Ρ€Π°Π½ΠΈΡ†Π°: 2 пиксСля сплошного Π±Π΅Π»ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π°; / * просто Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Π°ΠΌ свСрнутоС состояниС для этой дСмонстрации * /
}
.grumpy-image {
    ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
}
     

ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

Π”ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ:

ПослС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ:

Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ исходная структура выглядит уТасно ΠΈ свСрнуто, ΠΈ любой ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρƒ вас Π΅ΡΡ‚ΡŒ нСпосрСдствСнно ΠΏΠΎΠ΄ изобраТСниями, Π²Π½Π΅Π·Π°ΠΏΠ½ΠΎ смСщаСтся Π²Π½ΠΈΠ· ΠΏΠΎ области просмотра ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Π˜ΡΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅

ΠŸΠ΅Ρ€Π΅Ρ‚ΡΠΆΠΊΠ° ΡΠΏΠ΅ΡˆΠΈΡ‚ Π½Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ! Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ: ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон изобраТСния

Если ΠΌΡ‹ Π·Π½Π°Π΅ΠΌ, Π² ΠΊΠ°ΠΊΠΎΠΌ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ этот ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ способ заполнСния ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ ΠΏΠ»Π°Π²Π½ΠΎ измСнял Ρ€Π°Π·ΠΌΠ΅Ρ€ Π΄ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ²:

НиТний отступ = (Высота изобраТСния / Π¨ΠΈΡ€ΠΈΠ½Π° изобраТСния) * 100%

НС Π·Π½Π°Π΅Ρ‚Π΅ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅? Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ слСдуСт ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ способ Π²ΠΎΠ·Π²Ρ€Π°Ρ‚Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² изобраТСния Π²ΠΎ внСшний интСрфСйс Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ изобраТСния Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°ΠΏΡ€ΠΎΡˆΠ΅Π½Ρ‹.Π­Ρ‚ΠΎ Π½Π΅ идСальноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, Π½ΠΎ Ρ‚ΠΎΠ³Π΄Π° Π²Ρ‹ смоТСтС динамичСски ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ это Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript.

Π’ случаС ΠΌΠΎΠ΅ΠΉ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ сварливого ΠΊΠΎΡ‚Π° исходныС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ изобраТСния ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ 360 x 240, поэтому ΠΌΠΎΠΉ padding-bottom Π½Π° ΠΎΠ±Π΅Ρ€Ρ‚ΠΊΠ΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ 66,67% для ΠΈΠΌΠΈΡ‚Π°Ρ†ΠΈΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΉ высоты.

(Π½ΠΈΠΆΠ΅ Π΅ΡΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΏΠ°Ρ€Π° Π²Π°ΠΆΠ½Ρ‹Ρ… инструкций ...)

.grumpy-image-wrapper {
    ΡˆΠΈΡ€ΠΈΠ½Π°: 90%;
    высота: 0;
    ΠΎΠ±ΠΈΠ²ΠΊΠ°-Π½ΠΈΠ·: 66,67%;
    Π³Ρ€Π°Π½ΠΈΡ†Π°: 2 пиксСля сплошного Π±Π΅Π»ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π°;
    ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅;
}
.grumpy-image {
    ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
    позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
}
     

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π²Π°ΠΆΠ½Ρ‹Π΅ инструкции!

Нам Ρ‚Π°ΠΊΠΆΠ΅ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ position: absolute ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ ΠΈ position: relative ΠΊ ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠ΅ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ отступы Π½Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ ΠΊ высотС изобраТСния, ΠΊΠΎΠ³Π΄Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ вычисляСт высоту ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ.

Если Π²Π°ΠΌ трСбуСтся Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ изобраТСния, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ это Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΡ€ΠΈ расчСтС количСства Π½ΠΈΠΆΠ½Π΅Π³ΠΎ отступа, примСняСмого Π² этом исправлСнии. Если количСство Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… отступов ΠΈΠ»ΠΈ Π³Ρ€Π°Π½ΠΈΡ† Π½Π΅ Ρ€Π°Π²Π½ΠΎ%, Ρ‚ΠΎΠ³Π΄Π° Π²Π°ΠΌ, вСроятно, придСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ box-sizing: border-box, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ вашСй ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ Π½Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π»ΠΈΡΡŒ ΠΈΠ·-Π·Π° стиля ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ.

Π˜Ρ‚Π°ΠΊ, Π²ΠΎΡ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π”ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ:

ПослС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ:

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ: ΠΊΠ°ΠΊ насчСт Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π³ΠΎ состояния ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈ постСпСнного исчСзновСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π³ΠΎΡ‚ΠΎΠ²Ρ‹?

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ Π½Π°Π²ΠΎΡ€ΠΎΡ‚Ρ‹, Π²ΠΎΡ‚ нСбольшой Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠ°ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ состояниС ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈ ΠΈΡΡ‡Π΅Π·Π½ΡƒΡ‚ΡŒ Π½Π° изобраТСниях Ρ‚ΠΎΠ»ΡŒΠΊΠΎ послС ΠΈΡ… ΠΏΠΎΠ»Π½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ:

Π”Π΅ΠΌΠΎ: https: // jsfiddle.net / andyshora / 5YVNN /

На этом ΠΏΠΎΠΊΠ° всС!

Бпасибо Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ всСгда, оставляйтС свои вопросы ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ Π½ΠΈΠΆΠ΅!

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π² CSS

  1. Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹
  2. β€Ί
  3. CSS
  4. β€Ί
  5. Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π² CSS

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ с Π³Ρ€Π°Π½ΠΈΡ†Π°ΠΌΠΈ ΠΈΠ»ΠΈ Ρ€Π°ΠΌΠΊΠ°ΠΌΠΈ Π΄Π΅Π»Π°ΡŽΡ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΠΎΠ»Π΅Π΅ Π²Ρ‹Ρ€Π°Π·ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π° страницС. Π’ этом Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π΅ ΠΌΡ‹ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ€Π°ΠΌΠΊΡƒ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² HTML5. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΌΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ вмСсто этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство CSS border.

Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ HTMLΒΆ

  • Π’ Ρ€Π°Π·Π΄Π΅Π»Π΅ создайтС элСмСнт ΠΈ помСститС ссылку Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.
  • Π—Π°Π΄Π°ΠΉΡ‚Π΅ имя изобраТСния с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ alt, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π°Π΅Ρ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎΠ± ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ, Ссли ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π΅Π³ΠΎ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ.
   Nature   

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ CSSΒΆ

  • Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΡ‚ΠΈΠ»ΡŒ ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ элСмСнту .
  • ΠžΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚Π΅ ΡˆΠΈΡ€ΠΈΠ½Ρƒ изобраТСния.
  • ΠžΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚Π΅ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, ΡΡ‚ΠΈΠ»ΡŒ ΠΈ Ρ†Π²Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΠΌΠΎΡ‰ΡŒ ΠΏΡ€ΠΈΠ³Ρ€Π°Π½ΠΈΡ‡Π½ΠΎΠ³ΠΎ имущСства.
  img {
  ΡˆΠΈΡ€ΠΈΠ½Π°: 270 пиксСлСй;
  Π³Ρ€Π°Π½ΠΈΡ†Π°: сплошной Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ 1px;
}  

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ добавлСния Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ: ΒΆ

  

  
     НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° 
    <ΡΡ‚ΠΈΠ»ΡŒ>
      img {
        ΡˆΠΈΡ€ΠΈΠ½Π°: 270 пиксСлСй;
        Π³Ρ€Π°Π½ΠΈΡ†Π°: сплошной Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ 1px;
      }
    
  
  
     ΠŸΡ€ΠΈΡ€ΠΎΠ΄Π°  
  
ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ΒΆ

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ свойство Ρ†Π²Π΅Ρ‚Π° CSS. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄Π²ΠΎΠΉΠ½ΡƒΡŽ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ свойство padding ΠΊ ΡΡ‚ΠΈΠ»ΡŽ вашСго изобраТСния.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ добавлСния Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ: ΒΆ

  

  
     НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° 
    <ΡΡ‚ΠΈΠ»ΡŒ>
      img {
        ΡˆΠΈΡ€ΠΈΠ½Π°: 650 пиксСлСй;
        отступ: 1 пиксСль;
        Π³Ρ€Π°Π½ΠΈΡ†Π°: 1px solid # 021a40;
      }
    
  
  
     

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹

 ΠŸΡ€ΠΈΡ€ΠΎΠ΄Π°
ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Π’Π°ΠΊΠΆΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ Π΄Π²ΠΎΠΉΠ½ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ с Π΄Ρ€ΡƒΠ³ΠΈΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹. Для этого Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ свойство background-color.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ стилизации Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ изобраТСния: ΒΆ

  

  
     НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° 
    <ΡΡ‚ΠΈΠ»ΡŒ>
      img {
        ΡˆΠΈΡ€ΠΈΠ½Π°: 650 пиксСлСй;
        отступ: 5 пиксСлСй;
        Π³Ρ€Π°Π½ΠΈΡ†Π°: 8px solid # 999999;
        Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # e6e6e6;
      }
    
  
  
     ΠŸΡ€ΠΈΡ€ΠΎΠ΄Π° 
  
  
ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ добавляСм Π³Ρ€Π°Π½ΠΈΡ†Ρƒ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Ρ†Π²Π΅Ρ‚Π½ΠΎΠΉ Ρ„ΠΎΠ½. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ€Π°ΠΌΠΊΠΈ, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ отступы.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ кадрирования изобраТСния с Ρ†Π²Π΅Ρ‚Π½Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ: ΒΆ

  

  
     НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° 
    <ΡΡ‚ΠΈΠ»ΡŒ>
      .ΠΏΡ€ΠΈΡ€ΠΎΠ΄Π° {
        Ρ„ΠΎΠ½: # b0afac;
        отступ: 12 пиксСлСй;
        Π³Ρ€Π°Π½ΠΈΡ†Π°: 1px solid # 999;
      }
    
  
  
     ΠŸΡ€ΠΈΡ€ΠΎΠ΄Π° 
  
  
ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ€Π°ΠΌΠΊΡƒ с подписью.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ добавлСния подписи: ΒΆ

  

  
     НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° 
    <ΡΡ‚ΠΈΠ»ΡŒ>
      .img-frame-cap {
        ΡˆΠΈΡ€ΠΈΠ½Π°: 200 пиксСлСй;
        Ρ„ΠΎΠ½: #fff;
        отступ: 18px 18px 2px 18px;
        Π³Ρ€Π°Π½ΠΈΡ†Π°: 1px solid # 999;
      }
      .подпись {
        Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: Ρ†Π΅Π½Ρ‚Ρ€;
        ΠΌΠ°Ρ€ΠΆΠ° свСрху: 4 пиксСля;
        Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 12 пиксСлСй;
      }
    
  
  
    
ΠŸΡ€ΠΈΡ€ΠΎΠ΄Π°
ΠŸΡ€ΠΈΡ€ΠΎΠ΄Π°
ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ.Для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свойства CSS border-bottom, border-top, border-left ΠΈ border-right ΠΈ установитС Ρ€Π°Π·Π½Ρ‹Π΅ значСния ΡˆΠΈΡ€ΠΈΠ½Ρ‹ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ…. Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ свойство border-bottom дСйствуСт ΠΊΠ°ΠΊ Π±Π°Π½Π½Π΅Ρ€.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ задания Π³Ρ€Π°Π½ΠΈΡ† ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ: ΒΆ

  

  
     НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° 
    <ΡΡ‚ΠΈΠ»ΡŒ>
      img {
        ΡˆΠΈΡ€ΠΈΠ½Π°: 225 пиксСлСй;
        Π³Ρ€Π°Π½ΠΈΡ†Π°: сплошная 8px #ccc;
        ниТняя Π³Ρ€Π°Π½ΠΈΡ†Π°: 130 пиксСлСй сплошной #ccc;
      }
    
  
  
     ΠŸΡ€ΠΈΡ€ΠΎΠ΄Π° 
  
  
ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ΠΊ Π³Ρ€Π°Π½ΠΈΡ†Π΅ изобраТСния, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ свойство стиля Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊ элСмСнту  ΠŸΡ€ΠΈΡ€ΠΎΠ΄Π° ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Как ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊΡ€ΡƒΠ³Π°ΒΆ

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» Π³Ρ€Π°Π½ΠΈΡ†Ρ‹, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство CSS border-radius. Бвойство border-radius ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π΄ΠΎ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ. Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€ с Ρ‡Π΅Ρ‚Ρ‹Ρ€ΡŒΠΌΡ значСниями.

ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ примСняСтся ΠΊ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ Π»Π΅Π²ΠΎΠΌΡƒ ΡƒΠ³Π»Ρƒ, Π²Ρ‚ΠΎΡ€ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ примСняСтся ΠΊ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ относится ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΌΡƒ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΡƒΠ³Π»Ρƒ, Π° Ρ‡Π΅Ρ‚Π²Π΅Ρ€Ρ‚ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ примСняСтся ΠΊ Π½ΠΈΠΆΠ½Π΅ΠΌΡƒ Π»Π΅Π²ΠΎΠΌΡƒ ΡƒΠ³Π»Ρƒ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ указания ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ изобраТСния: ΒΆ

  

  
     НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° 
    <ΡΡ‚ΠΈΠ»ΡŒ>
      img {
        ΡˆΠΈΡ€ΠΈΠ½Π°: 650 пиксСлСй;
        отступ: 2 пиксСля;
        Π³Ρ€Π°Π½ΠΈΡ†Π°: 3px solid # 1c87c9;
        радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 15 пиксСлСй 50 пиксСлСй 800 пиксСлСй 5 пиксСлСй;
      }
    
  
  
     ΠŸΡ€ΠΈΡ€ΠΎΠ΄Π° 
  
  
ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ Π²Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ элСмСнт ΠΈΠ»ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Photoshop для достиТСния ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ изобраТСния, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства border-radius Π½Π° "50%" ΠΈΠ»ΠΈ "999em". УстановитС ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ значСния ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ добавлСния окруТности ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ: ΒΆ

  

  
     НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° 
    <ΡΡ‚ΠΈΠ»ΡŒ>
      div.imageborder {
        радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 999em;
        ΡˆΠΈΡ€ΠΈΠ½Π°: 350 пиксСлСй;
        высота: 350 пиксСлСй;
        отступ: 5 пиксСлСй;
        высота строки: 0;
        Π³Ρ€Π°Π½ΠΈΡ†Π°: 10px solid # 000;
        Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: #eee;
      }
      img {
        радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 999em;
        высота: 100%;
        ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
        ΠΌΠ°Ρ€ΠΆΠ°: 0;
      }
    
  
  
     

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊΡ€ΡƒΠ³Π°

 исландия
ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠ°Π΄Π°ΡŽΡ‰ΡƒΡŽ Ρ‚Π΅Π½ΡŒ ΠΏΠΎΠ΄ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ изобраТСния¢

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠ°Π΄Π°ΡŽΡ‰ΡƒΡŽ Ρ‚Π΅Π½ΡŒ, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство box-shadow. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, установитС для свойства отобраТСния Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΒ».

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ добавлСния Ρ‚Π΅Π½ΠΈ: ΒΆ

  

  
     НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° 
    <ΡΡ‚ΠΈΠ»ΡŒ>
      .ΠΏΡ€ΠΈΡ€ΠΎΠ΄Π° {
        дисплСй: блок;
        Ρ„ΠΎΠ½: ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ;
        отступ: 8 пиксСлСй;
        Π³Ρ€Π°Π½ΠΈΡ†Π°: 1px solid #ccc;
        box-shadow: 10px 10px 10px # 999;
      }
    
  
  
    ΠŸΡ€ΠΈΡ€ΠΎΠ΄Π°
  
  
ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Бпасибо Π·Π° ваш ΠΎΡ‚Π·Ρ‹Π²!

Π‘Ρ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹ это ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ? Π”Π° НСт


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

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Π½Π° чистом CSS | Eleftheria Batsou

МоС ΠΏΡƒΡ‚Π΅ΡˆΠ΅ΡΡ‚Π²ΠΈΠ΅ с изобраТСниями Π½Π° чистом CSS

Π― Π±Ρ‹Π» ΠΏΠΎΡ‡Ρ‚ΠΈ Π² сСрСдинС своСй Π·Π°Π΄Π°Ρ‡ΠΈ # 100DaysOfCode, ΠΊΠΎΠ³Π΄Π° Π½Π°Ρ‡Π°Π» Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚ΡŒ Π² своСм Ρ‚Π²ΠΈΡ‚Ρ‚Π΅Ρ€Π΅ , ΠΏΠΎΠ΄Π°ΡŽΡ‰ΠΈΠΉ нСсколько симпатичных ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с Ρ…ΡΡˆΡ‚Π΅Π³ΠΎΠΌ #dailyCssImages.Когда я Π½Π°ΠΆΠΈΠΌΠ°Π» Π½Π° Π½ΠΈΡ…, я ΠΌΠΎΠ³ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΊΠΎΠ΄, всю красоту CSS / SCSS ΠΈ всСго нСсколько строк HTML. Π― Π½Π°Ρ‡Π°Π» ΠΊΠΎΠΏΠ°Ρ‚ΡŒΡΡ Π² изобраТСниях ΠΈ ΠΊΠΎΠ΄Π°Ρ…, я слСдил Π·Π° нСсколькими Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ Π½Π° Codepen, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ создавали Π»ΠΈΠ±ΠΎ простыС ΠΈ ΠΌΠΈΠ»Ρ‹Π΅, Π»ΠΈΠ±ΠΎ слоТныС ΠΈ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹Π΅ изобраТСния. Π― Π±Ρ‹Π» ΠΎΡ‡Π°Ρ€ΠΎΠ²Π°Π½. НСсколько Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ я нашСл ΡΡ‚Π°Ρ‚ΡŒΡŽ Π½Π° Medium ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ «Руководство для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… ΠΏΠΎ изобраТСниям Π½Π° чистом CSSΒ» , Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡƒΡŽ создатСлСм Π·Π°Π΄Π°Ρ‡ΠΈ Daily CSS Images ΠΏΠΎ ΠΈΠΌΠ΅Π½ΠΈ Майкл ΠœΠ°Π½Π³ΠΈΠ°Π»Π°Ρ€Π΄ΠΈ . Π­Ρ‚ΠΎ Π±Ρ‹Π» ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ изобраТСния CSS.Π― Ρ€Π΅ΡˆΠΈΠ» Π½Π° свой 44-ΠΉ дСнь # 100DaysOfCode ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½ΠΈΠΆΠ΅. ОписаниС ΠΌΠΎΠ΅ΠΉ Ρ€ΡƒΡ‡ΠΊΠΈ Π±Ρ‹Π»ΠΎ:

Π”Π΅Π½ΡŒ: 44 ΠΈΠ· 100

Π― ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΡŽ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Π²Ρ‹Π·ΠΎΠ² #dailycssimages. Π― Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Β«ΠΊΠΎΠ°Π»ΡƒΒ», ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS. Π― слСдовал этому руководству , здСсь .

Π― ΡƒΠ²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого испытания я ΡƒΠ·Π½Π°ΡŽ Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ, я люблю ΠΌΠΈΠ»Ρ‹Π΅ ΠΌΠ΅Π»ΠΎΡ‡ΠΈ, ΠΈ это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ я ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΡŽ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ. Π― Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡ€ΠΈΠ·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΠ»ΠΎΡ…ΠΎ Ρ€ΠΈΡΡƒΡŽ ΠΎΡ‚ Ρ€ΡƒΠΊΠΈ, Π½ΠΎ я ΠΏΠΎΡΡ‚Π°Π²Π»ΡŽ ΠΏΠ΅Ρ€Π΅Π΄ собой Π·Π°Π΄Π°Ρ‡Ρƒ ΡΡ‚Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅ с ΠΊΠΎΠ΄ΠΎΠΌ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.

ПослС прочтСния ΡΡ‚Π°Ρ‚ΡŒΠΈ мСня Π·Π°Ρ†Π΅ΠΏΠΈΠ»ΠΎ. Π― подписался Π½Π° 10-нСдСльноС испытаниС ΠΈ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ дСнь ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ» своС ΠΏΠ΅Ρ€Π²ΠΎΠ΅ элСктронноС письмо. Π’Π΅ΠΌΠ° - «МСдвСТонок».

ЧСстно говоря, ΠΌΠΎΠ΅ ΠΏΠ΅Ρ€Π²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ отстойным.

Как Π½ΠΈ странно, хотя Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΌΠ½Π΅ Π½Π΅ понравился, Π½ΠΎ своим Ρ‚Π²ΠΎΡ€Π΅Π½ΠΈΠ΅ΠΌ я остался Π΄ΠΎΠ²ΠΎΠ»Π΅Π½!

На ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ дСнь я ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ» свой ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ созданию ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.Π‘Π½Π°Ρ‡Π°Π»Π° я сдСлал простой набросок Ρ€ΡƒΡ‡ΠΊΠΎΠΉ ΠΈ Π±ΡƒΠΌΠ°Π³ΠΎΠΉ.

А ΠΏΠΎΡ‚ΠΎΠΌ я попытался Π΅Π³ΠΎ Π·Π°ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.

Π₯ΠΎΡ€ΠΎΡˆΠΎ, снова Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π±Ρ‹Π» Π½Π΅ Π»ΡƒΡ‡ΡˆΠΈΠΌ, Π½ΠΎ Π»ΡƒΡ‡ΡˆΠ΅, Ρ‡Π΅ΠΌ Π² ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ дСнь.

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

На 3-ΠΉ ΠΈ 4-ΠΉ дСнь я попытался Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ большС Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ Π² свои изобраТСния ΠΈ поискал Π² Google Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΆΠΈΠ²ΠΎΡ‚Π½Ρ‹Ρ….

Π― Π½Π°ΠΊΠΎΠ½Π΅Ρ† создал эти ΠΎΠ±Ρ€Π°Π·Ρ‹:

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

На пятый дСнь я сконструировал ΠΌΠΈΠ»ΠΎΠ΅ сущСство, ΠΈ людям ΠΎΠ½ΠΎ, ΠΏΠΎΡ…ΠΎΠΆΠ΅, ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»ΠΎΡΡŒ.

Код

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

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Π±Ρ‹Π»ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ: Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π°, ΠΈ быстрыС Ρ„ΠΎΡ€ΠΌΡ‹.

Π’Ρ€Π΅Ρ‚ΡŒΡ нСдСля Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΠΌΠΎΠΈΡ… Π»ΡŽΠ±ΠΈΠΌΡ‹Ρ… ΠΏΠΎ Π΄Π²ΡƒΠΌ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ:

  1. Π’Π΅ΠΌΠΎΠΉ Π±Ρ‹Π»Π° ЕДА!

  2. Π― Π½Π°Ρ‡Π°Π» Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

На Ρ‚ΠΎΠΉ Π½Π΅Π΄Π΅Π»Π΅ я ΠΏΡ€ΠΈΠ³ΠΎΡ‚ΠΎΠ²ΠΈΠ» ΠΏΠΈΡ†Ρ†Ρƒ , Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ , Ρ‚Π°ΠΊΠΎ , Ρ‡ΠΈΠ·ΠΊΠ΅ΠΉΠΊ ΠΈ ΠΏΠΈΡ€ΠΎΠ³ !

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Π“Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ Π΄ΠΎ сСгодняшнСго дня ΠΈΠΌΠ΅Π΅Ρ‚ 1019 просмотров Π½Π° ΠΊΠΎΠ΄ΠΏΠ΅Π½

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Код

ΠΠ°Ρ‡Π°Π»Π°ΡΡŒ 4-я нСдСля... с ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΌ Π€Ρ€Π°Π½ΠΊΠ΅Π½ΡˆΡ‚Π΅ΠΉΠ½ΠΎΠΌ

Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

… ΠΈ закончился монстром!

Π§Ρ‚ΠΎ ΠΆ, я Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ» своСго монстра ΠΈ Ρ€Π΅ΡˆΠΈΠ» ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ симпатичным.

Π’Ρ‹ ясно Π²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ я стал Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄, Π½ΠΎ Π½Π΅ рисовал.

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Π­Ρ‚Π° Ρ€ΡƒΡ‡ΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ‚ 1098 просмотров Π½Π° Codepen, ΠΈ я Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡ€ΠΈΠ·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π² этой Ρ‚ΠΎΡ‡ΠΊΠ΅ я ΠΎΡ‡Π΅Π½ΡŒ гордился своСй Ρ€Π°Π±ΠΎΡ‚ΠΎΠΉ.

5-я нСдСля Π±Ρ‹Π»Π° посвящСна супСргСроям

МнС нравится Π±Ρ‹Ρ‚ΡŒ ΠΈΠ³Ρ€ΠΈΠ²Ρ‹ΠΌ, я объСдинил Ρ‚Ρ€ΠΈ Π²Π΅Ρ‰ΠΈ:

  1. Π‘ΡƒΠΏΠ΅Ρ€Π³Π΅Ρ€ΠΎΠΈ

  2. Анимация

  3. МИНИОНЫ

Et voila Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹:

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

На 6-ΠΉ ΠΈ 7-ΠΉ нСдСлях я Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π» Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹

На Π»Π΅Π²ΠΎΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ я нашСл Π·Π½Π°Ρ‡ΠΎΠΊ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Apple Π½Π° изобраТСниях Google, Π° Π½Π° ΠΏΡ€Π°Π²ΠΎΠΌ - ΠΊΠ°ΠΊ я Π΅Π³ΠΎ воссоздал:

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Π§Ρ‚ΠΎ касаСтся Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ²:

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ вяза Π±Ρ‹Π» Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ слоТным, поэтому я воспользовался инструмСнтом Clippy :

Код | Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

На свой 40-й дСнь я сдСлал Nintendo 2DS

МСня Π²Π΄ΠΎΡ…Π½ΠΎΠ²ΠΈΠ»ΠΎ это ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅:

Π― быстро набросал Π½ΠΈΡ‡ΡŒΡŽ:

И послС примСнСния CSS Ρƒ мСня появился собствСнный Nitendo 2DS:

ΠΊΠΎΠ΄ | Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

9-я нСдСля я Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²ΠΎΠΎΠ΄ΡƒΡˆΠ΅Π²ΠΈΠ»ΡΡ

Π― создал ΠΏΡΡ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° основС ΠΎΠ΄Π½ΠΎΠΉ ΠΈ Ρ‚ΠΎΠΉ ΠΆΠ΅ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹.

Π’Ρ€ΠΈ ΠΈΠ· Π½ΠΈΡ… Π±Ρ‹Π»ΠΈ минималистичными ΠΈ довольно абстрактными.

ΠΊΠΎΠ΄ | Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

ΠΊΠΎΠ΄ | Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

ΠΊΠΎΠ΄ | Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Π’ дСнь 44 я создал Ρ€ΠΎΠ±ΠΎΡ‚Π°. Π‘Π½Π°Ρ‡Π°Π»Π° я Π³ΡƒΠ³Π»ΠΈΠ» нСсколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΠ³Π΄Π° Π½Π°Ρ…ΠΎΠ΄ΠΈΠ» Ρ‚ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠ½Π΅ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»ΠΎΡΡŒ большС всСго, рисовал Π΅Π³ΠΎ, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π».

ΠΊΠΎΠ΄ | Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

На 45-ΠΉ дСнь я Ρ€Π΅ΡˆΠΈΠ» ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π΅Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ - космичСского Ρ€ΠΎΠ±ΠΎΡ‚Π°-талисмана!

ΠΊΠΎΠ΄ | Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ

Π― Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΠ» испытаниС вкусным Ρ‚ΠΎΡ€Ρ‚ΠΎΠΌ

Π’ΠΎΡ‚ всС ΠΌΠΎΠΈ изобраТСния Π½Π° чистом CSS для задания #dailyCssImages

Π£ этой Ρ€ΡƒΡ‡ΠΊΠΈ 2 ΡˆΡ‚.523 просмотра, ΠΈ это мСня ΠΎΡ‡Π΅Π½ΡŒ Ρ€Π°Π΄ΡƒΠ΅Ρ‚, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ я ΠΏΡ€ΠΎΠ²Π΅Π» ΠΌΠ½ΠΎΠ³ΠΎ часов Π² поисках ΠΈ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Π­Ρ‚ΠΎΡ‚ Π²Ρ‹Π·ΠΎΠ² ΠΏΠΎΠΌΠΎΠ³ ΠΌΠ½Π΅ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ:

  • Π― стал Π»ΡƒΡ‡ΡˆΠ΅ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ Π² CSS / SCSS, я Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠ·Π½Π°Π» ΠΎΠ± Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

  • Π― ΡƒΠ·Π½Π°Π» Π½ΠΎΠ²Ρ‹Π΅ инструмСнты ΠΎ Ρ†Π²Π΅Ρ‚Π°Ρ…, Ρ„ΠΎΡ€ΠΌΠ°Ρ… ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

  • Π― общался с людьми ΠΏΠΎ всСму ΠΌΠΈΡ€Ρƒ Ρ‡Π΅Ρ€Π΅Π· Codepen, Twitter ΠΈ Youtube.

  • Π― подСлился своими знаниями ΠΎ Codepen ΠΈ Youtube ΠΈ надСюсь, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠ³ ΠΈ Π²Π΄ΠΎΡ…Π½ΠΎΠ²ΠΈΠ» Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

  • Π― научился Π±Ρ‹Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ Ρ‚Π΅Ρ€ΠΏΠ΅Π»ΠΈΠ²Ρ‹ΠΌ ΠΈ сосрСдоточился Π½Π° своСм ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ ΠΈ ΠΊΠΎΠ΄Π΅, Π° Π½Π΅ отвлСкался Π½Π° ΠΌΠ΅Π»ΠΎΡ‡ΠΈ.

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

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