this is TK and welcome back to red stapler channel in this video I'm going
to talk about top 5 useful CSS tips that I frequently use on my projects and
make video tutorial videos in the past few years so ready let's check it out
the first tip you might have already seen it in most of my video normally
when CSS calculates the element size they will add padding and margin on top
of the width and height properties for example I have these two divs I want a
space between them so I add 10 pixel margin I also add 10 picks up heading
for the spacing around the edge now the width property of these divs are set to
200 pixels but the actual width excluding margin or the red area is
going to be 220 pixels due to padding this could cause confusion during the design
because if we want a visible area of the div to be exactly equal to 200 pixel
then you have to reduce the width property to 180 pixel to compensate the
padding to fix this just use wildcards selector and set box-sizing property to
border-box this will make the CSS include the padding during the size
calculation for our elements so with this tip now you can work with element
size without any confusion the next tip is really cool it's easier to show you
the origin or demo I learned it from please note that there is no JavaScript
the magic of this pen is only just one line setting background repeat' to round
which makes the background repeat when the remaining space can fit the entire
image only otherwise stretch the background and never crop it so the
background of this pen is just one burger patty in SVG format if we resize
the window CSS will try to stretch the current background and when there is
enough space for another patty it will be added to the stack and that's the tip
number two next one is about shadow box shadow is the easiest way to add depth
effect on your element but do you know it's an important key to many many
stunning design concept for example you can create a neon text effect like this
using multiple layers of different shades of red box shadow or use it to
create 8-bits art like this by setting the blur distance to zero and use it on
square element each shadow layer will represent each pixel or combine it with
a CSS and animation to create a snow effect like this but perhaps the most
popular and planning design that rely heavily on box shadow is neumorphic
design don't worry you can find link to each tutorial of our examples at the
description box below for responsive design sometimes you will need to set
the element size to percentage value like this which works fine for the most
case but if you want to maintain an aspect ratio that's going to be a
problem currently CSS does not have any rules to
directly control the aspect ratio so here's the tip just set one size of the
element to zero then use padding for example I said the width of this element
to 55% of its parent then if I want to have 16 to 9 ratio I will set the height
to zero and add padding bottom then use calc function to multiply the width with nine
and divide it by 16 and that's it this element will now maintain 16 to 9
aspect ratio enjoy with the popularity of dark
mode it's time to bring it to CSS we can detect user prefer color scheme on their
computer and render your website accordingly for example if I set my
windows color scheme to dark then I can change my website to dark mode by using
preferred color scheme in media query like this it's a very convenient and
responsive way to adjust the visual effect of your website without adding
toggle button to switch between dark a light mode prefer color scheme is now
supported by all major browsers including Safari and edge but still he
will need to keep an old code to support ie11 users just in case and that's all for
this video hope you guys enjoy if you want to see more web dev tips and
tutorials subscribe this channel to stay tuned thanks for watching see you next
time bye