Xyith: Kachellayout

Hallo Leute,

ich möchte eine Homepage erstellen die ich mit einem Kachellayout ordne.

Jede Kachel funktioniert hierbei als Link und soll sich beim anklicken "öffnen". Wie ich das Kachellayout erstelle ist mir klar  aber beim öffnen benötige ich eure Hilfe.

Ich hätte gerne, dass die Kachel sich dann dynamisch über das gesamte Browserfenster ausbreitet und den Inhalt anzeigt.

Hat jemand eine Idee wie ich das umsetzen könnte?

Hier eine kleine Skizze dazu:

  1. Hallo!

    Hat jemand eine Idee wie ich das umsetzen könnte?

    Mit CSS3 Transition (width + height 100%).
    Hoffe die Kurzantwort reicht dir als "Idee", ansonsten bitte nachfragen.

    Gruß Gunther

    1. Hallo!

      Hat jemand eine Idee wie ich das umsetzen könnte?

      Mit CSS3 Transition (width + height 100%).
      Hoffe die Kurzantwort reicht dir als "Idee", ansonsten bitte nachfragen.

      Gruß Gunther

      Hallo Gunther,

      danke für die Antwort, leider weis ich nicht genau wie du das meinst.Könntest du mir das vielleicht etwas genauer erklären oder gibt es da etwas zum nachlesen?

      1. @@Xyith:

        nuqneH

        oder gibt es da etwas zum nachlesen?

        Ja.

        Wobei 1. SERP zweifelhafter Natur ist.

        Aber css3.info, ALA und natürlich die Spec sollten durchaus lesbar sein.

        Qapla'

        --
        „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
  2. Ich bin vor kurzem über eine Metro-CSS-Framework gestolpert. Habe es selbst noch nicht testen können, aber könnte für dich interessant sein.

    1. Hi, danke für den Tipp! Leider finde ich da nicht wirklich was nützliches für mein Problem mit den "öffnenden" Kacheln wobei ich ein Elemt gefunden habe dass ich sehr interesannt finde und zwar der slide Overlay hier: http://metroui.org.ua/images.php

      Also das Bild mit den zwei Geparden wo von unten der dunkle Overlay ins Bild geschoben wird. Weis jemand wie man den umsetzt? Das wird dort leider nicht erklärt. Einen unbeweglichen Overlay schaff ich aber den beweglichen nicht :-)