i can't do somethings with css in tidesdk
I tried to do a css circles, i'm using 1.3.1-beta, but it doesn't work, i don't know what i'm doing wrong.
Can you help me?
<html>
<head>
<title>Sample</title>
<link href="style.css" type="text/css" rel="stylesheet" media="screen" />
</head>
<body>
<div id="advanced" class="circle"></div>
</body>
</html>
and i use this
.circle {
border-radius: 50%;
display: inline-block;
margin-right: 20px;
}
#advanced {
width: 200px;
height: 200px;
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
-webkit-animation-name: spin;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 3s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
i used this in chrome and this work but not in tidesdk app
Edit:
I found this old method to do blur, it's not conventional, but it looks like TideSDK does'nt accept css3 =(
HTML:
<div id="container">
<div />
<div class="blur" />
</div>
CSS:
#container{ overflow: hidden; position: relative; width: 200px;
height: 200px;}
#container div{
position: absolute;
left: 0;
top: 0;
z-index: 0;
width: 200px;
height: 200px;
border-radius: 40px;
background: orange;
}
#container div.blur:hover{opacity: 0.6; background: white;}
#container div.blur{opacity: 0; }
It seems tideSDK have problems with percentage border radius and the new gradient syntax -webkit-radial-gradient. I suggest you to use the old syntax for the gradient. You can find the working code sample below. Modify the colors and the color positions as you wish.
.circle {
-webkit-border-radius: 100px;
display: inline-block;
margin-right: 20px;
}
#advanced {
width: 200px;
height: 200px;
background: -webkit-gradient(radial, 40% 40%, 20, 50% 50%, 250, from(yellow), to(red));
}
For more information about -webkit-gradient syntax, read this article.
Related
I'm trying to create a text highlight animation in css like the one in this gif. From left to right continuously.
I tried this
<p>
The <span class="test">world</span>
</p>
.test {
background: linear-gradient(to top, red 50%, transparent 50%);
animation-name: highlight;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#keyframes highlight {
0% {
background-size: 0;
background-position: -100%, 0;
}
50% {
background-size: 100%;
background-position: 100%, 100%;
}
}
But it's giving some weird glitch effect instead. What am I doing wrong and how to achieve this?
You will need to use a pseudo element (preferably :after) and play around with the width of that pseudo element.
.test {
position: relative;
}
.test:after {
content: "";
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
z-index: -1; /* Place the pseudo element right under the content */
top: 0;
left: 0;
background: linear-gradient(to top, red 50%, transparent 50%);
animation-name: highlight;
animation-duration: 0.75s;
animation-iteration-count: infinite;
animation-direction: alternate; /* Make the animation run back and forth */
}
#keyframes highlight {
0% {
width: 0;
opacity: 0;
}
50% {
width: 100%;
opacity: 1;
}
}
<p>
The <span class="test">world</span>
</p>
References:
Pseudo elements :after
I am trying to build a shimmer loader with CSS3 keyframes animation inside shadow DOM. The shimmer works perfectly in Chrome & Safari, but the animation does not work in Firefox.
Here is a small snippet to reproduce the behaviour.
document.getElementById('myDiv').attachShadow({mode:'open'}).innerHTML = `
<div id="myInnerDiv" class="shimmer">
Some text here
</div>
<style>
#myInnerDiv {
max-width: 200px;
min-height: 200px;
}
.shimmer {
background: #f2f3f4 linear-gradient(to right, #f2f3f4 0%, #e2e4e9 20%, #f2f3f4 40%, #f2f3f4 100%) no-repeat !important;
background-size: 100% 100% !important;
color: rgba(0, 0, 0, 0) !important;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeholderShimmer;
animation-timing-function: linear;
}
#keyframes placeholderShimmer {
0% {
background-position: -200px 0;
}
100% {
background-position: 200px 0;
}
}
</style>
`
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head></head>
<body>
<div id="myDiv"></div>
</body>
</html>
Animation works only this is a problem with your example. The following example animates the background color and it works in firefox.
document.getElementById('myDiv').attachShadow({
mode: 'open'
}).innerHTML = `
<div id="myInnerDiv" class="shimmer">
Some text here
</div>
<style>
#myInnerDiv {
max-width: 200px;
min-height: 200px;
}
.shimmer {
background-size: 100% 100% !important;
color: rgba(0, 0, 0, 0) !important;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeholderShimmer;
animation-timing-function: linear;
}
#keyframes placeholderShimmer {
0% {
background: red;
}
100% {
background: blue;
}
}
</style>
`
<div id="myDiv"></div>
Too much !important :) Remove important from .shimmer -> background
document.getElementById('myDiv').attachShadow({ mode: 'open' }).innerHTML = `
<div id="myInnerDiv" class="shimmer">
Some text here
</div>
<style>
#myInnerDiv {
max-width: 200px;
min-height: 200px;
}
.shimmer {
background: #f2f3f4 linear-gradient(to right, #f2f3f4 0%, #e2e4e9 20%, #f2f3f4 40%, #f2f3f4 100%) no-repeat;
background-size: 100% 100% !important;
color: rgba(0, 0, 0, 0) !important;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeholderShimmer;
animation-timing-function: linear;
}
#keyframes placeholderShimmer {
0% {
background-position: -200px 0;
}
100% {
background-position: 200px 0;
}
}
</style>
`
<div id="myDiv"></div>
Demo on CodePen
<pre>
.parent
border: 1px solid tomato
height: 300px
margin: 0 auto
margin-top: 30px
width: 80%
.box
width: 50px
height: 50px
position: absolute
animation-name: falling
animation-iteration-count: infinite
.box-1
background-color: lightblue
right: 60vw
animation-duration: 6s
#keyframes falling
0%
top: -10vh
100%
top: 90vh
.box-2
background-color: lightgreen
right: 70vw
animation-duration: 8s
#keyframes falling
0%
top: -10vh
100%
top: 90vh
</pre>
As you can see in the demo, the animation speed of the cube is slowing down the closer it gets to the bottom.
I'd like to make animation the same speed during the fall.
Thank you.
The default animation-timing-function in CSS is ease - accelerate in the start, slow after the middle. You need a linear timing function, that has a constant speed.
Change the box timing function to linear (pen):
.box
width: 50px
height: 50px
position: absolute
animation-name: falling
animation-iteration-count: infinite
animation-timing-function: linear
You can use animation function linear. Have a look at the snippet below:
.parent {
border: 1px solid tomato;
height: 300px;
margin: 0 auto;
margin-top: 30px;
width: 80%;
}
.box {
width: 50px;
height: 50px;
position: absolute;
animation-name: falling;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.box-1 {
background-color: lightblue;
right: 60vw;
animation-duration: 6s;
}
#keyframes falling {
0% {
top: -10vh;
}
100% {
top: 90vh;
}
}
.box-2 {
background-color: lightgreen;
right: 70vw;
animation-duration: 8s;
}
#keyframes falling {
0% {
top: -10vh;
}
100% {
top: 90vh;
}
}
<div class="parent">
<div class="box box-1"></div>
<div class="box box-2"></div>
</div>
Hope this helps!
New to coding here. I'm practicing with CSS, and I'm trying to create a simple animation. The twist: I want the height of a div to change, but the animation anchors the height change at the top of the div, and I need it to anchor at the bottom. I've been looking around and saw the transform-origin element, but that doesn't seem to help, as it is not a transform, but a change in height. I also tried rotating the div 180degrees but that didn't work either.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<style>
.rowleteyeleft {
height: 100px;
width: 50px;
border-radius: 50%;
background-color: hsl(46, 6%, 21%);
position: relative;
right: -70px;
top: 70px;
overflow:hidden;
animation-name: blinkleft;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction:alternate;}
#keyframes blinkleft {
to {height: 10px}
</style>
</head>
<body>
<div class="rowleteyeleft"></div>
</body>
</html>
What do I need to add to it to get the height to anchor at the bottom?
Use Pseudo-elements
.rowleteyeleft {
height: 100px;
width: 50px;
position: relative;
right: -70px;
top: 70px;
overflow: hidden;
}
.rowleteyeleft:before {
content:"";
position:absolute;
bottom: 0;
border-radius: 50%;
width:100%;
height:100%;
background-color: hsl(46, 6%, 21%);
animation-name: blinkleft;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes blinkleft {
to {
height: 10px
}
}
<div class="rowleteyeleft"></div>
This demo shows you what is doing on behind the animation
.wrapper {
height: 100px;
width: 50px;
left: 70px;
top: 70px;
position: relative;
/*this help us animate the child from the bottom*/
overflow: hidden;
border: 1px dashed hsl(46, 6%, 21%);
}
.rowleteyeleft {
height: 10px;
width: 100%;
left: 0;
bottom: 0px;
position: absolute;
border-radius: 50%;
background-color: hsl(46, 6%, 21%);
animation-name: blinkleft;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes blinkleft {
to {
height: 100px
}
}
<div class=wrapper><!--give your animated element a parent-->
<div class="rowleteyeleft"></div>
</div>
I was earlier having problem with gradiens in firefox. I then placed the background: -moz-linear-gradient(left,red,blue); in the DIV instead of #keyframes changeSizeAndColor{} Now my problem is that it doesn´t change from blue to red instead it´s (red and blue ) all the time.
here the code:
#fifth-div{
position: absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
text-align: center;
font-family: helvetica;
font-size: 5px;
background-color: blue;
width: 200px;
height: 200px;
animation-name: changeSizeAndColor;
animation-duration: 3s;
animation-iteration-count: infinite;
-webkit-animation: changeSizeAndColor 5s infinite; /* Chrome, Safari, Opera */
animation: changeSizeAndColor 5s infinite;
background: -webkit-gradient();
background: -moz-linear-gradient(left,red,blue);
This(below) is how I originaly started out. Didn´t got my anywhere att all. Then I added as said above this line of code: background: -moz-linear-gradient(left, red, blue); in the css(in the div) and I got the radient working but not the shifting from only blue to radient(blue&red)(It just shows upp radient without the shifting from only blue to radient(red&blue) as in the other browsers.
#keyframes changeSizeAndColor {
from {
width: 200px;
height: 200px;
background-color: blue;
font-size: 5px;
}
to {
width: 300px;
height: 300px;
font-size: 25px;
background: -webkit-linear-gradient(left, red, blue);
background: -o-linear-gradient(right, red, blue);
background: repeating-linear-gradient(right, red, blue);
background image: -moz-linear-gradient(left, red, blue);
}
The most reliable way to change backgrounds, and the only working for all the browsers, is modifyng the position.
To apply this to your case, set a gradient in front of the stripped one, that changes from blue to transparent.
then , animate the position of this layer
#test {
width: 100px;
height: 100px;
animation: gradient 2s infinite;
background-image: linear-gradient(to top, blue, transparent),
repeating-linear-gradient(red, lightgreen 20%);
background-size: 100% 2000%, 100% 100%;
background-position: top center, top center;
}
#keyframes gradient {
0% {background-position: bottom center, top center;}
100% {background-position: top center, top center;}
}
<div id="test"></div>