Some CSS tricks that Frontend itself may not know (Part 12) [Special Part]

Tram Ho

Hello everyone, I am back and continue with part 12 of the series about some CSS tricks that Frontend itself may not even know.

Let’s get started!

1. text-decoration sounds a lot, but text-decoration-* is new! [Not Cross-Browsers]

I think a lot of you write CSS code, and especially you do Frontend, when writing the text-decoration attribute, it seems that the name 3 values ​​often seem to be called:

  1. none : when you want to remove the default underline of a tag
  2. underline : when you want to reset the underline for a tag, usually you will style the a tag without the underline right from the start, when hovered there will be underline
  3. line-through : best used when you make an e-commerce website, with the old price and the new price of a product, the old price is crossed out

You see, it is clear that web applications we encounter often fall into the above cases of text-decoration .

As for the value of underline that text-decoration provides us, it is too primitive, it is impossible to change the color or change the type of border as border attribute, so I still use border-bottom to Create underline effects in these cases:

But I don’t know that there is an attribute called text-decoration-* , * includes styles like color , style , skip , so let’s see how text-decoration-* affects underline like that Which is in the demo below:

Still work and the same results! But text-decoration-* has an additional attribute called text-decoration-skip helps us to have a more underline style that looks cooler than when using border-bottom ?

It feels good, but after studying it to see if it is the best solution for style underline , I realized there are some shortcomings:

  1. At the moment it does not support well in popular browsers, especially still IE, see more in CanIUse
  2. Somewhere text-decoration-* n’t provide enough options for us to customize the width and position of the underline . While these two are missing, border-bottom covers it!

References:

2. Create a border “half-transparent”, thought it was easy but enlightened many good things !!!

Have you ever seen a design with blurry border like this:

Image from Internet

At first glance, you will immediately think of using border + rgba() , I tried and this is the end

Eh..why is that, unfortunately with the “understanding mechanism” of browsers it is so.

I suddenly thought of a rgba() way, looking at it as a border, but why not try box-shadow + rgba() ?

As expected, it works beautifully, guys!

But I was still too upset about the border now, thinking that it could do it, I was eager to find out, fortunately, I found the truth.

I simply need to add background-clip: padding-box is my original idea border + rgba() it works right now guys!

And notice the title of this tip, I said “semi-transparent” ie not transparent (Transparent) but a translucent layer (Translucent) . And Translucent Border is my keyword to research this tip !!! ?

References:

Refer to the previous sections here:

Share the news now

Source : Viblo