HTML
Курс «Фоны»
Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.
<div class="shares">
<a class="social fb" href="#fb"></a>
<a class="social tw" href="#tw"></a>
<a class="social gl" href="#gl"></a>
</div>
</div>
CSS
.container{
width:200px;
background:#1abc9c;
color:#fff;
padding:5px 20px;
}
.container h1{
font-size:20px;
font-weight:normal;
margin-top:15px;
}
.container p{
margin:20px 0;
}
.shares .social{
display:inline-block;
width:30px;
height:30px;
background:#16a085 url(/assets/course14/social-challenge.png) no-repeat;
margin:5px 0 15px;
vertical-align:middle;
}
.shares .fb{
background-position:0 0;
}
.shares .tw{
margin-left:5px;
background-position: -30px 0;
}
.shares .gl{
margin-left:5px;
background-position:-60px 0;
/*
Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Адрес картинки-спрайта:
/assets/course14/social-challenge.png
*/