CSS Tips And Tricks I Wish I Knew Before
Summary
TLDRIn this informative video, the presenter shares essential CSS tips for front-end developers. They demonstrate how to use 'clip-path' for custom shapes, 'perspective' for 3D effects, 'aspect-ratio' for maintaining proportions, 'filters' for quick visual effects, and various pseudo-classes for efficient styling. The video also covers input styling, text cursor color customization, and video caption styling, offering practical examples and encouraging viewers to explore CSS for creative web design.
Takeaways
- đ The 'clip-path' CSS property allows for creating custom shapes by clipping the visible area of an HTML element.
- đ With 'clip-path', you can animate elements by changing properties like the radius on hover effects.
- đ For more complex shapes, the 'Polygon' value in 'clip-path' can be used, with points representing positions on the x and y-axis.
- đ To create custom clip paths, SVG paths can be utilized after being extracted from design tools like Figma.
- đ The 'perspective' property in CSS helps in adding 3D effects to HTML elements, simulating a view from an angle in 3D space.
- đ Using 'perspective' along with 'transform' can create a sense of depth and rotation on different axes.
- đ The 'aspect-ratio' property maintains the proportional relationship between an element's width and height, which is useful for responsive design.
- đš CSS 'filters' offer quick visual effects like blur, grayscale, brightness, and contrast adjustments that can be applied to various elements.
- đ The ':focus' pseudo-class can be used to customize or remove the outline that appears on an input element when it's selected.
- đïž The 'caret-color' property lets you change the color of the text cursor in an input field.
- đ The 'is', 'where', 'not', and 'has' pseudo-classes can simplify CSS selectors, making it easier to style specific elements without deep nesting.
- đŹ Styling video captions with CSS is possible using the 'cue' pseudo-element, allowing for customization of background color and font size.
Q & A
What is the purpose of the 'clip-path' CSS property?
-The 'clip-path' property in CSS is used to create custom shapes by defining the visible area of an HTML element. It allows for the clipping of an element into various shapes, such as circles or polygons, and can be animated for interactive effects.
How does the default radius value of 'clip-path' work?
-The default radius value of 'clip-path' is 50%, which means it will be half of the given size of the element. For instance, if the width and height of an element are set to 500 pixels, the default radius for a circular clip would be 250 pixels.
Can you provide an example of how to use the 'clip-path' property with a hover effect?
-Yes, you can increase the radius of the clipping path on hover to create an expanding effect. For example, setting the 'clip-path' to a circle with a radius of 50% and then changing it to 100% on hover will make the element appear to fill its container as the user hovers over it.
What is a CSS clip-path generator and how can it be used?
-A CSS clip-path generator is an online tool that allows you to create and customize clip paths for your designs. You can use it to select presets or create your own shapes by defining points on the x and y-axes, which can then be copied and pasted into your CSS code.
How can you apply a 3D effect to HTML elements using CSS?
-To apply a 3D effect, you can use the 'perspective' CSS property on the parent element. This property allows you to create a sense of depth by adjusting the distance from which the element is viewed, making it appear as though it's in a three-dimensional space.
What is the difference between rotating an element on the Z-axis and applying perspective?
-Rotating an element on the Z-axis simply spins it around its central point without creating a 3D effect. Applying perspective, on the other hand, changes the viewer's angle, making the element appear three-dimensional and allowing for effects such as foreshortening when rotated on the X or Y-axis.
What is the 'aspect-ratio' CSS property and how does it work?
-The 'aspect-ratio' property in CSS defines the proportional relationship between the width and height of an element. It allows you to maintain the correct proportions even when the element's size changes, such as in responsive designs. For example, setting the aspect ratio to '16 / 9' will ensure that the width is always 16 times the height, regardless of the actual size.
How can CSS filters be used to create quick visual effects?
-CSS filters can be applied to elements to create various visual effects such as blurring, turning images grayscale, adjusting brightness and contrast, and more. They are useful for creating hover effects, hiding sensitive content, or applying stylistic changes to elements without the need for additional images or complex CSS.
What is the purpose of the 'focus' pseudo-class in CSS?
-The 'focus' pseudo-class is used in CSS to apply styles to an element when it is in focus, typically after a user clicks on it. It can be used to remove the default outline that appears around an element when focused, or to change its appearance, such as changing the border color or adding a shadow.
How can you change the color of the text cursor in an input field using CSS?
-You can change the color of the text cursor in an input field by using the 'caret-color' property in CSS and specifying the desired color value.
What are the 'where', 'not', and 'has' pseudo-classes in CSS and how can they be used?
-The 'where', 'not', and 'has' pseudo-classes in CSS are used for more specific targeting of elements. 'Where' is used to style elements based on the presence of other elements within the same parent. 'Not' is used to exclude specific elements from being styled. 'Has' is used to style elements based on the presence of a specific child element. They can save time and reduce complexity in your CSS by allowing more precise control over styling.
How can you add and style captions for a video using HTML and CSS?
-To add captions to a video, you use the '<track>' element within the '<video>' element, specifying the type as 'captions' and linking to a subtitle file. To style the captions, you can use the 'cue' pseudo-element in CSS to change properties such as background color, font size, and text color.
Outlines
đš CSS Clip-Path and Animation Techniques
This paragraph introduces the CSS 'clip-path' property, which is used to create custom shapes by defining the visible area of an HTML element. The speaker demonstrates how to apply 'clip-path' to create circles with different radii and how to animate these shapes on hover. They also mention the use of a 'CSS clip-path generator' for more complex shapes and the ability to use SVG paths for advanced clip shapes. The paragraph concludes with a brief mention of the 'perspective' property for adding 3D effects to elements.
đ Understanding CSS Perspective and Aspect Ratio
The speaker explains the 'perspective' property in CSS, which helps in achieving 3D effects by simulating the distance between the viewer and the element, thus altering the appearance of the 3D space. They provide an example of rotating an element on different axes and how 'perspective' affects the visibility of the rotation. Additionally, the 'aspect-ratio' property is discussed, which maintains the proportional relationship between the width and height of elements, ensuring they resize correctly without distortion.
đïž Advanced CSS Techniques for Creative Effects
This section covers various advanced CSS techniques, including the use of 'filters' for quick visual effects like blur and grayscale, which can be applied to images or text. The speaker also discusses customizing input fields by removing default outlines and changing placeholder colors. They introduce the 'caret-color' property to change the text cursor color and the use of 'is', 'not', and 'has' pseudo-classes for more efficient and targeted CSS styling. The paragraph ends with a mention of styling video captions, enhancing the user experience for video content.
đïž Styling Video Captions and Engaging with the Audience
The final paragraph focuses on how to style captions for video elements using the 'cue' pseudo-element. The speaker shows how to add captions to a video in HTML and then style them with a background color and increased font size. They also encourage viewers to like the video and comment for a second part of the tips, promoting engagement with the audience and offering support through social media and a channel subscription.
Mindmap
Keywords
đĄclip-path
đĄPolygon
đĄPerspective
đĄAspect Ratio
đĄFilters
đĄFocus Pseudo-class
đĄPlaceholder Pseudo-element
đĄCaret-color
đĄPseudo-classes 'is', 'where', 'not', 'has'
đĄCue Pseudo-element
Highlights
Introduction to CSS tips for front-end developers.
Explanation of the clip-path property for creating custom shapes.
Demonstration of setting a circle shape with clip-path and adjusting its radius.
Adding hover effects to change the radius of the clip-path shape.
Using the Polygon value in clip-path for custom shapes.
Utilizing CSS clip-path generators for predefined shapes.
Animating shapes and logos with CSS for a dynamic effect.
Introduction to the perspective property for 3D effects.
Creating a frame div and applying perspective to achieve a 3D view.
Explaining the effect of perspective on the visibility of 3D objects.
Using aspect-ratio property to maintain the proportional relationship between width and height.
Filters property for quick visual effects on elements.
Applying filters to images and text for creative effects.
Customizing input elements with CSS for better user experience.
Using focus pseudo-class to remove or style the outline of input elements.
Changing the color of the text cursor with the caret-color property.
Using is, not, and has pseudo-classes for efficient CSS selectors.
Styling video captions with the cue pseudo-element for better readability.
Invitation for viewers to request a tutorial on 3D transforms and perspective.
Encouragement for viewers to like, comment, and follow for more content.
Transcripts
Hello friends. Today Iâll share some useful CSS tips
that every front-end developer should know.
The first one is clip-path.
It allows you to create custom shapes by clipping the visible area of an HTML element.
What I mean by that.
Letâs create a container here and give it a style.
Iâll give some width and height.
And using a clip path, I can give it a shape.
It can be a circle.
I can give any radius here.
By default, itâs 50%, which means half of the given size.
In this case, the radius will be 250 pixels.
If I say 100%, itâs gonna fill inside this given size.
Because the radius is 500 pixels right now.
And as you realize, itâs not overflowing, and itâs awesome because you can give any
animation easily.
Letâs do that. Firstly Iâll give a position on the x and
y axes. In this case, the center of the circle will be at the starting point.
You can give any position here.
Letâs take this back and give a hover effect.
When I hover over, Iâm gonna increase its radius, and itâll fill this size.
Like that.
If I give a transition, itâs gonna look better.
Perfect. And also, you can give any specific shape
using the Polygon value.
To do that, Iâll google âCSS clip-path generator.â
You can choose any website you want.
And here, there are many presets that you can directly copy and paste.
And also you can create your own shape. Letâs copy this. And paste. And each point
represents the position on the x and y-axis.
You can think of it as a virtual pair of scissors that allows you to cut and reshape your items.
Letâs change this position using hover effect.
Itâs that easy.
And the best thing is you can give here any path, just like an SVG.
Just draw your shape in Figma, save it as an SVG, take its path, and paste it here.
And right now, itâs really easy to animate your shapes and logos using only CSS.
And the second CSS property is Perspective.
If you want to give 3D effects to your HTML elements, you should use perspective.
Let me explain to you with an example.
Letâs remove this.
By the way, you can find every example of this video in the GitHub repository.
Itâll be in the description.
And letâs create here a frame div. And inside this frame, Iâll create a shape.
Letâs give a size for the frame and a border.
And inside this frame, we have a shape and that has exactly the same size.
Right now, Iâm gonna rotate my item using transform.
As you can see, it rotates the shape on the Z-axis by default.
There is no problem.
What if I want to rotate it on the X or Y axis?
As you realize, something has changed, but we canât exactly see the 3D effect because
we donât have any perspective.
We just see our items as 2D objects.
So what perspective does is it allows us to see our items as if we're looking at them
from an angle in a 3D space.
If I use perspective for the parent div and give any distance between this div and my
eyes, I can see the effect.
And right now, imagine that you are in your screen and see the items three dimensional.
If I get closer to the div, as you can see, the shape is out of my sight because its size
is 500 pixels.
But between me and this container is 100 pixels.
Let me give here a transition, and youâll understand better.
Iâll save it, and right now, it rotates on the X-axis.
But if Iâm far enough, I can see my shape completely.
Letâs do the same thing for the Y-axis. If I get closer, itâs gonna be behind my
sight. If you are not familiar with geometry and
3D shapes, it can be a little bit confusing.
But to design creative websites, you should definitely learn transforms and perspective.
And if you want me to create a tutorial on this topic, just let me know in the comments.
And the other CSS property is the aspect ratio. Itâs the proportional relationship between
the width and height.
Letâs say we have a custom video player, and we want to set its width to 100%.
And height is 500 px.
It looks okay, but if I shrink the page while the width is getting smaller, the height is
still the same. So if you need a certain size rule, if you
know the proportional relationship between sizes, you can use aspect-ratio.
If I say 16 to 9, I donât have to give a height; itâs gonna make all the calculations
automatically.
And you can use it pretty much everywhere. For images, videos, containers. I think itâs
really important to know.
And the other CSS tip is filters.
They are really useful when you want to give some quick effects to your items.
Let me give you some examples.
Iâll create an image.
And for this image, Iâll give a filter. As you can see, there are many options, but
the most important is this blur and grayscale.
Letâs give it a blur.
You can increase the radius of this effect, like 10 pixels, 20 pixels.
And itâs really useful when you have any sensitive content.
You can write here any hover or active effect, and you can remove the filter.
And itâs not special for images. You can use it anywhere you want.
Letâs say we have a review website.
Iâll create here a spoiler text and write some annoying spoilers.
And I can give exactly the same effect here. What else we have?
Letâs get our image back.
And I can change itâs brightness, contrast. I can give a black-and-white effect.
I really love this effect, by the way.
When you use it for the entire website, it looks pretty cool.
And other filters.
You can just play around and design something creative.
The other CSS tip is about inputs.
Letâs create input and open up the css page.
Letâs give a padding, and we can see better.
And I can zoom in here.
As you know, when you click on an input, it shows this outline by default.
To get rid of this, you can use focus pseudo-class and say outline: none.
Or, you can change its color as you do for the border.
Actually, letâs give a border here, and you can see the difference.
When I click, this outline shows up.
What about this placeholder?
To change its color, Iâm gonna use Placeholder pseudo-element.
Okay. Most of you probably already knew those tricks, but do you know how to change the
color of this text cursor? Actually, itâs really easy.
Iâll come here and say caret-color, and any color you want here.
Another CSS tip I want to mention is using is, where, not, and has pseudo-classes
They are not commonly used, but I think they save a lot of time when you get used to them.
Letâs create an item here, and inside, Iâll add some heading and a p tag.
And letâs say I want to change the color of the h1, h2, h4, and this p tag.
Iâll not change this one.
Normally, Iâd follow this solution.
The parent div and child.
Letâs say color blue.
But using this structure can be confusing, especially when you have deep nested items.
So Iâm gonna comment this out and write here the parent, is, and whatever I want to
change.
Color will be red. As you can see, the given items are red.
And also, I can use âwhereâ instead of âisâ.
And itâs exactly the same.
But there is a small difference.
If I open the previous block, as you can see, the color is blue, but if I use âisâ,
itâs gonna change because it has a higher priority.
Since all our items are red, I can use the ânotâ pseudo-class.
And it means to take everything inside this parent except h2.
What about âhasâ?
Letâs open up the HTML file.
Iâll create here a div with another div, and it will include a title and description.
Letâs create one more.
And Iâm gonna add here a spoiler button.
So what I want to do is, check these divs and if any of them has a button, I want to
filter the content using the blur effect.
To do that, Iâll say review; if it has a button, make the content, filter blur.
So you donât need to use any single line of JavaScript. Just use this pseudo-class.
And the last tip is styling captions of videos.
It can be really useful if you have a video or movie application.
Firstly, let me show you how to add a caption for a video in HTML.
I added a video and a subtitle inside my directory. And letâs use them here.
Iâll say video and add my file as a source, and Iâll say controls.
So we can stop the video or change the volume.
And inside, Iâll say track, and its type will be âcaptions.â You can write the
label of the captions.
And finally, Iâll give my source.
Letâs change the size of the video. Remember how we do this.
And right now, I can choose any captions here.
And it works. So what I want to do is, I want to change
the background color and increase the font size.
To do that, Iâll use the âcueâ pseudo-element and change them.
Itâs that easy.
Okay, guys. Thatâs all.
I hope you liked it.
If you want to see the second part of these tips, please like the video and let me know
in the comments.
You can support Lama Dev by joining the channel or using the link in the description below.
Donât forget to follow Lama Devâs social media accounts.
I hope Iâll see you in the next video. Goodbye.
Weitere Àhnliche Videos ansehen
Learn Webflow in 16 Minutes (Crash Course)
Words in the middle of the horizontal lines (CSS Mastery # 007) | Coder Champ
Crazy 3D Rotation Effect Using CSS Only
Learn CSS in Hindi with animations
HTML Course Beginner to Advance | Tables in HTML | Web Development Course Lecture 8
Create an Animated Scene with HTML and CSS: Adding a Tree and Moving Clouds
5.0 / 5 (0 votes)