Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Is there a way we can fill color of css semi-circle in an incremental way in anticlockwise direction like a progress bar.
Here is the semi-circle code. https://jsfiddle.net/sonymax46/wqfovdjh/7/.
.cc{
background-color: transparent;
overflow: hidden;
width: 80px;
}
.curve {
height: 60px;
width: 100%;
background-color: none;
border-radius: 50%;
border: 2px solid blue;
transform: translateX(50%);
}
I want existing blue colour to be filled with Green on an event. How to achieve this with css O SVG
Thank in Advance
Option A is to use a container that cut's off a circular element and a pseudo-class as a "mask" over the top of the circle. Then a gradient background shows the other color when the element is rotated.
The major drawback to this is you have to have a solid color background that the overlay can match visually.
.wrapper {
margin: 20px;
width: 200px;
height: 200px;
overflow: hidden;
/* just to show the box could be transparent */
background-color: lightgray;
cursor: pointer;
}
.arc {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
/* Use relative on parent so mask aligns */
left: 50%;
/* Move the circle 'outside' the wrapper */
background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
transition: transform 1s ease;
}
.arc:after {
/* this creates the 'mask' */
content: '';
position: absolute;
width: 90%;
height: 90%;
top: 5%;
left: 5%;
background-color: white;
border-radius: 50%;
}
.wrapper:hover .arc {
/* rotate the full element because we can't transition backgrounds */
transform: rotate(-180deg);
}
.gradientExample {
/* just to show the gradient */
height: 20px;
width: 200px;
margin: 0 20px;
background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
}
p {
font-family: Sans-Serif;
font-size: 14px;
margin: 20px 20px 0 20px;
}
<p>Hover over the arc</p>
<div class="wrapper">
<div class="arc"></div>
</div>
<div class="gradientExample"></div>
Option B - Use a clip-path instead of overlapping elements. This is much better but you need to create an SVG object to use for the arc and that's a pain from a sizing standpoint.
.wrapper {
margin: 20px;
width: 200px;
height: 200px;
overflow: hidden;
background-color: lightgray;
cursor: pointer;
}
.svgArc {
width: 100%;
height: 100%;
position: relative;
clip-path: url(#svgPath);
}
.svgArc:after {
/* have to use a pseudo element because we can't rotate the background */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
transition: transform 1s ease;
}
.v2:hover .svgArc:after {
transform: rotate(180deg);
}
p {
font-family: Sans-Serif;
font-size: 14px;
margin: 20px 20px 0 20px;
}
<p>Hover over the gray square</p>
<div class="wrapper v2">
<div class="svgArc">
</div>
</div>
<svg width="0" height="0" viewBox="0 0 200 200">
<defs>
<clipPath id="svgPath">
<path fill="#000000" stroke="#ffffff" stroke-width="1" d="M100,0 L100,10 L100,10 C50.2943725,10 10,50.2943725 10,100 C10,149.705627 50.2943725,190 100,190 L100,200 L100,200 C44.771525,200 0,155.228475 0,100 C0,44.771525 44.771525,0 100,0 Z"></path>
</clipPath>
</defs>
</svg>
Option C - Create an SVG circle and animate the offset-path. See my answer and example here: How to make linear css transition to SVG path?
maybe with css custom variables ?
const Root = document.documentElement
, btColor = document.getElementById('bt-color')
;
btColor.onclick=_=>
{
Root.style.setProperty('--bColor', 'green')
}
:root {
--bColor : blue;
}
.cc{
background-color: transparent;
overflow: hidden;
width: 80px;
}
.curve {
height: 60px;
width: 100%;
background-color: none;
border-radius: 50%;
border: 2px solid var(--bColor);
transform: translateX(50%);
}
<div class="cc">
<div class="curve"></div>
</div>
<br>
<button id="bt-color">change color</button>
Related
I am trying to make a floating 'Scroll down' button. For the first part, I am trying to add the button to a page. This is what I did:
ContentScript.js
document.body.onload = addElement;
function addElement () {
var stb = document.createElement("button");
stb.className = "stb";
document.body.appendChild(stb);
}
scrolldownbutton.css
.stb {
position: fixed;
display: block;
bottom: 50px;
right: 20px;
z-index: 10001;
width: 37px;
height: 37px;
padding: 0;
font-size: 24px;
text-align: center;
line-height: 1;
cursor: pointer;
border-radius: 19px;
text-decoration: none;
transition: opacity 0.7s ease-out;
opacity: 0;
background: url(tobottom.png) rgba(1, 96, 121, 1) no-repeat 50% 50%;
color: rgba(255, 255, 255, 1.00);
box-shadow:0 4px 10px rgba(0, 0, 0, 0.3);
}
However, I can't see any button added. Can someone tell me what is wrong with my code? I am still new to javascript and css, so any help will be welcome!
On the .stb css class, remove the opacity: 0;
I moved a page from my old site to my new one, and cannot for the life of me figure out why the CSS isn't working.
https://ericaheinz.com/art/turrell/
It should have 5 concentric white ovals in the middle. I've inspected everything, the divs and CSS are there but they won't show up.
Here's the JS/CSS/HTML
// color looping
// http://forrst.com/posts/Endlessly_Looping_Background_Color_jQuery_Functi-ey7
var colors = new Array('#077bf4', '#9554d6', '#e62e5c', '#ff9466', '#CCCCCC', '#ffbe0a', '#46b3f2', '#70dab3', '#af93af', '#e51717', '#ffd1d9');
var color_index = 0;
var interval = 3000;
function bg_color_tween() {
$('body').animate({ backgroundColor: colors[color_index] }, interval, 'linear', function() {
if(color_index === colors.length) { color_index = 0; }
else { color_index++; }
bg_color_tween();
});
}
// rotation
$(document).ready(function() {
bg_color_tween();
$('.turrell').each(function(){
var r=Math.floor(Math.random()*90);
$('.carton').css({
'-moz-transform':'rotate('+r+'deg)',
'-webkit-transform':'rotate('+r+'deg)',
'transform':'rotate('+r+'deg)'
});
var t=Math.floor(Math.random()*10)+2;
var l=Math.floor(Math.random()*7)+3;
$('.egg').css({
'top':t+'%',
'left':l+'%'
});
});
});
.carton {
height: 95%;
width: 90%;
margin-left: 10%;
text-align: center;
position: relative;
z-index: -10;
}
.egg {
height: 76%;
width: 80%;
position: relative;
top: 12%;
left: 10%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
-moz-box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
-webkit-box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
color: #FFF;
}
.art-caption {
position: absolute;
bottom: 20px;
left: 3.5%;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
line-height: 13px;
margin: 0;
padding: 0;
}
.art-caption a {
color: #FFF;
opacity: .3;
transition: all 0.25s ease-in-out;
}
.art-caption a:hover {
opacity: .8;
}
<body class="turrell">
<div class="container">
<div class="carton">
<div class="egg">
<div class="egg">
<div class="egg">
<div class="egg">
<div class="egg">
<!-- THE LIGHT -->
</div>
</div>
</div>
</div>
</div>
</div>
<h6 class="art-caption">Homage to <em>Aten Reign</em> by James Turrell</h6>
</div>
</body>
You're missing "height" attributes in html, body and .container div. If you inspect, they had height 0 which simply do not display them.
If i added height: 100% to all of them, this is what i saw:
So I'm working on porting an animation of clouds from css animation to a js animation using TimelineMax. however, I've always found myself problems with Timeline[Max/Lite]. This time is quite the same. I've gone over the docs, but can't seem to find the problem. is there anything i'm missing from the arguments I pass or other parts of my code. any suggestions help as this is preventing me from moving forwards. thanks!
just to clarify, the animation is means to be a looped animation clouds moving back and forth across the screen
let clouds = [],
cloudTLs = [],
cloudSpeeds = [
null,
9,
9.5,
8
];
// if( clouds.length > cloudSpeeds.length ){
// let cloudSpeedsExtended = f();
// cloudSpeeds = assignSpeedToUndeclaredClouds()
// }
//retrieve and store clouds
let cloudContainers = document.getElementsByClassName("cloud-container");
cloudContainers = Array.from(cloudContainers);
clouds.push( null, ...cloudContainers )
for(let i = 1; i < clouds.length; i++){
let tl = new TimelineMax({repeat:-1});
tl.to( `#cloud-${i}`, 9, { transform:"translateX(94vw)", /*ease:power0.easeNone*/ } )
tl.to( `#cloud-${i}`, 9, { transform:"translateX(0vw)", /*ease:power0.easeNone*/ } )
tl.play()
cloudTLs.push(tl)
}
body {
overflow: hidden;
background-color: blue;
height: ;
width: ;
}
.cloud {
background: #fff;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(5%, #fff),
color-stop(100%, #f1f1f1)
);
background: -webkit-linear-gradient(top, #fff 5%, #f1f1f1 100%);
background: -o-linear-gradient(top, #fff 5%, #f1f1f1 100%);
background: -ms-linear-gradient(top, #fff 5%, #f1f1f1 100%);
background: linear-gradient(top, #fff 5%, #f1f1f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr="#fff",
endColorstr="#f1f1f1",
GradientType=0
);
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
/*change box shadow - need to make it thicker*/
top: 40%;
height: 54%;
position: relative;
width: 100%;
}
.cloud:after,
.cloud:before {
background: #fff;
content: "";
position: absolute;
z-index: -1;
}
.cloud:after {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
/* for left bumpe */
height: 110%;
width: 40%;
left: 14%;
top: -46%;
}
.cloud,
.cloud:before {
-webkit-box-shadow: 12px 20px 20px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 12px 20px 20px rgba(0, 0, 0, 0.5);
box-shadow: 12px 20px 20px rgba(0, 0, 0, 0.5);
}
.cloud:before {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
/*for right bumpe*/
width: 48%;
height: 150%;
right: 11%;
top: -75%;
}
.cloud-container {
display: block;
position: absolute;
/*positioning*/
/*keep this ratio*/
height: 5vw;
width: 7vw;
}
#cloud-1 {
top: 12%;
/* animation-duration: 18s; */
z-index: 17;
}
#cloud-2 {
top: 22%;
/* animation-duration: 19s; */
z-index: 17;
}
#cloud-3 {
top: 16%;
/* animation-duration: 16s; */
z-index: 17;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"></script>
<div id="cloud-1"class="cloud-container">
<div class="cloud"></div>
</div>
<div id="cloud-2" class="cloud-container">
<div class="cloud"></div>
</div>
<div id="cloud-3" class="cloud-container">
<div class="cloud"></div>
</div>
I need rounded unblur image effect by mouse hover on Image.
Like:
enter link description here (background)
Angular solution would be perfect, but jQuery or native JS is ok too. Any ideas ?
I've found solution below, but it is not work in some browsers (( In IE 11 image is not blurred.
$("body").on("mousemove", function(event) {
$("#blurarea").css({
top: event.clientY - 75,
left: event.clientX - 75
});
});
html, body { height: 100%; }
body { -webkit-transform: translate3D(0,0, 1px); }
.softarea {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(http://blog.360cities.net/wp-content/uploads/2013/01/Omid.jpg) no-repeat;
-webkit-filter: blur(8px);
filter: grayscale(0.5) blur(10px);
/*firefox only*/
filter:url(#example);
}
.blurarea {
width: 150px;
height: 150px;
border: 1px solid #fff;
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
0 0 7px 7px rgba(0, 0, 0, 0.25),
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
background: url(http://blog.360cities.net/wp-content/uploads/2013/01/Omid.jpg) no-repeat;
background-attachment: fixed;
border-radius: 50%;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<body>
<div id="softarea" class="softarea"></div>
<div id="blurarea" class="blurarea"></div>
<svg:svg>
<svg:filter id="example">
<svg:feGaussianBlur stdDeviation="2"/>
</svg:filter>
</svg:svg>
</body>
</html>
I have a canvas in the exact position of another div. I placed these one over the other intentionally.
I have to interact with the div to give input (input via mouse gesture) but the canvas which is right in the same place is not allowing me to give me input.
I can't place the canvas anywhere else because my output is the combination of response from canvas as well as the static elements in the div together.
This is my index.html
<div class="maincontainer">
<h2 id="heading" class="heading">Please set your password</h2>
<div id="patterncontainer" class="patterncontainer">
</div>
<canvas id="canvas" class="canvas"></canvas>
</div>
style.css
.patterncontainer {
margin-left: 32.5px;
position: absolute;
width: 225px;
height: 225px;
background: #66C285;
padding: 7.5px;
border-radius: 10px;
z-index: 1;
}
.canvas {
margin-left: 32.5px;
position: absolute;
left: 0px;
width: 225px;
height: 225px;
padding: 7.5px;
border-radius: 2px;
/*margin: 22.5px;*/
/*background-color: #FFF;*/
/*background-color: rgba(114, 160, 204, 1);*/
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
/*-webkit-box-shadow: 0px 0px 15px 5px rgba(114, 160, 204, 1);
-moz-box-shadow: 0px 0px 15px 5px rgba(114, 160, 204, 1);
box-shadow: 0px 0px 15px 5px rgba(114, 160, 204, 1);*/
/*display: none;*/
z-index: -1;
}
This is a part of my js file
var canvas = document.getElementById("canvas");
// canvas.style.display = inline;
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
ctx.fillStyle="#FF0000";
How can I interact with patterncontainer div while still having canvas in the same place?
Please do comment if any further information is necessary.
Tell the canvas not to listen for events so the events fall through to the div.
CSS:
canvas{pointer-events:none;}