Created
May 22, 2013 12:28
-
-
Save tslmy/5627183 to your computer and use it in GitHub Desktop.
Search Bar in Pure CSS
=============
This is just a small search bar, styled just like the one on your Finder. It turned out that using this CSS code to draw a search bar is more traffic-consuming than just using a `background-image: url(Search_Bar.png)`. So, I suggest, use this only when you want to show off your Geekiness.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style type="text/css"> | |
| <!-- | |
| #searchbox { | |
| height:20px; | |
| width:152px; | |
| background:rgba(0,0,0,0); | |
| border:1px solid grey; | |
| border-radius: 10px; | |
| box-shadow:inset 0 1px 3px #aaa; | |
| } | |
| #magnifier-glass{ | |
| width:6px; | |
| height:6px; | |
| position:relative; | |
| left:4px; | |
| top:3px; | |
| border-radius: 6px; | |
| border:3px solid grey; | |
| } | |
| #magnifier-handle{ | |
| width:3px; | |
| height:8px; | |
| position:relative; | |
| left:14px; | |
| top:-2px; | |
| background:grey; | |
| border-radius: 7px; | |
| -webkit-transform: rotate(135deg); | |
| } | |
| --> | |
| </style> | |
| </head> | |
| <body> | |
| <div id="searchbox"> | |
| <div id="magnifier"> | |
| <div id="magnifier-glass"></div> | |
| <div id="magnifier-handle"></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment