CSS Tips And Tricks I Wish I Knew Before

Summary

In 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

00:00

🎨 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.

05:02

📐 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.

10:03

🖌️ 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.

Keywords

💡clip-path

The 'clip-path' property in CSS is used to create a clipping region that sets the visible part of an element. It's a powerful tool for creating custom shapes and can be applied to any HTML element. In the video, the presenter uses 'clip-path' to demonstrate how to clip an element into a circle shape with a specific radius, and then animates the radius on hover to create an interactive effect.

💡Polygon

The 'Polygon' value for the 'clip-path' property allows developers to create more complex clipping shapes by defining a set of points that form a polygon. The script mentions using a 'CSS clip-path generator' to easily create and copy custom polygon shapes, which can then be applied to elements to create unique visual effects.

💡Perspective

Perspective in CSS is a 3D effect that gives the illusion of depth to elements on a 2D plane. It's used to create a sense of three-dimensionality by altering the appearance of an element as if it were viewed from a particular angle. The video uses the 'perspective' property to show how to rotate elements on different axes and create a 3D effect by manipulating the distance between the viewer and the element.

💡Aspect Ratio

The 'aspect-ratio' property in CSS maintains the proportional relationship between the width and height of an element, ensuring that the content within does not get distorted when the element's size changes. In the video, the presenter explains how to use 'aspect-ratio' for a custom video player to maintain a 16:9 ratio, which automatically adjusts the height when the width changes.

💡Filters

CSS 'filters' are used to apply various visual effects to elements, such as blurring, changing brightness, or converting images to grayscale. The script provides examples of how to use filters to create effects like a blur on an image or to hide sensitive content by applying a blur effect that can be removed on hover.

💡Focus Pseudo-class

The ':focus' pseudo-class in CSS is used to apply styles when an element is focused, such as when a user clicks on an input field. The video explains how to use ':focus' to remove the default outline that appears around an input element, allowing for a cleaner design when the field is active.

💡Placeholder Pseudo-element

The '::placeholder' pseudo-element in CSS targets the placeholder text within form input fields. The video script demonstrates how to change the color of the placeholder text, which is the light text that suggests what the user might type into the field.

💡Caret-color

The 'caret-color' property sets the color of the text cursor (caret) in an input field. The presenter in the video shows how to use 'caret-color' to change the color of the cursor, which can be useful for improving the visual consistency of a form.

💡Pseudo-classes 'is', 'where', 'not', 'has'

These pseudo-classes in CSS provide advanced selectors to style elements based on their relationship to other elements. 'is' targets elements that match a certain state or condition, 'where' is similar but with a lower specificity, 'not' excludes elements from a selection, and 'has' targets elements that contain a certain type of content. The video uses these pseudo-classes to demonstrate more efficient ways to style elements without deep nesting or additional JavaScript.

💡Cue Pseudo-element

The '::cue' pseudo-element is used to style text track cues in video elements, such as subtitles or captions. The script explains how to use '::cue' to change the appearance of captions, such as their background color and font size, providing a better user experience for video content with text overlays.

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.