Category: CSS

To change color of PNG image via CSS, we use the filter property.

For instance, we write

<img src="https://picsum.photos/30/30" />

to add the img element.

Then we write

img {
  filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg)
    brightness(95%) contrast(80%);
}

to set the filter property to add the filters we want to the image.

We set the sepai tone, invert the colors, set the bright and contrast, and rotate the hue.

To word-wrap in an HTML table with CSS, we set the word-wrap property.

For instance, we write

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

to set the word-wrap property to break-word to break long words into new lines.

To add CSS transition shorthand with multiple properties, we combine them all the values into one.

For instance, we write

div {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

to set the transition property to all 0.3s ease-out;.

all is the property.

0.3s is the duration.

ease-out is the timing function.

To change the styles of an img src SVG with CSS, we set the mask property.

For instance, we write

<div class="logo"></div>

to add a div.

Then we write

.logo {
  background-color: red;
  -webkit-mask: url(logo.svg) no-repeat center;
  mask: url(logo.svg) no-repeat center;
}

to set the mask property to the svg URL to render the svg in the div.

To place the border inside of div and not on its edge with CSS. we set the box-sizing property.

For instance, we write

<div>Hello!</div>
<div>Hello!</div>

to add divs.

Then we write

div {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 20px solid #f00;
  background: #00f;
  margin: 10px;
}

to set box-sizing to border-box to put the border inside the divs.

We add the border with border: 20px solid #f00;.