- This topic is empty.
-
AuthorPosts
-
September 15, 2013 at 3:43 am #150124rgb4uParticipant
Hello, I try to create a pure CSS Slideshow,with some special effects and with code limitation:
-I can’t use any scripts – no JS, no JQ
– No: minus values for: margin,padding,border like: margin:-20px;
-No : links to external source of code
-No: properties like: button on checked, styled radio inputs end else…This is what i manage to achieve:
http://codepen.io/rgb4u/full/DgpLE
Notice:
-When you :hover the circles the new bg with diffrent color will appear,and now if you hover this bg another bg with visible div with some text will appear – yes i know, its complicated a bit…
-Now to back to the original bg you nid :hover the logo rectangleI try to do this with + and > selectors , but it work fine only for circle 4 and 5(orange and black on hover)
THE PROBLEMS I CAN’T RESOLVE:
1.Scroll down to see the butom of Page, now if you :hover circles:
1,2,3 you will see the problem: the pink background will appear and ruin my work, and the other circles uder the animated-menu bar
will show up- WHY??? they should have display:none like circle 4 and 5…
The Slideshow works great with only 2 buttons but when i add more than two something goes wrong…
How can i have slideshow working like this one, with 3-5 buttons, where the child .buttons affected .parent?
Any suggestions???
And please, forgive me my bad grammar,i don’t speak or write in english to much
PS i hope you like my idea of this slideshow ;)September 15, 2013 at 4:38 am #150128Paulie_DMemberHow can i have slideshow working like this one, with 3-5 buttons, where the child .buttons affected .parent?
Probably not with this limitation:
-No: properties like: button on checked, styled radio inputs end elseā¦
I’m pretty sure you could a lot with hover states of objects and a bunch of absolutely positioned elements.
Whether that could be extended to a slideshow animation is another issue.
September 15, 2013 at 8:57 am #150145rgb4uParticipantMaybe this video will help :
http://www.youtube.com/watch?v=-eZ2hLdBVM8&feature=youtu.be
I know i can achieve my slideshow with this code limitation, and by using big gif images, but, as you can see on the end of the movie, when i hover buttons 1-3 the other buttons will appear under the navigation menu
and i don;t know why, and how to fix this.
And how the whole thing work on IE, not only Firefox…but it will be miracle ;pSeptember 17, 2013 at 2:34 pm #150357rgb4uParticipantI find a solution!
With a diffrent selectors and with this code limitation that i mention above i create:
– My slideshow x banner with buttons that will show me different .gif animation on:hover the Button ,and div’s inside the Banner without:hover on the Button
-With a little bit of modification i change this to spry tabbed panel – with joker/mirror first-div open as a default …
…and a horizontal drop-down-menu with full width of elements…
– I use only css, i’m good and tired…
Who wants to beat me? ;pNovember 25, 2013 at 1:35 pm #157091rgb4uParticipantOk, its been a long time since i write privious post, but now i almost done my pure css slider/spry tabbed panel with code limitation.
It works great in: firefox, opera, chrome and safari, but IE don’t accepts selectors: + in my code(propobly), could you look at my code here:and tell me why?
Thank you so much :) it will be great if my slider works in 5/5 browsersNovember 27, 2013 at 1:08 am #157216rgb4uParticipantHere is my CSS code :
https://www.dropbox.com/s/3ziq1941m01v7bm/Slider_pure_css.html
with a small modification i can create with this spry tabbed panel and slider, i really can’t use JS,so can you look at this and tell me how to fix code?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.