Transparent Borders

June 30, 2014

Here’s a teeny, awesome little design touch I’ve been into lately. It fakes out a border with the CSS box-shadow class but removes the spread and uses rgba().

The Golden Gate Bridge
#caption {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
  /* other styles */
}

I love this touch because it not only gives a nice separation between image and other blocks, but the border will vary depending on the image itself since the reduced opacity takes on color from beneath. Pretty neat stuff, folks!

⤎ back to posts