I'm having the following disparity in rendering for Firefox and Chrome
* {
box-sizing: border-box;
}
.arrow-container {
padding: 35px 15px;
width: 60px;
height: 100px;
background-color: rgba(0, 0, 0, 0.3);
}
.arrow {
position: relative;
width: 30px;
height: 30px;
}
.arrow::before,
.arrow::after {
content: '';
display: block;
position: absolute;
right: 2px;
width: 30px;
height: 3px;
background-color: #ffffff;
box-shadow: 0 0 1px 0 #ffffff,
0 0 1px 0 #ffffff,
0 0 1px 0 #ffffff,
0 0 1px 0 #ffffff;
}
.arrow::before {
top: 50%;
transform-origin: 100% 0;
transform: rotate(45deg);
}
.arrow::after {
bottom: 50%;
transform-origin: 100% 100%;
transform: rotate(-45deg);
}
<div class="arrow-container">
<div class="arrow"></div>
</div>
I'm wondering if there's any way to overcome this difference? For the record, removing the box-shadow does not solve the problem.
The result will be more accurate using even values for height (because Chrome calculates fractional values of pixels, and Firefox doesn't) and simpler box-shadow.
* {
box-sizing: border-box;
}
.arrow-container {
padding: 35px 15px;
width: 60px;
height: 100px;
background-color: rgba(0, 0, 0, 0.3);
}
.arrow {
position: relative;
width: 30px;
height: 30px;
}
.arrow::before,
.arrow::after {
content: '';
display: block;
position: absolute;
right: 2px;
width: 30px;
height: 4px;
background-color: #ffffff;
box-shadow: 0 0 1px 0 #ffffff;
}
.arrow::before {
top: 50%;
transform-origin: 100% 0;
transform: rotate(45deg);
}
.arrow::after {
bottom: 50%;
transform-origin: 100% 100%;
transform: rotate(-45deg);
}
<div class="arrow-container">
<div class="arrow"></div>
</div>
Related
I really like drawing with CSS, and I've just finished drawing this Diglett using nothing more than CSS.
However, as good as it looks on my desktop, it isn't responsive and I don't know how to make it. I noticed this while transferring it to codepen.
.diglett {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.body {
height: 230px;
width: 200px;
background-color: #b1917e;
border-radius: 100px 100px 0 0;
border-top: 2px solid #040202;
border-right: 2px solid #040202;
border-left: 2px solid #040202;
overflow-y: hidden;
}
.head-shine {
position: relative;
left: 0px;
top: 0px;
height: 50px;
width: 140px;
color: #c9b3a4;
background-color:currentColor;
filter: blur(8px);
border-radius: 100px / 50px;
transform: rotate(160deg);
z-index: 1;
}
.head-shine2 {
position: relative;
left: -10px;
top: -250px;
height: 200px;
width: 100px;
color: #b49580;
filter: blur(10px);
border-radius: 50%;
transform: rotate(80deg);
}
.left-eye{
position: absolute;
height: 30px;
width: 8px;
border-radius: 40% 40%;
color: black;
background-color: black;
transform: rotate(5deg);
box-shadow:
inset -1px -6px 7px -2px #595a5a;
border: solid 2px black;
left: 45.4%;
top: 8%;
z-index: 2;
}
.right-eye{
position: absolute;
height: 30px;
width: 8px;
border-radius: 40% 40%;
color: black;
background-color: black;
transform: rotate(5deg);
box-shadow:
inset -1px -6px 7px -2px #595a5a;
border: solid 2px black;
left: 50%;
top: 8.2%;
z-index: 2 ;
}
.eye-shines{
position: absolute;
height: 7px;
width: 6px;
background-color: white;
border-radius: 50%;
left: 45.7%;
top: 8.2%;
box-shadow:
9.7vmin 0 0 0 white;
z-index: 8;
filter: blur(0.8px);
transform: rotate(2deg);
}
.mouth {
position: absolute;
height: 41px;
width: 77px;
background-color: #b982a2;
border-radius: 46% 46% 46% 46%;
border: 3px solid #040202;
left: 44.6%;
top: 14.5%;
z-index: 2;
}
.mouth-shine {
position: absolute;
height: 30px;
width: 60px;
background-color: #e5b6d3;
border-radius: 50%;
left: 45%;
top: 15.3%;
z-index: 3;
filter: blur(2px);
}
.mouth-shine2 {
position: absolute;
height: 9px;
width: 18px;
background-color: #f4e4f0;
border-radius: 50%;
transform: rotate(-8deg);
left: 45.8%;
top: 16.2%;
z-index: 4;
filter: blur(1.5px);
}
.soil{
position: absolute;
width: 80px;
height: 80px;
background-color: #828388;
border-radius: 50% 50% 0 0;
transform: translate(80%, -55%);
filter:
drop-shadow(0 2px black)
drop-shadow(0 -2px black)
drop-shadow(2px 0 black)
drop-shadow(-2px 0 black);
color: #828388;
box-shadow:
-6vmin 1vmin 0 -2vmin,
-12vmin 1vmin 0 -1vmin,
7vmin 1.25vmin 0 -1.75vmin,
12vmin 1.25vmin 0 -1.25vmin,
-18vmin 1.25vmin 0 -1.25vmin,
18vmin 1.25vmin 0 -1.25vmin;
z-index: 6;
}
<html>
<head>
<title>Diglett</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="diglett">
<div class="body">
<div class="eyes">
<div class="left-eye"></div>
<div class="right-eye"></div>
<div class="eye-shines"></div>
</div>
<div class="head">
<div class="head-shine"></div>
<div class="head-shine2"></div>
</div>
<div class="mouth"></div>
<div class="mouth-shine"></div>
<div class="mouth-shine2"></div>
<div class="soil"></div>
</div>
</div>
</body>
</html>
Full codepen: https://codepen.io/devjuanv/pen/qBjYgEB
So: 1) could u help me updating the code so it looks as intended in every viewport? and 2) could you provide at least a short explanation on what you did?
It would mean lot for my learning! Thank u!!!
This is how it looks on my desktop:
So I want to make a radar like a sonar. So I will get a variable from an MQTT subscription. So on this radar, if it outputs 180 degrees and 50 on the distance I want it to be there on the radar. Also when the sweep has registered 180 degrees and 50 on the distance I want for example a red dot to pop up and then when the sweep passed it will fade away and then maybe pop up somewhere else if the variable has changed. How will I be able to do this and what language do I need to use. Like this one but I want the red dots on it that is controlled by MQTT variables. This is the code for the radar and the sweep.
html {
padding: 0;
margin: 0;
--green: rgb(40, 133, 40);
--size: 500px;
}
body {
background: #232;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
width: var(--size);
height: var(--size);
position: relative;
user-select: none;
}
.status {
font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial,
sans-serif;
font-size: 10px;
font-weight: 400;
letter-spacing: 2px;
text-align: center;
padding: 7px 9px 7px 32px;
color: #777;
position: absolute;
bottom: 7%;
left: -5%;
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.6);
border-radius: 8px 0 0 8px;
}
.status::before,
.status::after {
content: "";
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #333;
background: #181818;
}
.status::after {
background: radial-gradient(var(--green) 60%, darkgreen 40%);
animation: light 1.2s infinite alternate
cubic-bezier(0.785, 0.135, 0.15, 0.86);
border-color: transparent;
box-shadow: 0 0 5px 1px var(--green);
}
#keyframes light {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.container::after {
content: "";
width: 120%;
height: 100%;
left: -10%;
background: linear-gradient(45deg, #222, #333);
position: absolute;
z-index: -1;
box-shadow: 1px 2px 2px 2px #111;
border-radius: 4%;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid darkgreen;
border-radius: 50%;
width: 60%;
height: 60%;
will-change: transform;
}
#keyframes scan {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.circle-huge {
width: calc(var(--size) * 0.9);
height: calc(var(--size) * 0.9);
border: 4px solid var(--green);
--gradient: black 0%, black 12.35%, var(--green) 12.35%, var(--green) 12.55%,
black 12.56%;
background: repeating-linear-gradient(var(--gradient)),
repeating-linear-gradient(to right, var(--gradient)),
radial-gradient(black 33%, var(--green));
background-blend-mode: screen;
box-shadow: 0 1px 0 4px #222, 0 3px 0 5px #343;
}
.circle-huge::before {
background: linear-gradient(var(--green) 50%, black 50%),
linear-gradient(90deg, black 50%, var(--green) 50%);
background-blend-mode: darken;
position: absolute;
width: 100%;
height: 100%;
content: "";
border-radius: 50%;
will-change: opacity;
animation: scan 5s linear infinite;
opacity: 0.4;
}
.circle-big {
--this-size: calc(var(--size) * 0.7);
width: var(--this-size);
height: var(--this-size);
}
.circle-medium {
--this-size: calc(var(--size) * 0.5);
width: var(--this-size);
height: var(--this-size);
}
.circle-small {
--this-size: calc(var(--size) * 0.3);
width: var(--this-size);
height: var(--this-size);
}
.circle-tiny {
--this-size: calc(var(--size) * 0.15);
width: var(--this-size);
height: var(--this-size);
}
.circle-center {
width: 5%;
height: 5%;
border-color: firebrick;
background: firebrick;
}
.logo {
position: absolute;
top: 24px;
right: -16px;
font-family: Arial, Helvetica, sans-serif;
text-shadow: -1px 0 1px #111;
text-align: center;
}
.logo-first {
font-size: 19px;
letter-spacing: 2px;
color: #666;
border: 1px solid #383838;
border-radius: 4px;
padding: 3px 5px 1px;
}
.logo-second {
letter-spacing: 3px;
font-size: 14px;
color: #555;
margin-top: 2px;
}
.screw {
width: 12px;
height: 12px;
background: #444;
position: absolute;
top: 15px;
left: -35px;
border-radius: 50%;
box-shadow: 0 1px 0 1px #222;
}
.screw:after {
content: "";
width: 2px;
height: 10px;
position: absolute;
top: 1px;
left: 50%;
transform: translateX(-50%) rotate(35deg);
background: #333;
}
.screw:nth-of-type(even):after {
transform: translateX(-50%) rotate(105deg);
}
.screw:nth-of-type(n + 4):after {
transform: translateX(-50%) rotate(80deg);
}
.screw-1 {
left: initial;
right: -35px;
}
.screw-2 {
top: initial;
left: -35px;
bottom: 15px;
}
.screw-3 {
left: initial;
top: initial;
right: -35px;
bottom: 15px;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Military Radar System</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<div class="screw"></div>
<div class="screw screw-1"></div>
<div class="screw screw-2"></div>
<div class="screw screw-3"></div>
<div class="logo">
<div class="logo-first">RADAR</div>
<div class="logo-second">SYSTEM</div>
</div>
<div class="circle circle-huge">
<div class="circle circle-big">
<div class="circle circle-medium">
<div class="circle circle-small">
<div class="circle circle-tiny">
<div class="circle circle-center"></div>
</div>
</div>
</div>
</div>
</div>
<div class="status">SCANNING</div>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
I want to build animation like this, but using only css:
I built a triangle, but I can't build a background of moving triangles which will move. See the example in the pictures.
My code:
HTML:
<div class="container">
<div class="triangle up">
</div>
<div class="triangle down-right">
</div>
<div class=" down-right1">
</div>
<div class="triangle down-left">
</div>
</div>
CSS:
.container {
position: relative;
left: 45%;
width: 300px;
height: 250px;
}
.triangle {
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid rgb(165,60,255);
background: linear-gradient(90deg, rgba(165,60,255,1) 0%, rgba(98,0,255,1) 100%);
z-index: 999999;
}
.up {
top: 0;
left: auto;
}
.down-right {
top: 100px;
left: 16.5%;
}
.down-right1 {
top: 105px;
left: 24%;
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #c85e5e;
}
.down-left {
top: 100px;
left: -16.5%;
}
I want this animation to start when the page is loading.
An idea using skew tranformation and box-shadow.
.box {
position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 75px;
height: 64.5px;
transition: 0.5s all 0.5s;
transform-origin: 50% 63%;
}
.box::before,
.box::after,
.box i:before,
.box i:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 8px;
transform-origin: bottom;
transition: 0.5s all;
}
.box::before {
background: #5840bc;
box-shadow: 0px -20px #886df8, 0px -40px #c2b3f8;
transform: skewX(-30deg);
border-bottom-right-radius: 0;
}
.box::after {
background: #5844d9;
box-shadow: -20px 0 #7d69ca, -40px 0 #c7bee9;
transform: skewX(30deg);
border-top-right-radius: 0;
}
.box i:before {
background: #714ffe;
box-shadow: 0px -20px #7c6ade, 0px -40px #c7bee9;
transform: translateY(50%) rotate(120deg) skewX(-30deg);
transform-origin: center;
border-bottom-right-radius: 0;
}
.box i:after {
background: #fff;
z-index: 1;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
border-radius: 0;
}
html:hover .box {
transform: rotate(60deg);
}
html:hover .box::before,
html:hover .box::after,
html:hover .box i:before,
html:hover .box i:after {
box-shadow: 0px 0 transparent, 0px 0 transparent;
}
<div class="box"><i></i></div>
I have an absolutely positioned CSS banner that has a responsive width and height based on viewport size. The element is centered on desktop and tablet devices, but not on mobile (when the banner's width starts to shrink).
I can't use the classic margin: 0 auto; trick because the margins have to be set to a fixed value for the banner to work.
The code is below:
HTML:
<h1 class="banner">A Simple CSS Banner</h1>
CSS:
#import url(https://fonts.googleapis.com/css?family=Rye);
body
{ background: #eee; }
.banner {
position: absolute;
left: 50%;
display: block;
margin: 100px -200px;
width: 400px;
max-width: calc(100% - 150px);
height: 60px;
border: 1px solid #8a1;
font: normal 30px/60px 'Rye';
text-align: center;
color: #451;
background: #9b2;
border-radius: 4px;
box-shadow: 0 0 30px rgba(0,0,0,.15) inset,
0 6px 10px rgba(0,0,0,.15);
}
.banner::before,
.banner::after {
content: '';
position: absolute;
z-index: -1;
left: -70px;
top: 24px;
display: block;
width: 40px;
height: 0px;
border: 30px solid #9b2;
border-right: 20px solid #791;
border-bottom-color: #94b81e;
border-left-color: transparent;
transform: rotate(-5deg);
}
.banner::after {
left: auto;
right: -70px;
border-left: 20px solid #791;
border-right: 30px solid transparent;
transform: rotate(5deg);
}
#media (max-width: 475px) {
.banner {
height: 90px;
line-height: 45px;
}
.banner::before,
.banner::after {
border-width: 45px;
border-right-width: 30px;
}
.banner::after {
border-left-width: 30px;
border-right-width: 45px;
}
}
Link to working codepen: https://codepen.io/Adam0410/pen/QZOKdV
Thanks for the help!
Check if this helps you.
#import url(https://fonts.googleapis.com/css?family=Rye);
body {
background: #eee;
}
.banner {
position: absolute;
left: 50%;
transform: translate(-50%);
display: block;
margin: 100px 0;
width: 400px;
max-width: calc(100% - 150px);
min-height: 60px;
}
.banner span {
display: block;
position: relative;
z-index: 1;
border: 1px solid #8a1;
font: normal 30px/60px "Rye";
text-align: center;
color: #451;
background: #9b2;
border-radius: 4px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.15) inset, 0 6px 10px rgba(0, 0, 0, 0.15);
}
.banner::before,
.banner::after {
content: "";
position: absolute;
z-index: -1;
left: -70px;
bottom: -24px;
display: block;
width: 40px;
height: 0px;
border: 30px solid #9b2;
border-right: 20px solid #791;
border-bottom-color: #94b81e;
border-left-color: transparent;
transform: rotate(-5deg);
}
.banner::after {
left: auto;
right: -70px;
border-left: 20px solid #791;
border-right: 30px solid transparent;
transform: rotate(5deg);
}
#media (max-width: 475px) {
.banner {
min-height: 90px;
line-height: 45px;
}
.banner::before,
.banner::after {
border-width: 45px;
border-right-width: 30px;
}
.banner::after {
border-left-width: 30px;
border-right-width: 45px;
}
}
<h1 class="banner"><span>A Simple CSS Banner</span></h1>
You can simply use Media queries and adapt Width and margin.
something like:
media (max-width: 475px) {
.banner{
width: 200px;
margin:100px -100px;
}
}
This way you keep the top and bottom margin:
left: 0; right: 0;
margin: 100px auto;
If you want to center an absolute or fixed element you should :
position: absolute;
left: 0%;
right:0%;
margin: 0 auto;
I am currently attempting to add a uniform glow effect around a hexagon created with CSS classes but due to the way the hexagon is drawn, the glow effect ends up with odd breaks that I cannot seem to fix.
.hexagon {
position: relative;
border-radius: 5px;
height: 125px;
width: 75px;
margin: 50px;
box-sizing: border-box;
border: 5px solid transparent;
border-top-color: black;
border-bottom-color: black;
display: inline-block;
}
.hexagon:before, .hexagon:after {
content: "";
border: inherit;
position: absolute;
top: -5px;
left: -5px;
background: inherit;
border-radius: inherit;
height: 100%;
width: 100%;
}
.hexagon:before {
transform: rotate(60deg);
}
.hexagon:after {
transform: rotate(-60deg);
}
.hexagon:hover, .hexagon:hover:before, .hexagon:hover:after {
box-shadow: 0 10px 2px -2px rgba(255,0,0,0.5), 0 -10px 2px -2px rgba(255,0,0,0.5);
}
<div class=hexagon></div>
You may add more padding inside the element and adjust the border radius. All line will cross and the radius will fix the shape :
.hexagon {
position: relative;
border-radius: 20px;
padding: 40px;
height: 125px;
width: 75px;
margin: 50px;
box-sizing: border-box;
border: 5px solid transparent;
border-top-color: black;
border-bottom-color: black;
display: inline-block;
}
.hexagon:before,
.hexagon:after {
content: "";
border: inherit;
position: absolute;
top: -5px;
left: -5px;
background: inherit;
border-radius: inherit;
height: 100%;
width: 100%;
}
.hexagon:before {
transform: rotate(60deg);
}
.hexagon:after {
transform: rotate(-60deg);
}
.hexagon:hover,
.hexagon:hover:before,
.hexagon:hover:after {
box-shadow: 0 10px 2px -2px rgba(255, 0, 0, 0.5), 0 -10px 2px -2px rgba(255, 0, 0, 0.5);
}
<div class=hexagon></div>
You can of course control the radius of your shape by changing simultaneously the padding and border-radius