I'm trying to set the width of an element using attr() in CSS but it's not working. Chrome says "invalid property value" but I'm not sure what's wrong.
I'm trying to use the attribute "prog" as the width in percent for the .progress div.
Here's my example on codepen.
<div class="progresscontainer">
<div class="progress" prog="10">
</div>
</div>
.progresscontainer {
position:absolute;
background-color:black;
width:500px;
height:100px;
border-radius:5px;
border:1px solid black;
overflow:hidden;
}
.progress {
background-color: green;
background: -webkit-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -webkit-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
background: -moz-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -moz-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
background: -ms-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -ms-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
background: linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
position:absolute;
height:100%;
width: attr(prog %);
}
This is an experimental, or at least draft, feature of CSS, and currently, according to Mozilla Developer Network's documentation, is only compatible with the CSS content property (in which it can return a string to be placed inside a pseudo-element), but cannot (yet) be used to generate values for other properties.
References:
attr() (at MDN).
attr() (at W3C).
Actually, there is a way to get around the attr() solution:
I don't recommend this, but you could account for every scenario of data-width attribute, for example:
(stylus code)
$limit = 300
.myClass
for num in (1...$limit)
&[data-width="${limit}"]
width $limit
Albeit, this is a terrible approach, and leads to way too much CSS. I just wanted to point out that there's always a way.
There is actually a way to get attributes / variables from html (or your template framework) to css, using var() (see this article for more info)
.progress {
width: var(--prog);
}
/* Rest of styling */
.progresscontainer {
position:absolute;
background-color:black;
width:500px;
height:100px;
border-radius:5px;
border:1px solid black;
overflow:hidden;
}
.progress {
background-color: green;
background: -webkit-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -webkit-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
background: -moz-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -moz-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
background: -ms-linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), -ms-linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
background: linear-gradient(top, transparent -100%, rgba(255, 255, 255, 0.5) 50%, transparent 200%), linear-gradient(top, lime 0%, lightgreen 50%, green 50%, darkgreen 100%);
position:absolute;
height:100%;
}
<div class="progresscontainer">
<div class="progress" style="--prog: 10%;"></div>
</div>
Support for attributes other than content is Experimental. In other words, browsers do not support this yet even though it is seemingly valid.
Here is an example showing that it does work with content, but not width.
Related
Is it possible to get a similar result with CSS Gradients? Can you use 2 gradients on one div and can the radial one have a center outside the div?
It is definitely possible to add more than one gradient to an element (even a combination of linear and radial gradients) by providing them in comma separated format like in the below snippet. The gradient that is specified first (from the right side) forms the bottom most layer while that which is specified last comes on top. Key thing to note is that the gradient (on top) must have colors with alpha less than 1 to be able to show the colors in the lower layers.
Coming to the second part of the question, radial gradients can be created such that their center point is outside the div. This can be done by specifying negative values for the position.
The gradient in the below snippet does not tally 100% with the image provided in question but you can get the idea.
div{
height: 200px;
width: 150px;
border: 1px solid;
border-radius: 12px;
background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.7)), radial-gradient(ellipse at -40% -50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.7) 50%);
background-size: 180% 200%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='gradient'></div>
Try this
.color background: rgba(249,124,102,1);
background: -moz-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(249,124,102,1)), color-stop(50%, rgba(246,160,147,1)), color-stop(51%, rgba(248,85,63,1)), color-stop(71%, rgba(243,93,73,1)), color-stop(100%, rgba(236,98,85,1)));
background: -webkit-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
background: -o-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
background: linear-gradient(135deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f97c66', endColorstr='#ec6255', GradientType=1 );
}
.rounded_rec {
width: 150px;
height: 150px;
border-radius: 5px;
border: 1px solid red;
background-color: black;
}
Html
<div class="rounded_rec color">
</div>
Kindly check this link
Check this link also
Check this link and let me know is this what you want
I don't know if that is a stupid question or something like that but i want a div to be filled certain percent by one color and remaining part by other.
And the gradient property
.div{
background: linear-gradient(to right, #000 50%, #fff 50%);
}
Results into
.div{
background: linear-gradient(to right, #000 28%, #fff 72%);
}
And this results into
i want to get the white and black not to mix and be seperated on all percentages.
try this
.div{
background: -webkit-linear-gradient(left, black 50%, white 0%);
background: -moz-linear-gradient(left, black 50%, white 0%);
background: -ms-linear-gradient(left, black 50%, white 0%);
background: linear-gradient(left, black 50%, white 0%);
}
When you did:
background: linear-gradient(to right, #000 28%, #fff 72%);
it means:
Black (#000) from 0% to 28%, then start a gradient to white (#fff) until reach 72% and after this gradient, use white until the end.
So you can use:
background: linear-gradient(to right, #000 28%, #fff 28%);
This way you'll get: black from 0 to 28%, a gradient from 28% to 28% (it means, no gradient), and white from 28% to the end. So you'll get only back and white, without the gradient between them.
Why do you want to use gradient in first place if you dont want them to mix?
Anyway this is working:
div{
height: 200px;
background: -moz-linear-gradient(left, white 50%, black 0%);
background: -linear-gradient(left, white 50%, black 0%);
background: -webkit-linear-gradient(left, white 50%, black 0%);
}
you can put any value for white. It wont mix.
do you mean :
div{
background: linear-gradient(to right, #000 28%, transparent 28%, transparent 72%,#fff 72%);
color:green
}
body {
background:yellow
}
<div> lorem ipsum blabla lorem ipsum blabla lorem ipsum blabla lorem ipsum blabla</div>
You can Give Multiple gradient Color to a Div
Use this Css
Check this Demo
http://jsfiddle.net/dineshkanivu/2pcccd2p/1/
http://jsfiddle.net/dineshkanivu/2pcccd2p/
background: #ff474a; /* Old browsers */
background: -moz-linear-gradient(top, #ff474a 0%, #7a2e68 50%, #0cf900 51%, #0a0784 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff474a), color-stop(50%,#7a2e68), color-stop(51%,#0cf900), color-stop(100%,#0a0784)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff474a 0%,#7a2e68 50%,#0cf900 51%,#0a0784 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff474a', endColorstr='#0a0784',GradientType=0 ); /* IE6-9 */
I'm trying to overlay 2 different gradients, without using any image:
one repeatable gradient (6px by 6px) that makes an hash-like image.
one vertically transparent gradient all over the page (100% to 0%).
Here is the code I tried unsuccefully:
html{
background: -moz-linear-gradient(top, transparent 0%, #FFFFFF 100%);
background-repeat: no-repeat;
background-attachment: fixed;
}
body{
background: -moz-linear-gradient(45deg, #C6C6C6 0%, #C6C6C6 25%, #FFFFFF 25%, #FFFFFF 50%, #C6C6C6 50%, #C6C6C6 75%, #FFFFFF 75%, #FFFFFF 100%);
background-size: 6px 6px;
}
Any idea is this is possible ?
Here's what I'm trying to do: A solid grey background with a semi-eclipse (i.e. half an eclipse) of light starting from the centre of the page and ending at the top, so it looks as if there is a torch shining upwards from the centre of the page.
I've tried using SVG instead of css as I thought it might be easier, but I've ran into a few problems. Can anyone point me in the right direction?
Edit: Here's an image of what I'm trying to achieve:
You can use a radial-gradient as the background image like this:
html {
background: #ccc;
background: -moz-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -webkit-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -ms-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -o-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
min-height: 100%;
}
This works by placing the center of the gradient 50% above the page (note the -50% second parameter.) combined with the cover size attribute.
You can read more about the CSS radial-gradient property at MDN.
Here is an example: http://jsfiddle.net/kUFNV/4/
Why not use a CSS gradient? Here:
background: #f9f9f9;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmOWY5ZjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjY2RjZGNkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #f9f9f9 0%, #cdcdcd 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f9f9f9), color-stop(100%,#cdcdcd));
background: -webkit-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: -o-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: -ms-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: radial-gradient(ellipse at center, #f9f9f9 0%,#cdcdcd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#cdcdcd',GradientType=1 );
Then add a margin-top: -50%; CSS to the element with the background. I don't suggest this is the body element as it'll get a bit messy, but create a new element with absolute positioning, give it the gradient code and the -50% margin and z-index: -1; so it'll be under all the rest of the page.
Good luck!
I'd recommend playing around with one of the CSS3 gradient generators like this one. With a few different color stops on a radial gradient, you should be able to accomplish something pretty close.
Here's one I put together quickly: http://jsfiddle.net/43k6F/
Here an example http://jsfiddle.net/h6PLV/ background:none;
On Google Chrome have white color around the select option. In Firefox looks great.
How do I remove the white color on Chrome browser?
Add -webkit-appearance: none;
.inputtxt {
border:0;
background:none;
-webkit-appearance: none;
}
jsFiddle example
You need to detect the browser using jQuery
if($.browser.chrome){
userAgent = userAgent.substring(userAgent.indexOf('chrome/') +7);
userAgent = userAgent.substring(0,userAgent.indexOf('.'));
version = userAgent;
// If it is chrome then jQuery thinks it's safari so we have to tell it it isn't
$.browser.safari = false;
}
Then you can apply multiple changes to these in your css such as background:none by specifying if it's chrome or not.
background-color:#ffffff;
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, #f4f4f4), color-stop(0.48, #eeeeee), color-stop(0.5, #f6f6f6), color-stop(0.8, #ffffff));
background-image:-webkit-linear-gradient(center bottom, #f4f4f4 0%, #eeeeee 48%, #f6f6f6 50%, #ffffff 80%);
background-image:-moz-linear-gradient(center bottom, #f4f4f4 0%, #eeeeee 48%, #f6f6f6 50%, #ffffff 80%);
background-image:-o-linear-gradient(top, #f4f4f4 0%, #eeeeee 48%, #f6f6f6 50%, #ffffff 80%);
background-image:-ms-linear-gradient(top, #f4f4f4 0%, #eeeeee 48%, #f6f6f6 50%, #ffffff 80%);
background-image:linear-gradient(top, #f4f4f4 0%, #eeeeee 48%, #f6f6f6 50%, #ffffff 80%);
I do not know if this is what you want, but try :
-webkit-appearance:none;