I am trying to apply the solution found in the this question, but it is not working in my case.
I want to bring the red circle above the green line.
.box{
border: 1px solid blue;
height: 100px;
position: relative;
width: 100px;
}
.dot{
background: red;
border-radius: 50%;
height: 30px;
width: 30px;
position: absolute;
right: -15px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.dot:after{
background: green;
content: '';
height: 100px;
width: 10px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: -1;
}
<div class="box">
<div class="dot"></div>
</div>
<div class="box">
<div class="dot"></div>
</div>
Can't you just make the red dot be an :after rather than the element styles itself?
.box{
border: 1px solid blue;
height: 100px;
position: relative;
width: 100px;
}
.dot {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 100%;
z-index: 1;
}
.dot:after{
background: red;
content: '';
border-radius: 50%;
height: 30px;
width: 30px;
position: absolute;
right: -15px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.dot:before{
background: green;
content: '';
height: 100px;
width: 10px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="box">
<div class="dot"></div>
</div>
<div class="box">
<div class="dot"></div>
</div>
Related
I have an svg icon for a website that I would like to make into a css shape so that I can make a custom effect on hover.
I am using pure CSS for this and am not sure I am approaching the problem correctly.
.wrapper {
position: relative;
height: 100vh;
}
.square {
height: 40px;
width: 40px;
background-color: black;
transition: all .2s;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.square:before {
content: "";
width: 100%;
height: 2px;
background-color: #fff;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.square:after {
content: "";
width: 100%;
height: 2px;
background-color: #fff;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform-origin: 50%;
transform: translate(-50%, -50%) rotate(90deg);
}
.square:hover {
transform: scale(1.2) translate(-50%, -50%);
}
.square:hover .square:before {
transform: scale(1.2);
}
.square:hover .square:before, .square:hover .square:after {
height: 4px;
}
<div class="wrapper">
<div class="square"></div>
</div>
https://codepen.io/Portismouth/pen/ZEEXeVP
so far I am using a simple square with a cross created using the :before and :after psuedo-selectors. On hover, Im trying to make the square bigger and the lines thicker to give the impression i'm going for.
It's basically a 2 x 2 grid of squares that I want to expand out from the middle of the square on hover. Should I create a square with four separate squares or continue with my approach so far.
Thanks in advance.
Your code works correctly. If you want to hover and it'll expand from middle of square, don't use translate(-50%, -50%); when hover on square
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.square {
height: 40px;
width: 40px;
background-color: black;
transition: all .2s;
}
.square:before {
content: "";
width: 100%;
height: 2px;
background-color: #fff;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.square:after {
content: "";
width: 100%;
height: 2px;
background-color: #fff;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform-origin: 50%;
transform: translate(-50%, -50%) rotate(90deg);
}
.square:hover {
transform: scale(2);
}
<div class="wrapper">
<div class="square"></div>
</div>
In box1:after z-index:1; it does not work.
.box1 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
background-color: gray;
border-radius: 50%;
}
.box1:after {
content: '';
position: absolute;
left: -3.5px;
top: -3.5px;
width: 80%;
height: 80%;
border: 4px solid red;
border-radius: 50%;
z-index: -1;
}
<div class="box1"></div>
Does anyone know what the solution is?
you must to get help of :before, like this:
.box1 {
position: absolute;
left: 50%;
top: 50%;
width: 120px;
height:120px;
transform:translate(-50%,-50%);
}
.box1:before {
text-align: center;
line-height: 120px;
content: 'click';
position: absolute;
width: 100%;
height:100%;
background-color: gray;
border-radius: 50%;
}
.box1:after{
content: '';
position: absolute;
left: -3.5px;
top: -3.5px;
width: 80%;
height: 80%;
border:4px solid red;
border-radius: 50%;
z-index:-1;
}
<div class="box1"></div>
This question already has answers here:
CSS3 Transform Skew One Side
(5 answers)
Closed 2 years ago.
I'm tying to get a result as this image :
I tried that :
#parallelogram-container {
margin: 0 50px;
}
.parallelogram {
background: #008dd0;
width: 200px;
border: none;
display: inline-block;
height: 90px;
-moz-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
transform-origin: 50% 50%;
padding: 0px;
margin: 0 1px;
}
.parallelogram:first-child {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.parallelogram-btn {
width: 60px;
background: #ffa008;
color: #FFF;
border: none;
display: inline-block;
height: 90px;
-moz-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
transform-origin: 50% 50%;
padding: 0px;
margin: 0px;
font-weight: 700;
cursor: pointer;
}
<div id="parallelogram-container">
<div class="parallelogram"> </div>
<div class="parallelogram"> </div>
<a class="parallelogram-btn"> </a>
</div>
I cannot achieve this like the image : first parallelogram not skrewed on his left side and last parallelogram not skrewed on his right side.
Can someone help me please ?
See Snippet
#parallelogram-container {
margin: 0 50px;
}
.parallelogram {
position: relative;
background: #008dd0;
width: 100px;
border: none;
display: inline-block;
height: 90px;
padding: 0px;
margin: 0 1px;
}
.parallelogram:nth-child(1) {}
.parallelogram:nth-child(2) {
transform-origin: bottom left;
-ms-transform: skew(-28deg, 0deg);
-webkit-transform: skew(-28deg, 0deg);
transform: skew(-28deg, 0deg);
margin-left: 1px;
}
.parallelogram:nth-child(1):after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: #008dd0;
transform-origin: bottom left;
-ms-transform: skew(-28deg, 0deg);
-webkit-transform: skew(-28deg, 0deg);
transform: skew(-28deg, 0deg);
}
.parallelogram-btn:before {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
left: -51px;
z-index: -1;
background: #ffa008;
transform-origin: bottom left;
-ms-transform: skew(-28deg, 0deg);
-webkit-transform: skew(-28deg, 0deg);
transform: skew(-28deg, 0deg);
}
.parallelogram:first-child {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.parallelogram-btn {
width: 60px;
position: relative;
background: #ffa008;
color: #FFF;
border: none;
display: inline-block;
height: 90px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
padding: 0px;
margin-left: 51px;
font-weight: 700;
cursor: pointer;
}
<div id="parallelogram-container">
<div class="parallelogram"> </div>
<div class="parallelogram"> </div>
<a class="parallelogram-btn"> </a>
</div>
You can also achieve this simply with the following code. In this case only one div is needed.
From this point you can of course fine tune everything but this is just to give you a rough idea.
HTML
<div class="box"></div>
CSS
.box{
width: 400px;
height: 100px;
background: #008dd0;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.box:after{
content: '';
position: absolute;
top: 0;
right: 0;
width: 30%;
height: 100%;
background: #ffa008;
}
.box:before{
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) skew(-10deg);
width: 40%;
height: 100%;
background: #008dd0;
border: 2px solid white;
border-width: 0 8px;
z-index: 100;
}
.box {
width: 400px;
height: 100px;
background: #008dd0;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.box:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 30%;
height: 100%;
background: #ffa008;
}
.box:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) skew(-10deg);
width: 40%;
height: 100%;
background: #008dd0;
border: 2px solid white;
border-width: 0 8px;
z-index: 100;
}
<div class="box"></div>
So I'm trying to put animated css into an email signature. I got it to work in iOS / Mac email-clients, but Gmail and Outlook seem to block part of the code. Does anyone maybe know of a workaround?
The code that I use now in my email:
<!doctype HTML>
<html style="margin: 0; padding: 0;">
<head style="margin: 0; padding: 0;">
<style rel="stylesheet" style="margin: 0; padding: 0;" type="text/css">
* { margin: 0; padding: 0; }
.container {
background: #64B1EE;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
.airplane {
position: absolute;
left: 40%;
top: 10%;
z-index: 3;
-webkit-animation: plainfly 10s linear infinite;
-o-animation: plainfly 10s linear infinite;
animation: plainfly 10s linear infinite;
}
.airplane div {
background: #F9FBFC;
border-radius: 100%;
width: 60px;
height: 60px;
position: absolute;
z-index: 1;
}
div.head {
top: 21px;
left: 83px;
width: 60px;
height: 25px;
border-radius: 100%;
}
div.body {
top: 20px;
left: 0;
width: 130px;
height: 26px;
border-radius: 40% 30% 20% 50%;
z-index: 1
}
div.lwing {
top: 7px;
left: 60px;
height: 21px;
width: 30px;
border-radius: 5px;
z-index: 0 ;
-webkit-transform: skew(51deg, 0deg);
-ms-transform: skew(51deg, 0deg);
-o-transform: skew(51deg, 0deg);
transform: skew(51deg, 0deg);
}
div.rwing {
top: 34px;
left: 57px;
height: 27px;
width: 35px;
border-radius: 5px;
z-index: 1;
box-shadow: 0px 6px 4px rgba(0, 0, 0, 0.16);
-webkit-transform: skew(-49deg, 0deg);
-ms-transform: skew(-49deg, 0deg);
-o-transform: skew(-49deg, 0deg);
transform: skew(-49deg, 0deg);
}
div.tale {
top: 15px;
left: 10px;
width: 16px;
height: 16px;
border-radius: 2px;
-webkit-transform: skew(35deg, -9deg);
-ms-transform: skew(35deg, -9deg);
-o-transform: skew(35deg, -9deg);
transform: skew(35deg, -9deg);
background: linear-gradient(0deg,#FFF, #BBDEFF);
}
div.window,
div.window:before,
div.window:after {
content: "";
top: 6px;
left: 48px;
width: 4px;
height: 4px;
border-radius: 30%;
background: #9AD0F5;
border: 1px solid #5093D1;
position: absolute;
}
div.window:before {
left: -12px;
top: -1px;
}
div.window:after {
left: 10px;
top: -1px;
}
div.window:nth-child(1){
left:81px
}
div.window:nth-child(2){
left:115px
}
div.window:nth-child(2):after {
border-top-right-radius: 8px;
width: 6px;
}
#-webkit-keyframes plainfly {
0% {
left: -10%;
-webkit-transform: scale(.4);
-ms-transform: scale(.4);
-o-transform: scale(.4);
transform: scale(.4);
}
50% {
left: 110%;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
51% {
-webkit-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
left: -10%;
-webkit-transform: scale(1.4) rotateY(180deg);
-ms-transform: scale(1.4) rotateY(180deg);
-o-transform: scale(1.4) rotateY(180deg);
transform: scale(1.4) rotateY(180deg);
}
}
#-webkit-keyframes cloud {
0% { left: 15%; }
50% { left: 63%; }
100% { left: 15%; }
}
#-webkit-keyframes cloud_a {
0% { left: 62%; }
50% { left: 90%; }
100% { left: 62%; }
}
#-webkit-keyframes cloud_b {
0% { left: 50%; }
50% { left: 23%; }
100% { left: 50%; }
}
#-webkit-keyframes cloud_c {
0% { left: 37%; }
50% { left: 47%; }
100% { left: 37%; }
}
#-webkit-keyframes cloud_d {
0% { left: 25%; }
50% { left: 65%; }
100% { left: 25%; }
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<div class="container" style="background: #64B1EE; height: 100%; margin: 0; overflow: hidden; padding: 0; position: absolute; width: 100%;"><airplane class="airplane" style="animation: plainfly 10s linear infinite; left: 40%; margin: 0; padding: 0; position: absolute; top: 10%; z-index: 3;"><div class="head" style="background: #F9FBFC; border-radius: 100%; height: 25px; left: 83px; margin: 0; padding: 0; position: absolute; top: 21px; width: 60px; z-index: 1;">
</div>
<div class="body" style="background: #F9FBFC; border-radius: 40% 30% 20% 50%; height: 26px; left: 0; margin: 0; padding: 0; position: absolute; top: 20px; width: 130px; z-index: 1;">
<div class="window" style="background: #9AD0F5; border: 1px solid #5093D1; border-radius: 30%; content: ""; height: 4px; left: 48px; margin: 0; padding: 0; position: absolute; top: 6px; width: 4px; z-index: 1;">
</div>
<div class="window" style="background: #9AD0F5; border: 1px solid #5093D1; border-radius: 30%; content: ""; height: 4px; left: 48px; margin: 0; padding: 0; position: absolute; top: 6px; width: 4px; z-index: 1;">
</div>
<div class="window" style="background: #9AD0F5; border: 1px solid #5093D1; border-radius: 30%; content: ""; height: 4px; left: 48px; margin: 0; padding: 0; position: absolute; top: 6px; width: 4px; z-index: 1;">
</div>
</div>
<div class="lwing" style="background: #F9FBFC; border-radius: 5px; height: 21px; left: 60px; margin: 0; padding: 0; position: absolute; top: 7px; transform: skew(51deg, 0deg); width: 30px; z-index: 0;">
</div>
<div class="rwing" style="background: #F9FBFC; border-radius: 5px; box-shadow: 0px 6px 4px rgba(0, 0, 0, 0.16); height: 27px; left: 57px; margin: 0; padding: 0; position: absolute; top: 34px; transform: skew(-49deg, 0deg); width: 35px; z-index: 1;">
</div>
<div class="tale" style="background: linear-gradient(0deg,#FFF, #BBDEFF); border-radius: 2px; height: 16px; left: 10px; margin: 0; padding: 0; position: absolute; top: 15px; transform: skew(35deg, -9deg); width: 16px; z-index: 1;">
</div></airplane></div>
</body>
</html>
Jsfiddle to make it easier: https://jsfiddle.net/rvrvbtL9/
Any help would be greatly appreciated! Thanks in advance.
The problem you are having is created by the email clients removing everything within a <style> tag. Email clients all process HTML emails different and most of the time you will have to use limited inline styles with a table based layout for best compatiblity.
This is a great resource.
MattSizzle has already written everything I was planning to say about CSS in emails and email clients (along with the same reference link).
In your case, using an animated GIF instead of a CSS animation might be a good practice. It has better browser compatibility as seen here. Nevertheless, animated GIF in email has its own drawbacks, such as "some Outlook versions not showing the animation but the first frame only". Take a look at the article. It may help.
The issue is that Gmail will allow styles but they must NOT be in the body, the previous poster is correct that they require inline css and nothing global. They also strip the HEAD. They strip out class, id and styles from the body. Also no positioning may NOT be used even if its inline. Images need to be on a publicly accessible server, Outlook for instance will not handle base64 encoded images.
Your solution: Remove your classes, all positioning code, HEAD, and convert everything inline. You can use this tool to help you do that: MailChimp Inline converter Instead of positioning, tables are your friend.
Litmus is a fantastic tool to view your html in several clients.
Fiddle: https://jsfiddle.net/4taucsx3/6/
I want the cracks to go behind the dark border but I can't seem to be able to do so no matter how I do it. I don't want the overflowing svg points to show. How can I achieve this?
Here's my attempt at this:
<div class="outer">
<div class="inner">
<div class="compass-display">
<svg class="pr-arrow">
<polygon points="200,30 235,210 200,240 165,210" />
</svg>
<svg class="sec-arrow">
<polygon points="200,370 235,210 200,240 165,210" />
</svg>
<svg class="arrows-shadow">
<polygon points="205,370 245,210 205,35 180,210" />
</svg>
<svg class="arrows-overlay">
<polygon points="200,370 200,210 200,35 165,210" />
</svg>
</div>
<div class="compass-cracks">
<svg>
<polygon points="120,400 0,320 0,190 60,225 60,180 90,170 110,200 120,170 160,180 170,130 220,130 250,80 280,100 350,40 430,180 380,180 390,200 370,220 330,200 350,240 310,210 290,310 260,270 210,320 200,280 180,320 160,300 120,400" />
</svg>
</div>
</div>
<div class="arrows-dot"></div>
</div>
.outer {
position: relative;
width: 600px;
height: 600px;
border-radius: 50%;
background-color: #cfe7f7;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
border: 50px solid black;
border-radius: 50%;
box-sizing: border-box;
z-index: 1001;
}
.compass-display {
position: relative;
width: 400px;
height: 400px;
border-radius: 50%;
background-color: #fcfffe;
box-sizing: border-box;
> svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: inherit;
height: inherit;
z-index: 1000;
&:nth-of-type(3) {
z-index: 999;
}
}
}
.compass-cracks {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
> svg {
width: inherit;
height: inherit;
fill: #cfe7f7;
}
}
.arrows-dot {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
border-radius: 50%;
background-color: white;
z-index: 1002;
}
.pr-arrow {
fill: #d14b4b;
}
.sec-arrow {
fill: #1671ad;
}
.arrows-shadow {
fill: grey;
}
.arrows-overlay {
fill: rgba(0, 0, 0, 0.2);
}
I suggest you add " overflow: hidden; " to your .inner class, just as follows :
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
border: 50px solid black;
border-radius: 50%;
box-sizing: border-box;
z-index: 1001;
overflow: hidden;
}
Here's the result : https://jsfiddle.net/5hf6bvdg/2/
You can change css class compass-cracks to following code:
.compass-cracks {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
> svg {
width: inherit;
height: inherit;
fill: #cfe7f7;
}
}