I want to create a black graphical element with a border that is positioned above the video feed pictured.
I have tried using :before and :after but the border complicates things. Any help would be greatly appreciated.
You can see in the photo that the feed is going below the border, since the graphic element is currently a square with a border radius
The below code is how I created the shape as pictured, but it is faulty since the feed goes above the border:
div.wrap1{
position: fixed;
height: 90vh;
bottom: 0;
left: 0;
width: 80vw;
margin-left: -120px;
.graphic-bg-1{
z-index: 5;
border: 3px solid #3AD8FF;
border-bottom: none;
border-radius: 120px;
position: relative;
width: 100%;
height: 100%;
}
.mask{
position: absolute;
height: 500px;
width: 100%;
background-color: black;
bottom: 0;
// margin-left: -120px;
z-index: 6;
}
}
div.wrap2{
position: fixed;
height: 75vh;
width: 100vw;
right: 0;
bottom: 10vh;
margin-right: calc(-80vw + 123px);
z-index: 7;
.graphic-bg-2{
z-index: 8;
border: 3px solid #3AD8FF;
border-top: transparent;
border-radius: 120px;
position: relative;
width: 100%;
height: 100%;
}
.mask2{
position: absolute;
height: 109px;
width: calc(100% - 3px);
background-color: black;
top: 0;
right: 0;
z-index: 8;
}
}
.first-element {
width: 150px;
height: 100px;
margin-top: 20px;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-top-right-radius: 30px;
float: left;
}
.secound-element {
float: left;
width: 150px;
height: 100px;
margin-top: 70px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-bottom-left-radius: 30px;
margin-left: -1px;
}
<div class="first-element"></div>
<div class="secound-element"></div>
Try this it might helpful
Related
I spent the last two hours creating the following code, and I'm almost done. I just want the text to transition upwards on the image when hovering (image to still be visible). I have looked at other questions/answers that are similar, but the code they use isn't working with mine. Any suggestions?
HTML
<div class="One">
<p class="img-description">TEST!</p>
<img src="https://media2.giphy.com/media/vFKqnCdLPNOKc/giphy.gif?cid=ecf05e47eb603b7921279bc600f6c24e2c59bff5d8050e4b&rid=giphy.gif">
</div>
<div class="Two"> <p class="img-description-two">TEST!</p>
<img src="https://media0.giphy.com/media/26xBEez1vnVb2WgBq/200w.webp?cid=ecf05e47eb603b7921279bc600f6c24e2c59bff5d8050e4b&rid=200w.webp">
</div>
<div class="Three">
<p class="img-description-three">TEST!</p>
<img src="https://media.giphy.com/media/Y7l6oTRsxCC1a/giphy.gif">
</div>
CSS
body {
position: relative;
height: 500px;
border: #ffd28a 5px solid;
}
.One {
display: inline-flex;
justify-content: space-evenly;
background-color: #ffd28a;
width: 250px;
height: 250px;
position: relative;
top: 100px;
left: 110px;
margin: 0 100px 0 0;
border: 5px solid #ffd28a;
border-radius: 8px;
}
.img-description {
display: none;
width: 240px;
height: 240px;
background-color: #ffd28a;
position: relative;
margin: 0 90px 0 0;
border: 5px solid #ffd28a;
border-radius: 8px;
visibility: hidden;
opacity: 0;
}
.One:hover .img-description {
display: inline-block;
visibility: visible;
opacity: .5;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 5px;
border: 5px solid #ffd28a;
border-radius: 8px;
}
.Two {
display: inline-flex;
justify-content: space-evenly;
background-color: #ffd28a;
border: royalblue;
width: 250px;
height: 250px;
position: relative;
top: 100px;
left: 175px;
margin: 0 100px 0 0;
border: 5px solid #ffd28a;
border-radius: 8px;
}
.img-description-two {
display: none;
width: 240px;
height: 240px;
background-color: #ffd28a;
position: relative;
margin: 0 90px 0 0;
border: 5px solid #ffd28a;
border-radius: 8px;
visibility: hidden;
opacity: 0;
}
.Two:hover .img-description-two {
display: inline-block;
visibility: visible;
opacity: .5;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 5px;
border: 5px solid #ffd28a;
border-radius: 8px;
}
.Three {
display: inline-flex;
justify-content: space-evenly;
background-color: #ffd28a;
border: sandybrown;
width: 250px;
height: 250px;
position: relative;
top: 100px;
left: 220px;
margin: 0 100px 0 0;
border: 5px solid #ffd28a;
border-radius: 8px;
}
.img-description-three {
display: none;
width: 240px;
height: 240px;
background-color: #ffd28a;
position: relative;
margin: 0 90px 0 0;
border: 5px solid #ffd28a;
border-radius: 8px;
visibility: hidden;
opacity: 0;
}
.Three:hover .img-description-three {
display: inline-block;
visibility: visible;
opacity: .5;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 5px;
border: 5px solid #ffd28a;
border-radius: 8px;
}
img {
width: 250px;
height: 250px;
border: 5px ;
border-radius: 7px;
}
Basic idea is
Make container position to relative, hide overflowing content.
Make text absolute position and push it bottom (hide it).
Reveal it on hover
.img-container {
position: relative;
width: 300px;
height: 200px;
border: 1px solid #ccc;
overflow: hidden;
}
.img-container p {
background: #fff;
position: absolute;
bottom: -50px;
z-index: 1;
left: 35%;
transition: 1s;
}
.img-container:hover p {
bottom: 20px;
}
<div class="img-container">
<img src="https://i.picsum.photos/id/83/300/250.jpg" />
<p>Image Caption</p>
</div>
I am looking for a way of creating a "Spiral" in CSS.
Here is an image to make it a bit more clear what I am trying to achieve:
So a partial circle with an outline that gets bigger.
Ideally I want to be able to set the length of the Spiral. (from (0) to 360°)
Also it would be nice to place a cricle at the end (just like in my sample)
Here is a codesnippet of what I came up so far.
* {margin: 0; padding: 0;}
div {
box-sizing: border-box;
width: 200px; height: 200px;
margin: 0 auto;
background: #fff;
border-top: 30px solid #fd0;
border-right: 40px solid #fa0;
border-bottom: 60px solid #f50;
border-left: 0 solid blue;
border-radius: 50%;
position: relative;
}
div::after { /* kreis */
content: "";
position: absolute; top: 80%; left: 8%;
width: 90px; height: 90px;
background: red;
border-radius: inherit;
}
div::before { /* hide the stuff that is too much. */
content: "";
position: absolute; top: 50%; left: 0;
width: 50px; height: 100%;
background-color: inherit;
}
<div></div>
I would also accept an svg way of doing this.
this what i came up with some tweaking Css and html i guess it similar to the image DEMO Not tested on IE not sure whether responsive it is
.spiral{
background-color:black;
width: 100px;
height:100px;
border-radius:50%;
}
.spiral:before{
content: '';
width: 27px;
height: 43px;
background-color: white;
position: absolute;
border-top-right-radius: 144px;
border-bottom-left-radius: 61px;
border-bottom-right-radius: 88px;
left: 53px;
top: 25px;
}
.spiral:after{
content: '';
width: 68px;
height: 52px;
background-color: white;
position: absolute;
left: 4px;
top: -11px;
transform: rotateZ(200deg);
}
<div class="spiral"></div>
I'd like to connect some CSS circles with a vertical line between them.
I've attempted to use the pseudo-element :after selector as follows:
.circle {
height: 45px;
width: 45px;
border-radius: 50%;
border: 2px solid;
position: relative;
border-color: #889EB7;
}
.circle:before {
content: "";
display: block;
position: absolute;
z-index: 1;
left: 18px;
top: 0;
bottom: 0;
border: 1px dotted;
border-width: 0 0 0 1px;
}
But I'm not getting any result at all.
Photo for reference of what I'd like to accomplish:
Use the :before pseudo element this way:
* {font-family: 'Segoe UI'; font-size: 10pt;}
.circle {position: relative; border: 2px solid #999; border-radius: 100%; width: 50px; line-height: 50px; text-align: center; margin-top: 50px; background-color: #fff; z-index: 2;}
.circle:first-child {margin-top: 0;}
.circle:before {position: absolute; border: 1px solid #999; width: 0; height: 50px; display: block; content: ''; left: 50%; z-index: 1; top: -54px; margin-left: -1px;}
.circle:first-child:before {display: none;}
<div class="circle">Step 1</div>
<div class="circle">Step 2</div>
<div class="circle">Step 3</div>
You do have to give your :before element a width and a height if you want ti to appear as a line. Have a look at this:
.circle {
height: 45px;
width: 45px;
border-radius: 50%;
border: 2px solid;
position: relative;
border-color: #889EB7;
}
.circle:before {
content: "";
display: block;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
border: 1px dotted;
border-width: 0 0 0 1px;
width: 1px;
height: 100px;
}
<div class='circle'></div>
I am trying to create a ribbon at the beginning of a rectangle. However, I cannot figure out how to make it appear BEHIND the rectangle.
Please see this codepen: http://codepen.io/gosusheep/pen/aOqOBy
The part for creating the ribbon and putting it behind the rectangle is here:
.rectangle::before{
content: "";
width: 0;
height: 0;
display: block;
position: absolute;
z-index: -1;
border-left: 25px solid transparent;
border-right: 25px solid $blue;
border-top: 25px solid $blue;
border-bottom: 25px solid $blue;
left: -30px;
top: 10%;
}
Even with position: absolute, and z-index: -1, it appears ON TOP of the div.
Can anyone help with this?
What is happening here is that apparently, the property transform: translateX(-50%); it's "overriding" in some way the z-index. My solution is just center rectangle otherwise, for example:
.rectangle{
margin: 0 auto;
}
DEMO
The reason for your problem is not because children cannot be positioned behind their parent but because you are using a transform on the parent. Using transforms affect the stacking context like mentioned in this answer by BoltClock.
One solution would be to avoid the transform totally and use left: calc(50% - 100px) instead to position the ribbon at the center (like in the below snippet). (50% - 100px) is used as the value because 100px is half of the box width (50% is the center point of the parent).
.rectangle {
width: 200px;
height: 50px;
background-color: #8080ff;
position: relative;
left: calc(50% - 100px); /* newly added */
border: 1px #6666ff solid;
}
ul {
list-style: none;
}
li {
display: inline;
}
li + li::before {
content: " | ";
}
.container {
width: 100%;
position: relative;
}
.rectangle {
width: 200px;
height: 50px;
background-color: #8080ff;
position: relative;
left: calc(50% - 100px); /* newly added */
border: 1px #6666ff solid;
}
.rectangle::before {
content: "";
width: 0;
height: 0;
display: block;
position: absolute;
z-index: -1;
border-left: 25px solid transparent;
border-right: 25px solid #8080ff;
border-top: 25px solid #8080ff;
border-bottom: 25px solid #8080ff;
left: -30px;
top: 10%;
}
<p>put a pipe between nav elements</p>
<nav>
<ul>
<li>banana</li>
<li>woof</li>
<li>quack</li>
</ul>
</nav>
<p>Ribbon on the end of a rectangle</p>
<div class='container'>
<div class='rectangle'></div>
</div>
If in case you can't use the above solution, then you could follow the approach described below.
Assuming you don't have any other use for the ::after pseudo-element, you could use that to create the rectangle and give it a z-index higher than the ::before pseudo-element to make it appear behind the rectangle.
/* Modified */
.rectangle {
width: 200px;
height: 50px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
/* Added */
.rectangle::after {
content: "";
width: 100%;
height: 100%;
top: 0px;
left: 0px;
display: block;
position: absolute;
background-color: #8080ff;
border: 1px #6666ff solid;
z-index: -1;
}
.rectangle{
padding: 4px;
box-sizing: border-box;
}
Below is a sample snippet:
ul {
list-style: none;
}
li {
display: inline;
}
li + li::before {
content: " | ";
}
.container {
width: 100%;
position: relative;
}
.rectangle::before {
content: "";
width: 0;
height: 0;
display: block;
position: absolute;
z-index: -2;
border-left: 25px solid transparent;
border-right: 25px solid #8080ff;
border-top: 25px solid #8080ff;
border-bottom: 25px solid #8080ff;
left: -30px;
top: 10%;
}
/* Modified */
.rectangle {
width: 200px;
height: 50px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
/* Added */
.rectangle::after {
content: "";
width: 100%;
height: 100%;
top: 0px;
left: 0px;
display: block;
position: absolute;
background-color: #8080ff;
border: 1px #6666ff solid;
z-index: -1;
}
.rectangle{
padding: 4px;
box-sizing: border-box;
}
<p>put a pipe between nav elements</p>
<nav>
<ul>
<li>banana</li>
<li>woof</li>
<li>quack</li>
</ul>
</nav>
<p>Ribbon on the end of a rectangle</p>
<div class='container'>
<div class='rectangle'>
Some content
</div>
</div>
Solution here, look closely at z-indexes and positions
.container{
position: relative;
width: 100%;
z-index: 1;
}
.rectangle{
width: 200px;
height: 50px;
background-color: $blue;
position: absolute;
left: 50%;
border: 1px darken($blue,5%) solid;
}
.rectangle::after{
content: "";
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid $blue;
border-top: 25px solid $blue;
border-bottom: 25px solid $blue;
left: -30px;
top: 10px;
position: absolute;
z-index: -1;
}
And your codepen edited http://codepen.io/anon/pen/mJXeed working now
Check this link. I want to position the blue and black div exactly at the right and bottom of the red div respectively. I want the right vertex of the blue div to align with the right vertex of the red one and the bottom vertex of the black div to align with the bottom vertex of the red one. What is the best way to do that?
Thank You in advance.
The HTML
<div id="diamond">
<div id="diamond_right"></div>
<div id="diamond_bottom"></div>
</div>
The CSS
#diamond {
width: 0;
height: 0;
border: 300px solid transparent;
border-bottom-color: red;
position: relative;
top: -300px;
z-index:0;
}
#diamond:after {
content: '';
position: absolute;
left: -300px;
top: 300px;
width: 0;
height: 0;
border: 300px solid transparent;
border-top-color: red;
}
#diamond_right {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: blue;
position: relative;
top: -50px;
z-index:1;
}
#diamond_right:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: blue;
}
#diamond_bottom {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: black;
position: relative;
top: -50px;
z-index:2;
}
#diamond_bottom:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: black;
}
Much easier to do this with a single normal div and a couple of pseudo elements using standard techniques and then rotate the whole lot together.
#diamond {
width: 300px;
height: 300px;
background: red;
position: relative;
margin: 75px;
transform: rotate(-45deg);
}
#diamond::before,
#diamond::after {
content: '';
width: 50px;
height: 50px;
bottom: 0;
position: absolute;
}
#diamond::before {
background: blue;
right: 0;
}
#diamond::after {
background: black;
left: 0;
}
<div id="diamond"></div>
I did this with the blue one in your fiddle and it aligned with the right vertex, if you plug this in is this what you were looking to achieve?
#diamond_right {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: blue;
position: absolute;
top: 200px;
right: -300px;
z-index:1;
}
#diamond_right:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: blue;
}