What is Translate Property in CSS?
CSS translate property moves an element along the X and Y axes. Unlike other positioning attributes, such as position, translate does not disrupt the document’s natural flow, making it excellent for producing smooth animations and transitions.
What is transform property in CSS
Visually appealing and dynamic user interfaces have become the norm in the ever-changing web development landscape. CSS (Cascading Style Sheets) is a core technology for styling and layout that stands out among the many tools available to developers. The transform property in CSS emerges as a strong technique for controlling the display of items on a web page.(Read more example of translate property)
Syntax:
selector {
transform: transform-function;
}
The term selector refers to the element to which the transformation will be applied, whereas transform-function describes the type of transformation to be done.
** Let’s explore some of the most commonly used Translate functions**
Creating dynamic Search Bars using CSS Translate property:
Forms are essential for user engagement on the web. Forms serve as the gateway to involvement, whether it’s logging into a favourite website, signing up for a subscription, or completing a purchase.However, creating forms that are both functional and aesthetically beautiful can be difficult. This is where CSS classes like.form-group come in handy, providing an organised approach to form design. (Read more example)
output:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<div class="form-group">
<input type="text" placeholder=" " id="name" required>
<label for="name">Your Name</label>
</div>
</body>
</html>
CSS:
.form-group {
position: relative;
margin-bottom: 15px;
max-width: 900px;
margin-top: 50px;
}
.form-group input {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
border-radius: 20px;
}
.form-group label {
position: absolute;
top: 10px;
left: 10px;
font-size: 17px;
color: #999;
pointer-events: none;
transition: all 0.3s;
}
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
top: -20px;
left: 10px;
font-size: 16px;
color: #ee3646;
transform: translateY(-10px);
}
The.form-group class serves as the basis for our enchantment. It creates a structural layout for our form elements, ensuring they are well-organized and visually consistent. Our form groups are elegantly positioned and styled using properties such as position: relative, margin, and max-width.
The.form-group input and.form-group label selectors are where the magic happens. These selectors apply certain styles to our input fields and labels, making them into interactive elements.
Input fields in the.form-group inherit styles that stretch to the entire width of the container, with padding for comfort and a slight border to establish limits. The outline: none declaration maintains a clean design, while border-radius adds beauty with rounded edges.
Conclusion
In the ever-changing world of web development, learning CSS properties like as translate is critical for developing engaging and flexible user experiences.
Top comments (0)