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 am wondering how I could style the new <meter> tag.
<meter value=80 min=0 max=100>
80/100
</meter>
I just want to change the background color and the value color, but I can't find the right CSS properties.
For webkit-based browsers I've found these:
meter::-webkit-meter-horizontal-bar {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), color-stop(0.2, #EEE), color-stop(0.45, #CCC), color-stop(0.55, #CCC), to(#DDD));
}
Pseudo element
meter::-webkit-meter-horizontal-optimum-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#AD7), color-stop(0.2, #CEA), color-stop(0.45, #7A3), color-stop(0.55, #7A3), to(#AD7));
}
Pseudo element
meter::-webkit-meter-horizontal-suboptimal-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FE7), to(#FE7), color-stop(0.2, #FFC), color-stop(0.45, #DB3), color-stop(0.55, #DB3));
}
Pseudo element
meter::-webkit-meter-horizontal-even-less-good-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F77), to(#F77), color-stop(0.2, #FCC), color-stop(0.45, #D44), color-stop(0.55, #D44));
}
Pseudo element
meter::-webkit-meter-vertical-bar {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#DDD), to(#DDD), color-stop(0.2, #EEE), color-stop(0.45, #CCC), color-stop(0.55, #CCC));
}
Pseudo element
meter::-webkit-meter-vertical-optimum-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#AD7), to(#AD7), color-stop(0.2, #CEA), color-stop(0.45, #7A3), color-stop(0.55, #7A3));
}
Pseudo element
meter::-webkit-meter-vertical-suboptimal-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FE7), to(#FE7), color-stop(0.2, #FFC), color-stop(0.45, #DB3), color-stop(0.55, #DB3));
}
Pseudo element
meter::-webkit-meter-vertical-even-less-good-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#F77), to(#F77), color-stop(0.2, #FCC), color-stop(0.45, #D44), color-stop(0.55, #D44));
}
Where can I find the right CSS properties for gecko-based browsers (Firefox), Opera and IE?
Here is a cross browser solution in 2019:
meter {
--background: #dadada;
--optimum: forestgreen;
--sub-optimum: gold;
--sub-sub-optimum: crimson;
/* The gray background in Firefox */
background: var(--background);
display: block;
margin-bottom: 1em;
width: 100%;
}
/* The gray background in Chrome, etc. */
meter::-webkit-meter-bar {
background: var(--background);
}
/* The green (optimum) bar in Firefox */
meter:-moz-meter-optimum::-moz-meter-bar {
background: var(--optimum);
}
/* The green (optimum) bar in Chrome etc. */
meter::-webkit-meter-optimum-value {
background: var(--optimum);
}
/* The yellow (sub-optimum) bar in Firefox */
meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: var(--sub-optimum);
}
/* The yellow (sub-optimum) bar in Chrome etc. */
meter::-webkit-meter-suboptimum-value {
background: var(--sub-optimum);
}
/* The red (even less good) bar in Firefox */
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: var(--sub-sub-optimum);
}
/* The red (even less good) bar in Chrome etc. */
meter::-webkit-meter-even-less-good-value {
background: var(--sub-sub-optimum);
}
<label>
Optimum
<meter value=80 min=0 low=30 high=60 max=100 optimum=80>
80/100
</meter>
</label>
<label>
Sub-optimum
<meter value=80 min=0 low=30 high=60 max=100 optimum=50>
80/100
</meter>
</label>
<label>
Sub-sub-optimum
<meter value=80 min=0 low=30 high=60 max=100 optimum=20>
80/100
</meter>
</label>
Note that the unfilled (grey) portion of the meter is styled with the ::-webkit-meter-bar in Chrome, while firefox uses ::-moz-meter-bar for the filled (green, yellow, red) part and styles the unfilled part with under the meter element it self.
Also note that firefox has pseudo selectors on the meter element to differentiate between optimal and sub-optimal values (:-moz-optimal, :-moz-sub-optimal, and :-moz-sub-sub-optimal; then you simply style the ::-moz-meter-bar pseudo child of the appropriate pseudo selector) while Chrome allows you to style different pseudo elements for that purpose (::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value, and ::-webkit-meter-even-less-good-value respectively).
Here is a link that explains what these prefixed pseudo elements mean.
https://scottaohara.github.io/a11y_styled_form_controls/src/meter/
I got the meter styled with a nice subtle gradient in Webkit browsers using the following code:
meter { -webkit-appearance: none; } //Crucial, this will disable the default styling in Webkit browsers
meter::-webkit-meter-bar {
background: #FFF;
border: 1px solid #CCC;
}
meter::-webkit-meter-optimum-value {
background: #87C7DE;
background: -moz-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a1d4e6), color-stop(100%, #6bb4d1));
background: -webkit-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
background: -o-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
background: -ms-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
background: linear-gradient(to bottom, #a1d4e6 0%, #6bb4d1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d4e6', endColorstr='#6bb4d1',GradientType=0);
}
However, Chris Coyier over at CSS-Tricks recommends the following HTML code:
<div class="meter">
<span style="width: 25%"></span>
</div>
... rather than the HTML5 <meter> or <progress> tags. At this point in time (February 2013), I agree with him:
To make things worse, things are very different across browsers, even
between different WebKit browsers. Pseudo elements also work
inconsistently. I hate to leave things hanging like this, but this is
really a topic for another time. Suffice it to say, for these
particular progress bars, the div/span thing is the ticket for now.
Browsers just don't really seem ready to accept the new HTML5 standard tags for <meter> and <progress>. With that said, I'd suggest that people get over the desire to go straight for the future and rather go for something that works visually until further notice. I should also mention that at the current point in time, the current browser support for these tags is at 53%... that's not worth it for me, but I'll leave that to your project's discretion.
Below are the rules for FireFox. I included a screenshot on where to find the rules in the Firefox inspector.
::-moz-meter-bar {
/* Block styles that would change the type of frame we construct. */
display: inline-block ! important;
float: none ! important;
position: static ! important;
overflow: visible ! important;
-moz-appearance: meterchunk;
height: 100%;
width: 100%;
}
:-moz-meter-optimum::-moz-meter-bar {
/* green. */
background: -moz-linear-gradient(top, #ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}
:-moz-meter-sub-optimum::-moz-meter-bar {
/* orange. */
background: -moz-linear-gradient(top, #fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
}
:-moz-meter-sub-sub-optimum::-moz-meter-bar {
/* red. */
background: -moz-linear-gradient(top, #f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
}
Meter elements look like progress bars used elsewhere on the platform you are on.
try this to replace the meter elements:
<div style="padding:2px;background:#CCC;">
<div style="width:25%;background:#F00;text-align:center;">
<span>25%</span>
</div>
</div>
For anyone looking for a non-trivial style in 2021, it's certainly possible to create any kind of meter you want through creative use of the background-image property and friends.
The only difference between firefox and chrome is the background: none;
Safari requires -webkit-appearance: none, while Chrome requires -webkit-appearance: meter, so they are incompatible. The hack to make this work is out of scope for this answer.
.scaffolding {
display: grid;
grid-template-columns: 2rem 1fr;
gap: 8px;
}
label {
display: flex;
align-items: center;
justify-content: flex-end;
line-height: 0;
}
meter,
meter::-webkit-meter-bar,
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value,
meter::-webkit-meter-inner-element {
background: none;
border-radius: 0;
border: none;
width: 100%;
height: 4rem;
}
meter {
appearance: none;
-moz-appearance: meter;
-webkit-appearance: meter;
width: 20rem; //very important
}
meter::-webkit-meter-optimum-value {
background-image: repeating-linear-gradient(to right,
transparent 0rem, transparent 0.25rem,
green 0.25rem, green 0.5rem, transparent 0.5rem, transparent 0.75rem,
green 0.75rem, green 1rem, transparent 1rem, transparent 1.25rem,
green 1.25rem, green 1.5rem, transparent 1.5rem, transparent 1.75rem,
green 1.75rem, green 2rem, transparent 2rem, transparent 2.25rem),
repeating-linear-gradient(to right,
transparent 0%, transparent 2.25rem, green 2.25rem, green 2.5rem, transparent 2.5rem);
background-size: 2.5rem 3rem, 2.5rem 4rem;
background-position-y: center, center;
background-repeat: repeat-x, repeat-x;
}
meter::-moz-meter-bar {
background: none;
background-image: repeating-linear-gradient(to right,
transparent 0rem, transparent 0.25rem,
green 0.25rem, green 0.5rem, transparent 0.5rem, transparent 0.75rem,
green 0.75rem, green 1rem, transparent 1rem, transparent 1.25rem,
green 1.25rem, green 1.5rem, transparent 1.5rem, transparent 1.75rem,
green 1.75rem, green 2rem, transparent 2rem, transparent 2.25rem),
repeating-linear-gradient(to right,
transparent 0%, transparent 2.25rem, green 2.25rem, green 2.5rem, transparent 2.5rem);
background-size: 2.5rem 3rem, 2.5rem 4rem;
background-position-y: center, center;
background-repeat: repeat-x, repeat-x;
}
<div class="scaffolding">
<label>40</label>
<meter min="0" max="40" value="40"></meter>
<label>20</label>
<meter min="0" max="40" value="20"></meter>
<label>15</label>
<meter min="0" max="40" value="15"></meter>
<label>35</label>
<meter min="0" max="40" value="35"></meter>
<label>4</label>
<meter min="0" max="40" value="4"></meter>
</div>
You can style the meter size and position using something like the following in your css:
meter {
margin: 0 auto 4.5em;
width: 450px;
height: 50px;
display: block;
}
For colours, you need to use a webkit appropriate to your browser.