Sidr
PSD-Tutorials.de

[CSS] CSS-Contest 2012 WIPs

Dieses Thema im Forum "(X)HTML & CSS" wurde erstellt von cebito, 17.02.2012.

  1. cebito

    cebito undefined

    242
    Dabei seit:
    08.03.2008
    Beiträge:
    8.204
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    PS7, Kopf
    Kameratyp:
    zum durchgucken
    [CSS] CSS-Contest 2012 WIPs
    Hier bitte nur WIPs und technische Fragen, zu den Regeln bitte hier diskutieren... http://www.psd-tutorials.de/forum/167_crossover-contests/139158-css-css-contest-2012-a.html

    WiPs:

    simonpicos --> http://html5css3demos.bplaced.net/cs.../schraege-nav/
    simonpicos --> http://html5css3demos.bplaced.net/cs...-wip/version2/
    cebito --> http://www.ecssamples.cebito.de/garden/
    DerOtto --> http://codecrumb.tk/
    Gegenstrom --> http://css-contest.kilu.de/2012/
    LaFaSiLuc --> http://www.lafasiluc.de/contest/
    vincitore --> http://andrekind.de/ZenGarden/
    Davi2000 --> http://www.designblog.bplaced.net/2012/
    jackykfm --> http://www.kfmdesign.de/contest/
    hellemon --> http://www.thurnhofer.net/download/hellemon4/


    So, ich hab heute endlich mal die Seite fertig gemacht, damit das Design blättern und weitergeben funktioniert und auch eure Daten integriert werden. Ab morgen könnt ihr euer Zeugs im Votingmodul hochladen, die gezippten Dateien ladet ihr bei http://fastshare.org/ (da muss man sich nicht anmelden) oder wenn ihr irgendwo 'nen Account habt dort hoch und schickt mir dann den Downloadlink per PM...
    ... und vergesst bitte nicht die XML auszufüllen [​IMG]

    Gleich nochmal für alle, bitte NUR den Teilnehmer-Ordner an mich schicken, nix weiter, und diesem den Namen eures Designs geben. Und vergesst nicht das Vorschaubild incl. Quellenangaben ins Votingmodul zu laden, ich ergänz dann nur den Link zu eurem Beitrag.
    Kinder, die Bilder bitte auch NUR in den Images-Ordner im Teilnehmer-Ordner, nicht in den Hauptordner!

    Voting
     
    Zuletzt bearbeitet: 02.04.2012
    #1      
  2. simonpicos

    simonpicos Mod | Forum

    Dabei seit:
    16.02.2011
    Beiträge:
    2.465
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    Adobe CC (PS, Lightroom, Illustrator, Premiere, After Effects)
    Kameratyp:
    Canon EOS 600D + div. Linsen
    [CSS] CSS-Contest 2012 WIPs
    AW: [CSS] CSS-Contest 2012 WIPs

    Das was jetzt kommt ist eigentlich noch nicht zeig-würdig..
    Aber irgendwann muss man ja mal anfangen, und bevor ich das jetzt als 4. Version in den Mülleimer schmeiße zeig ich es jetzt einfach mal..

    Bisher ist es nur die Navigation. Ich stelle es mir so vor, dass die einzelnen sections dann mit transitions a la http://tympanus.net/Tutorials/CSS3PageTransitions/index.html reingefadet werden. (Das steht auch schon teilweise, ist aber ncoh so unfertig, dass ichs erst mal ncoh nicht Zeige ;)

    Genug geschwafelt: http://html5css3demos.bplaced.net/css-contest-2012/open-wip/schraege-nav/
     
    #2      
  3. patrick_l

    patrick_l Medienjongleur

    21
    Dabei seit:
    11.05.2008
    Beiträge:
    6.490
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Branchenspezifische Anwendungen unter Win/OSX/Ubuntu, Wacom [...]
    Kameratyp:
    Canon DSLR [...]
    [CSS] CSS-Contest 2012 WIPs
    AW: [CSS] CSS-Contest 2012 WIPs

    Hahaha, meine Navi soll auch in diese Richtung gehen. Nur in schwarz und etwas kleiner. Bin noch am überlegen ob es eine Topbar wird oder doch weiter unten. Frickel da auch noch herum. Vor allem blindes Coden ohne Vorlage. ;) Gleich aber doch mal den Photo-Shopper an schmeißen. :D

    Viel kann man noch nicht sagen. Bin gespannt wie es bei dir weiter geht. Aber auch bei mir. Weiß nicht wann ich wippe. Könnte wenn auch nur die Navi wippen und die ist noch minimalistischer als deine. :lol:
     
    #3      
  4. cebito

    cebito undefined

    242
    Dabei seit:
    08.03.2008
    Beiträge:
    8.204
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    PS7, Kopf
    Kameratyp:
    zum durchgucken
    [CSS] CSS-Contest 2012 WIPs
    AW: [CSS] CSS-Contest 2012 WIPs

    Sieht doch vielversprechend aus... ;) aber, du hast mir den Oswald geklaut :hmpf:

    Ich hab auch mal angefangen... http://www.ecssamples.cebito.de/garden/
    Kämpfe derzeit damit, das in den Webkits das Verhältnis der Schriften zueinander nicht passt... mal sehn, wie ich das löse.
     
    #4      
  5. simonpicos

    simonpicos Mod | Forum

    Dabei seit:
    16.02.2011
    Beiträge:
    2.465
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    Adobe CC (PS, Lightroom, Illustrator, Premiere, After Effects)
    Kameratyp:
    Canon EOS 600D + div. Linsen
    [CSS] CSS-Contest 2012 WIPs
    AW: [CSS] CSS-Contest 2012 WIPs

    Hab mal ein kleines Update reingehaun :)

    Allerdings hab ich da ziemlich wild rumpositioniert, weil es nciht wollte, wie ich wollte.. bin nicht zufrieden -.-

    @cebito: bei den sternen ist mir erst beim zweiten drüberfahren aufgefallen, dass es die links sind. vielleicht den text beim hovern einblenden?

    ansonsten gefällts mir schon nicht schlecht.. sowas ähnlcihes hatte cih auch schon aber ann wieder in die tonne gekloppt :D
     
    Zuletzt bearbeitet: 19.02.2012
    #5      
  6. cebito

    cebito undefined

    242
    Dabei seit:
    08.03.2008
    Beiträge:
    8.204
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    PS7, Kopf
    Kameratyp:
    zum durchgucken
    [CSS] CSS-Contest 2012 WIPs
    AW: [CSS] CSS-Contest 2012 WIPs

    Ist ja noch ein WIP, bin mir gar nicht sicher, ob ich es so lasse.
     
    #6      
  7. hellemon

    hellemon undefined

    331
    Dabei seit:
    17.11.2006
    Beiträge:
    2.420
    Geschlecht:
    männlich
    Ort:
    München
    Software:
    Photoshop CS3, SuperHTML Web Studio 8.5, Rapid CSS 2010
    [CSS] CSS-Contest 2012 WIPs
    AW: [CSS] CSS-Contest 2012 WIPs

    So ich komme heute von Skifahren nach Hause und werde mich später mal hinsetzen und mir ein Design überlegen, die nächsten Tage wird dann was folgen. Muss mich erst in HTML5 reinwurschteln.

    Viel Spaß allen
    Helle
     
    #7      
  8. patrick_l

    patrick_l Medienjongleur

    21
    Dabei seit:
    11.05.2008
    Beiträge:
    6.490
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Branchenspezifische Anwendungen unter Win/OSX/Ubuntu, Wacom [...]
    Kameratyp:
    Canon DSLR [...]
    [CSS] CSS-Contest 2012 WIPs
    AW: [CSS] CSS-Contest 2012 WIPs

    So, dann will ich auch mal wippen. :D Bin noch am überlegen wie ich den Content-Bereich gestalten soll. Hier dann erst einmal nur meine "fertige" Navigation. ;)

    - WiP 1 | CSS Contest 2012

    Schade das die einzelnen Menüpunkte / Listenpunkte nicht angesprochen werden können. Aber geht auch auch so. Hätte nur border-radius anders benutzt. ;)
     
    Zuletzt bearbeitet: 20.02.2012
    #8      
  9. simonpicos

    simonpicos Mod | Forum

    Dabei seit:
    16.02.2011
    Beiträge:
    2.465
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    Adobe CC (PS, Lightroom, Illustrator, Premiere, After Effects)
    Kameratyp:
    Canon EOS 600D + div. Linsen
    [CSS] CSS-Contest 2012 WIPs
    AW: [CSS] CSS-Contest 2012 WIPs

    Die Farben gefsllen mir!
    Eine kleine Überlegung: ich hab die seite zuesrt aufem handy angeschaut, da hatte der graue "balken" ne breite von 100%.. hatte was, vielleicht kannste ja mal ausprobieren..


    @cebito:

    frag... ;)
     
    #9      
  10. patrick_l

    patrick_l Medienjongleur

    21
    Dabei seit:
    11.05.2008
    Beiträge:
    6.490
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Branchenspezifische Anwendungen unter Win/OSX/Ubuntu, Wacom [...]
    Kameratyp:
    Canon DSLR [...]
    [CSS] CSS-Contest 2012 WIPs
    AW: [CSS] CSS-Contest 2012 WIPs

    Der sollte auch auf 100% :D Bleibt aber denke ich nicht so. Schauen wie es nachher mit dem Rest aussieht. Bin halt die ganze Zeit am herum experimentieren ;)
     
    #10      
  11. cebito

    cebito undefined

    242
    Dabei seit:
    08.03.2008
    Beiträge:
    8.204
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    PS7, Kopf
    Kameratyp:
    zum durchgucken
    [CSS] CSS-Contest 2012 WIPs
    AW: [CSS] CSS-Contest 2012 WIPs

    Ich mach mal was fertig und poste es dann hier...
     
    #11      
  12. simonpicos

    simonpicos Mod | Forum

    Dabei seit:
    16.02.2011
    Beiträge:
    2.465
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    Adobe CC (PS, Lightroom, Illustrator, Premiere, After Effects)
    Kameratyp:
    Canon EOS 600D + div. Linsen
    [CSS] CSS-Contest 2012 WIPs
    AW: [CSS] CSS-Contest 2012 WIPs

    An dem hab cih ganz schön zu knabbern.. Ich bin schwer am grübeln wie ich den kompletten Contentbereich umsetrzen soll. Für die einzelnen Teile (gallery,linkliste Teilnehemr, etc) hab ich schon geniale ideen, aber irgendwie hab ich noch kein wirkliches gesamtkonzept für den contentbereich.

    @cebito
    bin gespannt ;)
     
    #12      
  13. patrick_l

    patrick_l Medienjongleur

    21
    Dabei seit:
    11.05.2008
    Beiträge:
    6.490
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Branchenspezifische Anwendungen unter Win/OSX/Ubuntu, Wacom [...]
    Kameratyp:
    Canon DSLR [...]
    [CSS] CSS-Contest 2012 WIPs
    AW: [CSS] CSS-Contest 2012 WIPs

    Haha :lol: Dann stehen wir vor dem selben Problem. Ich habe schon parallel nen zweiten CSS parat. Quasi eins zum herum pfuschen ohne das man sich sorgen machen muss :D
     
    #13      
  14. cebito

    cebito undefined

    242
    Dabei seit:
    08.03.2008
    Beiträge:
    8.204
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    PS7, Kopf
    Kameratyp:
    zum durchgucken
    [CSS] CSS-Contest 2012 WIPs
    AW: [CSS] CSS-Contest 2012 WIPs

    na dann...

    HTML:
    1. <!DOCTYPE html>
    2.  
    3.  
    4.     <meta charset="UTF-8">
    5.     <title>CSS-Hacks</title>
    6.     <meta name="description" content="CSS-Hacks">
    7.     <meta name="author" content="cebito">
    8.     <meta name="keywords" content="CSS-Hacks,Browserhacks">
    9.  
    10. body{background:blue;color:yellow;text-align:center;font-size:50px;}/* alle Browser */
    11.  
    12. @media screen and (min-width: 1px){
    13.     body{background:red;color:snow;}/* alle außer IE<=8 , weil ich jedoch allen anderen Browsern was anderes sage, bleibt am Ende hier nur der Opera übrig */
    14. }
    15.  
    16. @media screen and (min-width: 1px\9){
    17.    body{background:yellow;color:red;}/* IE9+ */
    18. }
    19.  
    20. @media screen and (-webkit-min-device-pixel-ratio:0){
    21.    body{background:lime;color:purple;}/* Webkit-Browser */
    22. }
    23.  
    24. @-moz-document url-prefix(){
    25.    body{background:purple;color:lime;}/* Mozilla */
    26. }
    27.  
    28. </head>
    29.  
    30. <p>Die spinnen die Browser!</p>
    31. </body>
    32. </html>
     
    #14      
  15. Davi2000

    Davi2000 Nicht mehr ganz neu hier

    Dabei seit:
    28.11.2011
    Beiträge:
    140
    Geschlecht:
    männlich
    Software:
    CS5.5 , Dreamweaver CS5, notepad++
    [CSS] CSS-Contest 2012 WIPs
    #15      
  16. cebito

    cebito undefined

    242
    Dabei seit:
    08.03.2008
    Beiträge:
    8.204
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    PS7, Kopf
    Kameratyp:
    zum durchgucken
    [CSS] CSS-Contest 2012 WIPs
    AW: [CSS] CSS-Contest 2012 WIPs

    Den Rest hat er vorerst per display ausgeblendet ;)
     
    #16      
  17. simonpicos

    simonpicos Mod | Forum

    Dabei seit:
    16.02.2011
    Beiträge:
    2.465
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    Adobe CC (PS, Lightroom, Illustrator, Premiere, After Effects)
    Kameratyp:
    Canon EOS 600D + div. Linsen
    [CSS] CSS-Contest 2012 WIPs
    AW: [CSS] CSS-Contest 2012 WIPs

    Jep.. mehr solls noch nicht zu sehen geben :)

    @cebito: Danke, kann man sicher mal gebrauchen!
     
    #17      
  18. Davi2000

    Davi2000 Nicht mehr ganz neu hier

    Dabei seit:
    28.11.2011
    Beiträge:
    140
    Geschlecht:
    männlich
    Software:
    CS5.5 , Dreamweaver CS5, notepad++
    [CSS] CSS-Contest 2012 WIPs
    AW: [CSS] CSS-Contest 2012 WIPs

    Na dann müssen wir uns wohl überraschen lassen.
     
    #18      
  19. simonpicos

    simonpicos Mod | Forum

    Dabei seit:
    16.02.2011
    Beiträge:
    2.465
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    Adobe CC (PS, Lightroom, Illustrator, Premiere, After Effects)
    Kameratyp:
    Canon EOS 600D + div. Linsen
    [CSS] CSS-Contest 2012 WIPs
    #19      
  20. LaFaSiLuc

    LaFaSiLuc pauschalschuldig

    543
    Dabei seit:
    06.07.2011
    Beiträge:
    2.277
    Geschlecht:
    weiblich
    Software:
    PS Creative Suite
    Kameratyp:
    Nikon D40
    [CSS] CSS-Contest 2012 WIPs
    AW: [CSS] CSS-Contest 2012 WIPs

    simon und otto, ich kann eure seiten nicht angucken, spackt da der server?
     
    #20      
Drupal Programmierung