WIP - Webshowroom simonpicos

WIP - Webshowroom simonpicos | Seite 4 | PSD-Tutorials.de

Erstellt von simonpicos, 15.12.2011.

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

    Das tritt immer nur bei der letzten nicht auf, tausch mal die Reihenfolge der Navis...

    Die brauchst du hier ganz sicher. Du schreibst bedeutend zu viel CSS-Code. Überleg mal, was alle gemeinsam haben, und notier das immer nur einmal, das macht den Code deutlich leser- und übersichtlicher.
    Werd mal versuchen dir das zu vereinfachen, kann aber ein Stückl dauern... ;)
     
    #61      
  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. 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

    Nene, das ist schon bewusst so. Damit die Leute, die das Ding kaufen, nur noch einen Codeblock kopieren müssen, anstatt sich einzelne Schnipsel zusammensuchen zu müssen ;)
    Mach dir die Arbeit nicht, wäre rausgeschmissene Zeit :D

    Aber irgendwo da wird das Problem liegen, weil wenn die Navis einzeln sind, funzt alles. Werd mich mal auf die Suche begeben...
     
    Zuletzt bearbeitet: 12.08.2012
    #62      
  4. 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

    Schon passiert...
    Code (Text):
    1. /************** nav allgemein **************/
    2.  
    3. .nav{
    4.     width: 546px;
    5.     height: 50px;
    6.     margin:350px auto;
    7. }
    8. .nav ul{
    9.     list-style: none;
    10. }
    11. .nav li>ul{
    12.     opacity: 0;
    13.     visibility: hidden;
    14.     position: absolute;
    15.     transition: opacity .6s;
    16.     box-shadow: 0 3px 3px rgba(0,0,0,.6);
    17.     border-bottom-left-radius: 6px;
    18.     border-bottom-right-radius: 6px;
    19. }
    20. .nav li a{
    21.     display: inline-block;
    22.     text-decoration: none;
    23.     font-family: 'Droid Sans', sans-serif;
    24.     font-size: 14px;
    25.     width: 120px;
    26.     padding: 8px 26px;
    27.     color: #fff;
    28.     transition: all .2s;
    29. }
    30.  
    31. /***************** Level 1 *****************/
    32.  
    33. .dropdown-level-1{
    34.     border-radius: 6px;
    35.     width: 546px;
    36.     height: 50px;
    37.     box-shadow: 0 2px 3px rgba(0,0,0,.6);
    38. }
    39. .dropdown-level-1>li{
    40.     position: relative;
    41.     display: inline-block;
    42.     float: left;
    43.     overflow: visible;
    44. }
    45. .dropdown-level-1>li:first-of-type>a{
    46.     border-top-left-radius: 6px;
    47.     border-bottom-left-radius: 6px;
    48. }
    49. .dropdown-level-1>li:last-of-type>a{
    50.     border-top-right-radius: 6px;
    51.     border-bottom-right-radius: 6px;
    52. }
    53. .dropdown-level-1>li>a{
    54.     line-height: 50px;
    55.     padding: 0px 26px;
    56.     height: 50px;
    57.     width:auto;
    58. }
    59.  
    60. /***************** Level 2 *****************/
    61.  
    62. .dropdown-level-2>li:last-of-type>a{
    63.     border-bottom-left-radius: 6px;
    64.     border-bottom-right-radius: 6px;
    65. }
    66.  
    67. .dropdown-level-2>li:first-of-type>a{
    68.     box-shadow: 0 6px 3px -4px rgba(0,0,0,.4) inset;
    69. }
    70.  
    71. /***************** Level 3 *****************/
    72.  
    73. .dropdown-level-3{
    74.     position: absolute;
    75.     left: 172px;
    76.     margin-top: -32px;
    77.     z-index: -2;
    78.     border-top-right-radius: 6px;
    79. }
    80. .dropdown-level-3>li:last-of-type>a{
    81.     border-bottom-left-radius: 6px;
    82.     border-bottom-right-radius: 6px;
    83. }
    84. .dropdown-level-3>li:first-of-type>a{
    85.     border-top-right-radius: 6px;
    86. }
    87.  
    88. /****************** Hover ******************/
    89.  
    90. .nav li:hover>ul{
    91.     opacity: 1;
    92.     visibility: visible;
    93. }
    94.  
    95. /***************** Farben ******************/
    96.  
    97. .blue .dropdown-level-1>li>a,.blue .dropdown-level-2>li>a:hover,.blue .dropdown-level-3>li>a:hover{
    98.     background: #2977d1;
    99. }
    100. .blue .dropdown-level-1>li>a:hover,.blue .dropdown-level-2>li>a,.blue .dropdown-level-3>li>a{
    101.     background: #5393dd;
    102. }
    103. /* ****** */
    104. .red .dropdown-level-1>li>a,.red .dropdown-level-2>li>a:hover,.red .dropdown-level-3>li>a:hover{
    105.     background: #d1294b;
    106. }
    107. .red .dropdown-level-1>li>a:hover,.red .dropdown-level-2>li>a,.red .dropdown-level-3>li>a{
    108.     background: #dd536f;
    109. }
    110. /* ***** */
    111. .orange .dropdown-level-1>li>a,.orange .dropdown-level-2>li>a:hover,.orange .dropdown-level-3>li>a:hover{
    112.     background: #e48416;
    113. }
    114. .orange .dropdown-level-1>li>a:hover,.orange .dropdown-level-2>li>a,.orange .dropdown-level-3>li>a{
    115.     background: #ec9a3c;
    116. }
    117. /* ***** */
    118. .violet .dropdown-level-1>li>a,.violet .dropdown-level-2>li>a:hover,.violet .dropdown-level-3>li>a:hover{
    119.     background: #8f53dd;
    120. }
    121. .violet .dropdown-level-1>li>a:hover,.violet .dropdown-level-2>li>a,.violet .dropdown-level-3>li>a{
    122.     background: #7229d1;
    123. }
    ... und wie man sieht, muss man hier auch nur einen Codeschnipsel kopieren und Farben ändern ist auch gleich viel einfacher ;)

    Dein Flackerprob hab ich jetzt noch nicht gemacht, muss ich mir dann mal in Ruhe anschauen.
     
    Zuletzt bearbeitet: 12.08.2012
    #63      
  5. 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 erstmal für deine Mühe... Ist so auf jeden Fall viel schlanker und praktischer für Leute die sich mit CSS auskennen. ;)
     
    #64      
  6. GameTrexofficial

    GameTrexofficial Der Anfänger...

    Dabei seit:
    10.01.2010
    Beiträge:
    47
    Geschlecht:
    männlich
    Software:
    Photoshop CS3; Dreamweaver
    WIP - Webshowroom simonpicos
    AW: WIP - Webshowroom simonpicos

    Doofe Frage, aber sind die Tuts schon fertig, denn der Slider würd mich schon interessieren
     
    #65      
  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

    Jops! Animationen Grundlagentutorial ist geschrieben und auch hier schon veröffentlicht, einfach mal auf meinem Profil schauen. (Teil 2 wartet noch auf Freischaltung)

    Außerdem gibts hier eine neue Version vom Slider inkl. Download, Demo und Tutorial:
    [​IMG]

    Schaut euch ruhig mal um ;)
     
    #66      
Seobility SEO Tool
x
×
×