Useful CSS Tricks

Tiempo de lectura: 3 minutos

Reading time: 3 minutes

Hello, today I bring you some useful CSS tricks that you can use in your projects:

• Hide content: Sometimes you may want to hide certain content on your website without removing it from the HTML code. To do this, you can use the display: none; property. This will hide the element from the website, but it will still be present in the HTML code.

• Add a background to an image: If you want to add a background to an image, you can use the background-image: url('image.jpg'); property. This will add an image as the background of the selected element.

• Adjust image size: If you want to adjust the size of an image, you can use the width or height property. This will adjust the width or height of the image, respectively. You can also use the max-width or max-height property to limit the maximum size of the image.

• Add a border to an element: If you want to add a border to an element, you can use the border property. This property has three values: the border width, the line style, and the border color. For example, border: 1px solid black; would add a border with a 1px width, solid line style, and black color.

• Add a shadow to an element: If you want to add a shadow to an element, you can use the box-shadow property. This property has four values: the horizontal shadow position, the vertical shadow position, the shadow blur radius, and the shadow color. For example, box-shadow: 10px 10px 10px black; would add a shadow with a horizontal position of 10px, vertical position of 10px, blur radius of 10px, and black color.

• Add a transition to an element: If you want to add a transition effect when the user hovers over an element, you can use the transition property. This property has four values: the property to be transitioned, the transition duration, the easing function, and the transition delay. For example, transition: background-color 0.5s ease-in 0.2s; would add a 0.5-second transition to the background color change of the element, with an easing function of ease-in and a delay of 0.2 seconds.

• Adjust letter spacing: If you want to adjust the spacing between letters in an element, you can use the letter-spacing property. This property accepts a value in pixels or ems and will adjust the spacing between letters in the selected element. For example, letter-spacing: 3px; would add 3px of spacing between letters in the element.

• Adjust line spacing: If you want to adjust the spacing between lines in an element, you can use the line-height property. This property accepts a value in pixels or ems and will adjust the spacing between lines in the selected element. For example, line-height: 1.5; would increase the line spacing by 50%.

• Add a mask to an image: If you want to add a mask to an image, you can use the mask property. This property accepts an image or a gradient as a value and will add the mask to the selected image. For example, mask: url('mask.png'); would add the mask image to the image.

• Add an animation: If you want to add an animation to an element, you can use the animation property. This property has several values, including the animation name, the animation duration, the easing function, and the number of times the animation repeats. For example, animation: fadein 2s ease-in-out infinite; would add a fade-in animation that lasts 2 seconds, with an easing function of ease-in-out and repeats infinitely.

• Add a custom font: If you want to use a custom font on your website, you can use the @font-face property. This property allows you to import an external font and use it on your website. For example, @font-face { font-family: 'MyFont'; src: url('font.ttf'); } would import the font.ttf font and use it with the name MyFont. You can then use this font in any element of your website using the font-family property.