I want to create a "X" with css spans and position absolute, but the spans aren't centered even if they should.
The container has the font-size of 1px. and a height and width of 100em. Therefore I can use 1em as 1% of the parents size.
I used transform-origin: 0px 5em; on the span, to rotate it without changing the starting point. The Element starts in 20% top and left (20em) and ends in 80% (top and left).
To get the required width i simply calculated: Square root( square of (60) * 2) (Pythagorean theorem) (60 because start and end 20 -- 100-20*2)
But for some reason the X is clearly not centered. Do you know what i did wrong?
body
{
margin: 0px;
}
.check
{
font-size: 1px;
position: relative;
height: 100em;
width: 100em;
background-color: white;
border-radius: 50%;
transition: .3s;
box-shadow: 0px 0px 10px red inset;
}
.check span
{
position: absolute;
display: block;
height: 10em;
width: 0px;
background-color: #00FF00;
transition:.3s;
}
.check.red span
{
background-color: #FF0000;
transform-origin: 0px 5em;
transform: rotate(45deg);
top: 20em;
left: 20em;
}
.check.red span:nth-of-type(2)
{
transform: rotate(135deg);
top: 20em;
left: 80em;
}
.check.red:hover span
{
width: 84.852813742em;
}
<body>
<div class="check red">
<span></span>
<span></span>
</div>
</body>
This isn't an automatic solution, but changing some values in your css i solved it:
body
{
margin: 0px;
}
.check
{
font-size: 1px;
position: relative;
height: 100em;
width: 100em;
background-color: white;
border-radius: 50%;
transition: .3s;
box-shadow: 0px 0px 10px red inset;
}
.check span
{
position: absolute;
display: block;
height: 10em;
width: 0px;
background-color: #00FF00;
transition:.3s;
}
.check.red span
{
background-color: #FF0000;
transform-origin: 0px 5em;
transform: rotate(45deg);
top: 18em;
left: 22em;
}
.check.red span:nth-of-type(2)
{
transform: rotate(135deg);
top: 18em;
left: 78em;
}
.check.red:hover span
{
width: 78em;
}
<body>
<div class="check red">
<span></span>
<span></span>
</div>
</body>
There are a few things you can do to make life easier here.
Firstly you can transform origin using a percentage, which means you don't need to calculate it yourself.
You can also position using a percentage, then offset using a transform (again with a percentage) to center no matter the size.
You can also set the width of the cross using a percentage, which will take it size from its parent.
Update:
Change the cross to animate from the top, rather than the center by using background gradients.
.check
{
position: relative;
height: 200px;
width: 200px;
background-color: white;
border-radius: 50%;
box-shadow: 0px 0px 10px red inset;
}
.check span
{
position: absolute;
display: block;
height: 20px;
width: 0%;
background: linear-gradient(to right, white 50%, red 50%);
background-size: 200% 100%;
background-position: left bottom;
top: 50%;
left: 50%;
transform-origin: center;
transition: background 0.3s ease;
}
.check.red span
{
transform: translate(-50%, -50%) rotate(-45deg);
}
.check.red span:last-child
{
transform: translate(-50%, -50%) rotate(-135deg);
}
.check.red:hover span
{
background-position: right bottom;
width: 70%;
}
<div class="check red">
<span></span>
<span></span>
</div>
Try this
use margin-top:-0.5rem;
.check span
{
position: absolute;
display: block;
height: 10em;
width: 0px;
background-color: #00FF00;
transition:.3s; margin-top:-0.5rem;
}
body
{
margin: 0px;
}
.check
{
font-size: 1px;
position: relative;
height: 100em;
width: 100em;
background-color: white;
border-radius: 50%;
transition: .3s;
box-shadow: 0px 0px 10px red inset;
}
.check span
{
position: absolute;
display: block;
height: 10em;
width: 0px;
background-color: #00FF00;
transition:.3s; margin-top:-0.5rem;
}
.check.red span
{
background-color: #FF0000;
transform-origin: 0px 5em;
transform: rotate(45deg);
top: 20em;
left: 20em;
}
.check.red span:nth-of-type(2)
{
transform: rotate(135deg);
top: 20em;
left: 80em;
}
.check.red:hover span
{
width: 84.852813742em;
}
<body>
<div class="check red">
<span></span>
<span></span>
</div>
</body>
Related
Here's a codepen
I have this structure
body {
background-color: #1e1f26;
color: #fff;
font-size: 20px;
}
.card {
color: white;
width: 150px;
background-color: lightblue;
position: relative;
z-index: 0;
height: 180px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 0 rgba(#000, 0.5);
transition: box-shadow 0.3s;
}
.card .description {
background-color: rgba(#fff, 0.5);
height: 100%;
box-sizing: border-box;
padding: 10px;
transition: 0.3s;
opacity: 0;
transform: translateY(10%);
}
.card:hover .description {
opacity: 1;
transform: translateY(0);
}
.card .label {
display: block;
position: absolute;
width: 100%;
transform: rotate(-45deg);
text-align: center;
bottom: 15%;
right: -30%;
background: #f31;
}
<div class="card">
<div class="description">
Lalala
</div>
<div class="label">
LABEL
</div>
</div>
Label is rotated -45 deg
Description has opacity: 0 by default, but on hover is shown
This works perfectly fine in chrome, butt in safari label text gets glitchy or somewhat blurry during the description transition.
What can cause this? Is there a fix?
When I animate a simple circle I get a weird flicker on the side - like something tryingh to push inside - and I can't figure out why. It also happens when I use keyframes to animate and on different browsers.
Any help appreciated.
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: #fff;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #E56262;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 3;
}
.circle {
background-color: #fff;
width: 100px;
height: 100px;
border-radius:50%;
box-shadow: 0px 0 15px 2px #424040;
position: relative;
z-index: 4;
transition: all 1s;
}
.circle:hover {
transform: scale(1.5);
}
#keyframes scaleMe {
0% {
transform: scale(0%);
}
50% {
transform: scale(100%);
}
100% {
transform: scale(0%);
}
}
<div class="frame">
<div class="center">
<div class="circle"></div>
</div>
</div>
I think your problem is similar to this. CSS Animation break transform
Removing the transform(-50%, -50%) remove the flickering, so I centered your div in another way and it look's ok.
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: #fff;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #E56262;
display: flex;
}
.center {
margin: auto;
z-index: 3;
}
.circle {
background-color: #fff;
width: 100px;
height: 100px;
border-radius:50%;
box-shadow: 0px 0 15px 2px #424040;
position: relative;
z-index: 4;
transition: all 1s;
}
.circle:hover {
transform: scale(1.5);
}
#keyframes scaleMe {
0% {
transform: scale(0%) translate(-50%,-50%);
}
50% {
transform: scale(100%) translate(-50%,-50%);
}
100% {
transform: scale(0%) translate(-50%,-50%);
}
}
<div class="frame">
<div class="center">
<div class="circle"></div>
</div>
</div>
I wanna make info box with this design.
This design is important to me. When mouse is over the circle, I need some animation and transform design to this...
jsFiddle Example :
.wrapper{
width:400px;
height:200px;
background: white;
position: relative;
}
.mask {
width: 100%;
height: 100%;
background: green;
background-size: cover;
transition: 0.4s ease;
clip-path: circle(80px at 50% 50%);
position: relative;
}
.mask:hover {
clip-path: circle(100% at 50% 50%);
}
.wrapper:after {
content: ' ';
display: block;
position: relative;
width: 160px;
height: 160px;
top: calc(-50% - 83px);
left: calc(50% - 83px);
border-radius: 50%;
background:transparent;
border: 3px solid #fff;
box-shadow: 0px 0px 6px #aaa;
pointer-events: none;
}
<div class="wrapper">
<div id="map-canvas" class="mask">
</div>
</div>
But I don't know how to hide the circle.
Is there any solution how to make and hide that circle with border and shadow ?
Try use transition and opacity for wrapper:after
You would want to transparent pseudo element after on hover and target it with .wrapper:hover:after.
.wrapper{
width:400px;
height:200px;
background: white;
position: relative;
}
.mask {
width: 100%;
height: 100%;
background: green;
background-size: cover;
transition: 0.4s ease;
clip-path: circle(80px at 50% 50%);
position: relative;
}
.mask:hover {
clip-path: circle(100% at 50% 50%);
}
.wrapper:after {
content: ' ';
display: block;
position: relative;
width: 160px;
height: 160px;
top: calc(-50% - 83px);
left: calc(50% - 83px);
border-radius: 50%;
background:transparent;
border: 3px solid #fff;
box-shadow: 0px 0px 6px #aaa;
pointer-events: none;
opacity:1;
transition: all 0.5s forwards ; /*added */
}
.wrapper:hover:after{
opacity:0 ; /*added */
}
<div class="wrapper">
<div id="map-canvas" class="mask">
</div>
</div>
also if you want some animation on hover out you can use bellow code:
.wrapper{
width:400px;
height:200px;
background: white;
position: relative;
}
.mask {
width: 100%;
height: 100%;
background: green;
background-size: cover;
transition: 0.4s ease;
clip-path: circle(80px at 50% 50%);
position: relative;
}
.mask:hover {
clip-path: circle(100% at 50% 50%);
}
.wrapper:after {
content: ' ';
display: block;
position: relative;
width: 160px;
height: 160px;
top: calc(-50% - 83px);
left: calc(50% - 83px);
border-radius: 50%;
background:transparent;
border: 3px solid #fff;
box-shadow: 0px 0px 6px #aaa;
pointer-events: none;
transition: all 0.5s ease-in ;
}
.wrapper:hover:after{
opacity:0 ;
transition: all 0.5s forwards ; /* added */
}
<div class="wrapper">
<div id="map-canvas" class="mask">
</div>
</div>
You can just unset the border and box-shadow on :hover and transition that change, too, if you want.
.wrapper{
width:400px;
height:200px;
background: white;
position: relative;
}
.mask {
width: 100%;
height: 100%;
background: green;
background-size: cover;
clip-path: circle(80px at 50% 50%);
position: relative;
}
.mask, .wrapper:after {
transition: 0.4s ease;
}
.wrapper:hover .mask {
clip-path: circle(100% at 50% 50%);
}
.wrapper:hover:after {
border: 0;
box-shadow: none;
}
.wrapper:after {
content: ' ';
display: block;
position: relative;
width: 160px;
height: 160px;
top: calc(-50% - 83px);
left: calc(50% - 83px);
border-radius: 50%;
background:transparent;
border: 3px solid #fff;
box-shadow: 0px 0px 6px #aaa;
pointer-events: none;
}
<br/>
<br/>
<div class="wrapper">
<div id="map-canvas" class="mask">
</div>
</div>
I am new in CSS HTML. I am trying to following thing with CSS. I have a png icon. Now I want to partially fill-up it with color from bottom to top like the link of the image.
Are you trying to achieve something like this?
I inserted a div (represents the filling) into your pin and set the position property to absolute. Further I changed the position property of the parent div which represents the pin to relative, now you can align your filling absolute but within its parent.
body,
html {
height :100%;
}
body {
background: #2F2F2F;
}
.pin {
width:30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: black;
position: relative;
transform: rotate(-45deg);
left: 50%;
top: 50%;
margin: -20px 0 0 -20px;
}
.pin-fill {
width :10px;
height: 10px;
background: yellow;
position: absolute;
border-radius: 50% 50% 50% 0;
transform: rotate(1 deg);
left: 0;
bottom: 0;
}
<div class='pin'>
<div class="pin-fill"></div>
</div>
EDIT
If you want your inner pin (.pin-fill) look like a filling, I would suggest to change your it's border-radius as following.
border-radius: 0 100% 0 0;
Snippet
body,
html {
height :100%;
}
body {
background: #2F2F2F;
}
.pin {
width:30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: black;
position: relative;
transform: rotate(-45deg);
left: 50%;
top: 50%;
margin: -20px 0 0 -20px;
}
.pin-fill {
width :10px;
height: 10px;
background: yellow;
position: absolute;
border-radius: 0 100% 0 0;
transform: rotate(1 deg);
left: 0;
bottom: 0;
}
<div class='pin'>
<div class="pin-fill"></div>
</div>
Here is an example with plain filling
body,
html {
height: 100%;
}
body {
background: #2F2F2F;
}
.pin {
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: black;
position: relative;
transform: rotate(-45deg);
left: 50%;
top: 50%;
margin: -20px 0 0 -20px;
}
.pin-fill {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid yellow;
position: absolute;
left: -5px;
bottom: 0px;
transform: rotate(45deg);
}
<div class='pin'>
<div class="pin-fill"></div>
</div>
I want to make only one rounded corner for a triangle but I'm unable to make it.
Here is my code:
.arrow-left {
width: 0;
height: 0;
border-top: 80px solid transparent;
border-bottom: 80px solid transparent;
border-right: 80px solid blue;
}
<div class="arrow-left"></div>
I need the corner pointing left to be rounded as shown in this image :
I know this is a little hacky, but I don't think there is an easy way to do this with a single class.
All I've done is rotated a box 45 degrees with border-radius:10px and then contained it in another div with width set to the desired width of your arrow and overflow:hidden so that everything that spills over is invisible.
.arrow-left {
position: absolute;
width: 100px;
height: 100px;
left: 20px;
background: black;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-radius: 10px;
}
.cover {
position: absolute;
height: 100px;
width: 40px;
overflow: hidden;
}
<div class="cover">
<div class="arrow-left"></div>
</div>
You can make a responsive triangle with one rounded corner with at least 2 approaches :
With CSS:
With one divand a pseudo element and:
absolute positioning
the padding technique to keep the triangle aspect ratio
2d transforms
overflow:hidden;
the transform technique to make the triangle
.arrow-left {
position: relative;
width: 15%;
padding-bottom:15%;
border-radius: 10px;
overflow: hidden;
transform-origin:100% 0;
transform: rotate(-45deg);
}
.arrow-left:after {
content: "";
position: absolute;
top: 0; right:8px;
width:100%; height:141%;
transform-origin:inherit;
transform: rotate(45deg);
background:#000;
}
<div class="arrow-left"></div>
Note that you need to add the vendor prefixes to the transform and transform-origin properties (more info on canIuse)
With inline SVG:
This example uses one path element for the triangle with a bezier curve command for the rounded corner (Q0 5 0.8 4.2 in the d attribute):
svg{
display:block;
width:10%;
}
<svg viewbox="0 0 5 10">
<path d="M5 0 V10 L0.8 5.8 Q0 5 0.8 4.2z" />
</svg>
You can try this and modify according to your needs.
http://jsfiddle.net/K44mE/947/
#player {
margin: 32px;
position: relative;
width: 400px;
height: 250px;
background-color: #222;
}
#inner {
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
background-color: silver;
width: 100px;
height: 100px;
top: 20px;
left: -60px;
position: relative;
-moz-border-radius: 20px;
border-radius: 20px;
}
#outer {
position: absolute;
top: 50px;
left: 165px;
width: 70px;
height: 140px;
overflow: hidden;
}
<div id="player">
<div id="outer">
<div id="inner"> </div>
</div>
</div>
use overflow: hidden;
.corner {
position: absolute;
border-radius: 4px;
overflow: hidden;
top: 0em;
right: 0em;
margin: 0em;
padding: 0em;
text-align: center;
border-color: #E8E8E8;
width: 4em;
height: 4em;
z-index: 1;
-webkit-transition: border-color 0.1s ease;
transition: border-color 0.1s ease;
}
.corner:after {
position: absolute;
content: "";
right: 0em;
top: 0em;
z-index: -1;
width: 0em;
height: 0em;
background-color: transparent !important;
border-top: 0em solid transparent;
border-right: 4em solid transparent;
border-bottom: 4em solid transparent;
border-left: 0em solid transparent;
border-right-color: inherit;
-webkit-transition: border-color 0.1s ease;
transition: border-color 0.1s ease;
}
to your code to add this
border-radius:10px