CSS3 New Properties You Need to Be Familiar With

CSS3 New Properties You Need to Be Familiar With That In 2021

Byadmin

1. writing-mode

The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.
When set for an entire document, it should be set on the root element (html element for HTML documents).

/* Keyword values */
writing-mode: horizontal-tb;
writing-mode: vertical-lr;
writing-mode: vertical-rl;

HTML

<div> lorem </div>

CSS

div{
padding: 15px 20px;
background-color: #8BC34A;
color: #fff;
margin-right: 10px;
border-radius: 5px;
border: 4px solid #009688;
font-family: sans-serif;
font-weight: 700;
flex: 1;
min-width: 100px;
text-align: center;
writing-mode: vertical-rl;
}

 

2. column boxes

As column boxes created inside multicol containers are anonymous boxes, there is little we can do to style them. However, we do have a few things that we can do. This guide explains how to change the gap and style rules between columns.

HTML

<div class="container">
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>

<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
</div>

CSS

.container {
column-count: 3;
column-gap: 40px;
}

3. any-link

The :any-link CSS pseudo-class selector represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited. In other words, it matches every  a tag or area element that has an href attribute. Thus, it matches all elements that match :link or :visited.

HTML

<a href="https://example.com">External link</a><br>
<a href="#">Internal target link</a><br>
<a>Placeholder link (won't get styled)</a>

CSS

a:any-link {
border: 1px solid blue;
color: orange;
}

/* WebKit browsers */
a:-webkit-any-link {
border: 1px solid blue;
color: orange;
}

 

4. css counter

CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage. Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times
they’re used.

HTML

<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>

CSS

body {
counter-reset: section;
}

h3::before {
counter-increment: section;
content: "Section " counter(section) ": ";

}

 

 

5.  css selection

The ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).

CSS

::selection {
color: gold;
background-color: red;
}

 

6.  css clip

The clip CSS property defines a visible portion of an element. The clip property applies only to absolutely positioned elements — that is, elements with position:absolute or position:fixed.

CSS

/* Keyword value */
clip: auto;

/* <shape> values */
clip: rect(1px, 10em, 3rem, 2ch);

/* Global values */
clip: inherit;
clip: initial;
clip: unset;

HTML

<p class="dotted-border">
<img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic">
<img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left">
<img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle">
<img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right">
</p>

CSS

.dotted-border {
border: dotted;
position: relative;
width: 536px;
height: 350px;
}

#top-left,
#middle,
#bottom-right {
position: absolute;
top: 0;
}

#top-left {
left: 360px;
clip: rect(0, 175px, 113px, 0);
}

#middle {
left: 280px;
clip: rect(119px, 255px, 229px, 80px);
}

#bottom-right {
left: 200px;
clip: rect(235px, 335px, 345px, 160px);
}