I'm trying to give the footer of a webpage I'm designing a css3 page curl shadow effect. I've found guides online and I think I've mostly modified the code to my situation, but I'm still having some problems. When I set the before and after to position: absolute (like the guide does), it makes my footer's background/background color disappear.
Here's a link to the jsfiddle: http://jsfiddle.net/a9ns7/1/
Any ideas?
If you're willing to employ jQuery, there is a useful plugin for applying interesting corner effects on elements...I'm sure you could work on this to make it seem like a page turning.
Found out I just needed to add a defined width to the footer_container div. Thanks for the answers.
Related
I figured out how to use mix-blend-mode with css but I am not sure how to only turn it on after a certain point I scroll through.
You don't. CSS itself doesn't know where you are on a page at any given time, you'd need JavaScript for that. There's a pretty clean solution here using both CSS and JS which might be helpful https://css-tricks.com/styling-based-on-scroll-position/
At first I apologize for my English.
Well, thats the deal
http://www.dotazoneapp.com/site/pt/
this site have a somekind of interesting scroll, when scroll down, the background-image is change his position, with the background-position (I check this on the source). But I don't even know HOW I CAN DO THIS, if is with Jquery or the own CSS. Well, please help me how do that effect
And...
This button have a animation too scrolling up, it acelerate and not automatic to the top like the reference using id Example2
Check out this (fantastically) easy guide on creating parallax effect using only CSS and without JQuery or any kind of Javascript, which can decrease performance, conflict with other plugins and plenty else.
http://davidwalsh.name/parallax
Regarding the cool parallax scrolling- Checked out the site on chrome dev tools and it looks like they're including this scipt: jquery.parallax-1.1.3. Don't know much about it but looks cool. Investigate here:
http://ianlunn.co.uk/plugins/jquery-parallax/
I'm going to try and ask this the best way I can so sorry if I am not clear.
I am trying to learn css and html.
When it comes to positioning a image, for example top: # px;, how do I know what the pixel location is? Is there a program for that or is it a guessing game?
I hope you can understand my question. Thanks
Knowing the position of a element just by using CSS is not possible. This can be done using javascript. Check this link1 and link2.
If you know jQuery, it would have been more simpler.
Just use .offset().
is there a program for that or is it a guessing game?
You can also guess the position of an element when you assigned fixed dimensions to all the elements in your layout.
If you're trying to use the CSS top property in conjunction with display:absolute or fixed, then yes, it's mostly a guessing game. You can use browser addons to adjust your CSS so that you can see your element being positioned as you change it, get an IDE that supports live updating or previewing, or take a screenshot and measure the pixels yourself.
Normally, however, you shouldn't be placing elements this way. Just let the DOM do it's thing, and use padding and margins to put things into the right place. It takes a bit of trial and error to get things visually appealing, but it really isn't so bad.
I'm working on my html project, and everything is going well.
Now I'm doing the same project with framesets, but I discovered that the page in a frame set won't scroll as a whole page (you can only scroll each frame at a time).
How can i solve this?
Please help
It sounds like what you want is perhaps a static design around your scrolling content, correct?
If so, what you should actually do is make a single page (not a frameset) with your desired DIV layout (a good example can be found here), and then have your content div use CSS that will allow it to scroll (e.g. overflow:scroll;).
Hope this helps.
Don't use frames! I know this is a horrible answer to your question, but believe me - loads of peeps would agree!
If you can, use plain ol' CSS and NO FRAMES.
Also, there is rogue synchronised scrolling Javascripts floating around on the Interwebs - But I wouldn't use them. People who have Javascript off won't get that effect.
Flash banner block up authorization div.
Currently it looks like:
http://img220.imageshack.us/i/zaslon.jpg/ http://img220.imageshack.us/img220/2623/zaslon.jpg
I want it to be:
http://img171.imageshack.us/img171/919/screen3e.jpg http://img171.imageshack.us/img171/919/screen3e.jpg
I can't give you the exact answer but it will involve the z-index and positioning something relatively and making sure you flash has the wmode set to transparent or opaque
A detailed solution can be found here.
And if you use jQuery you can also use bgIframe plugin to avoid that in IE6.
Hope this helps,
Sinan.