The power of CSS is growing by the day. In this article, we'll explore some CSS tricks that you may not be aware of. We'll start with some basics, and then move on to more advanced techniques. CSS has a greater power to make UI amazing, and with a little creativity, you can do some amazing things.
So let's get started!
This list will cover some basic tricks all beginners should know in a day-by-day coding activity.
1. Using clipping in CSS
There are a lot of clever ways to use CSS to achieve different effects on your web pages. One such trick is clipping. This can be used to hide or show part of an element on the page, based on specific conditions.
For example, you could use clipping to hide a sidebar on smaller screens or to show only part of an image on a page. This can be done using the clip property in CSS.
The clip property takes various shapes as an argument. A Circle shape takes the first argument as radius and the horizontal position, and the vertical position as the second argument in the circle function. These can be either absolute positions (in pixels), or relative positions (relative to the element's size).
clip-path: circle(29.3% at 29% 31%);There is a site that generates various clipping masks to get started.
2. CSS blend modes
CSS blend modes are a great way to create advanced visual effects with just a few lines of code. They allow you to combine two or more elements to create new and unique looks. There are several different blend modes to choose from, each with its own set of properties.
Some of the most popular blend modes include overlay, screen, and color dodge. Each one has its own unique set of properties that can be tweaked to achieve the desired effect.
For example, the overlay mode can be used to create soft gradients or add subtle highlights to text. Full List of CSS Blending Modes.
3. Mask with SVG
CSS is great for so many things, but one of its hidden talents is its ability to be used with SVG. By using SVG, you can mask elements with CSS in a very simple way.
To start, create an SVG element and give it an ID. In this example, we'll use the ID "svgclip".
clip-path: url(#svgclip) ;
-webkit-clip-path: url(#svgclip);
Next, add a CSS rule that uses the SVG element as a mask. The mask will determine which parts of the element are shown and which are hidden. In our example, we'll make the background black with a sample image. The part of the image will be visible because it is inside the SVG element. Anything outside of the SVG element will be hidden.
4. CSS and SVG Animation
We'll start by looking at how to create simple animations using the animate() function. We can use this function to animate any property of an SVG element, including its position, size, and color. We can change the shape of SVG paths with Javascript as well.
We can simply set the Transition to SVG path and update the path with javascript. We can use SVG manipulation libraries for better performance.
here is what the SVG animation looks like in action. This one is using a simple script to manipulate the SVG path.
5. CSS Perspective
CSS perspective can be used to create the illusion of depth on a web page. It can be used to make elements look like they are closer to or farther away from the viewer.
This can be helpful for creating illusions of depth, such as making a menu look like it is receding into the distance. Perspective can also be used to create 3D effects.
6. Adding … when text is too long
To do this, we will first need to create a style rule that will add the character when text is longer than a container.
We can do this by adding the following code to our CSS file:
.too-long {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
max-height: 80px;
overflow: hidden;
}This code tells the browser to add the character when text is longer than 80px in height. We can then apply this style rule to any element on our page that needs it.
7. Adding a shadow To define borders
One common use for CSS is to add a shadow to an element. This can be done by adding the following code to your style sheet:
box-shadow: 1px 1px 1px rgba(0,0,0,0.5);This will create a shadow with a black border and a 50% opacity.
You can adjust the values to change the size and opacity of the shadow.
Another easy trick is to define borders for elements on your page. This can be done by adding the following code:
border: 1px solid #ccc;You can change the border color and width by adjusting the values as needed.
8. Perfect your Buttons to Finger Size
The first step is to create a button with the following HTML: <button>Hello, world!</button>
Next, we will style the button using CSS. We will set the min-width and height of the button and make it round by adding a border radius of 5px.
Finally, we will set the padding of the button to 10px 20px so that it takes up the entire width and height of its container. There is an amazing article on the site that talks about the button in depth.
9. Center Content in Screen
Centering content on a web page used to be a matter of using tables and setting the text to the center, but with the advent of CSS, it’s now much simpler.
All you need to do is set the text-align property to the center. This will work for all browsers, both old and new. But there are layers of centering that require more than just text align: center.
10. Resize the Image to fit anywhere
The next One is to resize the image to fit anywhere.
To do this, add the following code to your style sheet:
This will make the image fit within the width of the container, no matter how big or small it is. You can also use this code to make all of the images on your website fit within the width of the page:
img {max-width: 100%;}Sometimes we have to use object-fit CSS property to set images properly. This will ensure that all of the images on your website are displayed at the same size, regardless of their original size.
img {max-width: 100%; object-fit:cover;}11. Select Like a pro with +? ~
One way to quickly select CSS properties is to use the "?." selector. This allows you to target an element by its class or ID, and then apply any number of CSS properties.
For example, if you want to change the font-size of all h1 headings on your page, you could use the following code:
h1 {font-size: 24px;}This would change all h1 headings on the page to 24px font size.
h1 + p{font-weight:bold;}This will make all the paragraphs bold that come next to an H1s.
You can also use multiple properties at once by separating them with commas.
12. Overriding all styles
there are times when you may need to override the default style for a specific element. One lazy way to do this is by using the !important qualifier.
Simply add this qualifier to the end of your CSS declaration and it will override any other styles that have been applied to the element. Keep in mind that using !important should be used sparingly, as it can easily lead to messy and difficult-to-maintain code. A better way to override CSS is discussed in the article already.
13. Last Child Centering
This selector can be used to easily center any element on the page, making it look more professional and polished. Use the last-child selector to center an element within its parent container.
This is useful for things like buttons or headings that you want to be centered on the page. Simply add the last-child selector to your CSS code and give it a margin-left and margin-right value of "auto":
button { margin-left: auto; margin-right: auto; }Flexboxes and grids can solve this problem more easily as they offer more modern ways to solve this last child problem.
14. Vertical Alignment
Vertical alignment is a must-learn technique to have in your CSS arsenal. This allows you to control the vertical positioning of elements on the page, which can be great for creating more professional-looking pages. Using the vertical-align property. This property can be applied to any element and has four possible values: top, middle, bottom, and baseline. You can use many techniques to vertically align anything center.
You can also use the "height" and "width" properties to control the height and width of an element. This can be useful for vertically aligning images on your page.
There are many techniques to vertically align div in the center.
15. Link states hover, visited, active
One of the most common CSS tricks is to use link states to change the appearance of links when they are hovered over, visited, or active. This can be done by adding a :hover, :visited, or :active class to your links. There are three different link states that you can use with CSS: hover, visited, and active.
The hover state is what happens when you move your mouse over a link. The visited state is what happens when you have already clicked on a link. The active state is what happens when you are clicking on a link. You can use different colors, fonts, and effects for each of these states.
For example, if you want a link to be green when hovered over, but turn red when clicked, you could use the following code:
a.green:hover {color: #ff0000;} a.green:active {color: #00ff00;}16. Direct children
One of the coolest things about CSS is its ability to target very specific elements on a page. You can use the descendant selector to select an element that is a child of another element, or you can use the child selector to select only the direct children of an element. This can be handy when you want to change the style of a particular element without affecting any of its siblings.
For example, let's say you have a list of items and you want to make the text in the first item bold. You could use the following selector:
li:first-child { font-weight:bold; }This would make all of the text in the first list item bold, including any sub-items.
17. CSS content property
One of its features is the content property. The content property can also be used to add text to a table cell. The value of the content property can be a string, a function, or an HTML markup. This property can be used to add text or images to an element. The text or image can be added as a background or as a foreground.
There are many tricks that you can do with CSS content properties.
Did I miss any of the ones that you know? Writer down in the comments and I'll cover those next time.
