/**
* [1] - регулировка размера контейнера
* [2] - изображение растягивается по контейнеру
*/
.block {
position: relative;
}
.block:before {
content: "";
display: block;
width: 100%;
padding-top: 100%; /* [1] */
}
/* [2] */
.block__img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}<!-- обычная кнопка -->
<a href="#" class="btn">
<span class="btn__inner">Button</span>
</a>
<!-- кнопка с отменой цвета -->
<a href="#" class="btn btn_disabled">
<span class="btn__inner">Button</span>
</a>.btn {
display: inline-block;
vertical-align: middle;
line-height: 1;
text-decoration: none;
color: #ccc;
background: #333;
}
.btn__inner {
display: block;
padding: 15px 20px;
background: inherit;
}
.btn:hover .btn__inner {
background: #575757;
}
.btn_disabled:hover .btn__inner {
background: inherit;
}.headline {
margin: 0;
position: relative;
overflow: hidden;
text-align: center;
}
.headline:before,
.headline:after {
content: "";
position: relative;
display: inline-block;
vertical-align: middle;
width: 100%;
height: 30px;
background-size:
100% 1px,
30px 30px;
}
.headline:before {
right: .5em;
margin-left: -100%;
background:
linear-gradient(90deg, #000, #000) repeat-x center,
radial-gradient(10px, #000 0%, #000 100%, rgba(0,0,0,.0) 100%) no-repeat right -5px center;
background-size:
100% 1px,
30px 30px;
}
.headline:after {
left: .5em;
margin-right: -100%;
background:
linear-gradient(90deg, #000, #000) repeat-x center,
radial-gradient(10px, #000 0%, #000 100%, rgba(0,0,0,.0) 100%) no-repeat left -5px center;
background-size:
100% 1px,
30px 30px;
}for $n in (1..3)
.class:nth-child({$n})
background-position-y ($n - 1) * 25%<div class="bg">
<div class="container"></div>
</div>.bg {
background: ....
}
.container {
width: 960px;
margin: 0 auto;
}html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}#wrap:after {
content: '';
display: block;
height: "высота футера";
}