First - I have to apologise for really bad question. I know that questions like this shouldn't be here, but I really have no idea what else should I do now. Because I've tried to google this issue and also was searching here. But no result.
The thing is - I have to make page exactly like this: http://imgur.com/a/bgp5P
I have all the background images separately, because it should work that non-active div will be covered with dark filter and onhover it will colorize. So I would like to ask, if is that even possible? To make divs askew like this? With transform: rotate maybe? I will be SO MUCH thankful for every help how to solve this.
Thanks for your help and sorry for this type of question.
Related
aye folks!
i spent the last hour searching around the web trying to find a css solution to create something like this this..
i read a lot of 'frosted glass' tutorials.. but like 90% are using two images or blur the whole body of the site while the modal is open.
maybe i just haven't found the right article or it's not possible with css this easily atm. but stack overflow never disappointed me so far. therefore i'm asking you guys if someone does know a solution.
I have looked all over for this and cannot find a tutorial or anything to help create it.
I am looking to do something like this site
If you see on the left the text Mar is scrolling faster than the background image. Can anyone point me in the right direction so I can learn how that is done.
The site you are reffering to uses only JavaScript for making all the animations. Using this technique has some andvanteges and disadvanteges (for example you can't use hardware-acceleration).
But as you have used css as your only tag I will lead you to a pure css solution:
At first you should read something about 3D-transformations in CSS3. The reason for this is, that you will move the things that has to move slower far away in the background. This will have the side effect, that they appear to be smaller. This problem can be resolved be using zoom in CSS.
If this is exactly what you wan't here is a good tutorial on how to do this.
Tipp: When you wan't to learn new things it's always a good practice looking what other people have done. This is very easy in webdesign because you can look at other peoples sourcecode :-)
i've a little bit trouble to fix one thing, may you could help me out with it?
I try to make Chrome/Firefox works with a Logo sliding problem. You can see here the first pci is how does it looks like in win with chrome or firefox. IE looks normal like the second pic.
What did i wrong in the code? many thanks in advance.
http://abload.de/img/bildschirmfoto2013-067oqb8.png
http://abload.de/img/bildschirmfoto2013-06u6rho.png
I can't tell you unless I see the CSS. Post the css on something like pastbin.com or if it isn't real long then add it to your question and then you are likely to get some answers, but I can't tell you what is wrong with your CSS from a picture of the results. Too many possibilities.
Now I'm wishing I had asked for a demonstration instead. Am I correct in thinking that the text is part of a horizontal menu and the logo is completely separate and not contained by the text container at all? If this is the case and the image looks and behaves like you want then perhaps it is the menu that needs tweaking to get it to match up correctly. At first I was thinking this was something like a div containing text and an image or having an image as a background.
If you could go ahead and post a link to a page or a pastebin or something that has the html and the css for the menu and the logo together then I'll try it out myself and see if I can find the solution. Someone else may already see it, but I'm still not seeing the clear picture of your situation or a resolution to your problem yet.
It's quite early and so I'm probably missing something apparent here but I'd like to ask the community for some quick help. When you visit the demo page and hover over the slider, you'll see that the next and previous buttons appear as they should. Though the images have a "fold" effect on the left & right side and I'm trying to figure out why they're not showing.
I've toyed around with the z-index but can't figure it out. May someone please help with what should be a quick fix?
Thanks!
You have set overflow : hidden on your
<div class="pix_diapo diapostarted">
Since your folds are outside of the containing element, it hides it.
Just remove it, and it will work.
Here you can see what I'm trying to do: http://jsfiddle.net/smogg/QFa4J/2/embedded/result/
I was trying to achieve this look so hard, and right now this code may be really confusing. If you have some tips which may clarify that, please tell me. It is all made by trial and error.
Anyway, this looks good. The only problem is my text inside .article is not selectable. Borders inside .article:before cause this problem. How can I solve this? Or maybe I should take some different steps to achieve this look (right now, with my solution I have to define height of articles which is problematic).
#edit:
I forgot about this. I can't use z-index cause my #mainhas shadow on it (which is not included in jsFiddle to clarify code) and then shadow shows on top of border. If I use borders without :before then my #main gets wider, which is not what I want.
There are cleaner and easier ways to do this. Enjoy!
http://www.css3d.net/ribbon-generator/
http://www.pvmgarage.com/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/
http://www.webresourcesdepot.com/creating-nice-3d-ribbons-with-pure-css3/