So basically I was trying to make a javascript game in HTML (I'm good at HTML but not other languages so I was confused when this problem happened)
so I made sure the syntax was correct, it was. and then did some search on the internet but it didn't help the animation just won't display. I tried many times but it just. won't
so here is the HTML code if you wanted to check it.
#game {
width: 500px;
height: 200px;
border: 1px solid;
border-color: black;
border-radius: 7px;
}
#player {
width: 20px;
height: 50px;
background-color: red;
position: relative;
top: 150px;
}
#brick {
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left: 480px;
animation: block 5s is infinite;
}
#keyframes block {
0% {
left: 480px;
}
100% {
left: 40px;
}
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>
javascript game!
</title>
</head>
<body>
<div id="game">
<div id="player">
</div>
<div id="brick">
</div>
</div>
</body>
</html>
so yeah. thanks in advance
Although you say you have checked the syntax is correct, there should be an 'invalid property value' showing in your devtools on the css for setting the animation for #brick.
It has an 'is' in it. Maybe you meant 1s or maybe you didn't intend for it to be there?
Here's the snippet without it:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>
javascript game!
</title>
<style>
#game {
width:500px;
height:200px;
border: 1px solid ;
border-color: black;
border-radius: 7px;
}
#player {
width: 20px;
height: 50px;
background-color: red;
position: relative;
top: 150px;
}
#brick {
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left: 480px;
animation: block 5s infinite;
}
#keyframes block {
0%{left:480px;}
100%{left:40px;}
}
</style>
</head>
<body>
<div id="game">
<div id="player">
</div>
<div id="brick">
</div>
</div>
</body>
</html>
Incidentally, you will probably find it more efficient (of processor) to use transform translateX rather than reset left position in an animation.
change different animation properties then it work. like animation-name: block; animation-duration: 5s; animation-iteration-count: infinite;
#game {
width:500px;
height:200px;
border: 1px solid ;
border-color: black;
border-radius: 7px;
}
#player {
width: 20px;
height: 50px;
background-color: red;
position: relative;
top: 150px;
}
#brick {
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left:0;
animation-name: block;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#keyframes block {
0%{left:480px;}
100%{left:40px;}
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>
javascript game!
</title>
</head>
<body>
<div id="game">
<div id="player">
</div>
<div id="brick">
</div>
</div>
</body>
</html>
#game {
width:500px;
height:200px;
border: 1px solid ;
border-color: black;
border-radius: 7px;
}
#player {
width: 20px;
height: 50px;
background-color: red;
position: relative;
top: 150px;
}
#brick {
width: 20px;
height: 20px;
background-color: blue;
position: relative;
top: 130px;
left: 480px;
animation: block 5s infinite;
}
#keyframes block {
0%{left:480px;}
100%{left:40px;}
}
your code had a bit problem that was the use of "is" in your animation property
before posting, I have read:
Safari 8 Only CSS Animation Issue
Alright, I am building a css button, some issue only occurs in Safari.
if you run the snippets in Chrome, it works exactly what I expect.
if you run this in Safari, the span effect doesn't work well.
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(-30deg,#1ec4e9 0%,#673ab7 50%,#262626 50%,#607d8b 100%);
}
a{
position: relative;
padding: 25px 50px;
text-decoration: none;
color: #fff;
font-size: 2em;
text-transform: uppercase;
font-family: sans-serif;
letter-spacing: 4px;
overflow: hidden;
background: rgba(255,255,255,.1);
box-shadow: 0 5px 5px rgba(0,0,0,.2);
}
a::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255,255,255,.1);
}
a::after{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
transition: 0.5s;
}
a:hover::after{
left: 100%;
}
a span{
position: absolute;
display: block;
transition: 0.5s ease;
}
a span:nth-child(1){
top: 0;
left: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(1){
width: 100%;
transform: translateX(100%);
}
a span:nth-child(3){
bottom: 0;
right: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(3){
width: 100%;
transform: translateX(-100%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href='#'>
<span></span>
<span></span>
<span></span>
<span></span>
Button
</a>
</body>
</html>
I have tried to add browser support such as:
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-moz-transform: translateX(-100%);
but it still doesn't work. Could someone offers some suggestions, I want Safari to give the same result as chrome.
UPDATE
This must be a priority issue since I tried:
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(-30deg,#1ec4e9 0%,#673ab7 50%,#262626 50%,#607d8b 100%);
}
a{
position: relative;
padding: 25px 50px;
text-decoration: none;
color: #fff;
font-size: 2em;
text-transform: uppercase;
font-family: sans-serif;
letter-spacing: 4px;
overflow: hidden;
background: rgba(255,255,255,.1);
box-shadow: 0 5px 5px rgba(0,0,0,.2);
}
a::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255,255,255,.1);
}
a::after{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
-webkit-transition: 2s;
}
a:hover::after{
left: 100%;
}
a span{
position: absolute;
display: block;
-webkit-transition: 2s ease;
}
a span:nth-child(1){
position: relative;
top: 0;
left: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(1){
width: 100%;
-webkit-transform: translateX(100%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href='#'>
<span></span>
<span></span>
<span></span>
<span></span>
Button
</a>
</body>
</html>
Make it as you made it for your shadow (in ::after), use left or right:
a:hover span:nth-child(1){
width: 100%;
/*-webkit-transform: translateX(100%);*/
left:100%;
}
a:hover span:nth-child(3){
width: 100%;
/*transform: translateX(-100%);*/
right: 100%;
}
Demo (1):
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(-30deg,#1ec4e9 0%,#673ab7 50%,#262626 50%,#607d8b 100%);
}
a{
position: relative;
padding: 25px 50px;
text-decoration: none;
color: #fff;
font-size: 2em;
text-transform: uppercase;
font-family: sans-serif;
letter-spacing: 4px;
overflow: hidden;
background: rgba(255,255,255,.1);
box-shadow: 0 5px 5px rgba(0,0,0,.2);
}
a::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255,255,255,.1);
}
a::after{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
transition: 0.5s;
}
a:hover::after{
left: 100%;
}
a span{
position: absolute;
display: block;
transition: 0.5s ease;
}
a span:nth-child(1){
top: 0;
left: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(1){
width: 100%;
/*transform: translateX(100%);*/
left: 100%;
}
a span:nth-child(3){
bottom: 0;
right: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(3){
width: 100%;
/*transform: translateX(-100%);*/
right: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href='#'>
<span></span>
<span></span>
<span></span>
<span></span>
Button
</a>
</body>
</html>
DEMO (update):
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(-30deg,#1ec4e9 0%,#673ab7 50%,#262626 50%,#607d8b 100%);
}
a{
position: relative;
padding: 25px 50px;
text-decoration: none;
color: #fff;
font-size: 2em;
text-transform: uppercase;
font-family: sans-serif;
letter-spacing: 4px;
overflow: hidden;
background: rgba(255,255,255,.1);
box-shadow: 0 5px 5px rgba(0,0,0,.2);
}
a::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255,255,255,.1);
}
a::after{
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
-webkit-transition: 2s;
}
a:hover::after{
left: 100%;
}
a span{
position: absolute;
display: block;
-webkit-transition: 2s ease;
}
a span:nth-child(1){
position: relative;
top: 0;
left: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(1){
width: 100%;
/*-webkit-transform: translateX(100%);*/
left:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href='#'>
<span></span>
<span></span>
<span></span>
<span></span>
Button
</a>
</body>
</html>
In chrome browser, when a border is added to the parent fixed element, its absolute child element location changes, specifically by the outer border of the parent element, but not in edge and Firefox browsers.
document.getElementById('add').addEventListener("click",()=>{
document.getElementById('fixed').classList.add("border");
})
document.getElementById('delete').addEventListener("click",()=>{
document.getElementById('fixed').classList.remove("border");
})
.fixed{
position: fixed;
width: 400px;
height: 400px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: red;
}
.absolute{
position: absolute;
width: 100px;
height: 30px;
top: 30px;
right: 30px;
background: yellow;
}
.border{
border:8px solid green;
}
<html>
<head>
<title>TSET</title>
</head>
<body>
<div class="fixed" id="fixed">
<div class="absolute" ></div>
<button id="add">add</button>
<button id="delete">delete</button>
</div>
</body>
</html>
This is definitely a Chrome bug, they do not trigger the recalculation of the position
You could work around this by making sure the position is recalculated
you can also use
right:0.000001px;
if you do dot what to write the width in two separate rules. But I think this is uglier than the solution below
document.getElementById('add').addEventListener("click",()=>{
document.getElementById('fixed').classList.add("border");
})
document.getElementById('delete').addEventListener("click",()=>{
document.getElementById('fixed').classList.remove("border");
})
.fixed{
position: fixed;
width: 400px;
height: 400px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: red;
}
.absolute{
position: absolute;
width: 100px;
height: 30px;
top: 30px;
right: 30px;
background: yellow;
}
.border{
border:8px solid green;
}
.fixed{
position: fixed;
width: 400px;
height: 400px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: red;
}
.absolute{
position: absolute;
width: 30px;
height: 30px;
top: 0px;
right: 0px;
background: yellow;
}
.border{
border:8px solid green;
}
.border .absolute{
left:calc(100% - 30px);
}
<html>
<head>
<title>TSET</title>
</head>
<body>
<div class="fixed" id="fixed">
<div class="absolute" ></div>
<button id="add">add</button>
<button id="delete">delete</button>
</div>
</body>
</html>
I need to put some text on the pic and it has to stay there forever in that exactly color. I did it, but when I hover on a pic - text disappears. What should I do?
Didn't find answer.
I want text being there all the time with and without hovering. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
}
.img-overlay{
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
}
.photo-text.one:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
}
</style>
</head>
<body>
<div class="photo-text one">
<div class="img-overlay">
</div>
<h2 class="text">fffff</h2>
</div>
</body>
</html>
Add the z-index property to your text.
Information here
.photo-text.one {
background-size: cover;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
height: 409px;
position: relative;
width: 576px;
}
.img-overlay {
width: 100%;
height: 100%;
background: #6fc3df;
opacity: 0.75;
}
.photo-text.one:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url("https://i2.wp.com/www.thehopelesshousewife.com/wp-content/uploads/2013/12/Christmas-No-Bake-Nachos-576x409.jpg") no-repeat center top;
}
.text {
position: absolute;
top: 100px;
left: 150px;
color: red;
z-index: 1;
}
<div class="photo-text one">
<div class="img-overlay">
</div>
<h2 class="text">fffff</h2>
</div>
I'm trying to replicate this mockup:
I know how to create a semi-circle in CSS but I don't want an entire semi-circle. I want just the top, center portion of a much larger circle.
I'm specifically looking for the CSS code to create the black circle in the above mockup. Thanks!
Here is my attempt:
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<h1>
<img id="logo" src="/images/logo.png">
</h1>
<div id="half_circle">
<div id="footer_container">
<div id="learn">
Learn more.
</div>
<div id="signin">
<div>
Sign in to start callin'it
</div>
</div>
</div>
</div>
</body>
</html>
#half_circle {
width: 100%;
height: 50%;
border-radius: 100% 100% 0 0;
background-color: #111111;
display: block;
position: absolute;
bottom: 0;
}
#footer_container {
display: block;
position: relative;
height: 100%;
width: 100%;
}
#learn {
text-align: center;
padding-top: 3em;
}
#footer_container a {
color:white;
}
#signin {
display: block;
width: 100%;
position: absolute;
bottom: 10%;
margin-right: auto;
margin-left: auto;
}
#signin div {
text-align: center;
}
Just make a big circle and hide it :)
Demo: http://jsfiddle.net/Ye35w/1/
body {
overflow: hidden;
}
.circle {
position: absolute;
top: 65%;
left: -25%;
display: block;
width: 150%;
height: 150%;
background-color: #ccc;
border-radius: 50%;
}