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
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 3 years ago.
Improve this question
I am working on a website
http://weddingempires.com/category/planning/
There are images in the right side of the website i.e. in the right side bar. You can see that the images have white space around them. I want to remove that white space. I want the images to be fit into the space and no white space should be there. Please tell me that how can I do this. I think some CSS will do work. But I do not know which classes should be targeted. Please help me in this regard. Thanks
Open Chrome Dev tool by pressing the combination
ctrl+shift+I
DevTools can help you edit pages on-the-fly and diagnose problems quickly. I've found that you have extra padding in the sidebar just remove that it will fix.
Here are the classes
.sidebar-primary .widget
I hope it will work. I have tried using Devtool it works fine.
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
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
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I hope someone can help me with this, I've been searching in my CSS whats wrong but can't figure it out.
If you look at this website: http://viversa.nl/v2/index.html , and click a bit threw the pages, you'll notice some jumping between sites. You'll notice it specially if you click from 'Projecten' to 'People' and back.
It seems "HOME" and "PROJECTEN" are the same, with both a good layout. Next to "OVER ONS", "PEOPLE", "CONTACT" and "SITEMAP" which have a good layout together aswell. But I can't figure out whats wrong and how its possible its jumping, since I simple copied the menu + logo pages + css.
Hope someone can help me out with this!
Thanks!
Sincerely, Stefan
The problem is that the project-page is longer than the screen, thus causing the vertical scroll-bar to appear. Since you are centering the layout and the scroll-bar takes up 20px or so of the space used for your site, what is considered as the center will "move" slightly when the scroll-bar appears.
To get rid of the jumping, you can force the vertical scroll-bar to always be visible:
html {
overflow-y: scroll;
}
The difference is the browser scrollbar. Short pages that don't require scrolling have a slightly wider space available to them compared to longer pages that can be scrolled.
Seems like you got too much text for your images that are only 410px in Height, maybe delete some text or make your background images longer and added some min-height into the CSS?
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 11 years ago.
Improve this question
Please check out this image:
Look at the part that says 'keyboard'
I want that shape but facing the other way (right) and not curved.
I know this is a pentagon but its not the standard type so its hard to find the name or type of this shape to learn how to make it in css. Any ideas on how to make it!?!?
Thanks guys,
James
It's a rounded rectangle and a triangle (or a rotated square). To make it in "CSS" would require some hacks. I suggest you use a background image.
Mimicking the iPhone design purely in CSS is nearly impossible. However:
I found iWebKit, written by a guy who spent a lot of time on just that task. He did the navigation buttons with border images.
You can take a look at it at http://snippetspace.com/ . It's free to download, I think.
Looking at the demo code, you can easily see how the buttons work.
iWebKit is only for webkit browsers, but it does not take a lot of work to adapt to other browsers (just add -moz or -o lines where it says -webkit in the CSS).