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;
}
Related
So I'm having some trouble with a css animation "underline from center" to be precise.
It displays properly in every browser except edge.
I'm getting small dots underneath the links where the animation displays itself (see picture)
dots underneath links in navbar
enter code here`
.hvr-underline-from-center {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
overflow: hidden;
}
.hvr-underline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #b80c0c;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
left: 0;
right: 0;
}
enter code here`
Thanks for the help
This is not an Edge issue. It works on Edge, depending on the text (and maybe also the density of your screen). This type of thing also happens sometime on Firefox and even Chrome.
It's a rounding error : that's why on your picture you've got dot below some menu items but not all.
Try adding a visibility hidden, it'll do the trick.
Also for this type of thing animating transform: scaleX if better performance wise than animating an item width, (and an item with a scaleX(0) will always have a length of 0 no rounding error can happen here)
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*/
I am creating a small business page. I have a background image that I created for my navigation buttons. I want them to have the transition effect for when hovering over the image. It works in Chrome, but I can’t figure out why my code won’t work in Firefox or Internet Explorer.
.nav li a.active {
background-image: url('../images/02amainhover.png');
background-color: transparent;
background-repeat: no-repeat;
background-attachment: center center;
width: 245px;
height: 74px;
left: 72px;
top: 432px;
position: fixed;
transition: all .8s ease-out;
-moz-transition: all .8s ease-out;
}
.nav li a.active:hover {
background-image: url('../images/03amainhover.png');
background-color: transparent;
background-repeat: no-repeat;
background-attachment: center center;
width: 245px;
height: 74px;
left: 72px;
top: 432px;
position: fixed;
transition: all .8s ease-in;
-moz-transition: all .8s ease-in;
}
Couple of things. First is that you have wayyyyy too much repeated code. Websites assume the same code until you tell it to change it, so copying all those styles is pointless. You would only need to update it with the thing you want to transition. That being said, you can't transition background images. Please reference this list for transitioning styles: https://www.w3.org/TR/css3-transitions/#animation-of-property-types-
You can make two images with position: absolute and different z-indexes. The image on the top could have opacity transition from 1 to 0. It will work in all browsers.
As #Chris Stanley pointed out you cannot transition background images.
You have many options depending on the exactly what your transition is meant to look like. I haven't seen the images.
You can use filters
You can combine multiple images in a single image file (grid, top/bottom, etc) and then use background positioning to "move" (instantly) from one to the other. You can combine this with other transitions or filters to provide additional effects. This is a pretty old trick that you can put a new twist on with added transitions and filters.
EDIT (after seeing images):
your new code might look like this:
.nav li a.active {
background-image: url('../images/02amainhover.png');
background-color: transparent;
background-repeat: no-repeat;
background-attachment: center center;
width: 245px;
height: 74px;
left: 72px;
top: 432px;
position: fixed;
transition: all 0.8s ease-out;
box-shadow:0px 0px 2px 2px rgba(0,0,0,0.5);
}
.nav li a.active:hover {
filter: invert(100%);
transition: all 0.8s ease-in;
}
(I don't think you need the -moz-transition anymore either.)
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.
I'm having a problem with CSS 3D perspective property.
<figure>
<img src="http://www.saintbioz.fr/wp-content/uploads/2010/02/paysage-montagneux.jpg" width="512" height="384" alt="Landscape" />
<figcaption>Summer in the mountains</figcaption>
</figure>
I just want to animate the figcaption at :hover to perform a folding-down effect (like http://davidwalsh.name/demo/folding-animation.php) from -90deg to 0deg , considering that -90deg represent the block flatten (and so not visible)
/** vendor prefixes have been removed for better readability **/
figure {
display: inline-block;
position: relative;
line-height: 0;
perspective: 300px;
}
figcaption {
background-color: rgba(0,0,0,0.2);
padding: 20px 10px;
position: absolute;
top: 0;
right: 0;
left: 0;
transition-property: all;
transition-duration: 500ms;
transform: rotateX(-123deg);
transform-origin: top;
}
figure img:hover + figcaption {
transform: rotateX(0deg);
}
The problem is that perspective does not give the same render for Chrome and Firefox.
I had to set manually the figcaption default transform to rotateX(-123deg); depending of the perspective value which is 500px, and it works well on Chrome, but not on Firefox.
Theoretically, it should be -90deg when not :hover and 0deg when :hover, but seems that the perspective attribute changes the length of the depth field and so -90deg does not works anymore.
I wonder what are the best practices when playing with perspective and rotate in order to make it works well on all recent browsers ?
Best regards.
PS: Just copy/paste the HTML & CSS and try it in Chrome and FF, you should immediately see what's wrong ;)
I know it won't be helpful, but personnaly I tried some experiments with perspective and each browser render the perspective in a different way. Some browsers don't support the perspective. So, your application won't be accesible to everyone, maybe you should use another technology until all of the main browsers are fully compliant with the perspective.
Probably it's too late for this answer to be useful.
Anyway, the best way to make the element invisible is to keep the angle at 90deg, but set the perspective origin to be just above it. (No need to figure the exact angle that will get the desired effect)
figure {
display: inline-block;
position: relative;
line-height: 0;
perspective: 300px;
perspective-origin: top center; /* added this setting */
}
figcaption {
background-color: rgba(0,0,0,0.2);
padding: 20px 10px;
position: absolute;
top: 0;
right: 0;
left: 0;
transition-property: all;
transition-duration: 2s;
transform: rotateX(-90deg);
transform-origin: top;
}
figure img:hover + figcaption {
transform: rotateX(0deg);
}
<figure>
<img src="http://www.saintbioz.fr/wp-content/uploads/2010/02/paysage-montagneux.jpg" width="512" height="384" alt="Landscape" />
<figcaption>Summer in the mountains</figcaption>
</figure>