
Hi, I’m Brian Dys — a photographer from the inside looking out · a composer entangled in electronic music · a UX designer · a spouse, a parent, & everything in between.
Update – 10/9/2014
This post has been moved to Design DriveThru.
Ever use Spotify? It’s been around for many years now but just two months ago it landed here in Philippines – making everyone curb their Aegis hunger and making Spinnr spin out awesome gimmicks.
No doubt that the traditional rectangle image has lost its edge literally. CSS border-radius
enabled designers to carve the sharp edges into rounded corners. And take it to the extreme, the corners vanish and the shape becomes a circle.
Spotify’s app presents album and artist covers in a circular manner with the same picture faded in the background.
This is what we’ll recreate using HTML and CSS.
Our purpose in this study is to show that content structure comes first than visual design.
First of all, I am suggesting that most images are representations of something more substantial – like words. They are figures that help the readers visualize the subject of the text. Think of the Bible – it simply stands alone with all those text and it’s a bonus to have illustrations (images as helpers to texts will be another topic).
Dammit. I just want you to show me HTML and CSS.
If yes, we’ll use the img
element
If yes, then we’ll use any existing element that the content structure will provide.
Let’s choose the latter.
In our study, we’ll use our favorite 90s pop band, Eraserheads (it’s OK even if Buddy’s uninterested). What we need is the most recent representation of the band’s togetherness.
Source: Day Cabuhat’s Instagram
HTML and CSS are our main tools to replicate Spotify’s Album cover style. Here is the complete concoction:
[codepen_embed height=”399″ theme_id=”1820″ slug_hash=”liuax” default_tab=”result”]See the Pen Spotify’s Album Cover by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]
To explain each detail of the approach:
Not to be confused with layout, the structure pertains to the arrangement of content according to importance – what do you see first, what do you see last?
Given the purpose of using the images for visual design (and to not contain any independent information like a caption), our markup does not contain any img
element.
a
element to link to the item’s (album or artist) main page.class="item-link"
to describe the component’s nature – it is an item link however you would look at it.artist-item-link
to be more specific about the class of that component. This would be useful by having a hook on all items which are artists (and albums for that matter).id="artist-eraserheads"
, we need this to serve a specific thing only for the Eraserheads item – an image cover for this matter.span class="label"
enables the component to be flexible enough. It separates the linking mechanism from the text label. This makes the two independent from each other when it comes to styling.The stylesheet can be further broken down into two, namely: style layout and style theme. Style layout is basically size and positioning while style theme is typography and colors.
First, we start with the most generic item, item-link
.
item-link
contains everything, so we define its dimensions at 20rem (16px * 20 = 320px). It also acts as the base layer that has the background-color
.before
pseudo-element to item-link
to contain the background-image
that is transparent (which makes the background-color
underneath blend in).after
pseudo-element to contain the foreground image. It becomes circular by applying border-radius: 50%
.Too much mumbo-jumbo? Here’s what I’m referring to:
[code lang=”css” title=”CSS”]
.item-link .label {
position: absolute;
top: 50%;
left: 50%;
margin-top: -45%; /* To offset, must be negative and half of the height */
margin-left: -45%; /* Must be half of the width */
width: 90%;
height: 90%;
}
[/code]
Lastly, we attach the actual background-image
using the id
of the artist.
background-size: cover
would ensure that the whole container gets covered by the image but it will be pixellated since the image will be stretched to fill-in.div
which we, otherwise, would if we based the HTML markup on visual design (instead of treating them independently).