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 my designs.
1. CSS Variables
CSS variables are useful when we want to apply the same style to common elements. Instead of adding a complex box-shadow, for example, to common elements we can initialize a variable and use that variable everytime we want to apply that style to an element
We initialize CSS variables with :root and the property we want to set, like so:
:root {
--shadow: 0 1px 3px rgba(0,0,0,0.1);
}
And we can then use it in any element we want to apply this box-shadow to:
.container {
box-shadow: var(--shadow);
}
2. Height Media Queries
Besides for screen width media queries, we can also apply screen height media queries, so devices with smaller screen height can be responsive. As well, when a device rotates its screen, the screen height changes and we need to reflect those changes for responsive purposes.
@media only screen and (max-height: 800px) {
.container {
height: 95%;
}
}
For screens at 800 or less pixels will change the grid element's height.
3. Calc Function
The CSS calc function can be very useful when setting dynamic widths. Say we want an element's width to be based on another element's width.
.container {
width: calc(100%-300px);
}
The width of our container element will be based on 100% of its parent container minus 300px, so if a container next to it is 300px, our dynamic container will respond accordingly.
4. Vertical Alignment
There are many ways to align an element vertically, But sometimes it can get complicated and not work, due to positioning complications of the parent element. One such method that works everytime is to position an element we want to align vertically, as absolute position and apply the following styles.
.container {
position:absolute;
top: -50%;
transform: translateY(50%);
margin: auto;
}
This will vertically align the element to its parent container.
5. Border-Box Property
.container {
box-sizing: border-box;
}
Border box is one of the most useful properties in CSS. It allows us to create padding on elements while keeping the dimensions of the element uniform. So if we have a container with 300px width and 300px height and a padding of 30px, by default CSS will add those 30px to the container's dimensions thus causing many problems of alignment and other issues in our design. By applying a box-sizing: border box property, we can make all containers uniform in size.
box-sizing can also be used to make inputs, textareas and select boxes, the same size as well, to create a uniform look to our elements.
Website: www.flexrweb.com
Top comments (24)
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