Border disappears, when I use rotateX on element - javascript

I am trying to create a rotating ellipse (<div> with border-radius: 100%;) and I would like to border has a same width always. However, border disappears when element rotating:
It could be border to have the same width regardless of the rotateX? Thank you for your answers.
EDIT:
GCyrillus, I thought something similar, but I cannot write values of border-width ​​manually. Ellipse rotates lineary using JavaScript:
window.onload = function() {
var ellipse = document.getElementById('ellipse');
var angle = 0;
setInterval(function() {
angle++;
ellipse.style.transform = 'rotateX(' + angle + 'deg)';
}, 20);
};
section {
perspective: 1000px;
}
#ellipse {
border: 1px solid black;
border-radius: 100%;
height: 300px;
margin-bottom: 20px;
position: relative;
width: 500px;
}
<section>
<div id="ellipse"></div>
<section>

Because of rotation, everything becomes thinner, so do the borders.
You can give a test increasing them. Example with a shadow:
section {
perspective: 1000px;
}
div {
background-color: lightgreen;
border: 1px solid black;
border-radius: 100%;
height: 100px;
margin-bottom: 20px;
position: relative;
width: 200px;
}
#rotate45 {
transform: rotateX(70deg);
box-shadow:0 2px 1px , 0 -2px 1px;
}
#rotate90 {
transform: rotateX(90deg);
box-shadow:0 7px 2px , 0 -7px 2px;
}
<section>
Rotate 0°, it's OK:
<div id="rotate0"></div>
Rotate 45°, border is dashed:
<div id="rotate45"></div>
Rotate 90°, border is almost invisible:
<div id="rotate90"></div>
<section>
edit from your comment.
If you include border thickness (or shadow) as well while rotation happens, it should help :
section {
perspective: 1000px;
}
div {
background-color: lightgreen;
border: 1px solid black;
border-radius: 100%;
height: 100px;
margin-bottom: 20px;
position: relative;
width: 200px;
transition:1s;
}
#rotate45:hover {
transform: rotateX(70deg);
box-shadow:0 2px 1px , 0 -2px 1px;
}
#rotate90:hover {
transform: rotateX(90deg);
box-shadow:0 7px 2px , 0 -7px 2px;
}
<section>
Rotate 0°, it's OK:
<div id="rotate0"></div>
Rotate 45°: <i>hover it to see transition on transition and shadow</i>
<div id="rotate45"></div>
Rotate 90°: <i>hover it to see transition on transition and shadow</i>
<div id="rotate90"></div>
<section>

Related

Cover or hide the top of box-shadow so 3 sides are shown?

I currently have a div that when hovered shows another div in it's place, the div shown in it's place has a box-shadow of 1 px on all sides, I am trying to cover the top shadow line so that the shadow is only shown on the left, right and bottom.
Edit: I would like the shadow to remain on all 4 sides but to be covered by a div on the top. Not the vertical axis changed. I'm wondering if this is possible.
http://jsfiddle.net/8yeh9cw6/
Is this possible to cover or will it always bring the shadow to the top of anything? Ideally with pure css, otherwise is it possible with jquery or javascript?
Hello Try the code below i have added some jQuery
$(".hoveredItem").mouseover(function(){
$(this).css({
"box-shadow":"0px 6px 10px rgba(0,0,0,0.9)"
});
});
.shoptitle {overflow:hidden; background-color:#FFF; padding:15px;}
.parentItem{ height:200px; background-color:#e7e7e7; float:left; margin-left:1px; margin-bottom:1px; }
.I33{width:33.2%; }
.hoveredItem{opacity:0;transition:opacity 0s 0.2s ;position:relative; background-color:#FFF; width:100%; height:200px; /* box-shadow: 0px 1px 1px rgba(0,0,0,0.2); */}
.itemDisplay{ opacity:1;transition:opacity 0s 0.2s;position:relative;}
.parentItem:hover .hoveredItem {opacity:1; }
.parentItem:hover .itemDisplay{opacity:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shoptitle">Cover top shadow</div>
<div class="parentItem I33">
<div class="itemDisplay"></div>
<div class="hoveredItem">hai</div>
</div>
a simplistic solution you can nudge shadow on y-axis
.shoptitle {
overflow: hidden;
background-color: #FFF;
padding: 15px;
}
.parentItem {
height: 200px;
background-color: #e7e7e7;
float: left;
margin-left: 1px;
margin-bottom: 1px;
}
.I33 {
width: 33.2%;
}
.hoveredItem {
opacity: 0;
transition: opacity 0s 0.2s;
position: relative;
background-color: #FFF;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.9);
width: 100%;
height: 200px;
/* box-shadow: 0px 1px 1px rgba(0,0,0,0.2); */
}
.itemDisplay {
opacity: 1;
transition: opacity 0s 0.2s;
position: relative;
}
.parentItem:hover .hoveredItem {
opacity: 1;
}
.parentItem:hover .itemDisplay {
opacity: 0;
}
<div class="shoptitle">Cover top shadow</div>
<div class="parentItem I33">
<div class="itemDisplay"></div>
<div class="hoveredItem">hai</div>
</div>
more correct solution.. refer
CSS box-shadow on three sides of a div?

How to create loader filling dots background as animation?

Dots on this img should be filling background. Only jquery animation. How to create this? Canvas? Any ideas?
Try this jsfiddle.net, simply change your logic by defining how and when to change opacity.
CSS
.circleBase {
border-radius: 50%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
opacity: 0;
// filter: alpha(opacity=0); /* For IE8 and earlier */
}
.type1 {
width: 100px;
height: 100px;
background: yellow;
border: 3px solid red;
}
.type2 {
width: 50px;
height: 50px;
background: #ccc;
border: 3px solid #000;
}
.type3 {
width: 500px;
height: 500px;
background: aqua;
border: 30px solid blue;
}
JS
$('.circleBase').each(function(index){
// add your opacity logic here - when and how to change it
var el = this;
setTimeout(function(){
$(el).fadeTo('slow', 0.8);
}, Math.floor(Math.random() * 1000))
})
HTML
<div class="circleBase type1"></div>
<div class="circleBase type2"></div>
<div class="circleBase type2"></div>
<div class="circleBase type3"></div>

Prevent click action for div if the border of the div is clicked

I'm trying to build a replica of the Simon game with HTML, CSS and Javascript.
The design I have is nowhere near the final state, but I have the basic layout in place:
Each of the colored buttons (Green, Red, Yellow and Blue) have respective click events and I'm testing them out with console.log statements.
Here is the relevant section from the code:
$(document).ready(function() {
$('.center-buttons').click(function() {
event.stopPropagation();
console.log("Inner Click!");
});
$('#top-left').click(function() {
console.log('left click.');
});
$('#top-right').click(function() {
console.log('right click.');
});
$('#bottom-left').click(function() {
console.log('bleft click.');
});
$('#bottom-right').click(function() {
console.log('bright click.');
});
});
.main-area {
height: 700px;
width: 700px;
border-radius: 50%;
background-color: ;
margin: 0px auto;
padding: 20px;
}
.wrapper {
position: relative;
top: -5px;
}
.center-buttons {
height: 370px;
width: 370px;
border: 15px solid #444;
border-radius: 50%;
background-color: black;
margin: 0px auto;
position: relative;
top: -550px;
}
#top-row {
display: flex;
}
#bottom-row {
display: flex;
}
.main-button {
height: 310px;
width: 310px;
border: 20px solid #444;
}
#top-left{
background-color: #00994d;
border-radius: 100% 0 0 0;
right: 50%;
margin: 0px 5px 5px 0px;
}
#top-right{
background-color: #990000;
left: 50%;
border-radius: 0 100% 0 0;
margin: 0px 0px 5px 5px;
}
#bottom-left {
background-color: yellow;
left: 50%;
border-radius: 0 0 0 100%;
margin: 5px 5px 0px 0px;
}
#bottom-right {
background-color: #004d99;
left: 50%;
border-radius: 0 0 100% 0;
margin: 5px 0px 0px 5px;
}
<div class = 'main-area'>
<div class = 'wrapper'>
<div id = 'top-row'>
<div id = 'top-left' class = 'main-button'></div>
<div id = 'top-right' class = 'main-button'></div>
</div>
<div id = 'bottom-row'>
<div id = 'bottom-left' class = 'main-button'></div>
<div id = 'bottom-right' class = 'main-button'></div>
</div>
</div>
<div class = 'center-buttons'></div>
</div>
In the CSS, each colored button has a thick gray border.
The main question: When the borders of any of the buttons are clicked, is there a way to prevent the click event for the respective button from happening.
Thanks.
I have tried to achieve with my own HTML and CSS, but you can change accordingly.
If .parent is clicked, I am taking note of it and then checking it with .child click.
WORKING FIDDLE
HTML
<div class=parent>
<div class=child>
</div>
</div>
CSS
.parent{
display:table-cell;
width:300px;
height:300px;
vertical-align:middle;
text-align:center;
padding:15px;
background-color:red
}
.child{
display:inline-block;
width:300px;
height:300px;
background-color:blue
}
JQUERY
$(document).ready(function(){
var flag=false;
$(".parent").click(function(){
flag=true;
});
$(".child").click(function(e){
if(flag==false){
alert("CHILD IS ALIVE");
}
});
});
actually, border is not another html element but it belongs to div itself. so, there is no way to avoid a click on border if click event is applied on its div.
If you really need a border of that width, you can have a div inside a div,.
Keep the background color of outside div to your border color and color of inside div as red/green/blue/yellow.
Then you can apply click event on the inside div which will solve your problem

Active Page Triangle Marker in CSS

I'm looking to create an active page marker like the one pictured. The title probably doesn't do a great job of describing what I'm trying to do here.
What I'm looking for is a border that has an curved triangle active page marker using CSS.
Here is a simple solution using to <div> tags only.
Setting the width of both container wil set the triangle on different placeses.
body {
margin:0;
width: 100%;
}
* {
box-sizing: border-box;
}
.right {
float: left;
border-bottom: 5px solid black;
width: 50%;
height: 100px;
border-radius: 0 0 40px 0;
}
.left {
float: right;
border-bottom: 5px solid black;
width: 50%;
height: 100px;
border-radius: 0 0 0 40px;
}
<div class="right"></div>
<div class="left"></div>
This is a relatively simple way to achieve the result using a single corner border radius on two small divs with a bottom border - to move the 'triangle', you only need to adjust the left position of the `container' element. It's not perfect, as the border fades towards the tip of the pointer, but it may pass the aesthetics test:
#line {
border-bottom: 3px solid #888888;
position: relative;
width: 500px;
height: 53px;
}
#container {
position: absolute;
bottom: -2px;
left: 200px;
width: 100px;
background: #ffffff;
}
#left,
#right {
float: left;
border-bottom: 3px solid #888888;
height: 50px;
}
#left {
width: 50px;
border-radius: 0 0 50% 0;
}
#right {
width: 50px;
border-radius: 0 0 0 50%;
}
<div id="line">
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
EDIT: The display in the sandbox seems to be inconsistent - here's a FIDDLE
You could play with before, after & border-radius to achieve it.
See an example here: http://codepen.io/anon/pen/RNqPpy

How would I fix elements moving due to an element animating above?

I am getting an error with my website. I cannot seem to figure out why the 3 buttons below the title images are moving while the 2nd title picture is animating. My goal is to get the 3 buttons below the titles to stay where they are when the title2 is animating. The animation is a constant shrink/grow and is called pulse. Here is all of my code, its messy but this is just for me to learn.
<!DOCTYPE html>
<html>
<head>
<title>Test Website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="scripts/snow.js"></script>
<style type="text/css">
body
{
background-color: black;
background-image: url("res/bg.png");
background-repeat: no-repeat;
}
div.button1
{
width: 600px;
position: static;
height: 150px;
margin: 30px 50px;
background-image: url("res/button1.png");
border: 1px solid #FF0030;
border-radius: 55px;
/*opacity:0.4;*/
/*filter:alpha(opacity=40);*/
}
div.button2
{
width: 600px;
height: 150px;
margin: 30px 50px;
background-image: url("res/button2.png");
border: 1px solid #00B7FF;
border-radius: 55px;
/*opacity:0.4;*/
/*filter:alpha(opacity=40);*/
}
div.button3
{
width: 600px;
height: 150px;
margin: 30px 50px;
background-image: url("res/button3.png");
border: 1px solid #00FFD5;
border-radius: 55px;
/*opacity:0.4;*/
/*filter:alpha(opacity=40);*/
}
div.button1:hover
{
transition: all 0.2s ease-in;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
box-shadow: 1px 0px 20px #000000;
border: 2px solid #FF0030;
}
div.button2:hover
{
transition: all 0.2s ease-in;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
box-shadow: 1px 0px 20px #000000;
border: 2px solid #00B7FF;
}
div.button3:hover
{
transition: all 0.2s ease-in;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
box-shadow: 1px 0px 20px #000000;
border: 2px solid #00FFD5;
}
#seventyfive{
font-size:100px;
font-weight:bold;
}
</style>
</head>
<body>
<center>
<img src="res/title.png"</img>
<img id="seventyfive"; src="res/title2.png"</img>
</br>
<div class="button1">
</div>
<div class="button2">
</div>
<div class="button3">
</div>
</center>
</body>
</html>
<script>
$(document).ready( function(){
$.fn.snow({ minSize: 8, maxSize: 15, newOn: 390, flakeColor: '#C800FF' });
});
(function pulse(back) {
$('#seventyfive').animate(
{
'font-size': (back) ? '100px' : '160px',
height: (back) ? "60%" : "50%",
width: (back) ? "60%" : "50%",
}, 700, function(){pulse(!back)});
})(false);
</script>
Thank you for reading my question, I am open to any answers/suggestions. Thank you all!
The vertical placement is going to be based on the size of whatever is above the items. So, if the item above it is 100px, then the button below will be at position 100px + margin-bottom. When that item is 200px, the button below will start at 200px + margin-bottom.
What you want is a div around your image tag that doesn't change size.
<div style="width: 500px; height: 500px">
<img id="seventyfive"; src="res/title2.png"</img>
</div>
PS, look into css animations vs. jquery.
Try
#seventyfive{
font-size:100px;
font-weight:bold;
position:absolute;
}
I'm not making any promises on it. Tried to run it through a fiddle first, but the pulse wasn't working. If that doesn't work then you could also try
CSS
.seventyfive {
position:absolute;
}
HTML
<div class="seventyfive">
<img src="res/title.png">
<img id="seventyfive"; src="res/title2.png">
</div>

Categories