CSS Properties to use

20 June 2020 - less than 1 min read time
Tags: css

1. Change the Text Selection colour To change the Text Selection colour, ::selection is a pseudo-element that overrides at the browser-level to replace the text highlight colour with a colour you choose. The colour can be seen once you select the content with the cursor.

::selection {
  background-color: #f3b70f;
 }

1. Conic-gradient Creates an image consisting of a gradient with set colour transitions rotated around a central point (rather than radiating from the central point as you’d find with a radial-gradient).

.piechart {
  background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d  56% 100%);
  border-radius: 50%;
  width: 300px;
  height: 300px;
}

1. Counters To style numbers in a numbered list, we need to play with properties called CSS counters. CSS counters let you adjust the appearance of content based on its location in a document.

To use CSS counters:

• The counters’ value can be increased or decreased by counter-increment
• Can display the value of the counter by using the counter() or counters() function from within a content property

ol.numbered-list > li:before {
 content: counter(li);
 position: absolute;
 box-sizing: border-box;
 width: 45px;
 height: 45px;
 background: #f3b70f;
 border-radius: 50%;
}
ol.numbered-list li {
  position: relative;
  left: 0px;
  list-style: none;
  counter-increment: li;
}