What I am trying to do is I want to keep the top 50% of the html button to have a gradient say from #FFF to #BBB and the bottom 50% should remain in one color lets say #111. I can't figure out a way to do it, any help would be largely appreciated.
The code of my button is:
<button class="Button1" type="submit">Submit</button>
The css:
.Button1 {
background-image: linear-gradient(to bottom, #fff 0%, #bbb 50%, #111 50%);
}
This should do the trick in latest browsers. It's up to you to make it cross-browser compatible. (I personally like the Photoshop-esque interface of http://www.colorzilla.com/gradient-editor/)
Here is a sample from Bootstrap that should help you out with button gradients. This also covers most modern browsers.
.btn-info {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #49afcd;
background-image: -moz-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));
background-image: -webkit-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -o-linear-gradient(top,#5bc0de,#2f96b4);
background-image: linear-gradient(to bottom,#5bc0de,#2f96b4);
background-repeat: repeat-x;
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
Hope that helps.(these are sort of teal, so you'll have to change that part)
Related
Edit: the code has been changed to my answer.
Is it possible to change the 'grey' background colour in the meter?
I can change the 'progress bar' colour to red, but cannot change the 'grey background colour'.
I would like to have the meter display two colours, red and blue. Is this possible?
Many thanks,
/* Changes the 'progress bar' colour */
meter::-webkit-meter-bar {
background: none; /* Required to get rid of the default background property */
background: red;
}
/* Changes the 'background' colour */
meter::-webkit-meter-optimum-value {
background: blue;
}
<meter value="0.3"></meter>
Please Check once. Hope it helps.
meter::-webkit-meter-bar {
background: none; /* Required to get rid of the default background property */
background-color: whiteSmoke;
box-shadow: 0 5px 5px -5px #333 inset;
}
meter::-webkit-meter-optimum-value {
box-shadow: 0 5px 5px -5px #999 inset;
background-image: linear-gradient(
90deg,
#8bcf69 5%,
#e6d450 5%,
#e6d450 15%,
#f28f68 15%,
#f28f68 55%,
#cf82bf 55%,
#cf82bf 95%,
#719fd1 95%,
#719fd1 100%
);
background-size: 100% 100%;
}
<meter max="120" value="55.93" title="GB"></meter>
I'm trying to create a multiple color background to implement this:
And right now I managed to do this:
What I did:
Desired Background:
I'm trying to do it using gradients, but it seems that it's not possible to combine two gradients to do that. (It's possible to do other things, but not this).
Is there a way to implement this backgorund?
Thanks!
Try this (adjust the percentage and colors as your needs):
.yourdiv{
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 70%, #f1f1f1 70%, #f1f1f1 100%);
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 70%,#f1f1f1 70%,#f1f1f1 100%);
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 70%,#f1f1f1 70%,#f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1',GradientType=0 );
}
DEMO HERE
i am guessing u need the darker grey section in the desired output to be shown? if so i would suggest to divide it into sections and give individual background.
if u can post some code. i would be happy to help.
Okay, not sure if this is exactly what you want but this is how I'd do psd to css/html. See screen shot below.
Also a WORKING DEMO HERE
Just wrap the whole card in a div and apply a left border would do the trick.
border-left-width: 8px;
border-left-color: rgba(10, 255, 80, 0.75);
border-radius: 5px;
You may remove the box shadow if you don't want, just feel move active with it.
At the end, I managed to do it with this:
This for the GREEN part:
.assignment-item {
padding: 5px 5px 0px 10px !important;
margin:15px auto;
border-radius: 8px;
background: linear-gradient(to right, #4f8b2b 0%,#4f8b2b 2%,#ffffff 2%,#ffffff 100%, transparent) !important;
}
This for the GREY part:
.assignment-item:before{
position:absolute;
z-index:-1;
bottom:0;
left:2%;
width:100%;
height:25%;
content:"";
background-color:#f2f2f2;
}
Here is the result:
So I am trying to setup the fadeout css3 hr tag, it works on JSFiddle but I can't solve it on my site.
My CSS class on site:
.about-sidebar{
margin: 25px 0;
height: 1px;
background: black;
background: -webkit-gradient(linear, 0 0, 100% 0, from(#1F1F1F), to(#FFD700), color-stop(50%, black));
}
HTML:
<hr class="about-sidebar" />
I have tried taking the class out of the HR tag and surrounding it with a div but doesn't solve.
Site: http://travisingram.net/ it is the "Welcome to my Blog" on the sidebar.
Jsfiddle working:
http://jsfiddle.net/ZTz7Q/1633/
The reason it wasn't working on your website was because the <hr> didn't contain the class with the gradient styling. Currently, you just have <hr> which should be changed to <hr class="line"> or whatever class you're using.
Aside from that, the linear-gradients needs some tweaking and cross browser prefix vendors for more support.
jsFiddle example
I don't know what colors you want.. but here is black to transparent.
.line {
margin: 25px 0;
height: 5px;
background: black;
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.98) 2%, rgba(255,255,255,0) 90%);
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0.98) 2%,rgba(255,255,255,0) 90%);
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0.98) 2%,rgba(255,255,255,0) 90%);
}
I'm trying to achieve a rectangle button with a transparent mask over the bottom right, as per this fiddle:
http://jsfiddle.net/c6gUX/
body {
background: #fff;
padding: 5em;
}
.button {
color: #FFFFFF;
font-family: 'RalewayRegular', Arial,sans-serif;
font-size: 1em;
padding: 0.5em 1.2em 0.5em 0.8em;
position: relative;
text-decoration: none;
}
.button:hover {
background: linear-gradient(to bottom, #FFA13E 0px, #E56204 100%) repeat scroll 0 0 transparent;
color: #FFFFFF;
}
.button:after {
background: url(http://i.imgur.com/8Vvw1Sw.png) no-repeat scroll 0 0 transparent;
bottom: -12px;
content: " ";
height: 38px;
position: absolute;
right: -12px;
width: 36px;
z-index: 99;
}
.orange-grad {
background: #ffa13e; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYTEzZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjc4MDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmY3ODA1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top, #ffa13e 0%, #ff7805 100%, #ff7805 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa13e), color-stop(100%,#ff7805), color-stop(100%,#ff7805)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffa13e 0%,#ff7805 100%,#ff7805 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffa13e 0%,#ff7805 100%,#ff7805 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffa13e 0%,#ff7805 100%,#ff7805 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffa13e 0%,#ff7805 100%,#ff7805 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa13e', endColorstr='#ff7805',GradientType=0 ); /* IE6-8 */
}
As you can see, i've achieved it with a quite hacky way. I've untested this cross-browser and suspect IE to mess it up without a shim for :after, etc.
How can I achieve this cross-browser modern? How can I make it work when overlayed onto an image so it's effectively transparent? (See below image)
From PSD:
My fiddle on an image:
Logically I know that IE6/7 will need an image and i'm kinda OK with that.
Word length. Sometimes the button doesn't have 'Read more', so need a 100% width solution.
Edit
I am thinking of using a Sprite. (http://i.imgur.com/z0UYpTX.png)
This is tricky - particularly with your combination of a gradient with the beveled corner. The closest I could get is this fiddle, which makes use of CSS gradients to achieve the effect you're after, based on Lea Verou's awesome article.
The relevant CSS is:
.button {
background: #ffa13e; /* fallback */
background: -webkit-linear-gradient(135deg, transparent 10px, #ff7805 10px, #ffa13e 100%);
background: -moz-linear-gradient(135deg, transparent 10px, #ff7805 10px, #ffa13e 100%);
background: -o-linear-gradient(135deg, transparent 10px, #ff7805 10px, #ffa13e 100%);
background: linear-gradient(315deg, transparent 10px, #ff7805 10px, #ffa13e 100%);
}
That's the only way to get the background image to show through (that I know of). The drawback is that the gradient is not your linear one from top to bottom, but at an angle. I don't think it's possible to combine multiple gradients to match your visual precisely. But it is pretty close:
I'd suggest that this is the perfect candidate for progressive enhancement - older IE will get a solid background colour but that's perfectly acceptable (i.e. I wouldn't personally bother trying for an image fallback).
Note: there have been numerous changes between the Working Draft and the Candidate Recommendation for the gradient syntax, one of which is the angle of the gradient:
From the IE Blog. Hence the unprefixed version requires a different deg value.
Make use of it..... I think this will help You.. use it with ur image.. this will solve cross-browser issue...
http://jsfiddle.net/Praveen16oct90/2bZAW/1095/
div {
width:200px;
height:80px;
background: red;
top:150px;left:100px;
position: relative;
}
div:before {
content: '';
position: absolute;
top: 40px; right: 0;
border-right: 40px solid white;
border-top: 40px solid red;
width: 20;
}
I have a button with a background-image property that sets 1) an icon for the button and 2) a CSS3 background gradient. I would now like to override the background gradient further down the page, so the icon remains the same and I can create many button colours by simply overriding the background gradients.
Is there currently a way to override a specific layer of a multiple background property?
http://gard.me/1ulmH
HTML:
<a class="newButton blue" href="#">hello world</a>
CSS:
.newButton /* Orange by default */
{
margin: 20px;
display: inline-block;
padding: 12px 20px;
background: none;
background-repeat: no-repeat;
background-position: 9px 5px;
background-position: 9px 5px, 0 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-width: 1px;
border-style: solid;
font-family: Verdana, Arial, Sans-Serif;
text-decoration: none;
text-align: center;
/* Orange stuff */
color: #FFECEA;
border-color: #A03E33;
background-position: 0 0;
background-color: #E46553;
background-image: url('http://www.waveclothing.co.uk/media/Shopping%20Cart.png'), -o-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: url('http://www.waveclothing.co.uk/media/Shopping%20Cart.png'), -moz-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: url('http://www.waveclothing.co.uk/media/Shopping%20Cart.png'), -webkit-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: url('http://www.waveclothing.co.uk/media/Shopping%20Cart.png'), -ms-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: url('http://www.waveclothing.co.uk/media/Shopping%20Cart.png'), -webkit-gradient(linear, left bottom, left top, color-stop(0, #D15039), color-stop(1, #F27466));
}
.newButton.blue { /* Blue */ /* Here I need to overwrite the button background colour */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0B3661), color-stop(1, #0E4479));
}
enter code hereYou need to give it the full image usage just like the original definition, because the new definition is going to overwrite the whole background. So
.newButton.blue {
background-image: url('http://www.waveclothing.co.uk/media/Shopping%20Cart.png'), -webkit-gradient(linear, left bottom, left top, color-stop(0, #0B3661), color-stop(1, #0E4479));
}
Updated:
If you really want to individually switch the gradients, then you need to either put a span element in the a tag to place your icon image into and set that background independently on the icon (span) and gradient (a) OR since the gradients are new browser technology, do those on a :before or :after pseudoelement set to sit below the a tag. Something like:
a {
position: relative;
z-index: 1;
...icon related background code here...
}
a:after {
content: '';
display: block;
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
...gradient related background code here...
}
EDIT: Note, as I reread your original question, it appears you may want the gradient above the icon. If so, you need to swap the background code for what I gave above.
When you set a new value for "background-image" it fully overrides its previous definition. Only the last definition applied will prevail.
I suggest you include the icon url for every background-image definition.