WIP - Webshowroom simonpicos

WIP - Webshowroom simonpicos | PSD-Tutorials.de

Erstellt von simonpicos, 15.12.2011.

  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 - Webshowroom simonpicos
    Hallo zusammen :)

    Ich möchte hiermit mal etwas Neues starten:
    Im 2D-Bereich gibt es ja schon lange Showrooms einzelner User, in denen sie ihre Werke präsentieren.

    Hiermit eröffne ich den ersten Webshowroom

    In diesem möchte ich euch meine Projekte präsentieren und natürlich Kritik sammeln, damit ich ,mich weiter verbessern kann :)

    Den Anfang machen eine Sammlung von Buttons (die ich schon präsentiert habe) und eine kleine Bildergalerie, die komplett ohne Javascript auskommt.

    Zu Beiden wird es (sobald ich Ferien habe ;) ) Auch Tutorials geben!!



    CSS3 Slideshow v4

    [​IMG]

    CSS3 - Bildergalerie

    [​IMG]
    Link: Aufs Bild klicken ;)





    CSS3 - Buttons

    [​IMG]
    Link: Aufs Bild klicken ;)

    →Hierbei brauche ich gleich eure Hilfe: Die "Transforms" funktionieren in den Webkitbrowsern(Safari, Chrome) nicht. Und ja: ich habe dort nicht das jeweilige "-webkit-prefix", aber ich nutze Prefixfree, sodass diese nicht nötig sind..



    Animierter Tooltip mit CSS3

    (Ich weiß, die rechtsbündige Schrift im Aufklapplink sieht etwas komisch aus mit der linksbündigen im Inhalt.. Mal sehn, ich lass mir was einfallen)

    [​IMG]
    --> Hierzu wird es auch bald mein erstes Tutorial geben!





    Es gibt was neues!

    Diesmal nur was kleines:Ne Möglichkeit auf die verschiedenen social Networks zu verlinken. (bspw. auf einer Portfoliosite).

    Schaut euchvor allem mal die von mir im Footer verlinkte Quelle der Icons an. Find ich extrem praktisch :)

    [​IMG]


    CSS3 Animation-timing-functions

    kleine Spielerei :)

    [​IMG]

    Code: http://dabblet.com/gist/1664093


    .


    CSS3 Button mit 3D-Effekt

    Mal wieder was kleines Neues :) Und zwar...


    ...ein Button!! :D

    Mit netten 3D-Effekt :)

    [​IMG]



    CSS3 Breadcrumbs

    Ich hatte das Ding ja bereits mit einigen Problemen hier kurz gezeigt, habe diese aber beseitigt und stelle nun die finale Version vor (natürlich sind verbesserungsvorschläge immer gern gesehn ;) )

    Keine große Sache, hab nur ein wenig mit CSS-Pseudoelementen und Dreicken rumgespielt; Eine CSS-breadcrumbs-navigation

    [​IMG]



    CSS-Contest
    Einige haben es ja sicher mitbekommen, die letzten paar Wochen lief hier der CSS-Contest ab. Sind echt tolle Ergebnisse bei rausgekommen. Ich würde euch bitten hier VOTEN zu gehen :)

    Und so sieht mein Design aus:

    [​IMG]




    Start/Stop Animation

    [​IMG]

    Will zeigen, dass man auch mit CSS einfache Animationen oder ähnliches per klick starten kann. Und das, ohne dass im browser ein step zur history hinzugefügt wird (wie per :target)
    Werde diese Technik demnächst auch mal in meine Slideshows einbauen :)


    Animated Skill Bar

    Das ganze habe ich jetzt weiterentwickelt zu einer dynamischen anzeige "meiner" Skills ;)

    Sieht mittlerweile sogar nach was aus, wie ich finde :)

    [​IMG]




    CSS3 Pricing Tables
    [​IMG]






    Ich freue mich über Kritik und Anregungen :)


    Lieben Gruß
    Simon
     
    Zuletzt bearbeitet: 05.10.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. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.315
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    WIP - Webshowroom simonpicos
    AW: WIP - Webshowroom simonpicos

    Sehr schön Simon :daumenhoch:, ich hoffe, du beachtest noch meine ruckelfrei-Effekt-Tipp aus dem Button-Thread und machst dein Tut dazu dann noch fertig ;)

    Edith sagt sie ist wohl immer noch nicht ganz nüchtern von der gestrigen Weihnachtsfeier :uhm:

    :kopfpatsch: da stehts doch :D
     
    Zuletzt bearbeitet: 15.12.2011
    #2      
  4. 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 - Webshowroom simonpicos
    AW: WIP - Webshowroom simonpicos

    ;)

    Und mit meinem Gedächtnis stehts auch nicht mehr so gut: Hab ich schon längst gemacht, nur die falsche Version verlinkt :kopfpatsch:
    Ich suchs kurz raus, und änders dann ;)
     
    #3      
  5. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.315
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    WIP - Webshowroom simonpicos
    AW: WIP - Webshowroom simonpicos

    Ich wollts extra nich sagen :lol:
    Aber hier gehts ja vor allem um die Technik, in dem Fall vor allem das :target mit dem man per CSS auf Mausklicks reagieren kann.
     
    #4      
  6. 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 - Webshowroom simonpicos
    AW: WIP - Webshowroom simonpicos

    Von dir hört man ja hier nur echt selten so positive Bewertungen mit nur einem kleinen "aber" (Das war jetzt keinesfalls negativ gemeint). Deswegen rechne ich das jetzt ziemlich hoch ;)

    →Deinen Vorschlag probier ich gleich mal aus..

    Trotzdem nehme ich auch designtechnische Kritik gerne an :)


    //edit

    So ich habe den Vorschlag von sinus2k mal umgesetzt: http://show.simonpicos.hostingsociety.com/css3-gallery/

    Was sagst du/ihr?
     
    Zuletzt bearbeitet: 15.12.2011
    #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 - Webshowroom simonpicos
    AW: WIP - Webshowroom simonpicos

    So hier mal wieder was neues:
    Ein ausklappbarer "Tooltip" .... Und - natürlich ;) - nur mit CSS3!!
    Kein Javascript :)
    (Ich weiß, die rechtsbündige Schrift im Aufklapplink sieht etwas komisch aus mit der linksbündigen im Inhalt.. Mal sehn, ich lass mir was einfallen)

    [​IMG]

    --> Hierzu wird es auch bald mein erstes Tutorial geben!
     
    Zuletzt bearbeitet: 16.12.2011
    #6      
  8. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.315
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    WIP - Webshowroom simonpicos
    AW: WIP - Webshowroom simonpicos

    Vielleicht so? www.cebito.de/examples/showhide
     
    #7      
  9. 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 - Webshowroom simonpicos
    #8      
  10. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.298
    Geschlecht:
    männlich
    Ort:
    Ö
    WIP - Webshowroom simonpicos
    AW: WIP - Webshowroom simonpicos

    Das von cebito funktioniert, deines aber nicht simon. (Browser: Opera)
     
    #9      
  11. 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 - Webshowroom simonpicos
    AW: WIP - Webshowroom simonpicos

    Was funktioniert nicht? Das ausklappen an sich, oder nur die Animation? Javascript aktiviert? Ich benutze nämlich ein kleines Script von Lea Verou, was mir die ganzen -moz- , -o-, etc.. prefixes spart.. Das ist bei solchen Experimenten ziemlich praktisch, weil man deutlich weniger schreiben muss.. Ich schreib grad mal für Opera das entsprechende prefix davor, dann wärs nett, wenn dus noch mal testen könntest:)
     
    #10      
  12. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.298
    Geschlecht:
    männlich
    Ort:
    Ö
    WIP - Webshowroom simonpicos
    AW: WIP - Webshowroom simonpicos

    Es funktioniert gar nichts. Also man kann zwar auf den Text klicken, aber es passiert nichts. Javascript ist aktiviert. Bis jetzt geht es aber immer noch nicht ;)
     
    #11      
  13. 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 - Webshowroom simonpicos
    AW: WIP - Webshowroom simonpicos

    :eek:
    Das heißt, du siehst nur das "show/hide" Feld?
    Welche Version von Opera nutzt du denn? Bei mir unter 11.60 läuft es eigentlich stabil..
    Probier mal den Direktlink auf das ausgefahrene: http://simonpicos.hostingsociety.com/labs/showhide/version2/index.html#show

    Siehst du da die "Details" ?
     
    #12      
  14. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.298
    Geschlecht:
    männlich
    Ort:
    Ö
    WIP - Webshowroom simonpicos
    AW: WIP - Webshowroom simonpicos

    Ja, da sehe ich es... Und jetzt weiß ich, warum es bei mir nicht funktioniert hat. Ich habe einfach auf den Text geklickt, ich bin davon ausgegangen, dass ein klick auf den Text das Element einblendet und ein weiterer es wieder ausblendet. Dass es zwei Schaltflächen sind, kommt überhaupt nicht rüber. Da würde es sich anbieten, hover styles zu definieren, damit das klar ist. Also zum Beispiel das aktive Element unterstreichen, dann wird klar, dass nur das show oder hide gemeint ist.
    Schöner wäre es natürlich, wenn nur der Ausdruck sichtbar ist, der gerade benötigt wird. Da ansonsten ein nichtfunktionaler Link auf der Seite sichtbar ist, welcher die Benutzer (in dem Fall mich) nur unnötig verwirrt.
     
    #13      
  15. spacle

    spacle von fraglichem Nutzen

    Dabei seit:
    09.08.2009
    Beiträge:
    445
    Geschlecht:
    männlich
    Software:
    CS5
    WIP - Webshowroom simonpicos
    AW: WIP - Webshowroom simonpicos

    lol ich hab auch opera und ich dachte mir beim lesen nur so: was will er? also mir war sofort klar dass das zwei schaltflächen sind ich meine warum sollte denn da sonst stehen show/ hide o_O wenn du das in eins machen würdest fänd ich übrigens besser rein von der funktionalität her aber sehr nice
     
    #14      
  16. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.298
    Geschlecht:
    männlich
    Ort:
    Ö
    WIP - Webshowroom simonpicos
    AW: WIP - Webshowroom simonpicos

    Schön, dass es dir klar war. Mir war es jedoch nicht klar. Ich habe an eine normale toggle Funktion gedacht, so wie es auch bei den anderen Beispielen implementiert war.
    Sinnlose, leere Links, welche keine Funktionalität beinhalten, sind ja zu vermeiden und auch nicht notwendig. So viel würde ich mir von einem guten CSS3 Beispiel doch erwarten (aber vielleicht sind meine Anforderungen einfach zu hoch)

    Edit:
    Das ist ein schönes Beispiel für CSS3 Toggles. (Sogar mit Tutorial)
     
    Zuletzt bearbeitet: 19.12.2011
    #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 - Webshowroom simonpicos
    AW: WIP - Webshowroom simonpicos

    Danke Myhar für deine Tipps! Das mit dem hover-style ist natürlich mehr als sinnvoll, hab ich gar nicht dran gedacht.. Das mit dem toggle via :not() werde ich mir dann nochmal bei Cebito und in dem Tutorial (danke auch dafür) anschauen. Ergebnis poste ich dann natürlich ;)

    //edit
    hover Effekt ist hinzugefügt..

    Ich hab mich jetzt mal an den toggle Effekt rangemacht. Dabei stehe ich jetzt ziemlich aufem Schlauch. In Cebitos Beispiel ist der Link zum öffnen in das Element verschachtelt, welches später einfach seine breite und höhe ändert. So lässt er sich relativ einfach anwählen um ihn dann ein-/auszublenden..
    Bei mir bekomme ich das nicht so wirklich hin, da nicht ein übergeordnetes Element verändert wird, sondern eines, was nicht mit dem Link "verwandt" ist. Deshalb kann ich es nicht mit z.b.:
    Code (Text):
    1. element:target a
    bzw.
    Code (Text):
    1. element:not(:target) a
    ansprechen:hmpf:

    Könnt ihr mir vielleicht ein wenig vom Schlauch runterhelfen? Ich blick da grad nicht mehr durch :D
    Danke schonmal :)
     
    Zuletzt bearbeitet: 19.12.2011
    #16      
  18. 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 - Webshowroom simonpicos
    AW: WIP - Webshowroom simonpicos

    Soo :) Erster Ferientag und schon zuviel Freizeit :lol:

    Ich habe mich an eine Sideshow nur mit CSS gewagt. Im Moment kann man sich nur manuell weiterklicken, an einem Autodurchlauf tüftle ich aber :)

    [​IMG]

    Hat jemand ne Idee wie ich den jeweils aktiven Link einfärbe? Also den, auf dem das Bild gerade ist.. :uhm:



    Desweiteren hab ich mir ne neue Domain zugelegt für die ganzen Demos.. Ne Startseite mit Übersicht aller Demos ist auch schon in der mache..
    Die Dinger soll man ja auch ruhig mal über Tante G finden, und nicht nur hier im Forum :)



    //edit


    Für den Slider gibts jetzt auch ne Version mit Autoplay :)
    Ist auf der Seite verlinkt
     
    Zuletzt bearbeitet: 21.12.2011
    #17      
  19. une_art

    une_art Wissenssauger WS2100

    Dabei seit:
    22.09.2007
    Beiträge:
    224
    Geschlecht:
    männlich
    Software:
    Adobe CS4
    Kameratyp:
    Canon EOS 1000D
    WIP - Webshowroom simonpicos
    AW: WIP - Webshowroom simonpicos

    Sehr schicke Sachen Simon! Mir gefällt die reine CSS-Umsetzung, auch wenn das teilweise vielleicht noch keine 100%ig Alltagstauglichkeit wegen Browserkompatibilität hat.
    Aber es ist schön zu sehen, dass sich Probleme, die sonst mit jQuery, mootools u.Ä. gelöst werden auch mit reinem CSS erstellt werden können.
     
    #18      
  20. 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 - Webshowroom simonpicos
    AW: WIP - Webshowroom simonpicos

    Nee alltagstauglich sind die wirklich noch nicht (zumindest größtenteils). Aber darum gehts mir auch nicht. Ich will nur zeigen, was schon möglich ist :)

    Und bei denen, die sich hier im Bereich rumtreiben kann man davon ausgehen, dass die nen halbwegs modernen Browser nutzen :D
     
    #19      
  21. 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 - Webshowroom simonpicos
    AW: WIP - Webshowroom simonpicos

    Sorry wegen Doppelpost, sieht aber ja sonst eh niemand ;)

    Ich habe vor in der nächsten Woche ein paar Tutorials im Webbereich zu HTML & CSS zu machen. (Vor allem neue CSS3- und HTML5techniken)

    Jetzt würde ich von euch gerne wissen, zu welchem Thema ihr euch Tutorials wünscht!
    Also beispielsweise könnte ich 3-4 Tutorials zu den (tollen) CSS3 animations und transitions machen (Grundlagen & Fortgeschrittenentechniken)

    Also: Ich bin auf eure Wünsche gespannt!
     
    #20      
Seobility SEO Tool
x
×
×