Recreating the Dribbble.com Homepage

Currently I am finishing up a CSS project to recreate the Dribbble.com homepage. Check out the current view on GitHub pages or see the style sheets here.

I have been recreating a few web pages in order to improve my CSS skills and get hands on experience with web design. I’m also working on a YouTube video page, the Mint.com sign up page, and a NY Times article.

I picked Dribbble because it is has striking responsive design, lots of images, and a lot of the user interaction using only CSS instead of Javascript. I learned a lot about responsive design and the clever uses of the :hover selector.

The page uses media queries to define a width with the calc() function. For example:

@media screen and (max-width: 2059px)
  width: calc(100% / 7 - 30px)
@media screen and (max-width: 1809px)
  width: calc(100% / 6 - 30px)

My favorite trick that I learned was hiding text behind an image by setting the opacity to 0, then presenting the text on hover by changing the opacity. For example:

a.dribbble-over
  opacity: 0
  position: absolute
  top: 0
  bottom: 30px
  ...
  background: rgba(255,255,255,0.96)
  transition: opacity 250ms ease
  &:hover
    opacity: 1

I’m glad I invested time in picking apart the dribbble.com homepage and learned a from the great design.

Advertisements