Transparent Borders

2014-06-30

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

#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!