00:00:00
tip number one did you know that you can
00:00:02
actually allow the users to control the
00:00:03
height and width of your Elements by
00:00:05
using the resize property in CSS you can
00:00:07
allow the user to resize the HTML
00:00:09
element vertically horizontally or both
00:00:12
at the same time this will work for
00:00:14
every element that has an overflow of
00:00:16
any other than visible for example
00:00:17
overflow hidden have you ever seen these
00:00:20
clean designs with the HTML elements
00:00:22
look super smooth and have this
00:00:23
levitating effect this is called
00:00:25
neumorphism and can be achieved with a
00:00:27
very easy CSS trick we give our element
00:00:30
a hover effect and simply add a box
00:00:32
Shadow make sure that the background is
00:00:34
not completely white and instead a very
00:00:36
light gray because now we add another
00:00:38
box Shadow with a comma this Shadow is
00:00:40
using negative values for the X and Y
00:00:42
coordinates to cast The Shadow on the
00:00:44
top left corner of the element and the
00:00:45
Shadow's color is white this will look
00:00:48
like a source of light coming from the
00:00:49
top left corner creating this clean
00:00:51
realistic effect we could also create
00:00:53
the exact opposite effect and make it
00:00:55
look like the element is carved into the
00:00:57
website just use the keyword inset after
00:01:00
each Shadow and there you go of course
00:01:03
this effect will work with every color
00:01:04
pette that you have in mind just make
00:01:06
the top left Shadow slightly brighter
00:01:07
than the background color did you know
00:01:09
that in many cases you don't need
00:01:10
JavaScript to create user interactive
00:01:12
elements simple buttons or drop- down
00:01:14
Menus can be achieved in CSS only if you
00:01:17
know a little trick that involves using
00:01:19
checkboxes since labels and checkboxes
00:01:21
can be connected using the four
00:01:22
attribute you already have the
00:01:24
foundation of your button now you can
00:01:25
use the checked studo class on your
00:01:27
checkbox to check if the label was
00:01:29
clicked or not so this works like a
00:01:31
simple JavaScript event listener but
00:01:33
only in CSS because now you can show and
00:01:35
hide other HTML elements depending on
00:01:37
the state of the checkbox and the last
00:01:39
thing to do is to hide the checkbox with
00:01:41
a display none so no one will ever
00:01:43
notice you can see this trick being used
00:01:45
in our CSS only navigation bar tutorial
00:01:47
to open and close the sidebar when you
00:01:50
want to make any type of container
00:01:51
responsive you most likely end up
00:01:53
changing the width so that a big
00:01:54
container fits properly on a small
00:01:56
smartphone screen then you probably have
00:01:58
your preferred width of a 800 pixels and
00:02:00
a Max width of 90% so the container will
00:02:03
never be too big for the screen in this
00:02:05
case you can actually use a function
00:02:07
called Min to turn this two lines of
00:02:09
code in one line of code the Min
00:02:11
function always returns the smaller
00:02:13
value which means on desktop devices 800
00:02:15
pixels is smaller than 90% so 800 pixels
00:02:18
is going to be the width but on smaller
00:02:21
screens we reach a point where 90% of
00:02:23
the screen is actually smaller than 800
00:02:25
pixels so 90% will be returned and 90%
00:02:28
is the width of the container
00:02:30
very simple the same thing works for
00:02:32
minimum sizes by using the max function
00:02:35
this function will always return the
00:02:36
bigger value creating a short hand for
00:02:38
the minwidth property and since you have
00:02:40
to set up width minwidth and Max width
00:02:42
for every element that needs to be
00:02:43
responsive CSS introduced the clamp
00:02:46
function that combines all three of them
00:02:48
in one line of code tip number five
00:02:50
glass morphism if you ever wondered how
00:02:53
you can make your website more unique
00:02:55
consider using glass-like elements on
00:02:56
your website they are definitely an
00:02:58
eye-catcher all you need is an element
00:03:00
that has a somewhat transparent
00:03:02
background color now you can use the
00:03:04
backdrop property to control how the
00:03:06
elements behind the current element
00:03:08
should be rendered here you apply the
00:03:09
blur function and provide a value of
00:03:11
let's say 10 pixels this will create a
00:03:14
blur effect on the element which will
00:03:15
look like glass of course this effect
00:03:18
only works for elements that are in
00:03:19
front of something else if you don't
00:03:21
have a background image or anything like
00:03:23
that then of course no one will see the
00:03:25
effect you can experiment with the blur
00:03:27
amount to control the thickness of the
00:03:29
glass and try to use borders and shadows
00:03:31
to make it look even more realistic you
00:03:33
probably know that writing good CSS code
00:03:35
is all about figuring out by what logic
00:03:37
you want to select HTML elements and
00:03:39
then style them you're going to use many
00:03:41
selectors combinators and SoDo classes
00:03:43
to define the roots for your web design
00:03:45
and when doing that you should
00:03:46
definitely hear about the not and Haso
00:03:49
classes as they completely change the
00:03:51
game forever the Noto class is able to
00:03:54
exclude elements from the selector in
00:03:56
this example I want to style all the
00:03:57
buttons but not the first one so to
00:04:00
right button the not selector and in the
00:04:02
parenthesis I say first child now every
00:04:05
button will be affected except the first
00:04:07
one the has selector is a cool way to
00:04:09
select an element based on the presence
00:04:11
of other elements it's often used as a
00:04:13
parent selector which was not possible
00:04:15
before in this example I want to style
00:04:17
all the buttons the same way to have a
00:04:19
clean and consistent design but some
00:04:20
buttons have an icon inside and need a
00:04:22
little more styling now I could give
00:04:25
this button a class but then I need to
00:04:26
do that for every icon button in the
00:04:28
future much easier would be to do that
00:04:30
in CSS only by addressing all the
00:04:32
buttons that have an SVG as a child
00:04:34
element to do that I write button has
00:04:37
SVG now only the buttons within SVG will
00:04:40
be styled a more complex case for the
00:04:43
selector would be to create a dark mode
00:04:44
option in CSS only let's say we have a
00:04:47
drop- down menu for the light and dark
00:04:49
theme in CSS I apply the stes on the
00:04:52
body that has an option with the value
00:04:55
dark then we check if this form element
00:04:57
is checked using the checked s class I
00:05:00
showed you earlier for the body where
00:05:01
this is the case I override the
00:05:03
variables for the color plette to be
00:05:04
dark on Modern websites we see more and
00:05:06
more creative ways to make text look
00:05:08
more interesting one thing that I like a
00:05:10
lot is putting gradients on text if you
00:05:12
ever tried doing this then you probably
00:05:14
notice that it is not possible to use
00:05:15
the linear gradient method on the color
00:05:17
property it just won't work the trick is
00:05:20
to apply the gradient on the background
00:05:21
of the element now we can limit the
00:05:24
background painting area using
00:05:26
background clip text this means the
00:05:28
background will only be where there is
00:05:30
text last thing to do is to make the
00:05:32
color transparent now we can only see
00:05:35
the background color which is our
00:05:36
gradient pretty
00:05:38
cool when building a complex drop- down
00:05:40
menu you would probably use JavaScript
00:05:42
to show and hide your elements but you
00:05:44
might be surprised how much you can do
00:05:45
with plain CSS as a start you would
00:05:47
probably use the focus sudo class which
00:05:49
is applied to the element when you click
00:05:51
on a button or any type of form element
00:05:53
using that will enable you to hide and
00:05:55
show elements on click this will work
00:05:57
great until you run into this annoying
00:05:59
problem when you click on an item inside
00:06:01
the drop down the button will lose its
00:06:03
focus and the elements Disappear by now
00:06:06
most people will probably reach for
00:06:07
JavaScript however you can use another
00:06:09
pseudo class which is called Focus
00:06:11
within this pseudo class will detect the
00:06:13
focus on child elements and will spare a
00:06:15
lot of work in JavaScript because now we
00:06:17
can actually click on the element inside
00:06:18
the dropdown and it will work perfectly
00:06:21
when you have a website where you want
00:06:22
to number your headings you can do the
00:06:24
hard work and hardcode it into every
00:06:25
single heading but what if you are
00:06:27
loading the headings from a database the
00:06:29
then you can't really do that instead
00:06:31
just create a counter variable in CSS in
00:06:34
the root you create your counter using
00:06:36
counter reset and give it any name now
00:06:38
the moment your counter should be
00:06:40
incremented you address the element and
00:06:42
use the counter increment property now
00:06:44
you add a before element to the headings
00:06:46
and its content is going to be the
00:06:47
counter headings now you can apply a
00:06:50
little bit of styling in the before
00:06:51
element and the headings are numbered
00:06:53
perfectly if you ever try to create a
00:06:55
swiper where every card should slide
00:06:57
perfectly into place then you need to
00:06:59
hear this trick normally when creating a
00:07:01
scrollable container everything is very
00:07:03
linear and very bad for the user
00:07:05
experience we don't want the user to be
00:07:07
stuck in between two cards instead we
00:07:09
want the cards to behave like a magnet
00:07:10
that sticks perfectly on the edge
00:07:12
there's always only one card being
00:07:14
displayed and in general the swiper FS
00:07:16
very smooth how did I do that well in
00:07:19
HTML I have a wrapper with five cards
00:07:21
each card has a heading a Tex paragraph
00:07:24
and some very basic Styles in CSS the
00:07:26
only important thing is that the wrapper
00:07:28
is exactly the same size as one card so
00:07:31
only one card can be displayed at a time
00:07:33
and we have an overflow ax of scroll so
00:07:35
we can't see the other cards and we have
00:07:37
to scroll this is basically the
00:07:39
foundation of every swiper now having
00:07:42
only that the scrolling will be very
00:07:43
linear and boring to have it smoother we
00:07:46
need to specify its scroll snap type
00:07:48
this is a CSS property that you apply on
00:07:50
the parent element we are scrolling
00:07:52
horizontally so the first value is going
00:07:54
to be X this is for the xaxis if you
00:07:57
have a container that Scrolls vertically
00:07:59
you would use Y for the y- axis the
00:08:02
second value is the actual scroll snap
00:08:04
type we want this to be mandatory now we
00:08:07
have to Define where we want to snap for
00:08:09
that we have to address the card's
00:08:11
scroll snap align property this one can
00:08:13
have the values Start Center or end for
00:08:15
us it doesn't matter which one we choose
00:08:17
since the cards are exactly the same
00:08:19
size as the wrapper they will always
00:08:20
snap perfectly so I just say Center and
00:08:23
now when we use the Swiper the cards
00:08:25
will snap perfectly mandatory is not the
00:08:28
only snap type you could also use
00:08:30
proximity then it will only snap when we
00:08:32
are close to the edge which means it can
00:08:35
also snap back if we don't scroll hard
00:08:37
enough this was coding to go and if you
00:08:40
have a cool CSS trick to share write it
00:08:42
in the comments for others to see also
00:08:43
watch this video right here to learn
00:08:45
more about web development or coding in
00:08:46
general
