Animates search input with only css
How do I make an animates search input with only css?
An animated search input field with only css.. What is a animates search input with only css? How do you make a animates search input with only css? This script and codes were developed by Sander on 18 December 2022, Sunday.
Animates search input with only css - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animates search input with only css</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/jbxqev.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-wrapper"> <div class="layout-container"> <div class="top"> <!-- The important part --> <input class="searchField" name="search" type="text" placeholder="Search..." /> <ul class="navigation"> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="main"> <h1>Animated search input</h1> <h2>With only css</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas sapien non dolor molestie, ut rhoncus lorem blandit. Mauris scelerisque condimentum arcu et bibendum. Sed tellus velit, ullamcorper in odio ut, iaculis placerat ligula. Cras pellentesque nibh quis risus lobortis, et suscipit neque mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam quis felis vitae nisi fringilla elementum vel at erat. Donec vel dolor nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur auctor vel turpis et consequat.</p> </div> </div>
</div>
</body>
</html>
Animates search input with only css - Script Codes CSS Codes
// Sass mixins
@mixin box-sizing($box-model) { -webkit-box-sizing: $box-model; -moz-box-sizing: $box-model; box-sizing: $box-model;
}
@mixin transition($transition-property, $transition-time, $method) { -webkit-transition: $transition-property $transition-time $method; -moz-transition: $transition-property $transition-time $method; -ms-transition: $transition-property $transition-time $method; -o-transition: $transition-property $transition-time $method; transition: $transition-property $transition-time $method;
}
// Styles
*, *:before, *:after { @include box-sizing(border-box);
}
.container-wrapper {
}
.layout-container { position: relative; padding: $defaultSpacing; margin: $defaultSpacing auto; background-color: #fff; @include clear();
}
.top { @include clear();
}
input.searchField { position: absolute; top: 20px; left: 40px; width: 100px; height: 100px; padding: 0 0 0 100px; font-size: 32px; line-height: 60px; color: #000000; border: 0; background-color: #e0e0e0; background-image: url("http://cdn.sanderkeurentjes.com/font-icons/material-design/svg/search100.svg"); background-repeat: no-repeat; background-position: 20px center; background-size: auto 60px; border-radius: 50px; @include transition(all, 200ms, ease-in-out);
}
input.searchField:focus,
input.searchField:hover { outline: none; width: 600px; cursor: default;
}
.navigation { float: right; list-style: none; @include clear(); li { float: left; a { display: block; padding: 40px; font-size: 20px; text-transform: uppercase; line-height: 40px; } }
}
.main { padding: 40px; background-color: #fff;
}
Developer | Sander |
Username | skeurentjes |
Uploaded | December 18, 2022 |
Rating | 3 |
Size | 4,335 Kb |
Views | 4,048 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Card flip | 2,976 Kb |
Animates search input with only css | 4,335 Kb |
Custom input radio buttons | 2,158 Kb |
Spinning loader | 2,038 Kb |
Parallax scrolling background | 3,403 Kb |
Automatic scroll | 4,042 Kb |
Accordion | 4,280 Kb |
Side navigation | 3,043 Kb |
Image gallery with caption | 2,968 Kb |
Image clip path mask | 3,911 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
Particle Motion trajectories | Sniejadlik | 5,899 Kb |
A Pen by Jason Kinney | Jason-kinney | 1,980 Kb |
Simple Login Form | JoshBlackwood | 4,418 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
Responsive Minimal Blog Layout | Hackthevoid | 5,261 Kb |
Buttons for autumn | Nikazawila | 1,795 Kb |
Isometric css island | Xaddict | 2,950 Kb |
JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
Hover Animation from UNIQLO | Insprd | 3,772 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!