Preface

A few days ago, I was asked a question: what are the new features of CSS 3? All I could think about was:

I’ve been using CSS for so long, how do I know which is new in CSS 3 and which is not?

In fact, CSS 3 is now supported on all major web sites. While It’s not necessary to differentiate between what’s new in CSS 3 and what isn’t, it’s fun to interview.

That’s why I wrote this blog post.

1. The tour

CSS 3 is not particularly new. It was developed back in 1999 and can’t be called “perfect” until now.

According to the following References, common CSS 3 new features are:

  • Property selector
  • border-radius
  • color
  • shadow
  • text-shadow
  • The gradient
  • Multibackground picture
  • 3D-transform

I’ll take my time filling in the holes. (20210829).

2. Property selector

Property selectors are nothing new. It was used before CSS 3:

  • #: ID selector
  • .: class selector

These are selectors from the CSS 2.1 era. But there are more attributes than ID and class. For example, the more common attribute in the tag is href. If you use CSS 2.1 syntax only, you cannot select using the href attribute.

But in CSS 3, you can choose:

/ * sample from MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors * /

/* The  element with the title attribute */ exists
a[title] {
  color: purple;
}

/* The  element */ where the href attribute exists and the value matches "https://example.org"
a[href="https://example.org"] {
  color: green;
}

/* The  element */ where the href attribute exists and the attribute value contains "example"
a[href*="example"] {
  font-size: 2em;
}

/*  element */ that has an href attribute and whose value ends with ".org"
a[href$=".org"] {
  font-style: italic;
}

/* The class attribute exists and the attribute value contains the  element of "logo" separated by Spaces */
a[class~="logo"] {
  padding: 2px;
}
Copy the code

3. border-radius

Actually, I should have answered this question. After all, I used a lot of border-radius in Naruto:

/* Examples from my own code */

html{
    background-color: #ff8b60;
}

.body{
    display : flex;
    width : 100vw;
    height: 100vh;
    margin: 0;
    align-items: center;
    justify-content: center;
}

.naruto{
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: transparent;
    border: 15px solid #a55b41;
    overflow: hidden;
}

.hair{
    height: 90px;
    background-color: rgb(220.215.104);
    border-bottom: 5px solid rgb(206.201.104);
}

.hiddenleaf{
    height: 60px;
    background-color: rgb(77.71.71);
}

.hiddenleaf .plate{
    width : 150px;
    height : 45px;
    background-color: rgb(206.206.206);
    margin: 0 auto;
    padding : 3px 0 0 0 ;
    vertical-align: middle;
    border-radius: 10px;
    transform: translateY(6px);
    overflow: hidden;
}

.plate::after{
    content : ' ';
    display : block;
    width: 85px;
    height : 60px;
    margin-left: 100px;
    margin-top: -5px;
    background-color: rgb(181.185.195);
    transform: skew(-45deg);
}

.face{
    position: absolute;
    top: 0;
    width: 290px;
    height: 290px;
    background-color: rgb(242.201.190);
    border-radius: 50%;
    border: 5px solid rgb(223.122.85);
    z-index : -1;
}

.lefteye{
    position: absolute;
    left : 25%;
    top: 170px;
    width: 35px;
    height: 35px;
    background-color: white;
    border-radius: 50%;
    border: 5px solid rgb(99.138.170);
    z-index: 1;
}

.righteye{
    position: absolute;
    right : 25%;
    top: 170px;
    width: 35px;
    height: 35px;
    background-color: white;
    border-radius: 50%;
    border: 5px solid rgb(99.138.170);
    z-index: 1;
}

.mouth{
    position: absolute;
    bottom : 10%;
    left : 50%;
    width: 75px;
    height: 75px;
    margin-left: -37px;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    background-color: rgb(228.158.138);
}

.mouth::after{
    content : ' ';
    display: block;
    width: 75px;
    height: 40px;
    background-color: #f2c9be;
}

.whisker{
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-right: 12px solid transparent;
    border-left: 70px solid # 917972;
    border-top: 12px solid transparent;
    transform: rotate(-35deg);
}

/* left whiskers */
.whisker:first-child{
    top : 70%;
}

.whisker:nth-child(2) {top : 80%;
}

.whisker:nth-child(3) {top: 90%
}

/* right whiskers */
.whisker:nth-child(4) {top: 70%;
    right: 0;
    transform: rotate(205deg);
}

.whisker:nth-child(5) {top: 80%;
    right: 0;
    transform: rotate(205deg);
}

.whisker:nth-child(6) {top: 90%;
    right: 0;
    transform: rotate(205deg);
}
Copy the code

With border – the radius: 50%; Can draw circle.

3. The color

Available in CSS 2.1:

  • The English word
  • hexadecimal
  • rgb()function

To specify the color.

In CSS 3, several new methods for specifying colors have been added:

  • rgba()function
  • hsl()andhsla()function
  • opacityProperty to set transparency

In all of the above new features, a refers to alpha, which also refers to opacity.

3.1 rgba

It’s the RGB () function with the fourth argument alpha. Example:

rgba(255.255.255.5) /* White with 50% opacity */
rgba(255 255 255 / 0.5); /* CSS Colors 4 space-separated values
Copy the code

3.2 an HSL

Since there is no difference between a in HSLA () and a in RGBA (), only HSL () is written in this section.

MDN’s official notes are as follows:

The hsl()  functional notation expresses a given color according to its hue, saturation, and lightness components. An optional alpha component represents the color’s transparency.

The translation is as follows:

The HSL function uses hue, saturation and liteness to represent colors. The extra alpha parameter represents the transparency of the color.

The following is an example:

/ * sample from: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl () * /
hsl(100.100%.50%) /* #5f0 */
hsl(235.100%.50%.5) /* #0015ff with 50% opacity */
hsl(235 100% 50%); /* CSS Colors 4 space-separated values */
Copy the code

HSL () may add a fourth parameter. With the fourth parameter, it has the same function as hSLA ().

Last: transform API

Clause 7 in the Reference section. I’ll just abbreviate it for time. (20210829).

It can be used for CSS animation, so you don’t have to use animo.js to do it.

References

  1. Introduction to CSS3 (w3.org)
  2. New CSS3 Features: Find the Difference Between CSS and CSS3 (bitdegree.org)
  3. CSS3 New Features (Gradients, Webfonts, Transitions, Shadow Effects…) (jharaphula.com)
  4. CSS 3 tutorial | novice tutorial (runoob.com)
  5. What’s new in CSS 3. | by Sahil Dhawan | Beginner’s Guide to Mobile Web Development | Medium
  6. rgba() – CSS: Cascading Style Sheets | MDN (mozilla.org)
  7. Transform – CSS (cascading style sheets (CSS) | MDN (mozilla.org)