Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 days ago.
Improve this question
Hi guys i'm learning html and css animations and i was following a tutorial from this link https://css-tricks.com/single-element-loaders-the-dots/ .
I'm not sure why VSCode throws in an error for me
This is what i'm trying out (css is linked to the html)
html:
<div class="dots-1"></div>
css:
.dots-1 {
width: 60px;
aspect-ratio: 4;
background: radial-gradient(circle closest-side,#000 90%,#0000) 0/calc(100%/3) 100% space;
clip-path: inset(0 100% 0 0);
animation: d1 1s steps(4) infinite;
}
#keyframes d1 {to{clip-path: inset(0 -34% 0 0)}}
but on VSCode it throws in an error in regards to what i put in bold here: #keyframes d1 {to { clip-path: inset (0 -34% 0 0)}}
The error messages are "colon expected" for the { and semi-colon expected for the inset.
I wasn't able to find an alternative for this line of code.
What would be the solution in this case? And is there a reason as to why it can work on code pen but not vscode?
Thank you
When I try following the solutions VSCode offers error by error, I get something like this:
#keyframes d1 { d1 {to:clip-path; inset:(0 -34% 0 0)}}
But it still does not work and it does not seem right either
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I've got a problem and I don't know how to solve it. The line that has this invalid property value is between the 4 asterisks (or *). If you need anything else like the HTML please let me know. Everything works fine besides that.
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
**background-image: linear-gradient(rgb(0,0,100,0.26)), url(bckg.png);**
padding: 55px;
box-sizing: border-box;
}
Here is an image with the error on the website
rgb(0,0,100,0.26) is not a valid rgb value. Should be rgba(0,0,100,0.26)
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I write a html/css code, and find the <marquee> and <span>'s layout is strange:
if <marquee> is a inline element, the span will on the right of the marquee, but if I use the span float right, it will like this:
So the <marquee> is not a block element.
How does the <marquee> display in html?
You should avoid to use this tag: It's not a standard element. See yourself:
https://www.w3.org/wiki/HTML/Elements/marquee
To replace it, you should use some javascript, or use a plugin :
https://remysharp.com/2008/09/10/the-silky-smooth-marquee/
You can achieve to do that in pure css to with animations :
http://codepen.io/thomasbormans/pen/EjMBqO
#keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
Hi been trying to get this for quite some time. Ive done it before which is why i feel pretty pathetic for having to ask. The background will not show up.
Im trying to set a background image for my footer and the top menu on my website located HERE
This is my CSS for the Footer:
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-image: url('./classy_fabric/classy_fabic.png');
border-top: 1px solid #e5e5e5;
}
And here is the CSS for the top nav:
.blog-masthead {
background-image: url('./classy_fabric/classy_fabic.png');
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
You have fabric mispelled so it can't find it.
http://sadin.me/css/classy_fabric/classy_fabric.png
I found one glitch in you code.
background-image: url('./classy_fabric/classy_fabic.png'); one (.) is missing
background-image: url('../classy_fabric/classy_fabic.png');
I think you just need to move your file into the right directory.
Request URL:http://sadin.me/css/classy_fabric/classy_fabic.png
Request Method:GET
Status Code:404 Not Found
If you're using Chrome, check out the network tab of your debug console for any 404 errors.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'd like to have a circle, with rays coming out of it... Around 24 of them. With each ray being a rectangle with a word in it. So it's basically a menu in a website, but instead of being in a column on the side of the page, here it's around a circle. Each rectangle is evenly separated from the others of course, forming something that looks like a sun.
Can anyone show me how I can do that with HTML/CSS? Javascript and JQuery can be used too if needed.
Something like this fiddle?
In the fiddle I use a javascript loop to set all the angles, but it could also be static css if you knew ahead of time how many rays there would be:
.ray {
position: absolute;
left: 50%;
width: 200px;
top: 40px;
bottom: 40px;
padding-left: 10px;
transform-origin: 0px 50%;
}
#ray1 {
transform: rotate(0deg);
}
#ray2 {
transform: rotate(72deg);
}
...
(naturally for real-world code you'd want to use the -webkit, etc prefixes for the transform properties; another nicety of using jquery is that it deals with that automatically)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I got CSS Animations working on a logo. I make the image slide down from top to bottom, just once. How do I make the image stay where it went to after the animation stops?
Add this to your CSS
-webkit-animation-fill-mode: forwards;
DEMO http://jsfiddle.net/kevinPHPkevin/4TcSK/5/
Jquery example for full browser support
DEMO http://jsfiddle.net/kevinPHPkevin/GyYvz/
$('img').animate({ marginTop: '250px', opacity: 0.5 }, 1000);
You can do an animation-iteration-count: 1 to make it only play once, then complete instead of loop infinitely.