DEV Community

loading...
Cover image for 7 amazing CSS properties you may not know  (yet)

7 amazing CSS properties you may not know (yet)

Mustapha Aouas
Angular lead developer β€” I like sharing what I know, and learning what I don't πŸ‘¨πŸ»β€πŸ’»
・5 min read

Learning CSS is the way to go to build good-looking web pages. However, in the process of learning it, we tend to confine ourselves (most of the time) to always use the same properties over and over. We are a creature of habit after all, we use what we're comfortable with.
So, in this article, I'll try to introduce you to 7 CSS properties that by the end of this post you should feel comfortable using.

Text and Numbers

Let's start with the text-related properties:

1. vertical-align

The first property on this list is vertical-align. According to MDN this CSS property sets the vertical alignment of an inline, inline-block or table-cell box.

Well, like the definition said, this property lets you align the text vertically. It's particularly useful for ordinal indicators (st, nd, etc), required inputs asterisk (*) or icons that are not correctly centered. It takes one of these values: super | top | middle | bottom | baseline (default) | sub | text-top | text-bottom, or a length (px, %, em, rem, etc.) from the baseline.

Exemple usage

Note that for ordinal indicators you could also use the <sup> HTML element.


Resource: MDN.

2. writing-mode

Let's continue with the second property. writing-mode sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. It takes one of these values horizontal-tb (default) | vertical-rl | vertical-lr.

Example usage


Resource: MDN.

3. font-variant-numeric

The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
It takes one of these values normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions.
This property is useful to style numbers. depending on the situation you might want to display an old-style of numbers or with a slashed zero or you have a counter and you don't want the rest of the string (that comes after the number) to giggle while the numbers changes. For these situations font-feature-settings is useful.

Example usage

Note that the font-variant-numeric is part of the font-feature-settings group of properties. Properties like font-variant-caps or font-variant-ligatures are part of that group too.
Note also that like all font-feature-settings properties your font needs to implement those said features to work properly. The font I'm using is Fira Sans.


Resource: MDN.

4. user-select

The user-select property is useful whenever you have a text you don't want the user to be able to select, or on the contrary, you want all the text to be selected if a double-click or context-click occurred.
This property takes one of these values: none | auto | text | all.

Alt Text

Notice how the coupon gets selected when click, and how the vertical text is not selected.


Resource: MDN.

Shapes

Let's talk now about some shapes-related properties:

5. clip-path

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.
This property takes one of these values: circle() | ellipse() | polygon() | path() | url().
Since this is an introduction to this property, I won't dive deep into each of these values, but you could check the resource at the bottom of this section if you want to learn more.

The two values I use the most are circle and polygon. The circle(radius at pair) value takes two arguments, the first one is the radius of the circle, and the second one is a point representing the center of the circle.
The polygon(pair, pair, pair ...) value takes 3 or more points, representing a triangle, a rectangle and so on.

Alt Text


Resource: MDN.

6. shape-outside

The shape-outside CSS property provides a way to customize the wrapping of an HTML element, making it possible to wrap text around complex objects rather than simple boxes. It takes the same values as clip-path do.

Where clip-path defines how the users see your element, shape-outside defines how other HTML elements see it.

Alt Text

Notice how the text float around the shape of the dog picture in the figure above.


Resource: MDN.

7. background-clip

Last but not least, the background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.
This property takes one of these values: border-box (default) | padding-box | content-box | text.

Alt Text

Note that you can set the background to be visible only behind text characters. For that, you have to set the font color to transparent and use the -webkit- prefix on chrome.


Resource: MDN.

Wrapping up

There you have it, these are the 7 properties I wanted to bring to your attention. Here's a sample using all the CSS properties mentioned in this post:

Alt Text

How much of these properties did you know about? And what are the properties you think should be added to this list? Tell me in the comments.


Hey, let's stay in touch!

If you liked this article, please share it with your friends and colleagues.
Connect with me on Twitter or LinkedIn to read more about HTML, CSS, JS and Angular!

What to read next?

Discussion (21)

Collapse
lukewduncan profile image
Luke Duncan

what on earth....writing-mode, didn't even know that existed. thanks for this post!

Collapse
mustapha profile image
Mustapha Aouas Author

Thx. Glad i could help!

Collapse
originaljonze profile image
OriginalJonze

These are great!

Collapse
tonigift profile image
ToniGift

This is helpful
Thank you

Collapse
emmabostian profile image
Emma Bostian ✨

This is wonderful!

Collapse
mustapha profile image
Mustapha Aouas Author

Thanks for the kind words

Collapse
harryadney profile image
Martin Dimmock

Great article, Mustapha. Thanks for sharing your knowledge.

Collapse
mustapha profile image
Mustapha Aouas Author

Thanks πŸ™

Collapse
aliglelo profile image
Tech Master

Very useful

Collapse
thomasbnt profile image
Thomas Bnt

Très sympa la présentation du post !

Collapse
qq449245884 profile image
qq449245884

Hello, can I translate your article into Chinese and share it with Chinese developers? I will attach the original link address of the article.

Collapse
mustapha profile image
Mustapha Aouas Author

Sure :)

Collapse
cotcotcoder profile image
JeffD

Super article comme toujours, les examples concrets (avec le coupon de rΓ©duction), les liens vers la doc complete et la partie wrapping up sont vraiment top :)

Collapse
mustapha profile image
Mustapha Aouas Author

Hey! Merci πŸ™

Collapse
khalil profile image
khalil Chermiti

this is soo helpful, thank you ❀️

Collapse
aneova profile image
Anna Korotkova • Edited

Great article! I have opened a lot of new! THANKS!

Collapse
luisjoselopezd profile image
LuisJoseLopezD

such a great content thanks you!!!

Collapse
mustapha profile image
Mustapha Aouas Author

Thank you for your feedback! I appreciate it

Collapse
stokry profile image
Stokry

Nice one!

Collapse
agathebadia profile image
Agathe Badia

Love it! Super interesting and useful for future layouts :D Thanks!

Collapse
erhannah profile image
hannah blair πŸ™

Nice, thanks!