Can this be done with CSS? Is Javascript required to solve it? I know many of us will ask these questions when looking at design. I recently decided to dig into CSS and learn all the properties. I spent a lot of time reading references, code and finding new solutions to old problems with my newly discovered knowledge.
Throughout my journey, I thought I would record and introduce the 50 most interesting attributes and values I found. I have created use cases for many of them, with simple sample code that you can watch, reference, and practice with. I also included some properties that are still in beta, but may soon be used. I also included some well-known attributes but with lesser known values, so you can deepen your knowledge even if you’ve heard of them. There are also some browser specific things here. Let’s start.
1. all
The all attribute in CSS will reset (reset) all other properties (except unicode-pricei
and direction
) to their original or inherited states. It accepts the following values:
- initial : change all the attributes of the
element
or inherit the initial value from its parentelement
. - Inherit: change all the properties of the
element
orelement
of its parent to the value of our father. - unset: change all the properties of the
element
orelement
of its parent into their value if they can inherit or to our own values, if not possible, so the tendon like Inherit.
2. angle
Angle is a value only valid for some properties in CSS. It is often used with transforms , such as transform: rotate(180deg)
, transform:skew(10deg,10deg);
. In addition to deg
, you can also use grad
, rad
or turn
.
3. animation-fill-mode
This property specifies which style is applied to the element
when the animation
does not execute. Imagine an @keyframe
that fades an element
( opacity: 1;
to opacity: 0;
). By default, after the animation
completed, it will return to its original state.
By using animation-fill-mode: forwards;
We can make the element
fade by retaining the styles in the last main frame:
It includes the following properties: 1. none : (default) element
will have its original style when animation is not executed. 2. forwards : element
will apply the values set by the last main frame when the animation is executed. 3. backwards : the element
will apply the attribute values defined in the main frame at the top of the animation. 4. both : animation will follow the rules of both forwards
and backwards
. 5. initial : set animation-fill-mode to its default value. 6. inherit : inherits animation-fill-mode from the parent element
.
4. animation-iteration-count
This property specifies the number of repetitions animation @keyframe
. It can also be an integer value, like animation-iteration-count: 1.5;
, will generate a full animation
cycle plus a half cycle.
5.backface-visibility
This attribute determines whether the “rear” side of the element
is visible when the element
is rotated. It is used with transform 3D
properties. Accept the following values:
- visible : (default) the back of the
element
is displayed, when rotated - hidden : the back of the
element
will be hidden when rotated. - initial : set the property to the default value (displayed).
- inherit : inherits property from parent
element
.
6. background-attachment
This property specifies if the background image is fixed in the screen when you scroll the page or scroll along with the page.
- Scroll : (by default) the background image is fixed to the
element
and does not scroll with the content. - Fixed : background image remains fixed when you scroll the page (or
element
) - Local : scrolls along with the
element
content if theelement
is scrollable.
7. background-blend-mode
This property specifies how the background images
, gradients
, and colors
of the element
blend together. For example, you can add background-image
and background-color
, then set blend-mode
to “lighten”
. Below are the blending modes you can use:
- color
- color-burn
- color-dodge
- darken
- difference
- exclusion
- hard-light
- hue
- lighten
- luminosity
- multiply
- overlay
- saturation
- screen
- soft-light
8. background-clip
The background-clip
attribute identifies the area of the element where the background
is applied. You can make the background go below its border
or just fill in its content area.
- border-box : (default) allows the background range to the outer edge of (border).
- content-box : The background is cut into the content box of the
element
- padding-box : the background is cut on the outer edge of the
padding
, so it is applied to content andpadding
, but not below theborder
- text : the background is cut into the foreground text.
9. background-origin
This attribute determines if the background is only applied to the element
‘s content area, or padding
and border
. The difference between this and background-clip
is that background-clip
clipping the background
and background-origin
change the size of the background
.
1. box-decoration-break
This property specifies the background
, padding
, border
, box-shadow
, margin
, and clip
of the element
be applied when it is displayed on multiple lines. If we have text displayed on multiple lines, it will normally increase the height of the element
, however, box-decoration-break
can apply styles to each individual line, instead of the entire element
.
- clone : each
element
of theelement
hasstyle
,box shadows
andpadding
applied separately - slice :
element
is displayed as if it were not fragmented.
Note: You can only use box-decoration-break
on inline element
. According to MDN , you can only use it on Firefox and Chrome inline element
, but I tested it and current browsers show different results. It works on Firefox and Chrome 54 , Opera 41 and Safari 10 with the -webkit prefix.