Search Gradient Web 2.0 - Fast Dial
gumanov —Wed, 10/29/2008 - 20:45
Make your search bar look much cooler with a gradient!
SCREENSHOTS (click to enlarge):
Normal:
Hover or Focus:
CODE:
Hover or Focus:
CODE:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("chrome://fastdial/content/fastdial.html") {
#search {
margin-top: 15px !important;
margin-bottom: -15px !important;
}
#search img {
-moz-opacity: 0.5 !important;
}
#search img:hover {
-moz-opacity: 0.75 !important;
}
#search input {
padding: 1px 8px 0px 8px !important;
border-color: black !important;
-moz-border-radius: 10px !important;
border-width: 1px !important;
font-size: 12px !important;
color: black !important;
height: 20px !important;
width: 250px !important;
font-weight: bold !important;
background: url("/files/layout/FastDial/gradient4search20px.png") center center repeat-x !important;
-moz-opacity: 0.75 !important;
}
#search input:hover, #search input:focus {
-moz-opacity: 1.0 !important;
}
}
- Printer-friendly version
- Log in or register to post comments or vote.
- 3 votes
Re: Search Gradient - Web 2.0 - Stylish
Submitted by chiaroscuro on Wed, 10/29/2008 - 22:30@mafi0z
This is looking seriously cool now
Works very well on a dark background
Default text size is perfect
Thanks for all the work you put into this.
Re: Search Gradient - Web 2.0 - Stylish
Submitted by Grawl on Fri, 10/31/2008 - 04:37cool. my idea with search bar is evolve!! =)
Re: Search Gradient - Web 2.0 - Stylish
Submitted by chiaroscuro on Fri, 10/31/2008 - 12:01came across this on a web page
looked sort of familiar :-)
Re: Search Gradient - Web 2.0 - Stylish
Submitted by gumanov on Fri, 10/31/2008 - 13:22@chiaroscuro
do you mean that the style is working in other website fields?
or
is that the look of the field at some website, even when stylish is off?
i got the gradient from the globex gmail redesign login box..
Re: Search Gradient - Web 2.0 - Stylish
Submitted by chiaroscuro on Fri, 10/31/2008 - 13:46@mafioz
is that the look of the field at some website, even when stylish is off?
yes.
(edit: did n't think of switching stylish off)
but for a moment it had me guessing.
I came across it by chance here (mailed)
A little uncertain why they need to have three of them.
---
i got the gradient from the globex gmail redesign login box..
Good idea.
Did you know that GR has changed now from being a Style to being an Extension.
Rather sad
Re: Search Gradient - Web 2.0 - Stylish
Submitted by gumanov on Fri, 10/31/2008 - 14:44ahh!! that is the style!
i put the bracket in the wrong place..
the style was being used on all pages with the css id of "search" !
i have updated the code, and put the bracket at the end..
now the code only works for chrome://fastdial/content/fastdial.html like it should - thanks for mentioning this.
GR - no i didnt know it was an extension. i want it as an extension for easy upgrades, but then again i dont want to have too many extensions. so i dont know if i should use it, or stick to stylish
Re: Search Gradient - Web 2.0 - Stylish
Submitted by chiaroscuro on Fri, 10/31/2008 - 14:58ahh!! that is the style!
i put the bracket in the wrong place..
the style was being used on all pages with the css id of "search" !
i have updated the code, and put the bracket at the end..
now the code only works for chrome://fastdial/content/fastdial.html like it should - thanks for mentioning this.
Aaah so it was the Style after all !
It looked sort of familiar :-)
Well spotted.
GR - no i didnt know it was an extension. i want it as an extension for easy upgrades, but then again i dont want to have too many extensions. so i dont know if i should use it, or stick to stylish
I sort of preferred it as a Style.
As an Extension it is upgraded too often.
Re: Search Gradient - Web 2.0 - Stylish
Submitted by chiaroscuro on Thu, 11/20/2008 - 21:01@mafi0z
After your line
border-color: black !important;
popped in a little line.
-moz-border-radius: 10px !important;
(Possible px values from 8 to 20 or so)
What do you reckon ?
Re: Search Gradient - Web 2.0 - Stylish
Submitted by Mafia_Penguin on Thu, 11/20/2008 - 21:04Works great, thanks!
-----------------------------------------
Please exchange this coupon for one (1) free internet.
Re: Search Gradient - Web 2.0 - Stylish
Submitted by chiaroscuro on Thu, 11/20/2008 - 21:06Mafia_Penguin
Works great, thanks!
Glad you liked it.
Pages