I am trying to use gradient style for my buttons, but, I have a problem with hover style,
Here is the button before hover:
And here is after hover:
Here is haml of button:
= link_to '#', {:class=>'tour_btn btn btn-large btn-primary', :style=>'margin-left: 10px; width: 105px;'} do
%h3
Take a Tour
LESS:
.tour_btn {
#gradient > .vertical(#F98C51, #a35b35);
}
Any idea please ? is it possible to specify another gradient style for hover state ?
Or at least, not to change button when hover ?
Twitter Bootstrap animates the background-position on hover with a transition (since background-gradients cant have a transition). What is happening in your case, is the background-gradient is getting shifted up with background-position: -15px, and you are seeing the background-color underneath.
To fix this set your background-color to the bottom color of your button gradient on hover:
.tour_btn {
#gradient > .vertical(#F98C51, #a35b35);
&:hover { background-color: #a35b35 }
}
If you have a set a background image for a button, the background shifts up by 15px on hover. You can set it to 0px.
.tour_btn:hover {
background-position: 0px !important;
}
When using custom css instead of LESS to style your buttons, try http://twitterbootstrapbuttons.w3masters.nl/?color=%23F1874E. You will get all css for your custom buttons including hover effect and disabled / active states.
For the button above you could use possible:
.btn-custom-lighten.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-custom-lighten {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #f29461;
background-image: -moz-linear-gradient(top, #f1874e, #f5a77d);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f1874e), to(#f5a77d));
background-image: -webkit-linear-gradient(top, #f1874e, #f5a77d);
background-image: -o-linear-gradient(top, #f1874e, #f5a77d);
background-image: linear-gradient(to bottom, #f1874e, #f5a77d);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1874e', endColorstr='#fff5a77d', GradientType=0);
border-color: #f5a77d #f5a77d #ef7736;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #f5a77d;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-custom-lighten:hover,
.btn-custom-lighten:focus,
.btn-custom-lighten:active,
.btn-custom-lighten.active,
.btn-custom-lighten.disabled,
.btn-custom-lighten[disabled] {
color: #ffffff;
background-color: #f5a77d;
*background-color: #f39766;
}
.btn-custom-lighten:active,
.btn-custom-lighten.active {
background-color: #f1874e ;
}
usage:
<button class="btn btn-custom-lighten btn-large">Your button</button>
Add the CSS below /after your bootstrap(.min).css
Using this css let's you custom button effects work in most browsers.
you can specify what you want the CSS to be when a button is hovered with the css :hover property.
So in your case you will want to do something like
.tour_btn:hover {
/* your custom css */
}
Using chrome developer tools you should be able to see what kind of gradients are currently being applied by bootstrap and then override them with your css.
.tour_btn:hover {
background-color: #a35b35;
background-position: 30px 30px;
}
i found this solution you can try this . it works with simple code
Related
This question already has answers here:
Weird effect when applying transparent border over an element with a gradient background
(7 answers)
Closed 2 months ago.
I have a div with a background defined as linear-gradient, and an almost transparent border on top of it. It should paint correctly, but the rendering is broken.
Here is the associated CodePen.
body {
background: black;
}
.gradient-background {
background: linear-gradient(270deg, #681c2e 0%, #232a6c 49.48%);
height: 80px;
border: solid 20px rgba(248, 251, 255, 0.1);
}
<div class="gradient-background"></div>
Do you know how to fix this with CSS? It behaves consistently on Chrome and Firefox. Is it an expected behavior in the spec of CSS and HTML?
rgba(248, 251, 255, 0.1); is what causes the issue.
Use background-origin: border-box; and it will work fine.
body {
background: black;
}
.gradient-background {
background: linear-gradient(270deg, #681c2e 0%, #232a6c 49.48%);
height: 80px;
border: solid 20px rgba(248, 251, 255, 0.1);
background-origin: border-box;
}
<html>
<body>
<div class="gradient-background"></div>
</body>
</html>
For more information about this, check this source.
I have panel which I colored blue if this panel is being selected (clicked on it). Additionally, I add a small sign (.png image) to that panel, which indicates that the selected panel has been already selected before.
So if the user sees for example 10 panels and 4 of them have this small sign, he knows that he has already clicked on those panels before. This work fine so far. The problem is now that I can't display the small sign and make the panel blue at the same time.
I set the panel to blue with the css background: #6DB3F2; and the background image with background-image: url('images/checked.png'). But it seems that the background color is above the image so you cannot see the sign.
Is it therefore possible to set z-indexes for the background color and the background image?
You need to use the full property name for each:
background-color: #6DB3F2;
background-image: url('images/checked.png');
Or, you can use the background shorthand and specify it all in one line:
background: url('images/checked.png'), #6DB3F2;
For me this solution didn't work out:
background-color: #6DB3F2;
background-image: url('images/checked.png');
But instead it worked the other way:
<div class="block">
<span>
...
</span>
</div>
the css:
.block{
background-image: url('img.jpg') no-repeat;
position: relative;
}
.block::before{
background-color: rgba(0, 0, 0, 0.37);
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
Based on MDN Web Docs you can set multiple background using shorthand background property or individual properties except for background-color. In your case, you can do a trick using linear-gradient like this:
background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);
The first item (image) in the parameter will be put on top. The second item (color background) will be put underneath the first. You can also set other properties individually. For example, to set the image size and position.
background-size: 30px 30px;
background-position: bottom right;
background-repeat: no-repeat;
Benefit of this method is you can implement it for other cases easily, for example, you want to make the blue color overlaying the image with certain opacity.
background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png');
background-size: cover, contain;
background-position: center, right bottom;
background-repeat: no-repeat, no-repeat;
Individual property parameters are set respectively. Because the image is put underneath the color overlay, its property parameters are also placed after color overlay parameters.
And if you want Generate a Black Shadow in the background, you can use
the following:
background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");
You can also use short trick to use image and color both like this :-
body {
background:#000 url('images/checked.png');
}
really interesting problem, haven't seen it yet. this code works fine for me. tested it in chrome and IE9
<html>
<head>
<style>
body{
background-image: url('img.jpg');
background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>
The next syntax can be used as well.
background: <background-color>
url('../assets/icons/my-icon.svg')
<background-position-x background-position-y>
<background-repeat>;
It allows you combining background-color, background-image, background-position and background-repeat properties.
Example
background: #696969 url('../assets/icons/my-icon.svg') center center no-repeat;
This actually works for me:
background-color: #6DB3F2;
background-image: url('images/checked.png');
You can also drop a solid shadow and set the background image:
background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;
If the first option is not working for some reason and you don't want to use the box shadow you can always use a pseudo element for the image without any extra HTML:
.btn{
position: relative;
background-color: #6DB3F2;
}
.btn:before{
content: "";
display: block;
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
background-image: url('images/checked.png');
}
Here is how I styled my colored buttons with an icon in the background
I used "background-color" property for the color and "background" property for the image.
<style>
.btn {
display: inline-block;
line-height: 1em;
padding: .1em .3em .15em 2em
border-radius: .2em;
border: 1px solid #d8d8d8;
background-color: #cccccc;
}
.thumb-up {
background: url('/icons/thumb-up.png') no-repeat 3px center;
}
.thumb-down {
background: url('/icons/thumb-down.png') no-repeat 3px center;
}
</style>
<span class="btn thumb-up">Thumb up</span>
<span class="btn thumb-down">Thumb down</span>
Assuming you want an icon on the right (or left) then this should work best:
.show-hide-button::after {
content:"";
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
background-size: 1em;
width: 1em;
height: 1em;
background-position: 0 2px;
margin-left: .5em;
}
.show-hide-button.shown::after {
background-image: url(img/eye.svg);
}
You could also do background-size: contain;, but that should be mostly the same. the background-position will depened on your image.
Then you can easily do an alternative state on hover:
.show-hide-button.shown:hover::after {
background-image: url(img/eye-no.svg);
}
You can try with box shadow: inset
.second_info_block {
background: url('imageURL');
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
}
<li style="background-color: #ffffff;"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></li>
Other Sample Box Center Image and Background Color
1.First clearpixel fix image area
2.style center image area box
3.li background or div color style
body
{
background-image:url('image/img2.jpg');
margin: 0px;
padding: 0px;
}
I have a page that has a background picture that works fine on scroll, but I also want to add a semi-transparent overlay.
I have tried to do this by wrapping the background in a span container. The problem is that it's a page that users can add to, and when there is enough content that the user needs to scroll, the transparent background only covers the first page.
I've tried background-attachment: fixed; background-size: cover; but none of them work.
You see where the overlay stops in this screenshot
Relevant CSS:
body {
background-image: url(images/ocoast.jpg);
background-size: cover;
}
.totalqs {
background-color:rgba(0,0,0,0.3);
color: white;
text-align: center;
float: left;
height: 100%;
width: 100%;
}
PHP page, test.php
<html>
<head><title>All Questions</title><link rel="stylesheet" type="text/css" href="style2.css">
</head>
<span class ="totalqs"><body>
<center><div class="navbar"><a href= 'ask.php'>Ask a Question</a>
<a href='test.php'>Answer a Question</a>
<a href= 'search.html'>Search</a>
<a href= 'yourqs.php'>Your Questions</a>
<a href= 'index.html'>Log out</a>
<hr><hr></center>
<br /> <br /><br /><br /><br /><br />
<h1><u>Every Question Ever Asked</u></h1>
<p><u><b>Hello <?php echo $username; ?> Answer Another Users Question: </u></b><br><br /></p>
<?php
/*
Get the questions from the database here and display them -
removed from question because its not relevant to the problem
*/
?>
<br /><br />
</body></span>
</html>
What can I do to make the overlay fill the whole background?
I see now that the problem you are having is getting the element with the transparent overlay to fill the screen.
Instead of using a separate element, you can add a transparent overlay on the body element itself by faking it with a gradient Ref: CSS Tricks, e.g.
body {
background:
/* top: transparent grey, faked with gradient */
linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
/* bottom: image */
url(images/ocoast.jpg) no-repeat;
background-size: cover;
}
This does away with the need for a separate element altogether. You can apply the other styles (e.g. color: white) directly the body, or you can create a <div class="container"> element (inside the <body>!) if you prefer.
Working snippet - I made the overlay green, so it was obvious that it was covering the whole area):
body {
/* BACKGROUND */
background: /* top: transparent colour, faked with gradient */
linear-gradient( rgba(0, 255, 0, 0.3), rgba(0, 255, 0, 0.3)), /* bottom: image */
url(http://oi67.tinypic.com/28a11js.jpg) no-repeat center top;
background-size: cover;
/* CONTENT */
color: white;
text-align: center;
}
/* for testing only: add big vertical margin to make page scroll */
p { margin: 100px 0; }
<body class="backimg">
<div class="navbar"><a href='ask.php'>Ask a Question</a>
<a href='test.php'>Answer a Question</a>
<a href='search.html'>Search</a>
<a href='yourqs.php'>Your Questions</a>
<a href='index.html'>Log out</a>
</div>
<hr><hr>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
</body>
NOTE: FYI Your HTML is not valid - you can't have any elements outside the <body> tags. Also <center> is deprecated, its not causing the problem but you should change it anyway - use the text-align: center style instead.
UPDATE
Add overlay to specific pages only, or had different colours one each page
If you want to add an overlay to specific pages, you can do this in the same way but using classes. You could also do this to add different colours to different pages if you wanted!
Add the CSS to the class instead of the <body> element
In your HTML, add a class to the body element
Then add the corresponding class to the <body> of each page! So for example:
1. CSS
Create CSS classes for each different background you want to use:
/* This will only contain the CSS that applies to all pages, e.g. */
body{text-align: center;}
/* Set up the different classes you will use, e.g. these are for green and blue overlays: */
body.greenoverlay{
background: /* top: transparent colour, faked with gradient */
linear-gradient( rgba(0, 255, 0, 0.3), rgba(0, 255, 0, 0.3)), /* bottom: image */
url(http://oi67.tinypic.com/28a11js.jpg) no-repeat center top;
background-size: cover;
color: white;
}
body.blueoverlay{
background: /* top: transparent colour, faked with gradient */
linear-gradient( rgba(0, 255, 255, 0.3), rgba(0, 255, 255, 0.3)), /* bottom: image */
url(http://oi67.tinypic.com/28a11js.jpg) no-repeat center top;
background-size: cover;
color: white;
}
2. HTML
Add the right class to the body of each page, do for example:
No overlay: <body>
Green overlay: <body class="green-overlay">
Blue overlay: <body class="blue-overlay">
FYI, because we are using linear-gradient to fake a solid background colour, you can create all sorts of gradient and colour effects. Run this snippet to see what I mean (I don't suggest you use it! but it shows the what you can do):
body.rainbowoverlay {
background: /* top: transparent colour, faked with gradient */
linear-gradient(to right, rgba(255, 50, 50, 0.5) 0%, rgba(255, 50, 50, 0.5) 1%, rgba(255, 248, 50, 0.5) 35%, rgba(71, 255, 50, 0.5) 56%, rgba(137, 163, 255, 0.5) 79%, rgba(237, 137, 255, 0.5) 100%), /* bottom: image */
url(http://oi67.tinypic.com/28a11js.jpg) no-repeat center top;
background-size: cover;
color: white;
}
<body class="rainbowoverlay">
<p>z</p><p>z</p><p>z</p><p>z</p><p>z</p><p>z</p><p>z</p><p>z</p>
<p>z</p><p>z</p><p>z</p><p>z</p><p>z</p><p>z</p><p>z</p><p>z</p>
</body>
You can use this gradient generator to generate the CSS for the linear-gradient in your CSS:
http://colorzilla.com/gradient-editor/#ff3232+1,fff832+35,47ff32+56,89a3ff+79,ed89ff+100&0.5+0,0.5
Below is an image of a button we use on our site, it's a .png.
We'd like to see if we can get really close to it with CSS on a standard button.
The gradient goes top: #E14C5B to middle: #D33742 to bottom: #B61C27 with a couple pixel radial of round corners.
Is that even possible in CSS?
I'll get ya started...
HTML
<button>Submit</button>
CSS with some background gradients
#import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);
button {
font-family: 'Pathway Gothic One', sans-serif;
font-size: 1.5em;
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
border: 1px solid transparent;
border-radius: 3px;
height: 50px;
width: 100px;
color: white;
background-repeat: repeat-x;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E14C5B), color-stop(0.5, #D33742), to(#B61C27));
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
cursor: pointer;
}
DEMO
Screenshot:
If you want some kind of clicky feedback type look on click, you could also add:
button:active {
-webkit-transform: translate(1px, 1px);
box-shadow: none;
}
DEMO w/ :active
This is only prefixed for -webkit browsers. You'll need to provide the proper vendor prefixes for whatever you are supporting.
Here is the cross-browser version using css gradient.
I specified 4 colors for the gradient.
The first gradient from 0 to 50% and the second gradient from 51% to 100%.
Ex.
background: linear-gradient(to bottom, #f64757 0%,#f83b49 50%,#eb2735 51%,#ce0011 100%);
jsfiddle demo here
Please note that the red i took are brighter than in tour example.
Just play with the css to adjust colors that fit your needs.
The title prettymuch says it all. The first picture below is a screenshot when the whole page is about 8000 pixels tall, taken in the latest version of Chrome:
while this picture is for a different page (using the same CSS) which is about 800 pixels tall:
and here is the code:
body{
background-color: #f3ffff;
margin:0px;
background-image: url('/media/flourish.png'),
-webkit-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image: url('/media/flourish.png'),
-moz-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image: url('/media/flourish.png'),
-o-linear-gradient(
top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')";
}
The gradient is meant to cut off at 250px from the top of the page. The fact that the degree of banding seems to depend on the total height of the page is very strange: pages of heights in between these two (800px and 8000px) seem to have bands which are smaller than the first example but still noticeable.
Interestingly, I was previously using -webkit-gradient('linear'...) instead and that did not have the same problem; I only swapped over to -webkit-linear-gradient so it would fall in line with my -moz and -o gradients.
I haven't tried it on Safari, but the code above makes it work perfectly fine in Firefox and kind-of-work in Opera (the colors get messed up, but the gradient is still smooth). Nevermind IE, which i have given up on.
Has anyone else seen this before?
Update: This happens on my Mac's Chrome/Safari too, but the bands are about 1/3 the size of the bands shown in the top image, for the exact same page. The banding is identical in both OSX Chrome and OSX Safari.
1/3 the size is still noticeable, but not quite so jarring. The actual page is at http://www.techcreation.sg/page/web/Intro%20to%20XTags/, if you want to see for yourself in some other browser. The CSS is "inline" css compiled in-browser using less.js.
Looks like a webkit bug. I came up with the work-around below, tested on the latest Chrome and FF. In short, you'll position a div containing the background behind your main content. I also added a few styles to make IE happier.
Given this HTML:
<html lang="en">
<head>
<style>
...
</style>
</head>
<body>
<div class="background">bgdiv</div>
<div class="content_pane">
<div class="titlebar">Leave a Comment!</div>
<div class="comment">Your Comment.</div>
</div>
</body>
</html>
Combined with this stylesheet:
body{
background-color: #f3ffff;
min-height: 100%;
margin:0px;
}
.background {
height: 250px;
left: 0;
position: absolute; /* could use fixed if you like. */
right: 0;
top: 0;
z-index: -10;
background-image:
-webkit-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-moz-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-o-linear-gradient(top,
rgba(99, 173, 241, 1) 0px,
rgba(0, 255, 255, 0) 250px
);
background-image:
-ms-linear-gradient(top,
rgba(99,173,241,1) 0%,
rgba(0,255,255,0) 250px
); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63adf1', endColorstr='#0000ffff',GradientType=0 ); /* IE6-9 */
background-image:
linear-gradient(top,
rgba(99,173,241,1) 0%,
rgba(0,255,255,0) 250px
); /* W3C */
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
}
.content_pane {
background: white;
border: 1px dotted white;
border: 1px solid grey;
font-family: arial, sans;
font-weight: bold;
margin: 6em auto 5em;
width: 50%;
}
.titlebar {
background: #3f7cdb;
color: white;
font-family: arial, sans;
padding: .25em 2ex .25em;
}
.comment {
padding: 1em;
}
It should come out looking like this, regardless of window size:
Your demo link does not work but i did some tests and it worked fine for me using Chrome when you add width/height of 100% to the body/html elements, like so:
body, html {
width:100%;
height:100%;
}
Demo
You can try that or you can just declare a header/logo piece where you can add the starting gradient and just add the ending gradient to the body of your css so it blends in correctly, like so:
CSS
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
}
body {
background-color: #f3ffff;
margin:0px;
height:10000px;
}
.header {
height:300px;
width:100%;
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
-webkit-linear-gradient(top, rgba(99, 173, 241, 1), rgba(0, 255, 255, 0));
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
-moz-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px
);
background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
-o-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px);
background-position: center top, center top;
background-repeat: no-repeat, repeat-x;
background-size:auto;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')";
}
HTML
<div class="header">
content
</div>
Demo
Friendly note: For anybody looking for the issue you can see it happening here in Chrome: http://jsfiddle.net/skJGG/
Seems like Chrome has some bugs when using the rgba() values. I tried with normal hex values and it seems to fix the problem for me.
Look here if it fix it for you also.
Edit
Looks like the problem is in the 250px limit because it only appears when that is set.
I didn't manage to come up with a better solution than this one.
Overlapping a div with the gradient you like, 250px tall. Then you can have the page as tall as you want because the div will always be 250px tall.
Webkit render -webkit-gradient('linear'...) and webkit-linear-gradient in the same way. The problem is with your multiple backgrounds. I had same issue and I was ended with two different elements on top of each other and then giving a background to each of them. Something like:
<body>
<div class="body-overlay"<div>
</body>
CSS
body{-webkit-linear-gradient(...)}
.body-overlay{background:url('blah.png')}
I think this happens because the image have fixed amount of pixels
instead of using background-image, try using this(background) -
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#63adf1), color-stop(53%,#ffffff), color-stop(100%,#ffffff)); /* feel free to play with the % values to get what you are looking for */
and also use hex values always. But from an UX prospective it would be better to use as in image(since you are loading an image anyway) and you won't have to worry about cross browser compatibility.
Have you tried setting background-size: auto, 250px 250px; — auto for first image and 250px for your gradient.
When you don't need a gradient image so big that it would cover whole page it's best to limit it's size. Besides rendering problems with big images, I think that it's better for the browser's performance.
So, you example would look like http://jsfiddle.net/kizu/phPSb/ (blindcoded, couldn't reproduce the problem though).
In any strange situation try to use:
transform: translateZ(10px);
In my case was the height of the body. Try the following:
body {
width:100vw;
height:100vh;
...
}