I know there are a lot of topics covering blur caused by CSS animations, but I seem to have come across a rather unique use case where every solution I've come across simply doesn't work.
I made a codepen showing a minimalist setup of my exact issue:
Codepen
Basically, I have a div with opacity 0.95 that is skewed by 10 degrees, and whose inner content is skewed by -10 degrees (so that it appears upright). Within this content there is a paragraph at the bottom. When you hover over it, it triggers an animation of the paragraph being shifted to the right. Unfortunately this makes all the text on the page blur.
Note that removing either both skew transformations or the opacity setting make the text not blur anymore.
This is probably caused by the skew and the reverse skew that force the browser to accelerate the process. But you don't have to apply two skews to get this result, you can also use a gradient background
background:linear-gradient(170deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 164px, #a3d5d3 163px, #a3d5d3 calc(100% - 165px), rgba(0,0,0,0) calc(100% - 165px), rgba(0,0,0,0) 100%);
Related
I want to create buttons as seen in the following picture. But I don't have any idea, on how to reach this. So the buttons shouldn't simply be rotated, but the horizontal edges shall remain horizontal.
Can someone give me a hint or a keyword for this issue?
Thanks!
The easiest way to create that sort of thing in the modern web is to use a clip path. Something like:
clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
Pair that with a transform: rotate on the text and voila.
It looks like your screenshot comes from a website. You can use the dev tools to inspect the buttons to see how they did it.
You can use the transform: skew CSS proportion to skew the whole container.
It retains all functionality of the buttons, including hover effects etc.
Transform is a really powerful option in CSS. Here is a little article on w3schools about it: Link
If you only want to rotate it(It's a bit hard to see if it is just rotated or skewed), something like an absolute positioned after element applied to the container with a transform: rotate might be an option, which will not rotate or move the buttons.
I'm trying to accomplish some thing like:
Where I have the bottom of a div fading into the color of the div that comes after. Not sure what the best way to accomplish this is to use a linear gradient or an image.
I have tried this solution and it resulted in this:
Which is close but the fade begins a bit high.
.sumo-section {
-webkit-mask-image: -webkit-gradient(linear, left top,
left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
How should I modify it to get the transition to begin further down the div?
Linear gradient because is rendered by the browser, you have better control and can be dynamic (easier) if you need so. I don't think there is better a reason to use an image instead.
Is it possible to set a linear gradient to the part of the background of <html> element that is typically off screen and out of viewport, but can be "brought in to view" momentarily by trying to scroll past the limit in any of the 4 directions?
I am trying to make the color outside the viewport match my site color. This way, when the user is at top of page and tries to scroll higher, on some browsers, the space that is shown and is typically white will match the color of my site.
I want to do the same thing for the bottom of site if user tries to scroll past bottom.
If I set element's background-color to red, this works perfectly, and all the white color outside viewport, top f page, bottom of page, as well as left and right, will now be painted red instead of default white.
Problem is, my header and footer are different colors, so I need to use a linear-gradient. When I use a gradient, for example:
background: -webkit-gradient(linear, left top, left bottom, from(#f8593a), to(#000));
background: linear-gradient(#f8593a, #000) no-repeat;
it simply doesn't show up.
Am I doing something wrong, or is this simply not possible?
UPDATE
Test Case jsFiddle
Best I can do in a jsFiddle. (PS: if someone knows of a way to create a fiddle like this without jsFiddle's panels, so the actual Chrome pulling down can be tested, please suggest.)
The difference between this example and live behavior is that in the example, you can't drag the iFrame window past its boundary, thereby revealing that `out of viewport part of .' However, the blue background-color here should represent that same area here. And as can be seen, the color goes to that area without any extra work, while the linear-gradient is treated as an image and stays within some bounds.
I'm trying to make a grid background out of dots. I can't just use an image, because I need everything to be configurable:
background color
dot color
dot size
space between dots
Unless there's a better solution, I think the only way I can achieve this is with pure CSS. I've done some looking around and so far the closest thing i've found is using a radial-gradient. I'm having trouble though; I haven't been able to find a solution that lets me configure both the dot size and the space between dots while keeping a circle shape. I've gotten close, but than my dots end up looking like diamonds instead of circles. Here's what i've come up with so far:
https://jsfiddle.net/yzpuydtn/
body {
background-image: radial-gradient(black 2px, white 2px);
background-size:40px 40px;
}
Does anyone have any suggestions? Initially i'd like to have my dots be 2px x 2px and 40 px apart. Is there a better way to do this, or am I just configuring my gradient incorrectly? I think i'm close, but depending on how I zoom they look like either circles, diamonds or squares and I need it to always look like circles.
Using %: https://jsfiddle.net/yzpuydtn/11/
Using vw: http://jsfiddle.net/otwhu0uk/2/
Here is an example. I really hope this helps you.
body {
/* Controls size of dot */
background-image: radial-gradient(black 5%, white 0%);
/* Controls Spacing, First value will scale width, second, height between dots */
background-size:5% 10%;
}
I am experimenting with CSS keyframe animations and webkit radial gradient backgrounds. What I want on body tag to have a glowing circle /radial gradient after 3 sec the radial gradient moves to right side and disappear.
During my experiment I found that inside keyframe animations you can't create gradients with different values for each stage like 0%, 25%, 50%, 100%. Although you can play with background-position defined in pixels % is not working for me.
My HTML file is posted here, please take a look. http://jsbin.com/erevo3/2
Think about gradients as if they were images, every modification to your gradient is equivalent to a new background url. The CSS animation spec doesn't contemplate the possibility of changing background images (which is a shame, because you could create crossfades very easily).
In summary, -vendor-gradient is just a substitute of url in "background: #color url(..) x y repeat;"
Duopixel is right, you cannot animate Gradient using keyframes.
What you can do is, create two absolute positioned divs and play with their fade to create a glow effect. Then you can animate their positions and hide them.
I will try to give you a jsFiddle