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:
none
: when you want to remove the default underline ofa
tagunderline
: when you want to reset the underline fora
tag, usually you will style the a tag without the underline right from the start, when hovered there will be underlineline-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:
- At the moment it does not support well in popular browsers, especially still IE, see more in CanIUse
- Somewhere
text-decoration-*
n’t provide enough options for us to customize thewidth
andposition
of theunderline
. While these two are missing,border-bottom
covers it!
References:
- https://css-tricks.com/almanac/properties/t/text-decoration-color/
- https://css-tricks.com/almanac/properties/t/text-decoration-line/
- https://css-tricks.com/almanac/properties/t/text-decoration-style/
- https://css-tricks.com/almanac/properties/t/text-decoration-skip/
- https://css-tricks.com/styling-underlines-web/
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:
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:
- https://css-tricks.com/transparent-borders-with-background-clip/
- https://stackoverflow.com/questions/4062001/css3-border-opacity
Refer to the previous sections here:
Source : Viblo