CSS Tricks and Techniques 2018

As time goes by, CSS is becoming more and more powerful and nowadays it allows a lot of possibilities. This article is a compilation of fresh, advanced tips and techniques to master your CSS skills.

Software and Website Development Company Lucknow

Using SVG for icons
SVG is supported by all modern browsers and scales well for all resolution types, so there’s no reason to continue using .jpg or .gif images for icons. Note the use of the background-size property to scale the background image on the on container size.

.logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background: url(kiwi.svg);
  background-size: 100px 82px;
}

Fixed table layouts
A widely supported but surprisingly little-known property which changes the way the tables are rendered and gives you a sturdier, more predictable layout.

table {
  table-layout: fixed;
}

Curve text around a floated image
The shape-outside is a CSS property that allows geometric shapes to be set, in order to define an area for text to flow around.

.shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

Intrinsic Ratio Boxes
Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1).

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}

.container div {
  border: 2px dashed #ddd;  
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Color fade on hover
A very easy way to make your links (or any other element) look better.

a {
 color: #000;
 -webkit-transition: color 1s ease-in; /*safari and chrome */
 -moz-transition: color 1s ease-in; /* firefox */
 -o-transition: color 1s ease-in; /* opera */
}

a:hover { 
 color: #c00;
}

Style broken images
Broken images never look good, but it happens every now and then that one or two images on your site are broken. Using some advanced CSS, it is possible to style broken images and provide custom error messages to your visitors.

img {  
  min-height: 50px;
}

img:before {  
  content: " ";
  display: block;

  position: absolute;
  top: -10px;
  left: 0;
  height: calc(100% + 10px);
  width: 100%;
  background-color: rgb(230, 230, 230);
  border: 2px dotted rgb(200, 200, 200);
  border-radius: 5px;
}

img:after {  
  content: "\f127" " Broken Image of " attr(alt);
  display: block;
  font-size: 16px;
  font-style: normal;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  text-align: center;
}

Empty and not empty attribute selectors

CSS3 makes it easy to apply different styles to an element, depending on whether a data-* attribute is empty or not. Have a look at the HTML code below:

<div data-attr="">
</div>

<div data-attr="value">
</div>

And now, our CSS, with specific styling for any div element with an empty data-attr attribute:

div {
  border: 1px solid gray;
  height: 100px;
  margin: 10px;
  width: 100px;
}

/* Empty attribute selector */
div[data-attr=''] {
  background: red;
}

/* Not empty attribute selector */
div:not([data-attr='']) {
  background: green;
}

Comma-Separated Lists
A little snippet to display an unordered list as a comma-separated list. Note the use of :not(:last-child) to ensure that the last list element won’t be followed by a comma.

ul > li:not(:last-child)::after {
  content: ",";
}

Source: catswhocode