Picture of positioned div's using css
based on the css that i wrote using absolute position, I thought the boxes would meet evenly on the ends but the blue box is not flush with the yellow box. Is there a rule that i'm misunderstanding?
Add top: 0; and left: 0; to class blue. By default they are being set to top: 8px & left: 8px causing the overlap.
.blue {
height: 100px;
width: 100px;
background-color: blue;
position: absolute;
top: 0;
left: 0;
}
.yellow {
height: 100px;
width: 100px;
background-color: yellow;
position: absolute;
top: 100px;
left: 100px;
}
.red {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 200px;
left: 200px;
}
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="yellow"></div>
</body>
Add this to your blue class
top: 0;
left: 0;
This may help more as well: How to place div in top right hand corner of page
Related
AOS fade in should work on scroll, but setting overflow-x and y interferes with the effect. Nothing happens on scroll, fade in only works when i resize the window. I'm using this library: AOS Library
main {
height: 120vh;
perspective: 2px;
overflow-x: hidden;
overflow-y: auto;
}
section {
transform-style: preserve-3d;
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
z-index: -1;
}
.no-parallax {
height: auto;
background-color: #000000;
}
.no-parallax_footer {
z-index: 999;
width: 100%;
}
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: 8;
}
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>
AOS.init({
easing: 'ease-in-quad',
});
</script>
Does someone know how to work around this problem?
I found the same problem here, but it doesn't work on mine.
Solution is to add: <script>document.body.querySelector('main').addEventListener('scroll', AOS.refresh);</script>
I have a trouble using linear-gradient in Safari 15.2.
I wanna to create a block with fade effect at the end if children do not fit.
I have created an example: https://codepen.io/serejich/pen/xxXLvEG.
Code:
<div class="gradient-container">
<div class="elements">
<p>Element 1</p>
<p>Element 2</p>
<p>Element 3</p>
</div>
<div class="gradient"></div>
</div>
* {
margin: 0;
}
.gradient-container {
background-color: coral;
width: 200px;
height: 30px;
position: relative;
display: flex;
align-items: center;
}
.elements {
padding: 0 10px;
display: flex;
column-gap: 10px;
overflow-x: hidden;
}
.elements p {
color: #fff;
white-space: nowrap;
}
.gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) calc(100% - 50px), coral);
}
If you will open this in Safari, there would be something like a white area at the right of block.
What causes this and are there any ways to fix it?
This is a bug in safari that has to do with the way browsers interpolate between gradients.
A common answer is to do what you did, using rgba(255, 255, 255, 0), however, Safari still interprets this as white and leads to that unwanted additional of white to the gradient. A fix is to use the same color you are transitioning from (coral in this case) and set it to transparent, which for coral would be rgba(255, 127, 80, 0). The example below uses the code from your pen with the fix applied for safari.
See this stack for more
* {
margin: 0;
}
.gradient-container {
background-color: coral;
width: 200px;
height: 30px;
position: relative;
display: flex;
align-items: center;
}
.elements {
padding: 0 10px;
display: flex;
column-gap: 10px;
overflow-x: hidden;
}
.elements p {
color: #fff;
white-space: nowrap;
}
.gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*RGBA equivalent to coral html color with alpha set to 0 - fixes safari interpolation bug*/
background: linear-gradient(to right, rgba(255, 127, 80, 0) calc(100% - 50px), coral);
}
<div class="gradient-container">
<div class="elements">
<p>Element 1</p>
<p>Element 2</p>
<p>Element 3</p>
</div>
<div class="gradient"></div>
</div>
I am trying to practice simple CSS Animations with Keyframes.
I am trying to move the square from left to right, however, this does not seem to be working with position relative/absolute. I works when I do transform: translateX(...) or something similar, but not with the aforementioned method. Any ideas why?
CSS Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(70, 70, 162);
}
.box1 {
height: 600px;
width: 80%;
background-color: white;
margin: 50px auto;
border: 5px solid black;
position: relative;
}
.square1 {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
animation-name: left-right;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes left-right {
0% {
top: 0px;
left: 0px;
}
100% {
top: 0px;
right: 0px;
}
}
So, in the Keyframes you had right
100% {
top: 0px;
right: 500px;}
where as it needed to be left
100% {
top: 0px;
left: 500px;}
full code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(70, 70, 162);
}
.box1 {
height: 600px;
width: 80%;
background-color: white;
margin: 50px auto;
border: 5px solid black;
position: reletive;
}
.square1 {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
animation-name: left-right;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes left-right {
0% {
top: 0px;
left: 0px;
}
100% {
top: 0px;
left: 500px;
/*here*/
}
}
I am using vuetify and I'm trying to add a shape divider like what I've shown in the picture, but I'm unable to do it.
You need to do that with HTML and CSS.
There is some ways.
It would be done with a background image
Another way is a svg file and css
Do it with css transform
You can check this codepen
header {
position: relative;
height: 300px;
background-image: linear-gradient(#ff9d2f, #ff6126);
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: center;
}
header h1 {
color: white;
}
.divider {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100px;
/* drop the height to have a constant angle for all screen widths */
}
<header>
<h1>Header Content</h1>
<img src="https://assets.codepen.io/t-517/divider-triangle.png" class="divider" />
</header>
<section>
<h1>Section Content</h1>
</section>
to get Idea how to make it as 2nd way .
and this one codepen for make it with css transform(third way).
header {
position: relative;
height: 300px;
overflow: hidden;
}
.header__bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(#ff9d2f, #ff6126);
transform: skewY(-6deg);
transform-origin: top left;
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: center;
}
header h1 {
position: relative;
color: white;
}
<header>
<div class="header__bg"></div>
<h1>Header Content</h1>
</header>
<section>
<h1>Section Content</h1>
</section>
I have checked possibilities and issues with frameworks. Bootstrap has additional code and some code need to be modified.
I enclose my code CSS and I kindly ask you to check and inform me if this is correct, specially position elements.
.carousel {
height: 250px;
margin-bottom: 20px;
margin-top: 10px;
}
.carousel-caption {
z-index: 20;
}
.carousel-caption {
left: 10%;
padding-bottom: 30px;
right: 10%;
}
.carousel .item {
height: 250px;
}
.carousel-inner > .item > img {
height: 250px;
left: 0;
min-width: 100%;
position: relative;
top: 0;
}
.carousel-control {
width: 5%;
}
.carousel-control.left, .carousel-control.right {
display: block;
float: left;
height: 250px;
width: 5%;
}
.carousel-control.left {
background: url("../images/left1.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.carousel-control.right {
background: url("../images/right1.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.carousel-indicators {
bottom: 10px;
left: 40%;
list-style: none outside none;
margin-left: -20%;
padding-left: 0;
position: absolute;
text-align: center;
width: 50%;
z-index: 15;
}