Interesting properties in CSS Part 1

Tram Ho

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:

  1. initial : change all the attributes of the element or inherit the initial value from its parent element .
  2. Inherit: change all the properties of the element or element of its parent to the value of our father.
  3. unset: change all the properties of the element or element 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:

  1. visible : (default) the back of the element is displayed, when rotated
  2. hidden : the back of the element will be hidden when rotated.
  3. initial : set the property to the default value (displayed).
  4. 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.

  1. Scroll : (by default) the background image is fixed to the element and does not scroll with the content.
  2. Fixed : background image remains fixed when you scroll the page (or element )
  3. Local : scrolls along with the element content if the element 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:

  1. color
  2. color-burn
  3. color-dodge
  4. darken
  5. difference
  6. exclusion
  7. hard-light
  8. hue
  9. lighten
  10. luminosity
  11. multiply
  12. overlay
  13. saturation
  14. screen
  15. 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.

  1. border-box : (default) allows the background range to the outer edge of (border).
  2. content-box : The background is cut into the content box of the element
  3. padding-box : the background is cut on the outer edge of the padding , so it is applied to content and padding , but not below the border
  4. 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 .

  1. clone : each element of the element has style , box shadows and padding applied separately
  2. 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.

Refer

Share the news now

Source : Viblo