This year has been very productive for me as i developed numerous UI/UX apps and websites. On the way i've picked up some useful tricks to enhance ...
For further actions, you may consider blocking this person and/or reporting abuse
box-sizing: border-box;is a life changer πMost definitely...I learnt it yesterday...and it completely changed my level of understanding of CSS and HTML...was really great
Haha I know right!
A tip for vertical align: although transform/translate works, I would not recommend it for frequent centering as it forces the GPU to render your element. This is especially bad if you have many child elements.
A better way is to use
display: flexwithjustify-contentandalign-items.Beat me to the punch. π
To the OP, note that
align-itemsis for vertical alignment whilejustify-contentis for horizontal. This is assuming yourflex-directionis "row".I wouldn't recommend vertically centering a div by position absolute. Often times browsers render it blurry. You should use flexbox instead, it's easier and reliable. If you are not able to use flexbox due to browser support, in my opinion, display table is a better solution.
why do they render absolute position blurry. Do you have a sources to back this up?
This is because of subpixel rendering from the browser when using the transform property - it's actually a longstanding "issue" faced by front-end devs for years (albeit, working as intended). When working in subpixel ranges (1.875px, 10.5px, etc) with transforms, the browser calculates the draw differently than flex.
This method works ok for images and other media elements that will receive some sort of rendered anti-aliasing from the browser naturally, but when it comes to pixel perfect UI elements (borders, buttons, fonts etc) that anti-aliasing is performed on the entire element, again, when it shouldn't be. Some tricks like using the transform z-scaling, transform rotate with fractional degrees, and backface-visibility:hidden can sometimes mitigate the issue, but its pretty hit-or-miss and isn't always supported across all browsers.
TLDR; Use transformation centering for media elements and select structure layouts, it's great to have in your toolkit. Items containing UI elements are more safely centered vertically with flex.
It is not caused by position absolute. But css transform makes elements blurry in some conditions.
stackoverflow.com/questions/320345...
I dont know about blurriness, but flexbox is the way to go.
youre right flexbox works better. But i learned this trick a while ago and its helped me a lot so thats why I mentioned it :)
For the vertical alignment, you mistakenly transform translateX, instead of Y.
.container {
position:absolute;
top: -50%;
transform: translateY(50%);
margin: auto;
}
Ah yes thanks for pointing out! I will edit it :)
Also, those values will push the .container outside of the screen. I should be:
Right i believe i edited that :)
It depends. Yes calc() is more expensive to run, but most browsers are shipped with highly optimized engines. On the other end, shipping more CSS to users impacts the loading time of the website. It's a balancing act for the users!
of course. Usually one doesn't use calc for widths on all elements. I use it like max 2-3 elements per stylesheet
Hey, thanks for these tips! I didnβt know you could assign CSS variables 0_o
CSS variables and calc together are quite powerful! You can achieve fluidity with them
nice article !
You're welcome man. Enjoy!
Two words for you:
1) SCSS
2) Grid
For vertical alignment make sure that parent element has position : relative
You could also use flexbox to center once "arranged" by column