Lesigner Girl
Global Administrator
Head of Runboard staff
Registered: 11-2005
Posts: 26739
Karma: 436 (+489/-53)
|
Reply | Quote
|
|
Re: PD Menu Navbar spacing
You're welcome.
It doesn't move as much as before, but you can use this as a placeholder for the non-hover state on things that get a border when they're hovered on:
border: 1px solid transparent;
If you ever want to use the svg gradient that's used in the navbar for one of your boards, feel free. svg doesn't work in every browser, but you can use it along with CSS gradients. If you generate the CSS with this site and also use the svg with that, it should cover most browsers.
The great thing about CSS gradients and svg gradients is they stretch to fit, regardless of height. The downside is you have to use extra code, because support for gradients and svg is probably about in the same place rounded corners were a few years ago.
The following probably won't show up in IE because they're in <img> tags, but it works in more browsers as a background. Even for those who can't see them, you might be able to see them if you click on them.
Note: These all use the same file.
|
3/22/2013, 4:23 am
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Pastor Rick
Moderator
Registered: 07-2005
Location: Texas
Posts: 10257
Karma: 272 (+331/-59)
|
Reply | Quote
|
|
Re: PD Menu Navbar spacing
Oh that border transparent declaration is genius and worked like a charm.
|
3/23/2013, 4:25 am
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|
Lesigner Girl
Global Administrator
Head of Runboard staff
Registered: 11-2005
Posts: 26739
Karma: 436 (+489/-53)
|
Reply | Quote
|
|
Re: PD Menu Navbar spacing
I'm glad!
|
3/23/2013, 4:47 am
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Pastor Rick
Moderator
Registered: 07-2005
Location: Texas
Posts: 10257
Karma: 272 (+331/-59)
|
Reply | Quote
|
|
Re: PD Menu Navbar spacing
Oddity, I used the site you suggested and then this site. For some reason the first site gives a different output/gradient image from the second site even though I used the same start/stop colors. The difference isn't big but it is noticeable...
|
1/11/2014, 3:15 am
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|
Lesigner Girl
Global Administrator
Head of Runboard staff
Registered: 11-2005
Posts: 26739
Karma: 436 (+489/-53)
|
Reply | Quote
|
|
Re: PD Menu Navbar spacing
Interesting. I tried both sites and the svg that's used in the navbar. The linear gradient and svg were fine, but the data URI failed when the width became smaller than the height, and got worse as it got narrower.
Try this:
CSS:
div {
width: 20%; float: left; height: 150px;
}
#css3 {
background-color: #ff0;
background-image: -o-linear-gradient(bottom, #FF0000 0%, #0000FF 100%);
background-image: -ms-linear-gradient(bottom, #FF0000 0%, #0000FF 100%);
background-image: linear-gradient(to bottom, #FF0000 0%, #0000FF 100%);
}
#svg {
background: #f00 url(http://cdn.runboard.com/sp/svg?from=f00&to=00f);
}
#data {
background: #00f url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAuNSIgeTE9IjAiIHgyPSIwLjUiIHkyPSIxIj4KICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmYwMDAwIiAvPgogICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwMDAwZmYiIC8+CiAgPC9saW5lYXJHcmFkaWVudD4KIDwvZGVmcz4KIDxnPgogIDxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBzdHJva2Utd2lkdGg9IjAiIHg9IjAiIHk9IjAiIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiAvPgogPC9nPgo8L3N2Zz4KICAgIA==) top repeat-x;
background-size: contain;
}
HTML:
<div id="css3">css3</div>
<div id="svg">svg</div>
<div id="data">data</div>
Re-size your browser slowly to make it narrower. The data URI fails when that div's width is less than its height, and gets worse as it gets narrower.
Also notice that I gave them all different background colors behind the gradients. In Firefox, a red line appears and disappears as I'm re-sizing, which is a flaw in the way Firefox displays the svg.
I'd say the linear-gradient wins, Except IE9- (and if I remember correctly, some older Android devices?) don't support it. See: W3Schools: CSS3 gradients.
|
1/11/2014, 4:28 am
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|