Material Design Search Effect with CSS transitions

Material Design Search Effect with CSS transitions

It’s been a while since Google introduced Material Design (MD) and since that moment designers and developers keep incorporating its rules on mobile and web apps, and on regular websites. The idea behind the MD is simplicity, good and intuitive design and meaningful motion. Material is also focused on the user, aiming not only to please the eye but give immediate feedback and immersive experience.

Today’s solution for a search input is following these principles and gives an immersive dive for the user. The code snippet below incorporates the MD guidelines providing user with full screen search field allowing him to focus on search itself without any distractions.

The search is triggered by a floating action button and leads the user to a full screen search input which will suit both mobile and desktop users. The benefits of including such solution are for the user as it will give (1) a quick way to search and (2) a truly immersive experience and focus into the search action. If you want to give it a try, follow the steps below to add this snippet to your app or website.

Here is how to do it:

HTML

First of all, you will need the bare bone structure:

<div class='header'>
<div class='header-content'>
<h1>Material Search Effect</h1>
<h2>Usign CSS Transitions</h2>
</div>
<div class='control' tabindex='1'>
<div class='btn'></div>
<i class='icon-search ion-search'></i>
</div>
</div>
<i class='icon-close ion-ios-close-empty'></i>
<div class='form'>
<input class='input-search' placeholder='Start Typing' type='text'>
</div>
<div class='wrapper'>
<div id='h2'>by Luca Dimola</div>
</div>

There are two important components here; the floating action button and the search field.
For the button, you will need the following:

<div class='control' tabindex='1'>
<div class='btn'></div>
<i class='icon-search ion-search'></i>
</div>

For the full screen search field, you will need the following:

<i class='icon-close ion-ios-close-empty'></i>
<div class='form'>
<input class='input-search' placeholder='Start Typing' type='text'>
</div>

In the current example, the creator – Luca Dimola, uses a simple <header</div> structure to layout and position all the elements. You can use it, to try the solution or create your own version of it.

CSS

In terms of styling the all the elements, here is the CSS you will need:

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

html,
body {width: 100%;height: 100%;overflow-x: hidden;}
body { margin: 0;font-family: 'Roboto', sans-serif;color: #2d2d2d;letter-spacing: 0.2px;}
body .wrapper {padding: 50px;}
body.mode-search {overflow: hidden;}
body.mode-search .form,
body.mode-search .icon-close {opacity: 1;transform: none;pointer-events: all;}
body.mode-search .control .icon-search {opacity: 0;}
body.mode-search .control .btn {transform: scale(70);}
.header { position: relative;height: 50%;width: 100%;background: #22313F;color: #FFF;}
.header .header-content {padding: 70px 50px;}
.header .header-content h1, .header .header-content h2 {font-weight: 200;}
.control {width: 64px;height: 64px;position: absolute;bottom: -32px;right: 50px;cursor: pointer;}
.control .icon-search,
.control .icon-close {transition: 0.2s ease-in-out;}
.control:hover .btn {box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);}
/* Button */
.btn {width: 64px;height: 64px;border-radius: 100%;box-sizing: border-box;padding: 20px;background: #e91e63;outline: 0;transform-origin: 50%;box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);}
.icon-search {position: absolute;top: 18px;left: 20px;font-size: 28px;}
.icon-close {position: fixed;top: 30px;right: 30px;color: #FFF;font-size: 80px;opacity: 0;transform: translate(10px, 0) rotate(90deg);transition: all 0.3s ease-in-out;}
.form {height: 80px;position: absolute;top: 50%;left: 50px;margin-top: -40px;pointer-events: none;opacity: 0;transform: translate(40px, 0);transition: all 0.3s ease-in-out;}
.form input {color: #fff;font-size: 54px;border: 0;background: transparent;-webkit-appearance: none;box-sizing: border-box;outline: 0;font-weight: 200;}
.form ::-webkit-input-placeholder {color: #EEE;}
.form :-moz-placeholder {color: #EEE;opacity: 1;}
.form ::-moz-placeholder {color: #EEE;opacity: 1;}
.form :-ms-input-placeholder {color: #EEE;}

As you can see, the CSS style structure is quite simple, and it is quite easy to adjust styles to match your own colour palette.

JS

The last bit, to finish it off, is a small JavaScript snippet which will allow you to get everything function properly. Just do not forget to link a jQuery library below the ending <body</div> tag to ensure everything works properly.

$('.control').click( function(){
  $('body').addClass('mode-search');
  $('.input-search').focus();
});

$('.icon-close').click( function(){
  $('body').removeClass('mode-search');
}); 

Note: This snippet also uses Ionic Framework for the search and close icons. You can see it here. To add icons you need to link the add the external CSS by adding this line between the <head></head> tags in your HTML doc.

<link rel='stylesheet prefetch' href='http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>

You should be ready! Here is the how it looks like:

See the Pen Material Fullscreen Search Transition by Luca Dimola (@hone) on CodePen.

Download Download the code

If you have questions or comments, feel free to use the form below.

Code snippet courtesy of Luca Dimola.



You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *