I need help my css transition because it seems to be not working at all. Here's my css code. Do you you think that I missed something?
/*header navigation in homepage*/
.home header#main-header {
position: absolute;
top: auto !important;
bottom: 0px !important;
background: rgba(0, 0, 0, 0.7);
transition: all 3s ease-in-out;
}
.home header#main-header.et-fixed-header {
position: fixed !important;
top: 0px !important;
bottom: auto !important;
transition: all 3s ease-in-out;
}
/*end of header navigation in homepage*/
/*full width slider in homepage*/
.fs{
position:absolute;
top:0; right:0; bottom:0; left:0;
z-index: 10;
background-position:bottom;
background-size: inherit;
}
.home #page-container{margin-top:100vh !important;}
/*end of full width slider in homepage*/
Oh, here's a link for the website --> http://concept1.mystudioengine.site/
What I'm trying to do is header nav bar supposed to have an animation on scroll. Please help. Any advice will be much appreciated.
First, is not a good idea use all in this case, add a transition for each specific property that you want to animate.
So, there are some properties and values that you can't animate, like top: auto to top: 0px.
But animate properties like top, is not recommended for performance questions, I suggest you to read this post about achieving 60 FPS animations, and about Critical Rendering Path.
In this case, the best option is to use something like this to animate your header for a fixed position:
/*header navigation in homepage*/
.home header#main-header {
position: absolute;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
transform: translateY(-100%);
transition: transform 3s ease-in-out;
}
.home header#main-header.et-fixed-header {
position: fixed;
transform: translateY(0);
}
/*end of header navigation in homepage*/
Related
I've created a simple modal window (with help) and I understand how it functions to make the background dark after clicking the corresponding link. I can't quite seem to figure out how to make the background-image that I currently have become blurry upon clicking, however. I was hoping to do it fully in css.
Here is what I have so far. What I want the background-image to look like is achieved by using filter: blur(5px);
I think the issue is relating to the fact that I don't entirely understand how the :target function works.
/* Design Modal Window */
/* .modal_style {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px black;
background: rgba(0, 0, 0, 0.8);
z-index: 1;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
} */
Essentially instead of background: rgba(0, 0, 0, 0.8); I want the background to blur, but when I put the filter element in its place it blurs the modal window and not the background.
You can't use blur on the parent, and disable it on the child. You have to create two divs on the same level. Here is an example:
.modal-content{
height:150px;
width:200px;
position: absolute;
background-color:white;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.modal-background{
filter:blur(5px);
position:absolute;
width:100%;
height:100%;
}
<div class="modal-background">
<image src="https://cdn.pixabay.com/photo/2017/08/12/10/13/background-2633962_960_720.jpg"></image>
</div>
<div class="modal-content">
This a modal
</div>
I am trying to set my HTML background in a way that it looks like it consists of two triangles but I cannot seem to get it to fully fit the page. How would I accomplish that and additionally be able to set a custom color for both?
Here is the code I am working with:
#container {
position: relative;
height: 800px;
width: 800px;
overflow: hidden;
background: grey;
margin-left: -0.4%;
margin-top: -0.4%;
}
#container:before {
content: '';
position: absolute;
left: 28%;
top: 28%;
width: 1200px;
height: 1200px;
background-color: rgb(255, 255, 255); /* fallback */
background-color: rgba(255, 255, 255, 0.5);
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
<div id="container"></div>
I tried changing all the height and width to 100vh and 100vw but that did not seem to help and there is no option to get the colors changed. Any help would be appreciated!
You can do it with the background: linear-gradient():
html, body {margin: 0; width: 100vw; height: 100vh}
body {
background: -webkit-gradient(linear, left top, right bottom, color-stop(50%, Salmon), color-stop(50%, Khaki));
background: -webkit-linear-gradient(top left, Salmon 50%, Khaki 50%);
background: -o-linear-gradient(top left, Salmon 50%, Khaki 50%);
background: linear-gradient(to bottom right, Salmon 50%, Khaki 50%);
}
http://jsfiddle.net/Liamm12/kkt1kd34/
I hope this what are you looking to do
I just set up the body height:100%; and Width:100%; the page will take the full screen
We should add min-height: 100% to the container it will helps the body to be full screen
And finally I just added padding-bottom to container:after it will makes the design as triangles
html, body {
height: 100%;
width:100%;
margin: 0;
}
#container {
position: relative;
min-height: 100%;
overflow: hidden;
background-color: #645384;
}
#container:after {
content: '';
position: absolute;
padding-bottom: 141.42136%;
left: 30%;
width: 100%;
background-color: #f37638;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<div id="container"></div>
</body>
</html>
In order to answer this question, I have used multiple techniques:
Create the aspect ratio box: This is necessary for second steps (since I need a square for this to work.
For more information, you can look through this: Aspect Ratio Boxed
I have used CSS border triangle in order to provide what you are requesting. Look for more detail here: CSS Triangle
So what I have done is, creating a square box, setting the border to make the arrow. I have also made the jsfiddle for you to look through.
https://jsfiddle.net/vqmjyjhw/
I have also add css variable on top to help you modify the box fast if you need to:
:root {
--width: 100%;
--halfWidth: 242px;
--topColor: red;
--bottomColor: blue;
}
With width variable, you can use %. But in order for the trick to work, halfWidth need to be in px. You can use some extra javascript to calculate exactly what is the width of your container to set halfWidth properly.
The problem description refers to the following example: http://codepen.io/NilsWe/pen/yoksj
The background of the .main container flickers on the CSS transition in all webkit browsers.
Any of the solutions out there like:
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-webkit-transform-style: preserve-3d;
doesn't seem to work.
Are there any other suggestions?
Try removing
//-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
//-webkit-transform-style: preserve-3d;
That has worked for me in the past.
Also the flickering can be caused by not defining the size of the manipulated element. Make sure you define the height and width of elements that are being manipulated.
I think that there is a conflict between the position of the navbar and the main.
I have changed the positioning from float to absolute, and moved things changing left instead of margin-left; I think that now it works ok
CSS
.nav,
.main {
position: absolute;
height: 100%;
padding: 5em 0 0 0;
background: rgb(150,150,150);
text-align: center;
#include transition(margin-left 5s ease, margin-right 5s ease, left 5s ease);
}
.nav {
width: 30%;
left: -30%;
}
.main {
width: 100%;
margin-left: 0;
margin-right: 0;
background: rgb(200,200,200);
background: url(http://farm6.staticflickr.com/5476/9299430029_08b1ea7494_h.jpg) no-repeat bottom center;
#include background-size(cover);
}
/* ========== active state ========== */
.active-nav .nav {
left: 0%;
}
.active-nav .main {
left: 30%;
margin-right: -30%;
}
demo
Updating the width and height fixed the issue for me.
Im trying to make a zoom effect with background-size. The issue I have is I need to animate from background-size:cover to something like background-size: 105%.
When I try this it with a "transition: 0.1s background-size linear" it animates from 0 to 104%.
Is there anyway I can animate from cover to that percentage with out going back to 0.
(im using cover because I don't know the size of the image but I have a fixed size div to display it in.)
Thanks
Pete
One posibility is to have the background set in a pseudo element, and then do the zoom in the base element. (thru transform property, for instance)
.test {
width: 300px;
height: 300px;
position: relative;
left: 30px;
top: 30px;
transition: all 1s;
}
.test:hover {
-webkit-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.test:after {
content: '';
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: url("http://lorempixel.com/600/400");
background-size: cover;
}
<div class="test">
</div>
Demo
I'm wondering how the people at Panic made the stickies in their blog page!!!
http://www.panic.com/blog/
I got the 3d trasformation, but i really can't understand how they did the moving shadow!
any idea?
(Warning: webkit browser needed)
Just look at the source. They scaled the shadow up (vertically) by 2%.
#features ul li:hover div {
-webkit-transform: scaleY(1.02);
}
The origin and css transition was set in an earlier declaration.
#features ul li div { /* fake blank div included at the start of each out; it holds the shadow */
width: 225px;
height: 210px;
position: absolute;
top: 0;
background-repeat: no-repeat;
-webkit-transform-origin: 0 0;
-webkit-transition: -webkit-transform .4s ease;
}