• Seit langer Zeit besorg ich mir die CSS grundlagen aus dem Internet und aus verschiedenen Foren.

    Naja ich such jetzt zum nachschlagen ein CSS Buch für Profis! Gut wäre ein Buch, das beinhaltet, in welchem Browser verschiedene CSS Tags funktionieren und in welchen nicht. Naja sonst fortgeschrittene CSS Techniken...

    Könnt ihr mir da was empfehlen?

    Grüße

  • http://www.css4you.com dokumenriert das auch gut. Ein buch, dass dazu dient, wirste wohl schwer finden. Du kanndt aber mal Macrodesign anschreiben, er hat ne lightbkx mit CSS programmiert - dem gilt immernoch mein hiher respelt in sachen CSS.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  • http://www.css4you.com dokumenriert das auch gut. Ein buch, dass dazu dient, wirste wohl schwer finden. Du kanndt aber mal Macrodesign anschreiben, er hat ne lightbkx mit CSS programmiert - dem gilt immernoch mein hiher respelt in sachen CSS.


    Ne Lightbox mit CSS zu machen ist nicht gerade schwer :roll:

    CSS:

    Code
    .pseudobox a img { width: 30%; height: 30%; }
    .pseudobox a .close { display: none; }
    .pseudobox a:focus img { position: relative; width: 100%; height: 100%; z-index: 4; }
    .pseudobox a:focus .close { display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; }
    HTML
    <div class="pseudobox">
        <a href="#" onclick="return false;">
            <img src="hmm.jpg" />
            <div class="close"></div>
        </a>
    </div>

    /P.S. ich fand meine Faux-columns schwerer umzusetzen, aber wenns nicht klicki-bunti ist interessierts keine sau. ( http://web-werker.de/faux/ )

    Einmal editiert, zuletzt von Grevas (14. August 2010 um 14:22)

  • Eine simple CSS-Lightbox ist nicht so schwer da hast du Recht Grevas, allerdings wenn du Sachen wie Counter, "Next"-Button und sowas einbauen möchtest, wird es schon schwerer.

    Aber letztendlich ist es ja egal. Die Lightbox soll nur zeigen was mit reinem CSS + HTML alles möglich ist.

    Deine Faux-Columns sind vom Prinzip her sehr einfach. Aber auch hier würde ich sagen ist man mit einem Hintergrundbild besser dran. ^^

    Aber hast da was feines gebaut Grevas ;) habs bereits vor ein paar Wochen gelesen, wollte allerdings nichts zu schreiben.

  • Ich hielt es vor paar Monaten für nicht machbar, da dieses Thema paar mal im Forum kam und keiner recht wusste wie man sowas realisieren könnte...
    Aber ist ja nicht klicki-bunti, nice2know aber sehr kleiner Anwendungsbereich.

    Man kann auch eine Grafik reinsetzen, ist überhaupt kein Problem, die Spaltenbreite kann man auch so tinkern wie man will.


    Wollte eigtl. auch nur Tobse ärgern, dass er sich leicht beeindruckend lässt :rolleyes:

  • :D

    Also ich bin auf jedenfall begeistert von deiner Lösung, da ich jegliche Art von CSS-"Spielerreien", egal ob sinnvoll oder nicht, liebe. :P

    Hatte mitm Dodo schon mal darüber gesprochen wie lange es wohl dauern würde dieses "Floß-Spiel" (Wo man Personen mit nem Floß auf die andere Seite bringen muss) auf einer HTML Seite mit CSS umzusetzen. ^^


  • Naja ich such jetzt zum nachschlagen ein CSS Buch für Profis! Gut wäre ein Buch, das beinhaltet, in welchem Browser verschiedene CSS Tags funktionieren und in welchen nicht. Naja sonst fortgeschrittene CSS Techniken...

    da hätte ich das Richtige für dich:
    Fortgeschrittene CSS-Techniken.

    Für Anfänger absolut ungeeignet. Das Niveau ist sehr hoch.
    Grundlegende CSS-Prinzipien werden ausführlich beleuchtet und vertieft z.B.:
    Collapsing Margins, Block Formatting Context, Inline Formatting Context, Positionierung und Stapelung, usw, usw.

    Die praktische Umsetzung vieler komplizierter Navis und Layouts wird erklärt z.B.:
    Elastisches Layout mit Content First per negativer Verschiebung.
    Spalten mit gemischten Breiten und Floats, dabei Einrückung des umgebenden Elements Verschiebung mit negativem Margin und Content First.

    Als Höhepunkt am Schluss ein Layout mit Float, Faux Columns, FootStickAlt und Companion Columns in einem flexiblen Layout.
    Wenn du das das erste Mal durcharbeitest musste aufpassen nicht ständig in den Tilt-Modus zu verfallen. :smilie227:

    Als kleine Fingerübung zwischendurch wird z.B. erklärt wie man ein Bild beidseitig von Text umfließen lassen kann (float:both; :D ).

  • Grevas, so ne simple version ist ja wirklich nichts besinderes, kommt ja tippboxen gleich. Aber macrodesign hatte nen zumachknipf drin, glaube auch next und prev buttons. Das mich doch schon beeindrukt. Aber in deiner annahme, jch bin leicht zu beeindrucken, liegst du wohl nicht so arg falsch ;)

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  • Es ist leider nur ein Next Button vorhanden. Wenn jemand allerdings eine Idee hat wie ein Prev button zu realisieren wäre, kann mich gerne anschreiben :) leider bietet CSS nur die Möglichkeit benachtbarte folgende Elemente anzusprechen :(

  • Also mal im ernst - lightboxen sind garnicht der sinn von CSS. Der einzige weg der mir einfiele wäre die lightbox von vorne neu aufzurollen.

    Code
    .prevBT:hover {
         Counter--; // hab mich mit countern nicht     auseinandergesetzt, eine subtraktion sollte klappen
    }
    .lighbox, .lightbox .prevBT:hover {
        // code der lightbox
    }

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!