On the DJ Vadim website I needed to create a gallery of album covers that displayed each cover in a perfect square, but was also responsive and would resize dynamically on various screen sizes. I could have declared a whole variety of CSS values for each media breakpoint, but I wanted a much more elegant solution. I settled on the following:

Check the J Fiddle

The solution is to give the containing hyperlink for each thumbnail a width off 100%, and a height of 0. The square is calculated by a bottom padding of 100%. The image itself is applied as a background image to the hyperlink, and sized using the CSS property background-size.

Published in Blog
Sunday, 23 August 2015 02:49

Overlay a featured flag using pure CSS

This is a usefull method for creating a featured flag overlayed on top of an image or content. The flag uses the CSS transform property, and is anchored to the left corner so that it remains in the same position on all screen sizes.

Featured Flag using CSS transform with rotate

The HTML:

<span class="featured">
<span class="flag"> Featured </span>
</span>

The CSS:

span.flag {
background: #ff842c none repeat scroll 0 0;
color: #fff;
display: block;
font-weight: bold;
left: -45px;
padding: 10px 0;
position: relative;
text-align: center;
text-transform: uppercase;
top: 95px;
transform: rotate(-45deg);
transform-origin: left top 0;
width: 200px;
}

Check this JSfiddle example

Published in Blog