Creating dynamic Search Bar using CSS Translate property
Tags: html, css, webdesign, webdev
Published: 2024-07-05 06:43:16

**What is Translate Property in CSS?**
[CSS translate property](https://skillivo.in/css-translate-property-guide/) 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](https://skillivo.in/css-translate-property-guide/) 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](https://skillivo.in/css-translate-property-guide/) example)

output:

![Creating dynamic Search Bars using CSS Translate property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zukjudbaq6lwqduj3m9z.gif)


**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);
        }

```

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

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

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