Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a customer who would like curtains opening on his Entrance page, but they can NOT be a Flash animation, and an animated gif is too large in file size. So I created a set of curtains that open with CSS animation on mouseover.
The basic animation is here http://www.nightwingsgraphics.com/Curtains/CurtainsTEST.html
However, since they look more like doors (too stiff) when they open, I added a slight swaying motion here http://www.nightwingsgraphics.com/Curtains/SwayTEST.html
Somewhat better, but still too stiff, and I'm lost as to where or how I could add some kind of "warping" (or morphing) effect to make them look more natural.
Any help would be greatly appreciated.
PS: I also created a jsfiddle for both versions, but it's not allowing me to post more than 2 links here :(
You can use the skew() transformation like this
#axis:hover .move-right{
transform: translate(215px,0) scaleX(0.2) skew(-15deg, 5deg);
}
#axis:hover .move-left{
transform: translate(-215px,0) scaleX(0.2) skew(15deg, -5deg);
}
Also see that I chenge the translate value because it came out of the container when applying skew() function
play with cubic-bezier function to improve the transition
.object {
transition: all 3s cubic-bezier(0.42,0.1,0.44,0.95);
}
I recommend you this page to play with http://cubic-bezier.com/
Also look at the answer to my question here: How to add physics to CSS animations?
I hope this at least guide you.
PD:I omitted the vendor-prefixed to shorten code
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I haven't been able to find any ways to get a mat-slider smaller than 128px wide. Is there a way to do this? I have used transform: scale(); as a temporary solution, but this creates issues with other elements. An example of the type of slider with which I am working can be found here. The css width can be increased, but once you lower it to 128px, it can't get any smaller.
This is because .mat-slider-horizontal has a min-width property of 128px.
You can override this with:
.mat-slider-horizontal {
min-width: unset;
}
Be aware that the min-width was probably there for good reason and this may introduce other issues.
Here's the updated Stackblitz:
https://stackblitz.com/edit/angular-v5leng?file=src/app/slider-overview-example.css
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Is it possible to improve quality of image using CSS when I use background: url('image.png')?
May be accept filter CSS?
The filter property has the following functions:
none
brightness(%)
contrast(%)
drop-shadow(h-shadow
v-shadow blur spread color)
grayscale(%)
hue-rotate(deg)
invert(%)
opacity(%)
10.saturate(%)
sepia(%)
url()
initial
inherit
blur(px)
Each above function is self explanatory. Regarding the pixels, you can't really change it using the filter property. You can use width and height but It will change the size of the picture to appear on the webpage but not improving the quality.
While there isn't any way to actually improve your image quality using css (that comes down to how your image file is saved originally), one trick I use at times is to force some extra anti-aliasing from the browser using transform
-webkit-transform: scale(0.999);
transform: scale(0.999);
This won't make your image noticeably smaller, but it should just be enough to get your browser to blur it a bit.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Have a curious issue with my footer links in chrome.
http://www.kfc-uerdingen.de/
Firefox has no problem displaying the links in the footer. However in chrome only the ones in the first column are clickable.
Before that I had another issue with chrome where all but the last columns disappeared as soon as there were more than two, but I solved that by adding the footerContainerInner-div, which took over the column related css.
It's not a z-index issue from what I can tell.
Has anybody encountered this before of can see what's going on?
One solution is to avoid nesting transforms.
Instead, you can use transform: rotate(-2deg) skew(-2deg) on #footerContainer.
Transforming an element modify its stacking context; it seems chrome doesn't handle it very well when you use columns.
It may be a bug.
Try running in compatibility mode. Also, I understand that z-index is not the only step. In order for the reference to be cross-browser compatible, the push and footer classes also need to be position relative for the z-index to be recognized (add -webkit-transform:translate(0,0)).
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm trying to create a parallax like effect. I have 10 background images and eight foreground images. Here is a fiddle to show what I came up with so far:
Fiddle
The red squares represent the foreground images.
Now I need to animate foreground images somehow, as if they slide in from the bottom while scrolling, and out of the screen at the top, so back and forth, like rain falling down (and up :) So the foreground images move faster than the background images.
I already tried quite a few things, but really don't know where to start. Skrollr.js is also an option, but that's really something on itself to learn and I guess for this there has to be a simpler solution.
I tried this Guide once and it worked. The more you move the divs back with the translateZ rule the slower it moves.
edit: url broken, updated url
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I'm a back-end developer and my design skills are admittedly very weak. There's a CSS background effect that I really like a lot and I'm wondering if anyone could give me a general idea as to how one would achieve it? If you look at a sites like sourcebits.com or youtube.com, the background looks sort of gray and has a texture almost like a sheet of high-quality stationary. How are they achieving this effect?
Thanks.
CSS used by SourceBits:
body {
background: #8D9698 url('../images/body-by-bg.jpg') repeat fixed 0 0;
}
SourceBits background link:
http://www.sourcebits.com/images/body-by-bg.jpg
CSS used by YouTube:
body {
background: no-repeat url(//s.ytimg.com/yt/imgbin/www-refreshbg-vflC3wnbM.png) 0 0;
background-color: #EBEBEB;
background-repeat: repeat;
}
YouTube background link:
http://s.ytimg.com/yt/imgbin/www-refreshbg-vflC3wnbM.png
They could be using a small graphic, tiled. Usually that small graphic is 10x10 pixels or smaller, and contains the background color (grey, in YouTube's case) and a few dots that are just slightly darker than the background color. When tiled, this creates a shadow effect.
Whups, #Anne got the answer in before I finished! She's also included the exact code you'll need. But, yeah, now you know the code, and you've got the 'whys' of the answer :)
Not an answer to your question, but this might help you a lot when you're doing front-end coding: have you ever tried using Chrome's Debugger tools? Or Firebug? That will let you see the HTML, as well as any CSS style definitions that are applied to it. It's a lot faster than viewing the source, especially helpful if front-end is not your native land because it shows you the CSS rules that apply to that specific element - backgrounds, font faces, what have you.
They use pictures, you need one for each corner and side