I want to build a parallax effect with pure CSS3 and even tho i used "perspective: 1px;" on my parent element, "transform: translateZ(-1px) scale2;" is not working. The IDE i am operating on is Intellij. Can Anybody help?
body {
color: white;
margin: 0;
padding: 0;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
transform-style: preserve-3d;
perspective: 1px;
}
header {
box-sizing: border-box;
min-height: 100vh;
padding: 30vw 0 5vw;
position: relative;
transform-style: inherit;
width: 100vw;
}
header h1 {
margin-top: -100px;
}
header,
header:before {
background: 50% 50% / cover;
}
header::before {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
display: block;
background-image: url("../../assets/paralax/landscape.jpg");
background-size: cover;
transform-origin: center center 0;
transform: translateZ(-1px) scale2;
z-index: -1;
min-height: 100vh;
}
Related
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
How to remove borders under play button and around logo img in CSS?
.fullscreen {
height: 100%;
width: 100%;
background: no-repeat url('https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg') center / cover;
}
.line_horiz {
position: absolute;
width: 3px;
height: 100%;
background-color: rgba(255, 255, 255, 1);
top: 0;
left: 50%;
}
.line_vert {
position: absolute;
width: 100%;
height: 3px;
background-color: rgba(255, 255, 255, 1);
top: 20%;
left: 0;
}
.logo-img {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
background: #ffffff;
transform: translate(-50%, -50%);
top: 20%;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
.btn {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
}
.btn::after {
content: '';
display: block;
width: 60px;
height: 60px;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="fullscreen">
<span class="line_vert"></span>
<span class="line_horiz"></span>
<div class="logo-img">Logo img</div>
<div class="btn"></div>
</div>
As the horizontal and vertical lines are styling rather than informational content one suggestion is to remove them from the body of the HTML and instead create them using linear gradients on the background of the fullscreen element. That way they don't for example get looked at by screen readers. Also, using linear gradients means we can have 'gaps' in the lines where we want them.
This snippet just does the calculation of the gap for the btn element as the logo element has background white so it doesn't matter that the 'line' goes right across. If this changes then put in a linear gradient with gap calculations in a similar way to that done for the btn.
Note, box-sizing with content has been used and explicitly stated (so borders are included in the calculations and padding is set to zero) in case it has been altered elsewhere in the code.
body {
width: 100vw;
height: 100vh;
}
.fullscreen {
/* set up some variables to make it easier to change things later if you want to */
--logoMid: calc(20% - var(--borderW));
--btnW: 100px;
--btnMid: 50%;
/* position from the top to the middle of the btn */
--borderW: 3px;
--btnTop: calc(var(--btnMid) - (var(--btnW) / 2) - (var(--borderW) / 2));
/* actual position of top of btn element */
--btnBottom: calc(var(--btnTop) + var(--btnW) + var(--borderW));
box-sizing: content-box;
height: 100%;
width: 100%;
background-image: linear-gradient(white 0%, white var(--btnTop), transparent var(--btnTop), transparent var(--btnBottom), white var(--btnBottom), white 100%), linear-gradient(to right, white 0, white 100%), url('https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg');
background-size: var(--borderW) 100%, 100% var(--borderW), cover;
background-position: calc(var(--btnMid) - (var(--borderW) / 2)) 0, 0 var(--logoMid), center top;
background-repeat: no-repeat no-repeat;
margin: 0;
padding: 0;
position: relative;
}
.logo-img {
box-sizing: content-box;
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
background: #ffffff;
transform: translate(-50%, -50%);
top: 20%;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.btn {
box-sizing: content-box;
margin: 0;
padding: 0;
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
}
.btn::after {
box-sizing: content-box;
content: '';
display: block;
width: 60px;
height: 60px;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="fullscreen">
<div class="logo-img">Logo img</div>
<div class="btn"></div>
</div>
Note: run the snippet in full screen as there won't be enough room to show the gap between the logo and btn on the small snippet viewport.
Here is my solution, Its not perfect, but it will give you a good starting points.
I have changes your HTML structure, by removing the divs that create the lines, Instead, I have used pseudo selectors to draw the lines.
Note that, you will have to tweak some of these numbers to properly fit your content.
Please run the example in full screen mode
.fullscreen {
height: 100vh;
width: 100%;
background: no-repeat url("https://www.planetware.com/wpimages/2019/10/switzerland-in-pictures-most-beautiful-places-matterhorn.jpg") center/cover;
}
.logo-img {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
background: #ffffff;
transform: translate(-50%, -50%);
top: 100px;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
.logo-img:before {
content: "";
position: absolute;
height: 3px;
width: calc(50vw - 90px);
background-color: #ffffff;
top: 50%;
left: 130px;
display: block;
}
.logo-img:after {
content: "";
position: absolute;
height: 3px;
width: calc(50vw - 90px);
background-color: #ffffff;
top: 50%;
right: 130px;
display: block;
}
.btn {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #ffffff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 1;
padding: 20px;
box-sizing: border-box;
}
.btn .inner {
width: 100%;
height: 100%;
background: white;
}
.btn:after {
content: "";
display: block;
width: 3px;
height: calc(50vh - 48px);
background: #ffffff;
position: absolute;
top: 100%;
left: 50%;
}
.btn:before {
content: "";
display: block;
width: 3px;
top: calc(-50vh + 220px);
background: #ffffff;
position: absolute;
bottom: 100%;
left: 50%;
}
<div class="fullscreen">
<div class="logo-img">Logo img</div>
<div class="btn">
<div class="inner"></div>
</div>
</div>
i think my implementation of an animated hexagon has several cross-browser-problems:
http://jsbin.com/mojavowapi/1/edit?css,output
.hexagon {
position: relative;
width: 173px;
height: 300px;
background-image: url(https://live.tlprod.de/temp/glas.jpg);
background-size: auto 100%;
background-position: 50% 50%;
transition: all 2s linear;
margin-left: auto;
margin-right: auto;
}
.hexagon:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: inherit;
}
.hexLeftBox, .hexRightBox {
overflow: hidden;
transform: scaleY(1.6) rotate(-45deg);
background: inherit;
top: 27.9%;
position: absolute;
display: inline-block; /* let the block get the width of the containing image */
z-index: 1;
height: 44%;
}
.hexLeft, .hexRight {
width: auto;
height: 100%; /* get full height of parent element, set width to aspect ratio 1:1 */
}
.hexLeftBox {
transform: scaleY(1.6) rotate(-45deg) translate(-35.5%,-35.5%);
}
.hexRightBox {
right: 0;
transform: scaleY(1.6) rotate(-45deg) translate(35.5%,35.5%);
}
.hexLeftBox:after, .hexRightBox:after {
content: "";
position: absolute;
width: 142%;
height: 142%;
transform: rotate(45deg) scaleY(1) scaleX(1.6) translate(-50%,0%);
transform-origin: 0 0;
background: inherit;
transition: all 2s linear;
}
.hexLeftBox:after {
background-position: -7% top;
}
.hexRightBox:after {
background-position: 107% top;
}
.hexagon:hover {
width: 300px;
height: 350px;
}
.hexagon:hover .hexLeftBox:after {
background-position: -35% top;
}
.hexagon:hover .hexRightBox:after {
background-position: 135% top;
}
.hexagon2 {
width: 300px;
height: 350px;
margin-top: 40px;
}
.hexagon2 .hexLeftBox:after {
background-position: -35% top;
}
.hexagon2 .hexRightBox:after {
background-position: 135% top;
}
In this example the above hexagon changes on hover to the -same- size as the other loaded with.
In Chrome 50 the background image of the after-elements disappear AND the aspect ratio crashes
In IE 11 only the aspect ratio of the edges crashes
In Firefox 46 all works fine
..but the funny thing: In all Browser the second static version with the same values as the hover is working fine.
Are there some problems known and fixable?
The crashed aspect ratio is a webkit-optimizing-issue.
It could be fixed only with switching to a javascript-animation with forcing the rerendering via:
$('body').css('display', 'table').height();
$('body').css('display', 'block');
And with jQuery you can do this in the progress-Parameter of the animate()-function.
Switching to a javascript-animation also eleminates the disappearing after-elements.
I have an image with a text box overlay in my app.
I'm trying to fiddle with the size of the faded box. It's too tall, but changing the header margin height isn't working to reduce the height.
Can anyone see what needs to be changed to reduce the height of the text box?
Thanks
.module {
background: url(glowcell.jpg);
background-attachment: fixed;
width: 100%;
min-height: 540px;
position: relative;
overflow: hidden;
margin: 0px;
}
.module > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.module > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 200%;
height: 200%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.module > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25)
}
.module > header > h1 {
margin: 0;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 50px;
position: relative;
z-index: 1;
}
* {
box-sizing: border-box;
}
Hard to tell with just the CSS, can you post more?
My best guess would be this line:
min-height: 540px;
Unless you want the minimum height to be 540px, I would just use height. But like I said, it's almost impossible to give a more accurate answer based on only your CSS.
I am trying to keep a background video centered regardless of how big the user drags the video. It's currently cutting off the right side of the videos when i scroll smaller. Here's what I have:
<section id="home">
<div class="video_shader"></div>
<div class="video_contain">
<video autoplay="" loop="" poster="img/still.jpg" id="bgvid">
<source src="/realWebm.webm" type="video/webm" />
<source src="/realdeal.mp4" type="video/mp4">
<source src="/reaOg.ogv" type="video/ogg" />
</video>
</div>
</section>
.video_contain{
display: block;
position: absolute;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
video {
min-width: 100%;
min-height: 100%;
z-index: -100;
background-position: center;
background-size: cover;
}
#home {
width: 100vw;
height: 100vh;
display:block;
position: relative;
}
I would like the center of the video to be the center of the page always, even if the sides get cut off - that's actually ideal if it happens that way. Would appreciate any help. Thanks for reading!
here's how I typically do background video, and how I did it for the stre.am landing page:
.video_contain {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
video {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
}
This is much shorter and worked for me.
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
transform: translateX(calc((100% - 100vw) / 2));
}
In my use case where I always wanted the video to cover the entire viewport (no matter if the viewport aspect ratio was bigger or lower than the videos), the above solution didn't work exactly how i intended. Instead, the following worked much better:
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.video-container > video {
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
#media screen and (max-aspect-ratio: 1920/1080) {
.video-container > video {
height: 100%;
}
}
#media screen and (min-aspect-ratio: 1920/1080) {
.video-container > video {
width: 100%;
}
}
My video was 1920x1080, and this works in IE11 (didnt test lower) and beyond.
.bg-video-wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.bg-video-wrap > video,
.bg-video-wrap > iframe {
object-fit: cover;
object-position: center center;
width: 100%;
height: 100%;
}
Late to the party but I wanted to give a 2020 answer. Here's a simple solution that lets you have an HTML video both centered and responsive without being "fixed" positioned. It lets you start with a fullscreen intro and add some text right when you start scrolling. No scrollbars, no annoying things. As simple as that.
https://codepen.io/LuBre/pen/GRJVMqE?editors=1100
CSS
* {
box-sizing: border-box;
}
body, html {
margin: 0;
height: 100%;
font-Family: Arial;
}
.video-container {
display: grid;
justify-items: center;
align-items: center;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
position: absolute;
z-index: 1;
top: 50%;
left:50%;
min-width: 100%;
min-height: 100%;
transform: translateX(-50%) translateY(-50%);
}
.video-text {
z-index: 2;
color: #fff;
text-align: center;
}
.video-container h1, .video-container h2 {
margin: 0;
font-size: 3rem;
}
.video-container h2 {
font-size: 1.4rem;
font-weight: normal;
opacity: 0.6;
}
.page-content {
line-height: 1.4rem;
padding: 2rem;
}
HTML
<div class="video-container">
<video autoplay muted loop>
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<div class="video-text">
<h1>Catchy title</h1>
<h2>Everyone loves catchy titles</h2>
</div>
</div>
<div class="page-content">
<h1>New paragaph</h1>
Some random text goes here...
Use object-fit: cover;
video {
position: absolute;
right: 0;
bottom: 0;
height: 100vh;
width: 100vw;
object-fit: cover;
}
just center it like any other element with position absolute
.video_contain {
position: absolute;
width: auto;
min-height: 100%;
min-width: 100%;
left: 50%;
transform: translate(-50%);
}
This worked for me
.video_contain {
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: none;
}
#bgvid {
margin: auto;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: visible;
width: 1267px;
height: auto;
}
This did the trick for me, keeping the video centered all the time and not worrying about the actual dimensions of the video
.video_contain {
position: absolute;
top: 0;
left: 0;
/** could be any size **/
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
video {
display: block;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
So I tested above solutions and couldn't find that one, so here is mine:
video {
position: fixed;
left: 50%;
top: 50%;
min-width: 100%;
min-height: 100%;
transform: translate(50%, -50%);
}
I have this:
.ce_text.forward {
position: relative;
overflow: hidden;
padding: 20px;
background-color: #F8F8F8;
color: #2d353c;
}
.ce_text.forward p {
position: relative;
}
.ce_text.forward .fill_bottom {
width: 500px;
height: 500px;
bottom: 0;
left: -865px;
position: absolute;
margin: auto;
background-color: #ecedee;
top: 0px;
right: 0;
transition: left 0.3s linear 0s;
transform: rotate(45deg);
}
.ce_text.forward:hover .fill_bottom {
left: 0;
}
<div class="ce_text forward block"><div class="fill_bottom"></div>
<p><strong>Headline</strong>Test Test test test<span>Lesen Sie mehr</span></p>
</div>
It works in chrome but not in firefox, can some one help me with the css?
Fiddle
The problem in Firefox seems to be caused by the usage of margin: auto. I have completely re-built your example to eliminate this.
New and Improved
No fixed height. Height is controlled by a percentage (which can be modified) and a min-height.
No extra markup. The triangle is created with a pseudo element and rotated. The text is centered with its <a> wrapper.
Centered triangle. The triangle is centered at any height with bottom: 50% and a negative bottom margin of half its height.
No gaps - The triangle is large enough to eliminate any spacing in the corners. If you need it to be even larger, it can be as large as required; just keep the height to width ratio 1:1 and increase the size of the negative bottom margin.
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
h1 {
background: #333;
height: 40%;
min-height: 140px;
position: relative;
overflow: hidden;
z-index: 0;
}
h1 a {
display: block;
height: 100%;
position: absolute;
top: 50%;
margin-top: -0.56em;
left: 100px;
}
h1:before {
content:'';
display: block;
position: absolute;
bottom: 50%;
margin-bottom: -1000px;
left: -2000px;
height: 2000px;
width: 2000px;
background: #F00;
transform: rotate(45deg);
transition: left 0.3s;
z-index: -1;
}
h1:hover:before {
left: 0;
}
<h1><a>Text</a></h1>
Old Solution
Archived - fixed height option (no transform, should work back to IE8)
I have approached this differently:
The right triangle and the bar are made with pseudo elements and are positioned with percentages
z-index: -1 keeps the pseudo elements behind the text.
overflow: hidden prevents the scroll bar when the triangle is pushed outside.
* {
margin: 0;
padding: 0;
}
.headline {
height: 100px;
background: #333;
color: #FFF;
position: relative;
z-index: 2;
display: inline-block;
width: 100%;
height: 0;
padding: 30px 0 70px 50px;
overflow: hidden;
}
.headline:before {
width: 30%;
content:'';
display: block;
height: 100px;
background: #F00;
position: absolute;
top:0;
left: 0;
transition: all 0.3s linear 0s;
z-index: -1;
}
.headline:after {
content: '';
display: block;
border-bottom: solid 50px transparent;
border-top: solid 50px transparent;
border-left: solid 50px #F00;
height: 0;
width: 0;
left: 30%;
position: absolute;
top:0;
transition: all 0.3s linear 0s;
z-index: -1;
}
.headline:hover:before {
width: 100%;
}
.headline:hover:after {
left: 100%;
}
<h1 class="headline">Text</h1>