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.
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.