CSS #2: Adding Shadows and Borders to Cards

To add shadows, add this to the CSS,

.pt-cv-ifield{
    	background-color: #fff;
    	height:400px;
    	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

To round borders, add this to the CSS,

.pt-cv-ifield{
    	background-color: #fff;
    	height:400px;
    	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    	border-radius: 3px;
}

But because of the thumbnail image, the top of the box is not rounded.

To round only the top of the image, add this to the CSS,

img.pt-cv-thumbnail {
    	border-top-left-radius: 3px;
    	border-top-right-radius: 3px;
}

References:

  1. https://www.w3schools.com/css/css3_shadows_box.asp
  2. https://www.w3schools.com/css/css3_borders.asp

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *