Curved Corners and Drop Shadows for Images and Video

  • 4
  • Article
  • Updated 3 years ago



Recently I came across the need to add curved corners and a drop shadow to my images and videos inside a placeholder. I was looking to achieve a material design look and feel. With a little tinkering with css/html I was able to achieve just this with 3 simple lines of css.

Here's how I did it:

• Create a placeholder, give it a name, and add your content to it in Design View (I added a text and video widget)



• Go to the HTML View of Editor and locate the </title> tag in the head of the html.



• Paste the following css after the </title> tag.

<style>        .material {

         border-radius: 15px;

         box-shadow:0 18px 18px rgba(0,0,0,.2);

         overflow:hidden;

       }

       </style>

• Lastly locate your placeholder in HTML view. It will be the div tag with an id of whatever name you gave it in the first step. Add a class of "material" directly after the id.

Example:

<div  id="myPlaceholder" class="material" placeholder="true"></div>

That's it!

The first bit of css "border-radius: 15px;" controls how round the corners are. Adjust the pixel size to your liking.

Heres some more detailed information on border radius, you can even do circles with it.

The second part "box-shadow:0 18px 18px rgba(0,0,0,.2);" Controls the size and color of the drop shadow.

The last bit "overflow:hidden;" simply ensures that the corners outside of the border radius are invisible.

Hope that helps someone out, Happy building!
Photo of mlm

mlm, Official Rep

  • 4,624 Points 4k badge 2x thumb

Posted 3 years ago

  • 4
Photo of AdGators AdGators

AdGators AdGators

  • 3,612 Points 3k badge 2x thumb
I'll have to try this out. Thanks for the post!
Photo of mlm

mlm, Official Rep

  • 4,624 Points 4k badge 2x thumb
No problem, let me know how it goes.
Photo of Bob Steege

Bob Steege

  • 182 Points 100 badge 2x thumb
Here is a link to a box shadow generator handy if you want to tweak the settings.
http://www.cssmatic.com/box-shadow
Photo of Media Manager

Media Manager

  • 1,670 Points 1k badge 2x thumb
I was fudging my drop shadow by creating an empty placeholder with a translucent backround color and putting it behind whichever placeholder I wanted to have a drop shadow. This is much more elegant. Thank you for the tutorial.