Good day
Please I Need help
I have this css that I have created for preventing someone from clicking the right part of the youtube video I have embeded
The challenge is that I need to create another div that has the same box but want it to be on the same line to the top left of the video
What I have is below.
How can I create another div but that would not be under?
<div style="width: 150px; height: 545px; position: absolute; opacity: 0.01; right: 1px; top: 2px; background-color: #000000;"></div>
<div style="width: 150px; height: 545px; position: absolute; opacity: 0.01; right: 1px; top: 2px; background-color: #000000;"></div>
I want the box to be on the same line
One to the top left line one to the top right on the same line
Surprisingly after going through some trainings on W3 Schools
I came up with this and it solved the problem.
<div style="width: 150px; height: 545px; position: absolute; z-index: 1; opacity: 0.01; right: 1px; top: 2px; background-color: #000000;"></div>
<div style="width: 350px; height: 70px; position: absolute; opacity: 0.01; left: 1px; top: 2px; background-color: #000000;"></div>
<div style="width: 190px; height: 50px; position: absolute; opacity: 0.01; left: 0px; bottom: 190px; background-color: #000000;"></div>
Related
i'm struggling with CSS trying to create special shape.
This is the shape i wanna create
enter image description here
Do you have any solution ?
Thank's
How about this:
div {
position: relative;
height: 300px;
overflow: hidden;
border-radius: 25px;
}
.bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-color: blue;
transform: skewY(-6deg);
transform-origin: top right;
border-radius: 25px;
<div>
<div class="bg"></div>
</div>
I need to create a circle with an image inside, so far I almost achieved this but I want set the content dimension too, this is my code:
.circle {
position: absolute;
z-index: 10;
top: -25%;
left: 50%;
border: 5px solid #a7151f;
margin: 0;
padding: 0;
height: 100%;
line-height: 0;
text-align: center;
text-transform: uppercase;
transform: translateX(-50%);
background-color: #a7151f;
width: 500px;
height: 400px;
border-radius: 50%;
content: url("logo");
}
<img class="img-responsive center-block circle">
this is a fiddle.
As you can see I have to display only half of the circle, but the problem is that the logo is not entire visible. How can I manage this?
To fix this you needed to give the img a z-index greater than the circles and then center it ontop of the circle.
Here's the code:
.circle{
background-color: red;
position: absolute;
top: -250px;
left: 50%;
border: 5px solid #a7151f;
margin: 0;
padding: 0;
height: 100%;
line-height: 0;
text-align:center;
text-transform: uppercase;
transform: translateX(-50%);
background-color: #a7151f;
width: 500px;
height: 400px;
border-radius: 50%;
}
.img {
content: url("https://www.google.it/logos/doodles/2019/rugby-world-cup-2019-opening-day-6753651837108235-l.png");
z-index: 10;
position: absolute;
left: 50%;
transform : translateX(-50%);
}
<div class="circle">
</div>
<div class="img">
</div>
here is the jsfiddle fix: http://jsfiddle.net/t5L49f7g/
Hope this helps!
I am creating a website screen as a temporary "coming soon page". I have a circle behind some text. The text always seems to be centred on the page no matter the size of the browser window but the circle seems to move locations on different sizes. Is there a way for me to have the circle be completely behind the text?
Being new to code I followed some tutorials but none seemed to work
Heres the website in question: http://unixcast.com/
body{
margin: 0px;
padding: 0px;
background-color: #19181D;
}
.circle{
height: 400px;
width: 400px;
border-radius: 50%;
background: linear-gradient(#313247 0%,#19181D 30%);
position: absolute;
top: 20%;
left: 35%;
}
.circle:before,
.cirlce:after{
content: '';
height: 400px;
width: 400px;
background: linear-gradient(#FF849D 0%,#FF849D 5%, #2D2133 25%);
border-radius: 50%;
position: absolute;
top: 42%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-filter:blur(7px);
z-index: -1;
}
.cirlce:after{
width: 415px;
top: 35%;
-webkit-filter:blur(14px);
opacity: .3;
}
.unixcast{
font-family: sans-serif;
font-size: 40px;
color: white;
letter-spacing: 20px;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%)
}
.msg{
font-family: sans-serif;
font-size: 20px;
color: white;
letter-spacing: 20px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span class="circle"></span>
<span class="unixcast"> UNIXCAST </span>
<span class="msg">IS COMING SOON!</span>
<span class="notifymsg"> GET NOTIFIED WHEN IT'S READY</span>
<span class="field">
<input type="email" name="ENTER YOUR EMAIL"/>
<button>NOTIFY ME</button>
</span>
</body>
</html>>
I expected to see the circle directly behind the text but it seems to move with different size screens and windows
please write this css for you circle class
.circle {
height: 400px;
width: 400px;
border-radius: 50%;
background: linear-gradient(#313247 0%,#19181D 30%);
position: absolute;
left: 0px;
right: 0px;
margin: auto;
top: 0px;
bottom: 0px;
}
I would like to transform a div to apply it in front of a panel.
position: absolute;
font-size: 28px;
top: 203px;
left: 149px;
width: 661px;
height: 384px;
-webkit-transform: skewY(4.1deg) rotate(1deg);
background-color: red;
but on bottom right the div doesn't fill to the background.
What is the css property to set it correctly ?
You can add skewX to your css.
I tried this and almost filled the shape :
position: absolute;
font-size: 28px;
top: 203px;
left: 149px;
width: 641px;
height: 354px;
-webkit-transform: skewY(4.1deg) rotate(1deg) skewX(2deg);
background-color: red;
This code fixes the bottom right corner and takes other answers into consideration:
.background {
position: relative;
width: 960px;
height: 720px;
background-image: url('http://www.radiomelodie.com/actus/actu-08062017id7801.jpg');
}
.overlay {
position: absolute;
font-size: 28px;
top: 200px;
left: 149px;
width: 665px;
height: 395px;
-webkit-transform: skewY(3deg) skewX(1deg) rotate(0.9deg);
background: linear-gradient(359.2deg, transparent 6%, red 6%)
}
<div class="background">
<div class="overlay"></div>
</div>
On Chrome and Safari (on the ipad) everything displays as it should. However, when I "add to home screen", only my background image shows, and the other divs dont. I think it might have something to do with the z-index or position of the other divs, but I can't figure out what to do.
CSS
#map{ background: url('img/map.png');}
#map_gate{
z-index: 100;
width: 299px;
height: 313px;
top: 149px;
left: 539px;
position: absolute;
background: url('img/map_gate_closed.png');}
#map_dora{
z-index: 200;
width: 65px;
height: 91px;
top: 473px;
left: 83px;
position: absolute;
background-image:url('img/map_dora.png');}
.background{
z-index: 1;
top: 0;
left: 0;
width: 1024px;
height: 768px;
position: fixed;
display: none;
overflow: hidden;}
.selected_area {
z-index: 10;
text-align:center;
position: fixed;
display: none;
/*background-repeat:no-repeat;*/
overflow: hidden;}
HTML
<div id="map" class="background map"></div>
<div id="map_gate" class="selected_area map"></div>
<div id="map_dora" class="selected_area map"></div>