I am attempting to create a navigation bar that gradiates horizontally.
http://i.imgur.com/HVz5QOX.png position: 0% / #39C2DA / opacity: 0% position: 35% / #39C2DA / opacity: 100% position: 0% / #39C2DA / opacity: 0%
This is the best I can come up with that works background-image: -moz-linear-gradient(left, #fff, #39C2DA, #fff);
Unfortunately, its not in position and neither am I incorporating opacity.
background-image:-webkit-gradient(linear, left top, right top, from(rgba(57, 194, 218, 0)), color-stop(0.35, rgba(57, 194, 218, 1)), to(rgba(57, 194, 218, 0))); background-image:-webkit-linear-gradient(left, rgba(57, 194, 218, 0), rgba(57, 194, 218, 1) 35%, rgba(57, 194, 218, 0)); background-image: -moz-linear-gradient(left, rgba(57, 194, 218, 0), rgba(57, 194, 218, 1) 35%, rgba(57, 194, 218, 0)); background-image: -ms-linear-gradient(left, rgba(57, 194, 218, 0), rgba(57, 194, 218, 1) 35%, rgba(57, 194, 218, 0)); background-image: -o-linear-gradient(left, rgba(57, 194, 218, 0), rgba(57, 194, 218, 1) 35%, rgba(57, 194, 218, 0)); background-image: linear-gradient(to right, rgba(57, 194, 218, 0), rgba(57, 194, 218, 1) 35%, rgba(57, 194, 218, 0));
Edit... this should work :P
@CrocoDillon
Perfect: http://codepen.io/anon/pen/zJuCh
I updated my post with old webkit syntax and positioning the 2nd color @Paulie_D, thanks for creating the codepen though :)
Thanks Croco, it does! I never understood why is it that if you want to use opacity, you have to use an RGBA code and not HEX?
@Paulie_D, that codepen doesn't include the positioning of the 2nd stop at 35% correct?
Yeah that annoys me to be honest, I prefer using hex but they only support alpha on rgba and hsla...
Because HEX = RGB in the format #RRGGBB and so does not include opacity.
RGBA does include opacity (a = alpha)
Codepen updated.
Thanks for updating @Paulie_D, and yeah didn't know about that!
I am attempting to create a navigation bar that gradiates horizontally.
http://i.imgur.com/HVz5QOX.png
position: 0% / #39C2DA / opacity: 0%
position: 35% / #39C2DA / opacity: 100%
position: 0% / #39C2DA / opacity: 0%
This is the best I can come up with that works
background-image: -moz-linear-gradient(left, #fff, #39C2DA, #fff);
Unfortunately, its not in position and neither am I incorporating opacity.
Edit... this should work :P
@CrocoDillon
Perfect: http://codepen.io/anon/pen/zJuCh
I updated my post with old webkit syntax and positioning the 2nd color @Paulie_D, thanks for creating the codepen though :)
Thanks Croco, it does! I never understood why is it that if you want to use opacity, you have to use an RGBA code and not HEX?
@Paulie_D, that codepen doesn't include the positioning of the 2nd stop at 35% correct?
Yeah that annoys me to be honest, I prefer using hex but they only support alpha on rgba and hsla...
Because HEX = RGB in the format #RRGGBB and so does not include opacity.
RGBA does include opacity (a = alpha)
Codepen updated.
Thanks for updating @Paulie_D, and yeah didn't know about that!