HTML5 адаптивные плитки CSS
by Andrey Dobrovoi
HTML
<div id="pinterest-columns">
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/cinderella.jpg">
<figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/belle.jpg">
<figcaption>Belle, based on 1770’s French court fashion</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mulan_2.jpg">
<figcaption>Mulan, based on the Ming Dynasty period</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sleeping-beauty.jpg">
<figcaption>Sleeping Beauty, based on European fashions in 1485</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/snow-white.jpg">
<figcaption>Snow White, based on 16th century German fashion</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ariel.jpg">
<figcaption>Ariel wearing an evening gown of the 1890’s</figcaption>
</figure>
<small>Art © <a href="//clairehummel.com">Claire Hummel</a></small>
</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#pinterest-columns {
-webkit-column-width: 220px;
-webkit-column-width: 220px;
-webkit-column-gap: 15px;
-webkit-column-gap: 15px;
width: 100%;
padding: 15px;
background: url(//subtlepatterns.com/patterns/scribble_light.png);
font-family: Calluna,Arial,sans-serif;
}
#pinterest-columns:hover figure:not(:hover) {
opacity: 0.4;
}
#pinterest-columns figure {
background: #fefefe;
border: 2px solid #fcfcfc;
box-shadow: 0 1px 2px rgba(34,25,25,0.4);
margin: 0 2px 15px;
padding: 15px;
padding-bottom: 10px;
-moz-transition: all .4s ease-in-out;
display: inline-block;
-webkit-column-break-inside: avoid;
-webkit-column-break-inside: avoid;
}
article figure {
text-align: center;
}
figure {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;
}
#pinterest-columns small {
font-size: 1rem;
float: right;
text-transform: uppercase;
color: #aaa;
}
#pinterest-columns figure img {
width: 100%;
height: auto;
border-bottom: 1px solid #ccc;
padding-bottom: 15px;
margin-bottom: 5px;
}
#pinterest-columns figure figcaption {
font-size: .9rem;
color: #444;
margin: 0;
line-height: 1.5;
text-align: left;
}
article figcaption {
font-size: 1rem;
text-align: center;
margin: 1rem;
}
@media screen and (max-width: 750px) {
#pinterest-columns { column-gap: 0px; }
#pinterest-columns figure { width: 100%; }
}