WBB 3 - Haupt Überschrift

  • WBB 3 - Haupt Überschrift

    Ich bastele gerade an der Box für die übergreifende Überschrift herum, der Code wird später auch (sortiert, bereinigt und mit schönerem Design) wieder hier eingestellt.
    Habt ihr weitere Ideen? Vielleicht könnt ihr es ja sogar testen, falls Fehler gefunden werden einfach hier posten.

    Ich danke für eure Mithilfe.

    Auf dem Screenshot zu sehen:
    1. Normale Ansicht
    2. Mouseover der Box
    3. Mouseover des Icons
    4. Ausgeklapptes Iconmenü
    Ich überlege einen kompletten Stil in der Richtung zu entwerfen, dieser wird dann allerdings nur zum Verkauf stehen.

    CSS-Quellcode

    1. /* == == == mainHeadline == == == */
    2. .mainHeadline {
    3. padding: 5px 5px 0;
    4. width: 600px;
    5. margin-left: auto;
    6. margin-right: auto;
    7. position: relative;
    9. background: rgb(254,255,232); /* Old browsers */
    10. background: -moz-linear-gradient(top, rgba(254,255,232,1) 0%, rgba(214,219,191,1) 100%); /* FF3.6+ */
    11. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,255,232,1)), color-stop(100%,rgba(214,219,191,1))); /* Chrome,Safari4+ */
    12. background: -webkit-linear-gradient(top, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* Chrome10+,Safari5.1+ */
    13. background: -o-linear-gradient(top, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* Opera 11.10+ */
    14. background: -ms-linear-gradient(top, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* IE10+ */
    15. background: linear-gradient(top, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* W3C */
    16. border-radius: 3px;
    17. border-bottom: 1px solid #ccc;
    18. }
    20. .mainHeadline img {
    21. position: absolute;
    22. z-index: 500;
    23. left: -24px;
    24. opacity: 0;
    25. -webkit-transition: all 300ms ease-in-out;
    26. -moz-transition: all 300ms ease-in-out;
    27. -ms-transition: all 300ms ease-in-out;
    28. -o-transition: all 300ms ease-in-out;
    29. transition: all 300ms ease-in-out;
    30. }
    32. .mainHeadline:hover img {
    33. opacity: 0.6;
    34. }
    36. .mainHeadline img:hover {
    37. opacity: 1;
    38. }
    40. .mainHeadline .headlineContainer {
    41. margin: 0;
    42. }
    44. .mainHeadline .headlineContainer h2, .mainHeadline .headlineContainer p {
    45. text-align: center;
    46. }
    Alles anzeigen
    Bilder

    • mainHeadline.jpg

      198,4 kB, 970×477, 219 mal angesehen
    Aufgrund von Zeitmangel kann ich derzeit keine neuen Inhalte schreiben und biete lediglich Support im Bereich Webdesign und CSS.
    KEIN PN-Support.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von InitArt ()