Expandable Search box Using CSS LESS Processor
Source code expandable search box using LESS CSS Processor.
Here the code:
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script>
<script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script>
<script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
<link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="http://codepen.io/shane935/pen/EGCyn" />
<style class="cp-pen-styles">input {
padding: 10px 8px;
width: 100px;
border-radius: 12px;
border: 1px solid gray;
transition: 300ms width;
outline: 0;
font-size: 16px;
}
input:hover {
width: 120px;
}
input:focus {
width: 300px;
transition: 600ms width;
}
</style></head><body>
<input type="text" placeholder="Search"/>
</body></html>
Or view live editor below:
Here the Result :
Question: How can i use these codes to my own localhost or cdn.
You can view the source of js and put into your cdn or hosting then replace the code url source with your hosted .js
Question:
Why you using codepen.io js ?.
Because no Best Template and processor in any code live editor like codepen.io
0 Response to "Expandable Search box Using CSS LESS Processor"
Post a Comment
Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.
If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.