A Few Simple CSS Tricks for the Front-End Developer

1. Image Opacity - One technique to draw attention to the currently active image is to change the opacity when a user hovers over the image. This is especially great if you are using multiple images as links. You might want to have all images dimmed and show 100% opacity when the user hovers over the image. This is very simple to do using only CSS. Create a class for the images. Such as active-image. In the CSS, you can then use the following two lines:
   .active-image {opacity: 0.5;}
   .active-image:hover {opacity:1;}
   
2. Rounded Corners - A popular layout in web design has been using a card layout (such as pinterest). A lot of sites using a card layout opt to round the corners of these cards. This can be achieved by using CSS and the border-radius property. If you give your card the class of rounded-card, you can use the following to round the corners:
   
   • Specify each corner individually: top-left top-right bottom-right bottom-left
     .rounded-card {border-radius: 5px 0px 0px 5px;}
     Card Example
   • Round all corners equally: value for all corners
     .rounded-card {border-radius: 5px;}
     Card Example
   
   
   
3. Responsive Background Image - The background-size property in CSS3 allows you to implement a background image that is responsive. If you want a full-size responsive image across your whole page, we will use the html element using the following code:
   html {background: url(image); background-size: cover;}
   
4. Center Content - As you probably know, the html center tag has been deprecated. So if you haven't stopped using it, now is probably the time. Centering a div can be achieved with the CSS margin property.
   div {margin:auto;}