Ich denke, das ist für jeden anders. Dieser Moment, in dem beim Erlernen von CSS etwas „klick“ macht. Man versteht es einfach. Das ist dein CSS „Ah-ha!” Moment. Du wirst vielleicht nicht sofort ein CSS-Meister sein, aber von diesem Punkt an gibt es kein Zurück mehr.
Da jeder mit unterschiedlichen Hintergründen und unter unterschiedlichen Umständen in das Webdesign einsteigt, denke ich, dass der „Ah-ha!” Moment für jeden anders ist. Ein echter Anfänger ohne jegliche Webdesignerfahrung könnte begeistert sein, wenn mit einer einzigen CSS-Anweisung alle Unterstreichungen der Links auf seiner Seite verschwinden. Ein erfahrener Veteran des Webdesigns, der aus einer Umgebung kommt, in der er für Layoutänderungen in komplizierten Tabellen-basierten Systemen zuständig war, könnte die Einfachheit einer CSS-basierten Struktur bestaunen und begeistert sein.
Wahrscheinlicher ist jedoch, dass etwas viel Kleineres den Funken auslöst. Es ist ein kleiner Sieg, dein „Ah-ha!”, das sich so gut anfühlt, dass du süchtig wirst. (Klingt ein bisschen wie Heroin, wenn ich es so sage, aber du weißt, was ich meine).
Wenn du einen hast, hoffe ich, dass du ihn teilst! Aber fürs Erste kann ich meinen erklären.
Für mich waren es ein paar Konzepte, die sich wie die Freischaltung wirklicher Macht anfühlten. Es war eine Kombination dieser Konzepte, die meinen „Ah-ha!” Moment ausmachten.
- Jedes Seitenelement ist eine Box.
- Ich kann die Größe und Position dieser Boxen kontrollieren.
- Ich kann diesen Boxen Hintergrundbilder geben.
Klingt einfach, aber diese Dinge fühlen sich auch heute noch mächtig an.
Wenn sich einige von euch an ihren „Ah-ha!” Moment erinnern, teilt ihn gerne, indem ihr ihn zusendet oder unten kommentiert. Ich würde gerne einen weiteren Beitrag darüber schreiben und die Momente anderer Leute teilen.
Mein Moment war die Erkenntnis, dass man den Inhalt einer Box anders gestalten kann als den Rest der Seite.
.myDivClass li { spezieller Stil für Listenelemente in .myDivClass }
Hey Chris!
Stimmt! Stimmt! Ich kann mich sogar heute noch an meinen allerersten CSS-„Ah-ha!” Moment erinnern…
Muss 2002 oder 2003 gewesen sein, glaube ich. Ich sah die Kraft von CSS und seine erstaunlichen Möglichkeiten in der CSS Zen Garden.
Von diesem Moment an wusste ich, dass Tabellen viel zu 90er-Jahre-Zeug sind. Aber der gesamte CSS-Code und das „neue“ HTML-Markup sahen für mich wie eine völlig neue Sprache aus.
Ein paar Wochen später habe ich mein erstes HTML/CSS-basiertes Layout fertiggestellt und war glücklich wie ein Kind, das in einer neu gelernten Sprache seine erste Cola bestellt.
„Hey, schau mal da! Das Bild ist unter dem Link-Text! Und ich, ja, ich habe diese Seite erstellt!“
Ich glaube, das war mein „Ah-ha!”-Moment.
Und ich habe auch heute noch solche Momente, wenn ich eine weitere großartige Möglichkeit der Arbeit mit CSS kennenlerne.
Liebe es!
Alles Gute aus Deutschland,
Oliver
blog.addictedtocoffee.de
Mein Moment war das erste Mal, als ich Firebug installierte und verschiedene Farben für Ränder, Abstände usw. erkannte. Dann begann ich, verschiedene CSS-Selektoren zu verwenden und alles wurde wirklich einfach!!!
Mein AHA-Moment war, als ich das Boxmodell und den Unterschied zwischen Block- und Inline-Elementen verstand… Es hat mein Leben viel einfacher gemacht…
Auch das erste Mal, als ich eine IMG-Ersetzung mit CSS gemacht habe.
Meiner war, als ich die Stylesheet einer Website ausschaltete und sah, dass sie komplett in schwarzen Text auf weißem Hintergrund umgewandelt wurde: Da erkannte ich, wie sehr CSS das grafische Erscheinungsbild einer Website steuert, ohne den Inhalt zu beeinträchtigen.
Meine zwei Zeilen des Glücks
Mein Moment war, nachdem ich html.css (die Firefox CSS-Datei) geöffnet hatte und begriff, wie ein Browser funktioniert.
Dinge wie
haben meine Augen wirklich geöffnet und mir gezeigt, dass wir Dinge so aussehen lassen können, wie wir wollen, und nur weil wir denken, eine Tabelle sollte wie eine traditionelle Tabelle aussehen, heißt das nicht, dass sie das muss; und wir haben die volle Kontrolle über die Präsentation des HTML.
Seitdem sind Dinge wie
sehr nützlich für mich bei der Erstellung schneller Tutorials gewesen.
Die versteckte Kraft der CSS-Manipulation :o)
Liebe es! Toller Beitrag, freue mich darauf, die „Ah-ha“-Momente aller zu sehen.
Ich hatte im Laufe der Jahre viele kleine Ah-Ha-Momente… und sie kommen immer wieder. Vielleicht lerne ich langsam oder vielleicht höre ich einfach nie auf zu lernen (ich ziehe die zweite Option vor).
Mein letzter AhHa-Moment war die Erkenntnis, dass ich Bilder für jedes Seitenelement verwenden kann, ohne meinen Alter Ego zu verärgern: „Standards-Compliant Guy“. Ich fühle mich jetzt viel mächtiger, wenn ich Anker, Überschriften, Divs, Menüpunkte oder alles andere mit einem CSS-Hintergrundbild ersetze, wissend, dass mein HÄSSLICHES und standardkonformes HTML darunter liegt, das nur darauf wartet, dass der Screenreader und der Googlebot vorbeikommen und es ohne Probleme lesen.
Dieses AhHa eröffnet meiner Designseite mehr Kreativität und weniger Angst davor, was ich in meinen Designs tun und nicht tun kann…
Meiner war, als ich endlich verstanden habe, dass das funktioniert und ich später immer noch einzelne Dinge zu diesen Klassen hinzufügen kann. Es klickte und löste einen seltsamen Prozess in meinem Gehirn aus, der mich schließlich auch dazu brachte, Vererbung zu verstehen.
.class, .anotherclass, .anotherone {
…
}
Mein größter „Ah-ha!” Moment war, als ich erkannte, wie man mit demselben Markup und dann dank CSS alles für den Endbenutzer anders aussehen lassen kann. Für diesen besonderen Moment möchte ich dem CSS Zen Garden meinen Dank aussprechen.
Als ich endlich wirklich verstand, wie ich meine Floats in ALLEN Browsern zum Laufen bringe.
Und ich habe immer noch „Ah-ha“-Momente, IMMER. Wenn ich einen neuen Kunden mit einem bestimmten Design bekomme, von dem ich weiß, dass es umsetzbar ist, und es genau so hinbekomme, wie ich es will (in allen Browsern), fühle ich mich, als würde ich einen kleinen Tanz aufführen… :)
Mein Moment war die Erkenntnis, dass man mehr als eine Klasse auf ein Element anwenden kann.
Für mich war es, als ich das Boxmodell verstanden habe. Ränder, Rahmen und Abstände… Ah ha! Es passierte irgendwie, ohne dass ich es merkte. Aber seitdem sehe ich CSS anders.
Mein Moment war die Anwendung mehrerer Klassen, die einfache Handhabung. Mein schlimmster Moment war 2 Sekunden später, als ich merkte, dass ich immer noch mit Browser-Kompatibilitätsproblemen kämpfen muss ;)
Als ich damals Floats verstand.
Und dann text-indent: -9999em
Mein „Ah-ha“-Moment war die Erkenntnis, wie Margin Collapsing funktioniert. Ich habe mich immer über dieses
#masthead h1 {margin-top: 30px;
}
meine gesamte Seite mit dem #masthead-Hintergrund verschieben.
Das andere war ähnlich wie der Moment von Tim Wright – forms.css in Firefox.
Ich habe zum ersten Mal über das Buch „Cascading Style Sheet: Design for the Web“ von Lie+Bert gelesen und CSS gelernt, meine Ah-ha-Momente waren, als sie die Macht der Benutzer über die Designer demonstrierten und CSS auf XML anwendeten.
Jetzt bin ich immer noch eher ein Nutzer als ein Designer, aber diese Macht und Firebug helfen mir sehr bei der Nutzung des Webs.
@Tim Wright: interessant, ich ging davon aus, dass jeder Browser das Standard-HTML-Rendering in nativem Code hartcodiert.
Ich bin noch in den Anfängen des Lernens, aber ich glaube, ich habe mich sehr schnell ziemlich gut in CSS eingefunden. Ich glaube, es begann, nachdem ich das Buch „Hands On Training on CSS with Eric Meyer“ von Lynda.com hatte und alles für mich mehr Sinn ergab.
Ich glaube, mein erster echter „Ah-Ha“-Moment war, als ich CSS-Bildersetzung (Sprites) herausfand und mein erstes Navigationsmenü mit dieser Technik erstellte.
Und jetzt, nachdem ich die Kommentare gelesen habe, ist ein weiterer „Ah-Ha“-Moment die Erkenntnis, dass man Bildersetzung für alles verwenden kann!
Meiner war ganz ähnlich wie bei Lindsey. Als ich Floats und das Clearing gut verstanden hatte, war ich bereit für die Hauptbühne. Sobald CSS dich „trifft“, ist es keine wirklich schwierige Sprache.
Für mich kam der große Aha-Moment mit einem einfachen Float-Tag. Eine kleine Sache, eigentlich nichts Besonderes, aber ich WOLLTE, dass diese Sache rechts bleibt, wo sie hingehört, und konnte es nicht schaffen. Es war so einfach. Es erscheint immer noch ein bisschen albern, aber es war das erste Mal, dass ich tatsächlich etwas zu einem bestehenden Blatt hinzugefügt hatte, anstatt nur mit dem zu spielen, was bereits existierte.
E
Mein Moment war wohl… so etwas wie oh, DAFÜR ist clear:both da.
Mein großer AH-HA-Moment war, dass ich noch keinen großen AH-HA-Moment hatte….
Entschuldigung für mein Englisch: Ich bin ein 29-jähriger Franzose :)
CSS ist eine sehr große Welt.
Was ich an CSS mag, ist die Tatsache, dass man mit einem mächtigen Code die gesamte Präsentation ändern kann.
Aber was bei CSS schwer ist, ist die Priorität der Elemente zu lernen und die beste Wahl für alle Browser zu finden. Ich denke, das ist für mich der wichtigste Punkt, die Portabilität.
Dann positioniert man Dinge so, wie man sie haben möchte, und lässt Platz für andere Dinge, damit sie frei dort oder dort platziert werden können…
Ein Teil dieser wunderbaren Welt ist in der Liste der verrückten und schönen Designs der CSS Zen Garden sichtbar.
Ich hoffe, die Standards werden sich nicht zu sehr ändern und wie bei PHP, besser werden mit neuen Funktionsnamen und neuem Vokabular zum Lernen.
Also, ich spiele seit 10 Jahren mit CSS, und manchmal bin ich zu faul, ein Papier zu nehmen und ein Fenster mit einem Website-Design zu zeichnen, also beginne ich mit Tag table, tr, td und ein bisschen später zeichne ich alles in CSS neu, optimiere die Dinge und reduziere den Code so weit wie möglich….
Ich mag das Gefühl, mit Code wie CSS, PHP, … AJAX zu spielen.
Eine Sache, die ich an CSS mag, ist die Verwendung von div mit overflow:auto und float:left, ich denke, das sind einige sehr mächtige Codes.
Meine Ah-ha!-Momente waren die Erkenntnis, dass position:relative auf einem bestimmten div es erlaubt, position:absolute auf jedem Element innerhalb dieses div und auf Body-IDs anzuwenden. Übrigens, tolle Seite! Ich habe kürzlich deine Rollover-Technik auf einer Website verwendet.
Als ich etwa 12 Jahre alt war, habe ich viel in HTML gecodet, so dass ich jedem Element einen individuellen Stil geben musste. Als ich etwa 14 war, hörte ich von CSS und suchte nach Websites, die mir helfen würden, war aber verwirrt. Erst vor 6 Monaten versuchte ich, mit mehr CSS zu spielen, ich wollte einige Dinge in meinem WordPress-Theme ändern, und seitdem kann ich nicht mehr aufhören. Ich hatte endlich meinen Moment, als ich erkannte, dass CSS mein Stylesheet war und ich alles tun konnte, was ich wollte. Dann stieß ich auf den CSS-Tricks Podcast und beschloss, mein eigenes WordPress-Theme von Grund auf neu zu erstellen, nicht um es auf meiner Website zu verwenden, sondern um zu sehen, ob ich es schaffe. Ich habe bisher 3 Tage in meiner Freizeit damit verbracht, und es gibt noch 1 oder 2 Dinge zu erledigen, dann ist es fertig. Als ich endlich verstand, dass alles einen einzigartigen Stil haben konnte und sich in einer Box befand, verstand ich es endlich.
Mein „Ah-ha!” Moment? Einfach.
Ich hatte das Konzept von CSS noch nicht ganz verstanden… spielte irgendwie damit herum, als es mir eines Nachts einfiel.
Ich hatte gerade ein 3-Spalten-Layout erstellt, ein flaches Zentrum, 3 verschiedene Hintergründe. Ich achtete nicht einmal auf die Bedeutung dessen, was ich für meine Fähigkeiten getan hatte, ich versuchte nur, es für meinen Kunden fertigzustellen! LOL!
Ich hatte viele Ah-ha-Momente, aber im Moment erinnere ich mich an die Entdeckung der CSS-Sprites-Technik, position: relative + absolute, floating, display:block bei Anker-Elementen, CSS global reset, … Jedes Projekt, an dem ich gearbeitet habe, hat etwas Neues zu entdecken, neue Technik, neue Abkürzung, serverseitiges Skript, …
Am jüngsten (obwohl nicht ganz CSS) die CSS3 nth-child Pseudo-Klasse + jQuery für Zebra-Streifen :) – Ich wusste, dass ich es mit JS machen konnte (sah einen ALA-Artikel) und war so glücklich zu sehen, dass es wie am Schnürchen funktionierte :)
Ich hatte ein paar.
.margin:whatever und
_margin:whatever für IE-Hacks. Ich hasse es, sie zu benutzen… aber manchmal sind sie einfach notwendig und machen das Leben leichter.
Nachfahre-Selektoren
komplexere Selektoren (dann die Enttäuschung, dass IE sie nicht unterstützt).
das Boxmodell.
Und in jüngerer Zeit war es auf eine Weise, Wege zu finden, Elemente und spezifische Namen im Markup zu reduzieren. Versuchen, die geringste Menge an XHTML zu verwenden, um den Effekt zu erzielen und dabei semantisch zu sein.
Und natürlich… was in jedermanns Ah-ha-Moment sein sollte.
text-indent:-9999px;
Ja, CSS Zen Garden, und die Erkenntnis, was man mit gutem Markup-Code machen kann.
Ich weiß, wovon du redest. Ich hatte auch verschiedene Momente wie diesen, als ich meinen Blog neu gestaltete und mein eigenes Theme erstellte. Es erforderte viel Lernen. JEDES SEITENELEMENT IST EINE BOX. Das war mir nicht bewusst. Zumindest nicht vollständig, und jetzt verstehe ich die Macht davon!
Danke für diesen tollen Beitrag!
Die Erkenntnis, wie Floats wirklich funktionieren. Plötzlich schien die Verwendung von Tabellen für das Layout so nach den 90ern.
Mein größter Ah-ha-Moment war, als ich endlich erkannte, wie ich eine ganze Seite ohne Tabellen und Frames nur mit CSS gestalten konnte. Als ich wirklich verstand, wie mächtig CSS ist.
Ein weiterer kleiner Moment war, als ich den „margin:0 auto;“-Trick zum Zentrieren von Elementen sah. Ich hatte auch einen, als ich verstand, wie CSS-Sprites funktionieren. Und als ich die CSS-Selektoren verstand und nicht mehr jeder Klasse oder ID eine Klasse oder ID geben musste.
Erinnere mich klar an meine 2 Momente vor Jahren – relativ vs. absolut und block vs. inline. Dann gab es das erste Mal, als ich entdeckte, dass ich kein JavaScript OnMouseOver verwenden muss. Dann gab es den Moment gestern…
Mein erster war ganz am Anfang, als ich herausfand, wie „.“ und „#“ unterschiedlich sind.
overflow:hidden;clear:both;
Mein Ah-ha-Moment war, als ich endlich verstand, wie Floats funktionieren. Nun, es ist eher ein „Moment, warte… was?“, weil ich die Informationen immer wieder überprüfen muss und etwas Neues über Floats lerne.
Verdammt, Floats!
Ich bin noch so neu, dass ein paar winzige (Tab-Links funktionieren) Ahs durch hauptsächlich Args und 404-Fehlerseiten gedämpft werden. Ich erinnere mich an meine ersten Hello Worlds vor Jahren mit HTML.
die Erleuchtung der Hintergrundbilder-Ersetzung
#home h1 {
text-indent:-9999px;
background: url(fancygraphic.gif) no-repeat top left;
width: 300px;
height: 50px;
}
Es war, als ich Firebug zum ersten Mal benutzte. :)
Ich hatte ein paar.
„Classitis“ loswerden (statt .list-item #nav li verwenden).
zum ersten Mal einfaches, semantisches HTML schreiben und damit machen, was ich will.
Floats lernen.
verstehen, dass es einen „normalen Fluss“ gibt.
height:1%
Für mich war es wirklich das Begreifen der Arbeitsweise von Layouts in CSS, also das Boxmodell, Positionierung, Floating, Ränder und Abstände und das Wissen, wie sie funktionieren und zusammenarbeiten (und wann sie es nicht tun).
Definitiv ein erkennbarer Artikel, danke!
Meiner, wie einige andere Leute oben, war CSS Zen Garden. Allein die Erkenntnis, dass eine ganze Website komplett aus einer einzigen (oder einer Sammlung von) CSS-Datei(en) transformiert werden kann, reichte aus, um mehrere Jahre des Lernens, Übens und Liebens von CSS anzutreiben.
Lang lebe die Zen Garden!
Ich bin etwas geekiger als die anderen, denke ich. Mein erster Ah-ha war das Verständnis, wie Elternelemente an Kinder weitergegeben werden und wie man Stile in verschachtelten Elementen definiert, wie z. B. #nav ul li ul li. Mein letzter Ah-ha war die Entdeckung, wie man ein großes Bild verwendet, das alle meine Bullet-Bildersetzungen enthielt, indem man eine absolute Positionierung für das Bild im li kodierte.
Ich habe das Gefühl, dass dies eine sehr lange Kommentarliste sein wird! :) Ich habe sogar etwas gelernt, indem ich die Momente der anderen gelesen habe – danke @gaga (#24)!
Einer meiner Momente war, als ich den Unterschied zwischen inline und block lernte.
Mein Ah-ha-Moment war vor Jahren, als ich entdeckte, dass ich CSS verwenden konnte, um Schriftarten zu gestalten. Ich erinnere mich, wie beeindruckt ich war, dass ich die Zeilenhöhe einstellen konnte. Seitdem habe ich das Font-Tag nicht mehr verwendet. Divs kamen bald danach. :)
Ich erinnere mich, wie ich vor langer Zeit CSS-Codes im Web fand, um den Cursor und die Scrollleiste zu gestalten… :)
Ich hatte viele davon. Aber die Entdeckung, wie clear:both funktioniert, war die beste. Ich hatte früher Schwierigkeiten, Elemente auszurichten.
Während all diese für mich zu irgendeinem Zeitpunkt Ah-ahs waren. Mein größtes war, dass man CSS-Elemente nicht mit Zahlen benennen kann. z.B. #960wrapper {}
Als mir klar wurde, dass ich die Schriftart auf allen 200 Seiten meiner Website mit einem Klick ändern konnte. Ungefähr 1999-2000.
Beim Lesen dieser Kommentare sage ich „ah-ha“
Eine Box absolut innerhalb einer relativ positionierten Box positionieren…
Ich muss Rob zustimmen (und nicht, weil er einen tollen Namen hat), als ich erkannte, dass man Elemente innerhalb von Divs gestalten konnte, das war großartig.
Obwohl ich erst ein CSS-Anfänger bin und die meisten Dinge nicht weiß, würde ich sagen, einer der Aha-Momente für mich war:
background:fixed;Ich liebe diesen Effekt einfach.
Einer meiner Momente war, als ich den Unterschied zwischen inline und block lernte.
Ich mochte den Moment, als ich entdeckte, dass ich zwei Klassen in dasselbe div-class einfügen konnte.
div class="firstclass second class"
Mein Moment war schon lange her, als ich erkannte, dass ich CSS verwenden konnte, um die Farben von Links zu ändern und ihren Rollover-Zustand mit a:link und a:hover usw. zu ändern.
„Jedes Seitenelement ist eine Box.“
Das war auch für mich der große Moment. Ich genieße deine Videos sehr… großartige Arbeit, Chris!
das erste und wichtigste, als ich das „div“-Element als eine Teilung der Seite verstehen konnte, die nicht nur horizontal und über die gesamte Breite geht.
das zweite (noch fesselnder)
als ich endlich ein
ul>li>ahorizontales Layout erstellen konnte.und das letzte, von dem es kein Zurück mehr gab.
div.parent+div.child.parent{position:relative} .child{position:absolute}
Stimme eines verrückten Wissenschaftlers
„Ich werde die Welt erobern“ buajajajajajaj
Mein Moment war, als ich die Zentrierung eines Elements herausfand.
.element{und CSS Image Sprites :)width: 960px;
margin: 0 auto;
}
Ich stimme zu, es war
Jedes Seitenelement ist eine Box.
Ich kann die Größe und Position dieser Boxen kontrollieren.
Ich kann diesen Boxen Hintergrundbilder geben.
Als auch
Ich kann diese Box nach links FLOOTEN (ich kann .clearfix verwenden, damit das Elternelement wieder sichtbar wird)
Eigentlich hatte ich nicht vor, hier einen Kommentar zu hinterlassen, obwohl ich diesen Beitrag gesehen und wirklich gemocht habe. Aber meine jüngste Entdeckung, wie man
{display:table}auf ein Elternelement und{display: table-cell}auf seine Kinderelemente in Verbindung mit{vertical-align: middle}anwendet, hat mich schließlich geknackt =) Ich hoffe, das hilft jemandem!