for some reason my body background gradients aren't showing up in IE10 except when the browswer is in quirks mode. IE9 and lower behave as expected. Code is below:
body {
font-family: 'Ubuntu', sans-serif;
background: rgb(252,254,252);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmNmZWZjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RlZjZmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(45deg, rgba(252,254,252,1) 20%, rgba(222,246,254,1) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(20%,rgba(252,254,252,1)), color-stop(100%,rgba(222,246,254,1)));
background: -webkit-linear-gradient(45deg, rgba(252,254,252,1) 20%,rgba(222,246,254,1) 100%);
background: -o-linear-gradient(45deg, rgba(252,254,252,1) 20%,rgba(222,246,254,1) 100%);
background: -ms-linear-gradient(top, rgba(252,254,252,1) 20%,rgba(222,246,254,1) 100%);
background: linear-gradient(45deg, rgba(252,254,252,1) 20%,rgba(222,246,254,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfefc', endColorstr='#def6fe',GradientType=1 );
-webkit-font-smoothing: antialiased;
}
The site is built using Zurb Foundation 4. Any help would be appreciated! I'm stumped.
Related
I am trying to disable my anchor tags from being underlined when hovered over. I have added text decoration: none; to my .scss file like so:
$font-family-serif: 'Nixie One';
$font-family-base: $font-family-serif;
#import "bootstrap";
//#import "bootstrap-sprockets";
//TB Navbar overrides to change the color scheme
$bgDefault : #ffffff;
$bgHighlight : #ffffff;
$colDefault : #8587f1;
$colHighlight : #4e5aff;
.navbar-default {
font-weight: bold;
font-size: 25px;
background-color: $bgDefault;
border-color: $bgHighlight;
text-decoration: none;
Also when I look at the web page, it seems to compute the rule correctly:
Where am I going wrong here?
.navbar-default {
font-weight: bold;
font-size: 25px;
background-color: $bgDefault;
border-color: $bgHighlight;
text-decoration: none;
a
{
text-decoration: none;
&:hover{
text-decoration: none;
}
}
So apparently the issue was that I just had to specify the the a tag: a {text-decoration: none;} within my scss file instead of just setting it for the class.
I have used the following gradient background in CSS:
body {
margin:0px;
padding:0px;
border:0px;
font-family: Helvetica, Arial, Helvetica, sans-serif;
font-size: 12px;
color: white;
height:100%;
width:100%;
background: #f89623; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#150d03, endColorstr=#f89623); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#150d03), to(#f89623)); /* for webkit browsers */
background: -moz-linear-gradient(top, #150d03, #f89623); /* for firefox 3.6+ */
}
It works fine in IE, FF Chrome etc. on desktop computers, but the gradient stops when viewed on mobile devices.
The web address is: http://byoma.org/
Any advice would be appreciated. Thanks.
First of all, check out the browser compatibility:
But anyway, you should use the example below:
.grad {
background-color: #F07575; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome and Safari */
background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Fx (3.6 to 15) */
background-image: -ms-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For pre-releases of IE 10*/
background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
}
Documentation: Mozilla doc
If it doesn't work, I use to resort to this web application: http://www.colorzilla.com/gradient-editor/
Just a (hopefully) quick question about LESS Mixins:
Could these two mixins be combined somehow?, since they share a lot of the same information, just one adds an extra color.
.gradient-top(#color-1, #color-2){
background-color: #color-2;
background: -webkit-linear-gradient(top, #color-1, #color-2);
background: -moz-linear-gradient(top, #color-1, #color-2);
background: -ms-linear-gradient(top, #color-1, #color-2);
background: -o-linear-gradient(top, #color-1, #color-2);
background: linear-gradient(top, #color-1, #color-2);
}
.gradient-middle(#color-1, #color-2, #color-3){
background-color: #color-2;
background: -webkit-linear-gradient(top, #color-1, #color-2, #color-3);
background: -moz-linear-gradient(top, #color-1, #color-2, #color-3);
background: -ms-linear-gradient(top, #color-1, #color-2, #color-3);
background: -o-linear-gradient(top, #color-1, #color-2, #color-3);
background: linear-gradient(top, #color-1, #color-2, #color-3);
}
LESS supports accessing all the arguments passed to a mixin via the #arguments variable:
.gradient(#color-1, #color-2, ...) {
#gradient-stops: ~`"#{arguments}".slice(1, -1)`;
background-color: #color-2;
background: -webkit-linear-gradient(top, #gradient-stops);
background: -moz-linear-gradient(top, #gradient-stops);
background: -ms-linear-gradient(top, #gradient-stops);
background: -o-linear-gradient(top, #gradient-stops);
background: linear-gradient(top, #gradient-stops);
}
We need the selector interpolation (~) and the inline JavaScript evaluation (using backticks) to preserve the commas - otherwise, we would get background: linear-gradient(top, #color-1 #color-2 #color-n);, which is, of course, incorrect.
The other thing this mixin does is accept 2 or more arguments via the "rest" symbol (...) - this lets us call the mixing with three colors as well as two:
.gradient(#FFF, #CCC, #000) // A valid invocation of the mixin
I want my page to have a gradient color, going from dark on the left age to bright in the middle, and back to dark at the right edge. I've seen some examples for creating gradients, but I don't know see where in the CSS the size of the pattern is being set, and the pattern is repeating too quickly for my taste.
As an example, here's some CSS:
html {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);
background-image: -ms-linear-gradient(top, #2F2727, #1a82f7);
background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
}
...that I found here: http://css-tricks.com/css3-gradients/
And here's a jsfiddle you can run that has that:
http://jsfiddle.net/clayshannon/VLXbu/
It can't be a fixed size, because of the variance is screen sizes, between phones and desktops, in particular. Is there a way to accomplish this using %s of screen width?
Try
html {
background: #2f2727; /* Old browsers */
background: -moz-linear-gradient(top, #2f2727 0%, #1a82f7 49%, #1a82f7 49%, #2f2727 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2f2727), color-stop(49%,#1a82f7), color-stop(49%,#1a82f7), color-stop(100%,#2f2727)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2f2727 0%,#1a82f7 49%,#1a82f7 49%,#2f2727 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2f2727 0%,#1a82f7 49%,#1a82f7 49%,#2f2727 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2f2727 0%,#1a82f7 49%,#1a82f7 49%,#2f2727 100%); /* IE10+ */
background: linear-gradient(to bottom, #2f2727 0%,#1a82f7 49%,#1a82f7 49%,#2f2727 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f2727', endColorstr='#2f2727',GradientType=0 ); /* IE6-9 */
min-height: 100%; height: auto !important; height: 100%;
}
http://jsfiddle.net/pepean/hSjdg/2/
I'm designing my first page using CSS3, and I'm running into a snag. I used this question and answer to create a neat looking background for the body of my site. This worked fine until I added a content class. This caused the CSS gradient to not quite reach the end of the page (scroll down to see the effect). Here is my CSS:
html{
height: 100%
}
body {
background: #c5deea; /* old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* ie */
height: 100%;
margin: 0;
background-repeat: no-repeat;
}
#content{
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
background: white;
margin-left: auto;
margin-right: auto;
padding: .5%;
margin-top: 2%;
margin-bottom: 2%;
width: 50%;
}
h1, h2, h3 {
color: #066dab;
}
Can anyone tell me what has gone wrong, and how to fix it? I should note that I am very new to CSS, let alone CSS3; so, any insights are appreciated
Do it like this instead:
Live Demo
I neatened the way you were setting height: 100%.
I took the margin off #content.
To compensate for the lost margin, I added an extra wrapper element and gave it padding: 2%.