CSS Add offset / distort between multiple borders? - css

Sandbox link: https://codesandbox.io/s/charming-hermann-pcpcsy?file=/src/styles.module.css
I want to create multi sector element using css. I need 4 segments as shown below:
<div className={classes.loader}>
<section className={classes.loader_sector}></section>
<section className={classes.loader_sector}></section>
<section className={classes.loader_sector}></section>
<section className={classes.loader_sector}></section>
</div>
and here's my CSS:
.loader_sector {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 0.8rem solid transparent;
}
.loader_sector:nth-child(1) {
border-top-color: #fff;
}
.loader_sector:nth-child(2) {
border-left-color: #fff;
}
.loader_sector:nth-child(3) {
border-right-color: #fff;
}
.loader_sector:nth-child(4) {
border-bottom-color: #fff;
}
but this keeps all this circles stick together:
I want some gap at junction of every sector. Can someone help me achieve the same?
Edit one:
As suggested in comments using margin-top left and right solves the problem, but the core issue still remains, when I rotate them, they start contracting: https://codesandbox.io/s/charming-hermann-pcpcsy?file=/src/styles.module.css

Here you go, you can play with border radius and gap between sections to make it pretty.
.Spinner {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: purple;
display: flex;
align-items: center;
justify-content: center;
}
.loader > * {
box-sizing: border-box;
}
.loader {
color: red;
position: relative;
height: 10rem;
width: 10rem;
text-align: center;
vertical-align: center;
animation: rotate 2s ease-in-out infinite;
}
.loader_sector {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 0.8rem solid transparent;
mix-blend-mode: overlay;
pointer-events: none;
}
.loader_sector:nth-child(1) {
border-top-color: pink;
margin-top: -5px;
}
.loader_sector:nth-child(2) {
border-left-color: blue;
margin-left: -5px;
}
.loader_sector:nth-child(3) {
border-right-color: green;
margin-left: 5px;
}
.loader_sector:nth-child(4) {
border-bottom-color: yellow;
margin-top: 5px;
}
#keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<div class=Spinner>
<div class=loader>
<section class=loader_sector></section>
<section class=loader_sector></section>
<section class=loader_sector></section>
<section class=loader_sector></section>
</div>
</div>

Replace this css code in your css file, it will work.
.Spinner {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
}
.loader > * {
box-sizing: border-box;
}
.loader {
/* background-color: white; */
position: relative;
height: 10rem;
width: 10rem;
border-radius: 50%;
}
.loader_sector {
position: absolute;
/* background-color: blue; */
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 0.8rem solid transparent;
}
.loader_sector:nth-child(1) {
border-top-color: pink;
margin-top: -10px;
}
.loader_sector:nth-child(2) {
border-left-color: blue;
margin-left: -10px;
}
.loader_sector:nth-child(3) {
border-right-color: green;
margin-left: 10px;
}
.loader_sector:nth-child(4) {
border-bottom-color: yellow;
margin-top: 10px;
}

Related

I want to place my my nav - Top - Right - Bottom - Left

I want to place my nav in 4 different places. Top, Right, Bottom, And middle. But I cant seem to get it to work. And when i for example mean Right, it should still be in the center of top and bottom. I donät know if you understand but i don't really know how to describe it better.
#navOne {
display: block;
text-align: center;
padding-top: 1em;
}
#navTwo {
display: block;
position: relative;
float: right;
margin-top: 43vh;
transform: rotate(90deg);
}
#navThree {
display: block;
position: absolute;
text-align: center;
margin-left: 50%;
transform: translateX(-50%);
margin-top: 86vh;
}
#navFour {
display: block;
position: relative;
transform: rotate(-90deg);
float: left;
margin-top: 42vh;
margin-left: 0.5em;
}
<p id="navOne" class="navs">About me</p>
<p id="navTwo" class="navs">Portfolio</p>
<p id="navThree" class="navs">Skills</p>
<p id="navFour" class="navs">Contact</p>
I add the following CSS and Found that none of your link is perfectly centered! here is the code:
body {
margin: 0;
padding: 0;
}
.box {
height: 50vh;
width: 100vw;
position: absolute;
border: 1px solid red;
top: 0;
box-sizing: border-box;
}
.box.two {
height: 100vh;
width: 50vw;
position: absolute;
border: 1px solid rgb(255, 0, 64);
top: 0;
}
a {
outline: 1px solid green;
}
The image is the outcome of my code which you see. So I'm rewriting the code for you.
body {
margin: 0;
padding: 0;
}
.navs {
text-align: center;
margin: 0;
}
.navtop {
margin-top: 15px;
}
.navright {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%) rotate(90deg);
}
.navbottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: 15px;
}
.navleft {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%) rotate(-90deg);
}
/* below code is for checking every thing is perfectly centered*/
.box {
height: 50vh;
width: 100vw;
position: absolute;
border: 1px solid red;
top: 0;
box-sizing: border-box;
}
.box.two {
height: 100vh;
width: 50vw;
position: absolute;
border: 1px solid rgb(255, 0, 64);
top: 0;
}
a {
outline: 1px solid green;
}
<p id="navOne" class="navs navtop">About me</p>
<p id="navTwo" class="navs navright">Portfolio</p>
<p id="navThree" class="navs navbottom">Skills</p>
<p id="navFour" class="navs navleft">Contact</p>
<!-- below html is for testing purpose -->
<div class="box"></div>
<div class="box two "></div>

Change background based on different hovered element

When hovering on each circle at the corner, background color in the main area should be changed so matches the color of the circle, and there is an adequate paragraph showing at the same time.
I have tried transition, opacity... but couldn't get it work.
Note, HTML has to be untouched.
* {
margin: 0;
padding: 0;
}
body {
position: relative;
height: 100vh;
text-align: center;
}
p {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.bg {
position: relative;
height: 100vh;
background-color: #333;
}
.circle {
height: 10px;
width: 10px;
border-radius: 50%;
border: white solid 2px;
z-index: 1;
}
.red.circle {
position: absolute;
top: 10%;
left: 10%;
background-color: red;
}
.green.circle {
position: absolute;
top: 10%;
right: 10%;
background-color: green;
}
.blue.circle {
position: absolute;
bottom: 10%;
left: 10%;
background-color: blue;
}
.orange.circle {
position: absolute;
bottom: 10%;
right: 10%;
background-color: orange;
}
p.red {
display: none;
background-color: red;
line-height: 100vh;
}
p.green {
display: none;
background-color: green;
line-height: 100vh;
}
p.blue {
display: none;
background-color: blue;
line-height: 100vh;
}
p.orange {
display: none;
background-color: orange;
line-height: 100vh;
}
<div class="red circle"></div>
<div class="green circle"></div>
<div class="blue circle"></div>
<div class="orange circle"></div>
<div class="bg">
<p class="red">Czerwony</p>
<p class="green">Zielony</p>
<p class="blue">Niebieski</p>
<p class="orange">Pomarańczowy</p>
</div>
Since they are somewhat in the same hierarchy, you can take advantage of the ~ general sibling selector which matches the second element only if it follows the first element (though not necessarily immediately):
/* added */
.red.circle:hover ~ .bg {
background-color: red;
}
.green.circle:hover ~ .bg {
background-color: green;
}
.blue.circle:hover ~ .bg {
background-color: blue;
}
.orange.circle:hover ~ .bg {
background-color: orange;
}
.red.circle:hover ~ .bg p.red { display: block; }
.green.circle:hover ~ .bg p.green { display: block; }
.blue.circle:hover ~ .bg p.blue { display: block; }
.orange.circle:hover ~ .bg p.orange { display: block; }
/* end of edit */
* {
margin: 0;
padding: 0;
}
body {
position: relative;
height: 100vh;
text-align: center;
}
p {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.bg {
position: relative;
height: 100vh;
background-color: #333;
transition: background-color 0.5s ease-in;
}
.circle {
height: 10px;
width: 10px;
border-radius: 50%;
border: white solid 2px;
z-index: 1;
}
.red.circle {
position: absolute;
top: 10%;
left: 10%;
background-color: red;
}
.green.circle {
position: absolute;
top: 10%;
right: 10%;
background-color: green;
}
.blue.circle {
position: absolute;
bottom: 10%;
left: 10%;
background-color: blue;
}
.orange.circle {
position: absolute;
bottom: 10%;
right: 10%;
background-color: orange;
}
p {
transition: background-color 1s ease-in;
}
p.red {
display: none;
background-color: red;
line-height: 100vh;
}
p.green {
display: none;
background-color: green;
line-height: 100vh;
}
p.blue {
display: none;
background-color: blue;
line-height: 100vh;
}
p.orange {
display: none;
background-color: orange;
line-height: 100vh;
}
<div class="red circle"></div>
<div class="green circle"></div>
<div class="blue circle"></div>
<div class="orange circle"></div>
<div class="bg">
<p class="red">Czerwony</p>
<p class="green">Zielony</p>
<p class="blue">Niebieski</p>
<p class="orange">Pomarańczowy</p>
</div>
You can add transition on the .bg class for the desired effect.
I would simplify your code to rely on pseudo element and data-attribute for background and content. It will be then easier to control as you don't need any complex selector:
body {
margin: 0;
background: #333;
min-height: 100vh;
}
.circle {
position: absolute;
height: 10px;
width: 10px;
border-radius: 50%;
border: white solid 2px;
}
.circle::before {
content: attr(data-text);
font-family: Arial, Helvetica, sans-serif;
text-align: center;
color: white;
line-height: 100vh;
font-size: 80px;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -2;
background: inherit;
opacity: 0;
transition: 1s;
}
.circle:hover::before {
opacity: 1;
}
.circle.red {
top: 10%;
left: 10%;
background: red;
}
.circle.green {
top: 10%;
right: 10%;
background: green;
}
.circle.blue {
bottom: 10%;
left: 10%;
background: blue;
}
.circle.orange {
bottom: 10%;
right: 10%;
background: orange;
}
<div class="circle red" data-text="Czerwony"></div>
<div class="circle green" data-text="Zielony"></div>
<div class="circle blue" data-text="Niebieski"></div>
<div class="circle orange" data-text="Pomarańczowy"></div>
The css only solution of #soulshined is great, but just in case anyone wants to use javascript - here's a hint:
const bg = document.querySelector(".bg");
const circles = document.querySelectorAll(".circle");
circles.forEach(circle => circle.addEventListener("mouseenter", (e) => {
const style = getComputedStyle(e.target);
const backgroundColor = style.backgroundColor;
bg.style.backgroundColor = backgroundColor;
}))

Slanted box shadow on left and right side

I am trying to make slanted box shadow on both sides of a div, which I have added here as an image.
The red part is indicating here shadow. actually color is not solid, it should gradually decrease when it is moving to outside from border.
Here is my contribution hope it gives you a baseline.
.box {
width: 150px;
height: 200px;
position: relative;
padding-left: 25px;
padding-right: 25px;
}
.box-content {
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
background-color: white;
border: 2px solid black;
width: 100%;
height: 100%;
position: relative;
}
.box::before {
content: '';
display: block;
border-top: 0;
border-bottom: 180px solid transparent;
border-right: 25px solid red;
position: absolute;
left: 0;
bottom: 0;
}
.box::after {
content: '';
display: block;
border-top: 0;
border-bottom: 180px solid transparent;
border-left: 25px solid red;
position: absolute;
right: -4px;
bottom: 0;
}
<div class="box">
<div class="box-content">
Box
</div>
</div>
Try this:
div{
width: 200px;
height: 200px;
border:1px solid black;
background: white;
}
div:before{
content:' ';
display:block;
width: 200px;
height:200px;
background: linear-gradient(transparent, black);
position: fixed;
transform: matrix3d(1.1,0,0.00,0,0.00,0.71,0.71,0.0007,0,-0.71,0.71,0,0,37,0,1); z-index: -1;
}
<div>Hello</div>
Using transform: skew() applied to the div's before and after
jsFiddle 1
code:
#test {
width: 150px;
height: 220px;
line-height: 220px;
background-color: white;
border: 2px black solid;
text-align: center;
position: relative;
margin: 10px 150px;
}
#test:before, #test:after {
width: 150px;
height: 200px;
position: absolute;
bottom: 0;
left: -11px;
z-index: -1;
content: " ";
display: block;
background-color: red;
transform: skew(5deg, 0);
}
#test:after {
transform: skew(-5deg, 0);
left: 11px;
}
<div id="test">Box</div>
EDIT : to give the shadow effect some real blur with gradient and transparency, we could make use of linear-gradient background with two rgba() values, as well as CSS blur() (1) filter.
jsFiddle 2
code:
#test {
width: 150px;
height: 220px;
line-height: 220px;
background-color: white;
border: 2px black solid;
text-align: center;
position: relative;
margin: 10px 150px;
}
#test:before, #test:after {
width: 150px;
height: 200px;
position: absolute;
bottom: 0;
left: -11px;
z-index: -1;
content: " ";
display: block;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
transform: skew(5deg, 0);
filter: blur(2px);
}
#test:after {
transform: skew(-5deg, 0);
left: 11px;
}
<div id="test">Box</div>
Notes:
(1) browser support for CSS filter

Trying to make a 'cut' button pairing

I need to make two buttons that are grouped and look similar to this..
------------------
| / |
| btn / btn |
| / |
------------------
Except I'm completely stuck and have no idea how to do this even on a theoretical level.
Here's my codepen I'm working on http://codepen.io/robguy21/pen/ONEzpb
I don't know how much help that will be though
edit: you are right this is a better option: http://codepen.io/radvic/pen/aNKKMJ
%btn-reset {
position: relative;
display: inline-block;
background-image: none;
background-color: transparent;
text-align: center;
line-height: normal;
vertical-align: middle;
height: auto;
margin: 0;
padding: 0;
border: 0;
white-space: nowrap;
&:active,
&:focus { outline:none;}
}
$btnHeight: 45px;
button {
#extend %btn-reset;
}
.btn-group {
position: relative;
width: 150px;
height: $btnHeight;
overflow:hidden;
}
%btn-cont {
position: absolute;
width: 50%;
height: 100%;
display: inline-block;
}
.btn-cont--one {
#extend %btn-cont;
background-color: red;
left: 0;
}
.btn-cont--two {
#extend %btn-cont;
background-color: green;
left: 50%;
}
%btn {
position: absolute;
width: 200%;
left: -50%;
top: -50%;
z-index: 5;
height: 200%;
transform: rotate(-60deg);
display: block;
transform-origin: 50% 50%;
&:hover {
background-color: red;
}
}
.one {
#extend %btn;
background-color: #78a44b;
z-index: 10;
margin-left:-18%;
text-indent:18%;
}
.two {
#extend %btn;
background-color: #84caab;
z-index: 5;
margin-left:18%;
text-indent:-18%;
overflow: hidden;
}
button > span{
display: block;
transform: rotate(60deg);
transform-origin: 50% 50%;
}
I'll leave the original link for reference.
original try:
ok this is probably not the most elegant way of doing it as specially as it involves a negative z-index but here it goes:
http://codepen.io/radvic/pen/yOEvNw
You can try something like this, i am create a JSFIDDLE for you
.second{
border-bottom: 100px solid red;
border-left: 60px solid transparent;
border-right: 0px solid transparent;
height: 0;
width: 100px;
float:right;
margin-top:-100px;
}
.first{
border-top: 100px solid green;
border-left: 0px solid transparent;
border-right:60px solid transparent;
height: 0;
width: 100px;
float:left;
}
Just check it out this link JSFIDDLE

How to position a text inside a rotated div box

Like this
Should be centered too.
.diamond {
display: block;
height: 30px;
width: 30px;
background-color: white;
border: 2px solid #dcdcdc;
transform: rotate(45deg);}
Rotate the content back the other way.
* {
margin: 0;
padding: 0;
}
.diamond {
display: block;
height: 30px;
width: 30px;
background-color: white;
border: 2px solid #dcdcdc;
transform: rotate(45deg);
text-align: center;
line-height: 30px;
margin: 25px;
}
.diamond p {
transform: rotate(-45deg);
}
<div class="diamond">
<p>Hi</p>
</div>
I would use a pseudo element for this.
Then i only need to apply one rotation.
That rotation is only on a single element.
.mid-angle {
color: black;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
}
.mid-angle:before {
content: " ";
display: block;
position: absolute;
width: 50px;
height: 50px;
box-sizing: border-box;
border: 2px solid pink;
transform: rotate(45deg);
}
<div class="mid-angle">Hello</div>

Resources