English:
https://ishratumar.medium.com/14-awesome-css-properties-you-need-to-know-9cee5b364990
Let's learn some useful CSS tricks to boost our productivity. These CSS tricks will help us developers to build projects quickly and efficiently.
Now, let's get started.
1. CSS :in-range and :out-of-range pseudo-classes
These pseudo-classes are used to style input within and outside the specified range limits.
(a) : within range
An input> element is in range if its current value is between the bounds of the min and max attributes. This pseudo-class makes it easy to determine whether a field's current value is acceptable.
(b): out of range
An input element is out of bounds if its current value is outside the bounds of the min and max attributes.
It provides a visual indication to the user if the field value is out of its range.
CSS code:
/* in-range */
input:in-range{
background-color: rgba(0, 255, 0, 0.25);
}
/* out-of-range */
input:out-of-range{
background-color: rgba(255, 0, 0, 0.25);
}
output:
You should be aware that these pseudo-classes only apply to scoped elements. Without this constraint, elements cannot be in bounds or out of bounds.
2. grayscale( ) function
We can use a value of 100% to convert an image from color to black and white. When we set this value to 0%, the image will remain unchanged.
Using a value of 100% will convert the image to black and white, meaning there will be no colors in the photo.
We can use values between 0 and 100% to create various effects.
CSS code:
.grayscale-image{
filter: grayscale(100%);
}
output:
3. Glass effect
We can add glass effects to your next project with just a few lines of code. Yes, it really is that simple. The glass effect is beautiful and can add an elegant touch to your design.
Glass.CSS (address: https://css.glass/) is currently the most popular glass shape generator, we can use it to create CSS glass effects for our projects. All we need to do is to adjust some settings according to the needs of the project, and then copy and paste the CSS code into the actual development project.
CSS code:
.glass-effect{
-webkit-backdrop-filter: blur(6.2px);
backdrop-filter: blur(6.2px);
background: rgba(255, 255, 255, 0.4);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.24);
}
4. Use the following CSS code to style the text
These are some very basic text styling tips that everyone should know. However, there are many other advanced options available.
CSS code:
p{
font-family: Helvetica, Arial, sans-serif;
font-size: 5rem;
text-transform: capitalize;
text-shadow: 2px 2px 2px pink, 1px 1px 2px pink;
text-align: center;
font-weight: normal;
line-height: 1.6;
letter-spacing: 2px;
}
5. CSS clamp() function
The CSS clamp( ) function clamps values to a range between two upper and lower bounds. There must be a preferred value, a minimum value, and a maximum value.
Clamp() comes in handy when the font size changes depending on the viewport.
CSS code:
p{
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}
6. Center a div
The most important task for a developer is to center the div. There are many other options for centering divs. In this example, we use CSS flexbox to center a div horizontally and vertically.
CSS code:
div{
display: flex;
justify-content: center;
align-items: center;
}
7. Gradient CSS Linear Gradient
To create a Gradient CSS Linear Gradient, just use the CSS code below.
CSS code:
div {
background: linear-gradient(35deg, #CCFFFF, #FFCCCC, rgb(204, 204, 255));
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
}
8. CSS Jitter Effect
This "shake" animation effect shakes the input field when the user enters invalid input. It's simple and elegant. For example, if the user enters a number instead of a letter in a text field, the input field will shake.
HTML code:
<input id="name" type="text" placeholder="Enter your name" pattern="[A-Za-z]*"/>
CSS code:
input:invalid{
animation: shake 0.2s ease-in-out 0s 2;
box-shadow: 0 0 0.4em red;
}
@keyframes shake {
0% { margin-left: 0rem; }
25% { margin-left: 0.5rem; }
75% { margin-left: -0.5rem; }
100% { margin-left: 0rem; }
}
9. Text overflow
We can use this property to truncate overflowing text. It can be clipped and displayed using an ellipsis (...) or a custom string.
CSS code:
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
width: 200px;
}
div.text {
white-space: nowrap;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
div.text:hover {
overflow: visible;
}
10. 'column-count' property
It specifies the number of columns into which elements should be divided.
CSS code:
p{
column-count: 2;
}
11. CSS Animations
Animations gradually change the style of an element. It can only be used if keyframes are assigned first. Keyframes describe how animated elements appear at specific points in an animation sequence.
CSS code:
div{
width: 200px;
height: 200px;
background-color: blue;
animation-name: square;
animation-duration: 8s;
}
@keyframes square{
from {background-color: blue;}
to {background-color: black;}
}
12. Shadow effect
Using CSS, you can add effects to text and elements. Define the attributes as text-shadow and box-shadow. Use text-shadow to add shadows to text and box-shadow to add shadows to elements.
(i) text-shadow: It gives a shadow to the text.
h1{
color: blue;
text-shadow: 2px 2px 4px #000000;
}
(ii) box-shadow: used to give the element a shadow effect. The actual div in the example below is purple, the box-shadow is sky blue, and is set to 10 pixels to the right and bottom.
div{
width: 200px;
height: 200px;
padding: 15px;
background-color: purple;
box-shadow: 10px 10px skyblue;
}
13. CSS clipping
Using the clip-path property, you can show only part of an element while hiding the rest.
CSS code:
.bg{
height: 100%;
width: 100%;
background-color: rgba(199, 62, 133, 0.9);
clip-path: polygon(100% 0, 100% 0, 100% 51%, 0 100%, 0 90%, 0 52%, 0 51%);
position: absolute;
}
Clippy - CSS Clipping Path Generator is a quick and easy way to create complex shapes in CSS by clipping elements to basic shapes (circle, ellipse, polygon or illustration) or SVG source.
14. CSS background-blend-mode property
This property describes how the background color and image (or two images) should blend.
The list of blend modes corresponding to each background image forms the value. A blending mode specifies how the background layer is blended (color or image).
You can make stunning backgrounds with the background-blend-mode property.
CSS code:
div{
width: 600px;
height: 400px;
background-repeat: no-repeat, repeat;
background-position: center;
background-image: url("flower.png"), url("background-image.png");
background-blend-mode: color;
}
