Can it be done with CSS? Do I need JavaScript? I know a lot of us ask these question when looking at designs and interactions. Recently I decided to dig into CSS and learn all of the properties. I spent a lot of time reading reference material, writing code, and finding new solutions to old problems with my newfound knowledge.<\/p>\n
Through my journey, I thought I would document and showcase 50 of the most interesting properties and values I found. I created use-cases for many of them, with simplified code samples you can look at, reference, and play with. I also included a number of properties that are still experimental, but will likely be usable soon. I also included several well-known properties but with lesser-known values, so you can deepen your knowledge of them even if you’ve already heard of them. There are also some browser-specific things in here.<\/p>\n
Let’s go!<\/p>\n
<\/p>\n
The initial:<\/strong> changes all the properties of the element or the element’s parent their initial value See the Pen reset: all<\/a> by Greg Hovanesyan (@gregh<\/a>) on CodePen<\/a>.<\/p>\n Angles can be valid CSS values for some properties. We often use something like I tested it in Chrome 54, Opera 41, Firefox 50 and Safari 10.<\/p>\n See the Pen angle~<\/a> by Greg Hovanesyan (@gregh<\/a>) on CodePen<\/a>.<\/p>\n This property specifies what styles are applied to the element when the animation is not<\/em> playing. Imagine a See the Pen Fading out animation<\/a> by Greg Hovanesyan (@gregh<\/a>) on CodePen<\/a>.<\/p>\n By using See the Pen Fading out and keep styling<\/a> by Greg Hovanesyan (@gregh<\/a>) on CodePen<\/a>.<\/p>\n It accepts the following properties:<\/p>\n none:<\/strong> (default) element gets its initial styling when the animation is not executing You can see in the popular library Animate.css<\/a>, the This property defines the number of times a See the Pen animation-iteration-count<\/a> by Greg Hovanesyan (@gregh<\/a>) on CodePen<\/a>.<\/p>\n This property specifies whether the “back” side of the element is visible when the element is rotated. It is used with 3D transforms. Accepts the following values: <\/p>\n visible:<\/strong> (default) back side of element will be visible, when rotated These example will illustrate that:<\/p>\n See the Pen backface-visibility<\/a> by Greg Hovanesyan (@gregh<\/a>) on CodePen<\/a>.<\/p>\n See the Pen backface-visibility – flipping cards<\/a> by Greg Hovanesyan (@gregh<\/a>) on CodePen<\/a>.<\/p>\n This property specifies if the Scroll:<\/strong> (default) background is fixed to the element and does not scroll with the contents See the Pen background-attachment<\/a> by Greg Hovanesyan (@gregh<\/a>) on CodePen<\/a>.<\/p>\n This property specifies how element’s background images, gradients, and colors blend with each other. For example, you could add a The following blending modes can be used: <\/p>\n See the Pen background-blend-mode<\/a> by Greg Hovanesyan (@gregh<\/a>) on CodePen<\/a>.<\/p>\n The border-box:<\/strong> (default) allows background extent to the outer edge of the border See the Pen background-clip<\/a> by Greg Hovanesyan (@gregh<\/a>) on CodePen<\/a>.<\/p>\n This property defines if the background is applied to only the element’s content area, or padding and border areas as well. The difference between this and This property specifies how the element’s background, padding, border, box-shadow, margin, and clip are applied when it’s wrapped onto multiple lines. If we have text wrapped on multiple lines, it would normally increase the element’s height, however, clone:<\/strong> every fragment of the element receives styling, box shadows and padding are applied to each fragment individually Note:<\/strong> you can only use See the Pen box-decoration-break<\/a> by Greg Hovanesyan (@gregh<\/a>) on CodePen<\/a>.<\/p>\n The It accepts an expression with addition, subtraction, multiplication and division operators. Operands can be any syntax length values. You can even do something like A fallback would be like this, for browsers that don’t support it:<\/p>\n The There are a number of other column-* properties:<\/p>\n column-gap:<\/strong> property specifies the size of gap between the columns See the Pen columns<\/a> by Greg Hovanesyan (@gregh<\/a>) on CodePen<\/a>.<\/p>\n The content property is used in conjunction with pseudo elements like Counters let us give numbers (indexes) to elements. For example, you have an article, with several topics, each topic has an There are four properties to work with counters:<\/p>\n counter-reset:<\/strong> resets or creates a counter. the value of this property is the name of the counter that you define See the Pen counters<\/a> by Greg Hovanesyan (@gregh<\/a>) on CodePen<\/a>.<\/p>\nall<\/code> property<\/a> resets every other property (apart from unicode-bidi and direction) properties to their initial or inherited state. It accepts these values:<\/p>\n
\ninherit:<\/strong> changes all the properties of the element or the element’s parent to their parent value
\nunset:<\/strong> changes all the properties of the element or the element’s parent to their parent value if they are inheritable or to their own value if not<\/p>\nangle<\/h3>\n
transform: rotate(180deg)<\/code>, but “deg” isn’t the only possible unit here. You can also use grad<\/code>, rad<\/code> and turn<\/code> as well. Our transform: rotate(180deg)<\/code>, for example, could be written as transform: rotate(0.5turn)<\/code> as well. Say you want to rotate an element 4 times, it might be the easiest choice to write rotate(4turn)<\/code>. <\/p>\nanimation-fill-mode<\/h3>\n
@keyframe<\/code> animation that fades an element out (from opacity: 1;<\/code> to opacity 0;<\/code>). By default, after the animation is complete, it will jump back to its initial state.<\/p>\nanimation-fill-mode: forwards;<\/code> we can get the element to stay faded out by retaining the styles in the final keyframe:<\/p>\n
\nforwards:<\/strong> animation will apply the values set by the last keyframe executed. Note, that it may not be the state of the “100%” or “to” keyframe. If you set animation-iteration-count<\/code> to 1.5, the last keyframe will be the 50% keyframe. Or, if the animation-direction<\/code> set to reverse, the last keyframe will be the “0%” or “from” keyframe
\nbackwards:<\/strong> will apply the property values defined in the keyframe at the beginning of the animation
\nboth:<\/strong> the animation will follow the rules of both forwards and backwards
\ninitial:<\/strong> sets animation-fill-mode<\/code> to it’s default value
\ninherit:<\/strong> element inherits animation-fill-mode<\/code> value from its parent<\/p>\n.animated<\/code> class uses animation-fill-mode: both<\/code>.<\/p>\nanimation-iteration-count<\/h3>\n
@keyframe<\/code> animation repeats. It can also be a non-integer value, like animation-iteration-count: 1.5<\/code>, which will play one full animation cycle plus half of the cycle.<\/p>\nbackface-visibility<\/h3>\n
\nhidden:<\/strong> back side of element is not visible
\ninitial:<\/strong> sets the property to its default (visible) value
\ninherit:<\/strong> get the property value from its parent<\/p>\nbackground-attachment<\/h3>\n
background-image<\/code> stays fixed within the viewport when you scroll the page or scrolls along with the page.<\/p>\n
\nFixed:<\/strong> the background stays fixed when you scroll the page (or element)
\nLocal:<\/strong> scrolls along with the elements contents, if the element is scrollable<\/p>\nbackground-blend-mode<\/h3>\n
background-image<\/code> and background-color<\/code>, then set the blend-mode<\/code> to “lighten”. You can also specify several blend modes, one per background.<\/p>\n\n
background-clip<\/h3>\n
background-clip<\/code> property defines the area of the element where the background is applied. You can make the background go underneath its border or fill only the area of its contents.<\/p>\n
\ncontent-box:<\/strong> the background is clipped to the content box of the element
\npadding-box:<\/strong> the background is clipped to the outer edge of the element’s padding, so it’s applied to the content and the padding, but not underneath the border
\ntext:<\/strong> the background is clipped to the foreground text.<\/p>\nbackground-origin<\/h3>\n
background-clip<\/code> is that background-clip<\/code> crops the background, and background-origin<\/code> resizes it.<\/p>\nbox-decoration-break<\/h3>\n
box-decoration-break<\/code> can apply the styling to each line separately, instead of the whole element.<\/p>\n
\nslice:<\/strong> the element is rendered as if the element is not fragmented<\/p>\nbox-decoration-break<\/code> on inline elements. According to MDN<\/a> you can only use it on Firefox and Chrome inline elements, 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-<\/code> prefix.<\/p>\ncalc()<\/h3>\n
calc()<\/code> function can be used to create values. For example: width: calc(100% - 32px)<\/code> will make element full width minus 32 pixels. It can be very useful for setting a column width and subtracting the margins. No need for nesting two elements and giving padding to the parent element to achieve the same result.<\/p>\ncalc(var(--someValue) \/ 2 - 2em)<\/code><\/p>\nwidth: 98%; \/* fallback for browsers without support for calc() *\/ \r\nwidth: calc(100% - 1em);<\/code><\/pre>\ncolumn-count<\/h3>\n
column-count<\/code> property specifies the number of columns an element has. column-count: 3<\/code> will spread the elements text (or inline-* elements) into 3 columns. You can apply it to inline-block<\/code> and block<\/code> elements. This will not work on an element with display: table<\/code>, but will work on display: table-cell<\/code>. <\/p>\n
\ncolumn-rule:<\/strong> is a vertical line drawn between the column visually separating them. It’s a shorthand for setting this 3 properties (it is very much like border-*)
\ncolumn-rule-color:<\/strong> specifies the color of the line. The value can be a named color (red, green, transparent), hex, rgb\/rgba, hsl\/hsla color values
\ncolumn-rule-style:<\/strong> specifies the style of the line. It accepts the following values: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
\ncolumn-rule-width:<\/strong> specifies the width of the line and accepts named values (thin, medium, thick), px, em, initial, inherit and unset<\/p>\ncontent<\/h3>\n
::before<\/code> and ::after<\/code>. Here’s one trick you can do with them. It’s a neat way to create a comma-separated <ul><\/code>.<\/p>\nul > li:not(:last-child):after {\r\n content: \", \";\r\n}<\/code><\/pre>\ncounters<\/h3>\n
<h2><\/code> heading in the beginning, and you have <h3><\/code> subheadings. You can automatically number them!<\/p>\n
\ncounter-increment:<\/strong> increments the counter. the value is of this property is the name of the counter that you want to increment
\ncontent()<\/strong> use :before pseudo class and content() to add the index to the elements
\ncounter()<\/strong> function to retrieve the value of the counter<\/p>\nbody {\r\n counter-reset: heading; \/* init the counter for headings (you can give it any other name) *\/\r\n}\r\nh2 {\r\n counter-increment: heading; \/* increments the counter on every <h1> tag *\/\r\n counter-reset: subheading; \/* here we init or reset the subheading *\/\r\n \/* so that we get 1.1, 1.2, 1.3, then after new heading it will go 2.1, 2.2, 2.3 *\/\r\n}\r\nh2:before {\r\n content: counter(heading) \" - \"; \/* using :before selector and counter() function we can add the index to the heading *\/\r\n}\r\nh3 {\r\n counter-increment: subheading; \/* increment the subheading counter on every <h2> tag *\/\r\n}\r\nh3:before {\r\n content: counter(heading) \".\" counter(subheading) \" - \";\r\n}<\/code><\/pre>\ncurrentColor<\/h3>\n