[WIP] CSS3 Slider - simonpicos

[WIP] CSS3 Slider - simonpicos | PSD-Tutorials.de

Erstellt von simonpicos, 05.06.2012.

  1. simonpicos

    simonpicos Mod | Forum

    Dabei seit:
    16.02.2011
    Beiträge:
    2.468
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    Adobe CC (PS, Lightroom, Illustrator, Premiere, After Effects)
    Kameratyp:
    Canon EOS 600D + div. Linsen
    [WIP] CSS3 Slider - simonpicos
    Hi zusammen,

    Ich möchte euch meine neuste Spielerei mit CSS3 vorstellen:

    CSS3 Slider v3

    Das ist bereits die dritte Version meines CSS-Sliders. Bei dieser Version werden keine steps in der browser-history angelegt, da ich nicht mehr mit ":target" arbeite, sondern mit radio-buttons.
    [STRIKE]Einzig bekannter Bug: Beim wechseln springt der nach-links-pfeil hin und her. Ich arbeite dran :)[/STRIKE]

    Und für sinus2k sind mittlerweile sogar Pfeile links und rechts zum Wecheln der Bilder da ;)

    hier zum Vergleich noch mal die vorherigen Versionen:

    v2
    v1
     
    Zuletzt bearbeitet: 05.06.2012
    #1      
  2. TutKit

    TutKit Vollzugriff

    Vollzugriff auf sämtliche Inhalte für Photoshop, InDesign, Affinity, 3D, Video & Office

    Suchst du einen effektiven Weg, um deine Geschäftsideen aber auch persönlichen Kenntnisse zu fördern? Teste unsere Lösung mit Vollzugriff auf Tutorials und Vorlagen/Erweiterungen, die dich schneller zum Ziel bringen. Klicke jetzt hier und teste uns kostenlos!

  3. Designerist

    Designerist Aktives Mitglied

    Dabei seit:
    12.04.2008
    Beiträge:
    479
    Geschlecht:
    weiblich
    Ort:
    Zürich
    Software:
    Dreamweaver, In-Design, Photoshop, Illustrator
    Kameratyp:
    Canon, Contax, Nikon
    [WIP] CSS3 Slider - simonpicos
    AW: [WIP] CSS3 Slider - simonpicos

    Yep - superschön!!!!
     
    #2      
  4. vandign

    vandign Mauskritzler

    Dabei seit:
    29.08.2010
    Beiträge:
    120
    Geschlecht:
    männlich
    Ort:
    Bayerischkongo
    Software:
    PS 5-cs5, Illu 8-CS5
    [WIP] CSS3 Slider - simonpicos
    AW: [WIP] CSS3 Slider - simonpicos

    Sehr cool bis jetzt, hab mir den Quelltext angeshen und feststellen müssen das ich css3 lernbedarf habe :)
    Weiter so, Gruß Vandign
     
    #3      
  5. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    [WIP] CSS3 Slider - simonpicos
    AW: [WIP] CSS3 Slider - simonpicos

    dass der linke Pfeil beim klick weiter nach links rückt is socher so nicht vorgesehen, oder?
     
    #4      
  6. dlogic

    dlogic Allrounder

    Dabei seit:
    15.06.2007
    Beiträge:
    354
    Geschlecht:
    männlich
    Ort:
    Rostock
    Software:
    Photoshop, Illustrator, Dreamweaver, Notepad2, Magix Video, WaveLab, Audacity
    Kameratyp:
    Canon EOS 70D, EXA 1a, Praktika
    [WIP] CSS3 Slider - simonpicos
    AW: [WIP] CSS3 Slider - simonpicos

    das mit dem Pfeil hab ich mich auch gefragt...
     
    #5      
  7. simonpicos

    simonpicos Mod | Forum

    Dabei seit:
    16.02.2011
    Beiträge:
    2.468
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    Adobe CC (PS, Lightroom, Illustrator, Premiere, After Effects)
    Kameratyp:
    Canon EOS 600D + div. Linsen
    [WIP] CSS3 Slider - simonpicos
    AW: [WIP] CSS3 Slider - simonpicos

    Bug mit dem Pfeil ist behoben, danke euch :)

    Update:
    Ich habe dem slider ein paar kleine "Feinheiten fürs Auge" (animation beim klicken der Pfeile, etc) hinzugefügt.
    Außerdem lassen sich jetzt Informationen zum Bild anzeigen.
    Immer noch alles ohne irgendwelches Javascript ;)

    http://html5css3demos.bplaced.net/css3-slider-v3/
     
    #6      
  8. Designerist

    Designerist Aktives Mitglied

    Dabei seit:
    12.04.2008
    Beiträge:
    479
    Geschlecht:
    weiblich
    Ort:
    Zürich
    Software:
    Dreamweaver, In-Design, Photoshop, Illustrator
    Kameratyp:
    Canon, Contax, Nikon
    [WIP] CSS3 Slider - simonpicos
    AW: [WIP] CSS3 Slider - simonpicos

    Jetzt ist aber ganz gut! Whow!
    Sag mal, willst Du das Dingens eigentlich für Dich alleine behalten oder es zum Kauf anbieten?
    Einen Interessenten hättest Du schon mal ;-)
    Grüsse
    Designerist
     
    #7      
  9. landrobber

    landrobber Noch nicht viel geschrieben

    Dabei seit:
    24.05.2004
    Beiträge:
    37
    Geschlecht:
    männlich
    Ort:
    München
    [WIP] CSS3 Slider - simonpicos
    AW: [WIP] CSS3 Slider - simonpicos

    Cool! Gefällt mir! :)
     
    #8      
  10. simonpicos

    simonpicos Mod | Forum

    Dabei seit:
    16.02.2011
    Beiträge:
    2.468
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    Adobe CC (PS, Lightroom, Illustrator, Premiere, After Effects)
    Kameratyp:
    Canon EOS 600D + div. Linsen
    [WIP] CSS3 Slider - simonpicos
    AW: [WIP] CSS3 Slider - simonpicos

    Also ich hatte zunächst nicht vor, es zu verkaufen ;)
    Du darfst die Slideshow aber gerne verwenden. Ein Link zum Original wär aber schon ganz nett :)

    Aber dankeschön :)
     
    #9      
  11. Designerist

    Designerist Aktives Mitglied

    Dabei seit:
    12.04.2008
    Beiträge:
    479
    Geschlecht:
    weiblich
    Ort:
    Zürich
    Software:
    Dreamweaver, In-Design, Photoshop, Illustrator
    Kameratyp:
    Canon, Contax, Nikon
    [WIP] CSS3 Slider - simonpicos
    AW: [WIP] CSS3 Slider - simonpicos

    Hey simonpicos
    Herzlichen Dank! Sobald ich den Slider mal einsetze sende ich Dir den Link und werde Dich selbstverständlich als Autor erwähnen :)
    Liebe Grüsse
    Designerist
     
    #10      
  12. simonpicos

    simonpicos Mod | Forum

    Dabei seit:
    16.02.2011
    Beiträge:
    2.468
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    Adobe CC (PS, Lightroom, Illustrator, Premiere, After Effects)
    Kameratyp:
    Canon EOS 600D + div. Linsen
    [WIP] CSS3 Slider - simonpicos
    #11      
  13. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.291
    Geschlecht:
    männlich
    Ort:
    Ö
    [WIP] CSS3 Slider - simonpicos
    AW: [WIP] CSS3 Slider - simonpicos

    Es gefällt.
    Aber: Der Splash-Teil ist zu durchsichtig, da musst du auch auf die Lesbarkeit vom Text achten. Im Moment ist die nicht gegeben.
    Auch könntest du die den klickbaren Bereich der Pfeile vergrößern (also zB genauo hoch machen wie Bilder) Das ermöglicht einem ein schnelleres durchklicken :D
     
    #12      
  14. Designerist

    Designerist Aktives Mitglied

    Dabei seit:
    12.04.2008
    Beiträge:
    479
    Geschlecht:
    weiblich
    Ort:
    Zürich
    Software:
    Dreamweaver, In-Design, Photoshop, Illustrator
    Kameratyp:
    Canon, Contax, Nikon
    [WIP] CSS3 Slider - simonpicos
    AW: [WIP] CSS3 Slider - simonpicos

    Hi simonpicos - das wird ja immer besser!
    Grüsse, Designerist
     
    #13      
  15. simonpicos

    simonpicos Mod | Forum

    Dabei seit:
    16.02.2011
    Beiträge:
    2.468
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    Adobe CC (PS, Lightroom, Illustrator, Premiere, After Effects)
    Kameratyp:
    Canon EOS 600D + div. Linsen
    [WIP] CSS3 Slider - simonpicos
    AW: [WIP] CSS3 Slider - simonpicos

    Danke, freut mich, dass es dir immer noch gefällt :)
     
    #14      
  16. keul3

    keul3 3dsMax | 3D-Contest

    12113
    Dabei seit:
    25.10.2006
    Beiträge:
    10.066
    [WIP] CSS3 Slider - simonpicos
    AW: [WIP] CSS3 Slider - simonpicos

    gefällt, und verlockt mich, selbst auch mit css anzufangen

    achso, die Infotexte sind falsch zugeordnet
     
    #15      
  17. simonpicos

    simonpicos Mod | Forum

    Dabei seit:
    16.02.2011
    Beiträge:
    2.468
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    Adobe CC (PS, Lightroom, Illustrator, Premiere, After Effects)
    Kameratyp:
    Canon EOS 600D + div. Linsen
    [WIP] CSS3 Slider - simonpicos
    AW: [WIP] CSS3 Slider - simonpicos

    Danke, dass du mich dran erinnerst. Hatte zuerst andere Bilder drin, mit denen gabs dann aber Probleme..
    Dient aber ja sowieso vorrangig nur zu Demonstrationszwecken.
     
    #16      
Seobility SEO Tool
x
×
×