I'm trying to make this gradient to work on Android but I don't know the right css option.
HTML:
<div class="bottom-logo">
<div id="logo" class="logo-menu-green">blaa</div>
</div>
Css:
#logo{
font-family: "Lato", "Open Sans";
font-weight: bold;
position: absolute;
z-index: 999;
background: #6699cc;
background: -moz-linear-gradient(left, #6699cc 0%, #3399cc 20%, #009999 37%, #009966 52%, #999999 68%, #9933cc 73%, #990099 90%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#6699cc), color-stop(20%,#3399cc), color-stop(37%,#009999), color-stop(52%,#009966), color-stop(68%,#999999), color-stop(73%,#9933cc), color-stop(90%,#990099));
background: -webkit-linear-gradient(left, #6699cc 0%,#3399cc 20%,#009999 37%,#009966 52%,#999999 68%,#9933cc 73%,#990099 90%);
background: -o-linear-gradient(left, #6699cc 0%,#3399cc 20%,#009999 37%,#009966 52%,#999999 68%,#9933cc 73%,#990099 90%);
background: -ms-linear-gradient(left, #6699cc 0%,#3399cc 20%,#009999 37%,#009966 52%,#999999 68%,#9933cc 73%,#990099 90%);
background: linear-gradient(to right, #6699cc 0%,#3399cc 20%,#009999 37%,#009966 52%,#999999 68%,#9933cc 73%,#990099 90%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6699cc', endColorstr='#990099',GradientType=1 );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
I tried but it doesn't work. Thank you.
EDIT:
A solution would be to use SVG filters.
Only solution i can think of after my fair share of issues with Android.
Replicate the gradient into a graphical tile, and merely change the following.
Took your code and imported it here.
Visual file
CSS
#logo{
font-family: "Lato", "Open Sans";
font-weight: bold;
position: absolute;
z-index: 999;
background-image: url(img/thegradient.jpg);
background-repeat: no-repeat;
}
Also the gradient didn't even appear until i removed these two lines
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
If this is not what you were looking for i recommend using the javascript method introduced in the comments on your post.
Best of luck.
Related
I found this jsfiddle on the internet. Does anyone of you know how I can change the background color from white into a gradient color? The gradient color should "restart" on each new line. Please see desired wish on "example 2" in this image: http://www.managers.dk/css-text-background.jpg
http://jsfiddle.net/omgmog/g3MQf/
h1 { width:480px; font:bold 36px sans-serif; letter-spacing:-1px; color:#000; }
h1 {
background: #fff;
display:inline;
white-space: pre-line;
position: relative;
padding: 9px 0;
line-height: 54px;
-moz-box-shadow: -20px 0 0 #fff, 20px 0 0 #fff;
-webkit-box-shadow: -20px 0 0 #fff, 20px 0 0 #fff;
box-shadow: -20px 0 0 #fff, 20px 0 0 #fff;
}
Thanks!
I don't believe there is a way to accomplish what you are looking for in plain CSS since there is no "new line" selector. The only way to do it is to explicitly define each new line by wrapping the text into a span element.
body
{
padding:50px;
background:#fff;
}
h1
{
width:480px;
font:bold 36px sans-serif;
letter-spacing:-1px;
color:#000;
display:inline;
white-space: pre-line;
position: relative;
padding: 9px 0;
line-height: 54px;
}
h1 span
{
background: -moz-linear-gradient(left, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(148,199,247,1)), color-stop(100%, rgba(32,124,229,1)));
background: -webkit-linear-gradient(left, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%);
background: -o-linear-gradient(left, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%);
background: -ms-linear-gradient(left, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%);
background: linear-gradient(to right, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c7f7', endColorstr='#207ce5', GradientType=1 );
}
header
{
width: 550px;
}
<body>
<header>
<h1>
<span>Some dynamic HTML text on</span>
<span>several lines with a background</span>
<span>that suits well and some margins</span>
<span>around it.</span>
</h1>
</header>
</body>
Please check my updated answer.
I have added background-attachment:fixed; to get the desired output.
h1 { width:480px; font:bold 28px sans-serif; letter-spacing:-1px; color:#fff;
background: -webkit-linear-gradient(left, #085d9d 0%, #92d5ff 100%);
background: -moz-linear-gradient(left, #085d9d 0%, #92d5ff 100%);
background: -o-linear-gradient(left, #085d9d 0%, #92d5ff 100%);
background: linear-gradient(to right, #085d9d 0%, #92d5ff 100%);
background-attachment:fixed;
display: inline;
line-height: 50px;
padding: 7px 3px;
white-space: pre-wrap;
}
<h1>Some dynamic HTML text on several lines with a background that suits well and some margins around it.</h1>
If you're unfamiliar with gradients there are tools out there that will help you do it more visually. One such tool is http://www.colorzilla.com/gradient-editor/ which will allow you to visually build your gradient, then click a button to copy that code to be pasted into your CSS file. It will provide you with browser safe options for most of the main browsers. simply add it to your background CSS code and it should produce the result you requested.
I hope this helps!
Im creating a website for college and Im not sure how to stop text from overlapping when I make the web browser smaller. This is what I mean:
(not overlapping)
(overlapping)
Here is my jsfiddle: (http://jsfiddle.net/RC4Ar/)
.words {
font-family:apple;
font-size:20px;
max-width:800px;
height:190px;
margin-top:10px;
margin-left:42%;
}
Thanks in advance!
Assuming you are adding the words class to the paragraph tags (without your html, we can only guess), you simply need to remove the height declaration.
.words {
font-family: apple;
font-size: 20px;
max-width: 800px;
margin-top: 10px;
margin-left: 42%; }
For your fiddle example, I would change the title_bar to have a min height instead of a fixed height. This will allow it to be responsive instead of overlapping over the following text.
#title_bar {
margin-top:78px;
left:-17px;
width:101.5%;
min-height:30px;
background:blue;
position:relative;
top:-70px;
z-index:3;
border: 3px rgba(255, 105, 180, 1) solid;
background-image: -webkit-gradient(linear, right bottom, right top, color-stop(0, #5977FF), color-stop(1, #59C5FF));
background-image: -o-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -moz-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -webkit-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -ms-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: linear-gradient(to top, #5977FF 0%, #59C5FF 100%);
}
Fiddle
This is the first project I've used Less on, I want to make a series of buttons that have the same general structure but have different gradiated colours applied to them.
I have my default button style:
.button-regular (#origin: top, #start: #d2d2d2, #middle: #7a7a7a, #stop: #4d4d4d, #fallback: #3f4c6b, #border: #3c3c3c;) {
border-radius: 3px; color: #white; font-size: 13px; line-height: 18px; height: 36px; font-weight: normal; padding: 8px 15px 8px 15px; text-align: center;
background: #fallback;
background: -moz-linear-gradient(#origin, #start 0%, #middle 6%, #stop 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #start), color-stop(6%, #middle), color-stop(100%, #stop));
background: -webkit-linear-gradient(#origin, #start 0%, #middle 6%, #stop 100%);
background: -o-linear-gradient(#origin, #start 0%, #middle 6%, #stop 100%);
background: -ms-linear-gradient(#origin, #start 0%, #middle 6%, #stop 100%);
background: linear-gradient(to bottom, #start 0%, #middle 6%, #stop 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#middle', endColorstr='#stop', GradientType=0);
border: 1px solid #border;
}
I want to overwrite the colours for each new instance of the button using something like the below:
input.lightBlue {
.button-regular(top, #bfeef8, #40cdeb, #00bce4, #3f4c6b, #00b0d5;);
}
But when I create a button:
<input class="lightBlue" type="submit" value="Search">
The original (grey) colours still show. Is there a reason why the colours aren't overwritten using my new colours in this new button instance, and is there a better way to acheive what I'm attempting?
I'm using less.js to compile in-browser if that makes any difference.
What you have there should work alright, you just need to
fix a typo:
there is a semicolon (;) (after the last color) too much in your class definition
input.lightBlue {
.button-regular (top, #bfeef8, #40cdeb, #00bce4, #3f4c6b, #00b0d5);
}
you call for a variable #white in the mixin, where you just need to make sure you define it beforehand, or else just write white instead.
some additional suggestions:
(I used some random settings for illustration).
You could do something like this
<input class="button default" type="submit" value="Search">
<input class="button green" type="submit" value="Search">
<input class="button red" type="submit" value="Search">
where you have a button class to define the general button appearance. Dunno, maybe something like this:
.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:active {
position: relative;
top: 1px;
}
and in LESS you make some mixins for the color gradients. Something like this:
.gradient-mixin (#origin, #start, #middle, #stop, #fallback, #border) {
background: #fallback;
background: -moz-linear-gradient(#origin, #start 0%, #middle 6%, #stop 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #start), color-stop(6%, #middle), color-stop(100%, #stop));
background: -webkit-linear-gradient(#origin, #start 0%, #middle 6%, #stop 100%);
background: -o-linear-gradient(#origin, #start 0%, #middle 6%, #stop 100%);
background: -ms-linear-gradient(#origin, #start 0%, #middle 6%, #stop 100%);
background: linear-gradient(to bottom, #start 0%, #middle 6%, #stop 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#middle', endColorstr='#stop', GradientType=0);
border: 1px solid #border;
}
.button-make (#name:"default", #origin: top, #start: #d2d2d2, #middle: #7a7a7a, #stop: #4d4d4d, #fallback: #3f4c6b, #border: #3c3c3c;) {
#classname: ~"#{name}";
.#{classname} {
.gradient-mixin (#origin, #start, #middle, #stop, #fallback, #border);
&:hover {
.gradient-mixin(#origin, lighten(#start,10%), lighten(#middle,10%), lighten(#stop,10%), lighten(#fallback,10%), #border);
}
&:active {
.gradient-mixin (#origin, darken(#start,10%), darken(#middle,10%), darken(#stop,10%), darken(#fallback,10%), #border);
}
}
}
and then you call them for each color ... which will build your classes for each color for the buttons:
.button-make;
.button-make ("green", top, #7db72f, #87d918, #4e7d0e, #7db72f, #538312);
.button-make ("red", top, #ed1c24, #e93a3f, #aa1317, #ed1c24, #980c10);
here is a jsfiddle example of the output.
But instead of defining all colors in the gradient by hand you can also make a more general mixin in LESS, that takes one color and transforms it to colors you use for #stop,#start,#border,... by using lighten, darken and other color operations.
What I understand about this is that you want to overwrite your CSS with these buttons. All you have to do is create divs for your buttons or whatever else you are trying to do. I'll show an example here:
HTML
<input class="lightblue" type="submit" value="Search" style="/*style goes here*/">
CSS:
.lightblue {
border-radius: 3px; color: #white; font-size: 13px; line-height: 18px; height: 36px; font-weight: normal; padding: 8px 15px 8px 15px; text-align: center;
background: #fallback;
background: -moz-linear-gradient(#origin, #start 0%, #middle 6%, #stop 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #start), color-stop(6%, #middle), color-stop(100%, #stop));
background: -webkit-linear-gradient(#origin, #start 0%, #middle 6%, #stop 100%);
background: -o-linear-gradient(#origin, #start 0%, #middle 6%, #stop 100%);
background: -ms-linear-gradient(#origin, #start 0%, #middle 6%, #stop 100%);
background: linear-gradient(to bottom, #start 0%, #middle 6%, #stop 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#middle', endColorstr='#stop', GradientType=0);
border: 1px solid #border;
}
So the point that I'm trying to make is that you just need a style for buttons. If you want to override this, then put the style in the HTML where I've shown. Hope this helps you out.
I have setup a CSS profile to create an iOS type notification badge. All is working well except the inner font vertical alignment. Firefox renders the inner text perfectly centered, however webkit browsers (safari, chrome, etc) act as though there is a padding-top applied pushing the font too far from the top. Here is a fiddle for a demo: http://jsfiddle.net/F5wdp/
And here is the code:
.alert-notify-circle{
float:left;
background: radial-gradient( center -9px, circle closest-side, white 0, red 26px );
background: -moz-radial-gradient( center -9px, circle closest-side, white 0, red 26px );
background: -ms-radial-gradient( center -9px, circle closest-side, white 0, red 26px );
background: -o-radial-gradient( center -9px, circle closest-side, white 0, red 26px );
background: -webkit-radial-gradient( center -9px, circle, white 0, red 26px );
background-color: red;
border: 2px solid white;
border-radius: 15px;
box-shadow: 1px 1px 2px black;
color: white;
font:15px Helvetica, Verdana, Tahoma;
font-weight:500;
padding-top:0px;
height: 14px;
line-height:16px;
padding-left:1px;
text-align: center;
width: 14px;
z-index:10;
}
<div class='alert-notify-circle notify-upper-left'>2</div>
Please let me know if you need more information, and thanks in advance for any and all help.
I believe this is a problem of font metrics. Using line-height to make the vertical alignment may give different results from browser to browser depending on how they render text. I would suggest to use padding to balance out vertical spacing, such as:
.alert-notify-circle {
min-width:.5em;
height:1.3em;
padding:0 .375em;
font:bold 1em Arial;
line-height:1.4em;
color: white;
border-radius: 1em;
border: 2px solid white;
box-shadow: 0 .25em .4em rgba(0,0,0,.33);
background-clip:padding-box;
background-color:#e91823;
background-image: linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
background-image: -o-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
background-image: -ms-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
background-image: -moz-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
background-image: -webkit-linear-gradient(top, #F9BABD 0%, #ED3F48 50%, #E91822 50%, #C50104 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F9BABD), color-stop(0.5, #ED3F48), color-stop(0.5, #E91822), color-stop(1, #C50104));
}
Check out this badge I built for you as an example. I updated it for better cross-browser compatibility:
http://jsfiddle.net/x2xjB/3/
Recommended reading:
http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/
I'm using a radial gradient as the background for a website. It works great on Safari, Chrome, and Firefox 3.5+, but Opera and Internet Explorer have problems. So, I made a background image to show on those browsers to give the same look. Right now, I'm detecting the browser and version server-side from the user-agent, and then including the correct CSS file. However, I feel like there must be a better way than having to maintain two seperate CSS files to do essentially the same thing (the only difference between the CSS files is html and body).
For good browsers:
html, body {
width: 100%;
height: 100%;
}
html {
background-image: -ms-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
background-image: -moz-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
background-image: -o-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 480, color-stop(0, #23395D), color-stop(0.6, #122037), color-stop(1, #0A131F));
background-image: -webkit-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
background-image: radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
-moz-box-shadow:inset 0 0 100px #080f1a;
-webkit-box-shadow:inset 0 0 100px #080f1a;
box-shadow:inset 0 0 100px #080f1a;
background-attachment: fixed;
}
body {
font-family: arial, sans-serif;
font-size: 14px;
color: #fff;
line-height: 22px;
text-decoration: none;
background: url(/images/portal/checkered_bg.png) repeat;
}
For bad browsers:
html, body {
width: 100%;
height: 100%;
}
body {
font-family: arial, sans-serif;
font-size: 14px;
color: #fff;
line-height: 22px;
text-decoration: none;
background: #09101b url(/images/portal/big_bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale')";
}
Sounds like a job for Modernizr.
Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.
When you try to apply css that the browser doesn't recognize, it just reports nothing, so if you do...
//ommiting document ready for brevity
if ($("html").css("background-image").indexOf("radial") < 0) {
$("html").addClass("no-radial")
}
Then you can override the classes in CSS:
.no-radial body {
font-family: arial, sans-serif;
font-size: 14px;
color: #fff;
line-height: 22px;
text-decoration: none;
background: #09101b url(/images/portal/big_bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale')";
}
Rather then browser detection, use feature detection, a JavaScript plugin such as Modernizr will do the job very neatly.
It adds class names to the root element so you can check for it like in your css.
Modernizr is your friend...