4 CSS tricks I’ve learnt the hard way
Update 6–13–2018 : A reader has translated this article in japanese, find it here. 10k readers and 650+ claps later : Thank you readers and translators❤️
Update 30–6–2021 : A reader has translated this article in spanish, find it here. 36k readers and 2500+ claps later : Thank you readers and translators❤️
Starting a new project from scratch is always a good way to learn new things no matter how experienced you are.
Recently I wondered what it would take to build a full web-application without using any third-party well-known framework such as Bootstrap.
First would it unleash the power of coding freedom (aka “Errors can only come from you” but also “Stop fighting against your framework with !important rules”) but also would it teach me CSS tricks I’m now proud and happy to share with you.
1. No borders - Prefer box-shadow or box-sizing
Have you ever worked with borders or not, this is what you should consider :
Borders actually take space in the global layout of your page. It means that it adds extra width and height to bordered elements.
Consequences:
- You have to manually compute desired width and height of your elements to keep them from scrambling your layout in case of a list-like or grid-like approach.
- Adding borders on particular states like hover will make the whole layout move. Performance-killer.
Demonstration:
By hovering the first div you should notice the second one is also moving.
Workarounds:
- You can use :
box-sizing: border-boxso thatwidthtakesborder-widthinto calculations. - You can use:
box-shadow: /* ... */to fake borders. - Suggested in the comments : Use transparent borders and change their color when needed. Be careful as this approach will make borders take additional space in your layout.
Demonstration:
2. Draw attention to an element
Whenever you want users to click on a particular button there are multiple well-known strategies to call attention.
However, I’d like to share with you a smooth and simple yet customizable trick.
Demonstration:
Advantages :
- No change in width or height of the element thus no broken layout.
- One-liner :
animation: radial-pulse 1s infinite; - You can change : color, size, duration, etc.
- Unobtrusive yet noticeable.
Quoted from a reader : If your site needs to be accessible to visually impaired users, this effect would not be useful for them.
3. Center an element horizontally and vertically
CSS has evolved still have we been a lot struggling to center our elements both horizontally and vertically.
There might be plenty of ways to achieve that but these are my everyday solutions to this recurrent need:
- Either use:
display:flexon the parent element +margin: autoon the child element, +text-align:centerdepending on your case. - Either use:
display:flex+justify-content:center+align-items:centeron the parent element.
Demonstration:
4. Position an element relatively to its parent
This one is very useful when dealing with dropdowns, tooltips and popovers.
This is how it works:
- The parent element MUST NOT be static:
position: relative | fixed | absolute - The child MUST have :
position:absolute
And just like that, using top | left | bottom | right will position the child relatively to its parent.
Demonstration:
Notice that the square on top right could have been a popover settings menu appearing on click or hover.
Example picked from my own work :
