Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Pure CSS Slideshow with code limitation

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #150124
    rgb4u
    Participant

    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 rectangle

    I 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 ;)

    #150128
    Paulie_D
    Member

    How 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.

    #150145
    rgb4u
    Participant

    Maybe 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 ;p

    #150357
    rgb4u
    Participant

    I 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? ;p

    #157091
    rgb4u
    Participant

    Ok, 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:

    http://cdpn.io/zGbJi

    and tell me why?
    Thank you so much :) it will be great if my slider works in 5/5 browsers

    #157216
    rgb4u
    Participant

    Here 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?

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.