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.
Related
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.
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 been scouring the forums without a clear solution to my problem so I figured I'd give stackoverflow a go. In short, I need to know how I should go about positioning the elements on my site. When maximized, the images appear fine with the iframe as it should be. Upon resizing the browser, my sliced images shift to the left and distort my layout. My question is, should I use and div within a div to position my elements or is there another method I should be searching for? I know that I could possibly use CSS to position things but I would like a clear answer if possible as I've already spent countless hours on this. Thank you and my apologies in advance if I've left out pertinent information.
http://hrsolavei.dx.am is where the site is located, please take a look and give me some feed back. Thanks again.
If you want to position the content of your website using an iframe like you have it right now, and the layout in a separate table, then you need to give your iframe the css of position:absolute; right:50%; Then, for the div surrounding your iframe, the css should be overflow:visible; position:absolute; left:50%;
Now, I implore you to please research web development best practices, as they will make your website much easier to develop, and easier to change later on. The big ones that I noticed are that you should try using divs for your layout instead of tables. Tables are meant for storing information much like the image in your iframe does. You should also look into organizing all of your styles using a css file.
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.
I am attempting to create a View Slideshow for a website I am designing and the have it so an image-specific caption/description is placed over each image. I've been Googling some solutions and the only thing I could find was a solution for placing captions above or under the image, not on top of it. I feel as if there should be a very simple solution for this sort of thing, however, I have been unable to find it.
First, I would like to know if this is even possible with View Slideshow and if so then how to accomplish this.
Any information that is provided will be greatly appreciated.
Just use CSS! When you think about it, it's not about the views module. Even html doesn't allow you to put two things at the same place. Not without CSS anyway.
I managed to do quite the same on this website (cf. the slideshow of the homepage). I only used the position:relative and then for exampletop:XXXpx and left:XXXpx propreties to position the text wherever I want in the slideshow container.
If you are not familiar with theses CSS propreties, here is a little demonstration of how it works. Have fun!