Some CSS tricks that Frontend itself may not know (Part 11)
- Tram Ho
Hello everyone, I am back and continue with part 11 of the series about some CSS tricks that Frontend itself may not even know.
Let's get started!
1. Combo drop-shadow + clip-path code only few lines but too quality! [Not Cross-Browser]
Surely you are not new to these types of designs with "arrows" like this
With normal arrows without shadows , you usually use :before or :after right?
See the Pen CSS Arrow in the old way by Ha Huu Tin
( @tinhh ) on CodePen .
In case of adding shadow , you have to combine 2 :before and :after , add box-shadow then you have to align to hide the excess shadow , in short, it is a bit too much ?
But fortunately, when CSS3 came out with properties that, when combined, helped us to do things that were previously considered difficult, it is now a lot easier.
Back to the example of a tag name style, instead of a bunch of code for :before , now just one clip-path: polygon(20px 0%, 100% 0%, 100% 100%, 20px 100%, 0 50%); it's done!
See the Pen CSS Arrow in the new way by Ha Huu Tin
( @tinhh ) on CodePen .
Now, it is too easy to add shadow effect for the other name tag, continue to the above example, we need to wrap a parent tag and write it a filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5)); attribute filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5)); it's done!
The reason I put
drop-shadow()on a parent tag, instead of putting the same element withclip-pathis because theclip-pathwill cut all effects outside the box on the same layer as it, so the shadow will be cut, not allowed. see.
See the Pen CSS Arrow (has shadow) in the new way by Ha Huu Tin
( @tinhh ) on CodePen .
CSS3 is cool, only that it is not supported by many browsers, so when using we also have to consider to suit the requirements of the project.
2. Don't write CSS in "CSS" anymore!
Use CSS Preprocessors like SASS, LESS or Stylus. It actually has a lot of benefits such as better code, less code, more code that is easier to read, easier to maintain, easier to work with, and many more benefits!
In this article I choose to use CSS Preprocessors as SASS! The features listed below are present in CSS Preprocessors, if there is a difference in syntax only!
2.1 Variables
It's undeniable the utility that the variable brings, everything from color , font-size , font-family is used in many places on the page, through calling those values with variables that help the code we edit. Very quickly, it also helps to control the standards of color and size of components.
Although CSS also provides Variables, it does not support browsers in many browsers, so it is still difficult to be popular in many projects like SASS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $font-family: Helvetica, sans-serif; $color-primary: #333; $color-secondary: #eee; body { font-family: $font-family; color: $color-primary; } .title { color: $color-secondary; } |
2.2 Nesting
This is the feature that I really like in SASS, before when I was writing in the .css file I had to always copy the selector, which takes a lot of time. With SASS simply writing nested one by one, writing CSS code is much faster now.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | nav { background-color: red; ul { margin: 0; padding: 0; list-style: none; li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } } |
2.3 Import
The import feature helps us break down the code into the corresponding function files, the divided code is easy to read, maintain is also easy, and the teamwork also reduces conflicts because each person writes in different .scss files.
How to divide files and folders appropriately, this depends on each project, each individual or organization. I personally follow the 7-1 Pattern organization, it feels very OK! Clear and easy to understand!
SASS has a very good designation for files of the format
_reset.scsswhich means a prefix_is interpreted as partials files, these files will never be built into CSS, they must always beimport(called into ) 1 certain file.
_variables.scss
1 2 3 4 5 | $font-family: Helvetica, sans-serif; $color-primary: #333; $color-secondary: #eee; |
main.scss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | @import variables; body { font-family: $font-family; color: $color-primary; } .title { color: $color-secondary; } |
2.4 Mixins
It can be considered as a function type in Javascript, defining a mixin that allows us to pass param into and output CSS is quite dynamic.
Take an example to make it easier to understand, as in part 8 of this series I talk about cutting text into multiple lines, instead of calling directly where the truncate is needed, it looks too wordy like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | .description { display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } .title { display: -webkit-box; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } |
At this point, mixin should be used to write neat code as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | @mixin truncate($line) { display: -webkit-box; -webkit-box-orient: vertical; line-clamp: $line; overflow: hidden; text-overflow: ellipsis; } .description { @include truncate(3); } .title { @include truncate(2); } |
SASS has many other great features, within the scope of this article, I am not convenient to tell them all, but with the 4 features mentioned above, we no longer have to fret about. STOP WRITTEN CSS in "CSS" FROM TODAY!
3. Have you ever heard of text-align: start or text-align: end ?
I'm sure many developers only know and use text-align with left , right , center or justify . Never used to start or end .
For the websites we often serve for Vietnamese, English or Japanese languages, now:
text-align: startis the same astext-align: lefttext-align: endis the same astext-align: right
Because the languages that we support above are written in all directions from left to right (left to right)
But suppose you are designing an interface for an Arabic website, for example, their writing is in the right to the left.
At this point, the values of start , left and right , end will work differently.
See the Pen text-align in ltr by Ha Huu Tin
( @tinhh ) on CodePen .
As the demo above shows, it's clear that text-align with value start and end works more accurately than left and right right?
Refer to the previous sections here:
Source : Viblo