Wir alle wissen es und wir alle lieben es, und natürlich wissen Sie wahrscheinlich bereits, dass ich über CSS und CSS3 spreche. Eigentlich sollten wir uns wahrscheinlich einen Moment Zeit nehmen, um CSS3 zu danken, bevor wir weitermachen und die Ladezeiten für alle Ihre Lieblingsseiten beschleunigen. Wenn sie wissen, was sie tun, verwenden sie höchstwahrscheinlich CSS3 anstelle einer Menge Bilder, um die Ladezeiten der Benutzer zu verbessern, was ziemlich großartig ist. Es ist mittlerweile eine ziemlich akzeptierte Tatsache, dass wir Bilder einfach nicht mehr brauchen, um all die Dinge zu tun, für die wir sie früher brauchten. Mit CSS3-Verläufen, Übergängen und all den Effekten schien es unseren Websites wirklich viel Last von den Schultern genommen zu haben, denn seien wir ehrlich – Bilder haben sie sicherlich belastet. Täuschen Sie sich jedoch nicht, CSS3 und CSS können nicht alles, aber ironischerweise bezweifle ich, dass sich die meisten von uns ihrer Grenzen bewusst sind oder was ihre Möglichkeiten bis an die Grenzen ausreizt. Nun, heute sind wir hier, um das herauszufinden. Lassen Sie uns also direkt eintauchen in eine interessante und faszinierende Entdeckungsreise für uns alle, die Fans von CSS3 und CSS sind. Hinweis: All dies mache ich unter der Annahme, dass ein Benutzer Google Chrome verwendet. Bitte verwenden Sie daher im Interesse aller Heiligen die entsprechenden Präfixe für andere Browser, bevor Sie diese tatsächlich auf Ihrer Website implementieren. Kopieren Sie nicht von hier aus und fügen Sie es ein und denken Sie nicht, dass alles perfekt funktionieren wird, denn das kann sein – vielleicht aber auch nicht.
Textbasierte Effekte
Anaglyphen
Es heißt, dass Anaglyphen, selbst wenn sie in CSS3 erstellt wurden, in 3D angezeigt werden können, wenn Sie zu Hause eine schicke Brille haben. Da bin ich mir zwar nicht sicher, aber ich weiß, dass es für bestimmte Themen für verschiedene Projekte ziemlich toll aussehen kann (z. B. ein Retro-Thema für Videospiele und ähnliches). Dieser Effekt entsteht durch den Versatz zweier der Farben Rot, Grün und Blau (RGB). Um diesen Effekt zu erzielen, benötigen wir zunächst zwei gleiche Wörter und beide müssen in CSS gezielt eingesetzt werden können, damit wir unsere Wiederholungs- und Farbmagie auf sie anwenden können. In diesem Fall können wir jedoch, anstatt unnötiges HTML in unser Tag einzufügen, das wir für diese Wörter verwenden, einfach die Pseudoklasse „:after“ verwenden, um das zweite Wort hinzuzufügen. Dazu verwenden wir dieses Beispiel: Stellen Sie sich vor, wir verwenden ein H1, um unser erstes Wort anzuzeigen, wie zum Beispiel:
Anaglyph
. Dann machen wir Folgendes: h1:after { content: „Anaglyph“; } Dies gibt uns diese schöne Wiederholung und zeigt „Anaglyph Anaglyph“ auf der Seite an. Beginnen wir also mit dem Stylen, damit wir etwas von dieser ausgefallenen 3D-Schönheit hinzufügen können. h1 { Anzeige: inline; Position: relativ; Buchstabenabstand: -5px; /* Das wird alles zusammenschieben und uns eine schöne 3D-Atmosphäre geben */ color: rgba(0,0,255,0.5); /* Dies ergibt ein Blau bei 50 % Deckkraft */ } h1:after { content: „Anaglyph“; Position: absolut; links: 8px; oben: 6px; /* Diese richten es so aus, dass es relativ zum letzten Wort ist, wo wir es haben möchten */ color: rgba (255,0,0,0.5); /* Dadurch erhalten wir ein Rot bei 50 % Deckkraft */ } Die Verwendung von RGBA ist hier sehr wichtig, da dadurch eine Alpha-Transparenz eingestellt werden kann, sodass der überlagerte Text den darunter liegenden Text nicht vollständig blockiert und wir eine schöne Transparenz erhalten. Der Text im After-Pseudoelement wird dann absolut so positioniert, dass er, wie Sie sehen können, leicht vom darunter liegenden Text versetzt ist, und das ist ebenfalls sehr wichtig. Spielen Sie unbedingt ein wenig mit diesen Positionen, wie Sie möchten, und testen Sie verschiedene Farben, denn hier macht es viel Spaß. Aber um diesen Effekt abzurunden, fügen wir noch die rote Überlagerung hinzu, und voilà, wir haben unseren anaglyphen Effekt.
Textverläufe
CSS3-Verläufe scheinen heutzutage der letzte Schrei zu sein, und das zu Recht. Wie wir bereits besprochen haben, waren sie bisher nur über Photoshop und das Einbetten von Bildern auf Ihrer Website verfügbar. Jetzt können Sie jedoch alles mit ein wenig CSS3-Zauberei erledigen. Und vor allem mit Zaubersprüchen, die noch dazu nicht allzu kompliziert sind. Sehen wir uns also an, was wir hier in der Kategorie „Schriftverläufe“ zu bieten haben und wie man darin etwas Magie zaubert. Linear, von oben nach unten: -webkit-gradient(linear, 0 % 0 %, 0 % 100 %, from(#00000), to(#FFFFFF)); Linear, von links nach rechts: -webkit-linear-gradient(left, #000000, #FFFFFF); Linearer Farbverlauf (mit gleichmäßigen Farbstopps): -webkit-gradient(linear, left top, right top, from(#000000), color-stop(0.25, #FFFFFF), color-stop(0.5, #000000), color- stop(0.75, #1a82f7), to(#FFFFFF)); Radialer Gradient: -webkit-radial-gradient(circle, #000000, #FFFFFF); Radialer Gradient (positioniert): -webkit-radial-gradient(80% 20%, most-corner, #000000, #FFFFFF); Lassen Sie uns hier ein Beispiel erstellen und mit einem h1 beginnen.
CSS3-Verlauf
Dann beginnen wir mit der Gestaltung mit ein wenig CSS3-Magie: h1 { font-size: 100px; Schriftfamilie: Somethingfancy_or_not, Arial; /* Diese beiden können alles sein, was Sie möchten */ /* Hier beginnt der Spaß */ -webkit-mask-image: -webkit-gradient(linear, links oben, links unten, from(rgba(0,0,0, 1)), Farbstopp(50 %, rgba(0,0,0,.5)), bis (rgba(0,0,0,1))); } h1:after { content: „CSS3 Gradient“; Farbe: #d6d6d6; Textschatten: 1px 2px 5px #000; Lassen Sie sich jetzt nicht von der Menge an Klammern verwirren, die in den RGBA-Einstellungen verwendet werden, da diese selbst die erfahrensten Entwickler oft verwirren können und wir alle sie manchmal vergessen und verlegen. Denken Sie also daran, dass wir alle Menschen sind . Aber lassen Sie mich aufschlüsseln, was hier passiert. Hier verwenden wir ein Maskenbild, um den sichtbaren Teil des Elements entsprechend der Transparenz des Maskenbilds auszuschneiden. Dann verwenden wir das After-Pseudoelement, um einen schönen Textschatten auf unserem Element zu rendern. Das alles ist für einen Farbverlauf natürlich nicht erforderlich, aber es ist eine schöne Möglichkeit, das Geschehen aufzupeppen und zeigt Ihnen auf jeden Fall, wie weit wir einen einfachen Farbverlauf strecken können. Probieren Sie jetzt alle Farbverlaufsstile aus und stellen Sie sicher, dass Ihnen für Ihr nächstes Projekt etwas Schickes einfällt.
Tropfender Text
Eines der wenigen Dinge, die wir sehr selten brauchen, die wir aber vielleicht tatsächlich für interessant halten, ist das Tropfen von Text, um den Eindruck zu erwecken, dass er auseinanderfällt und die Buchstaben intakt bleiben. Manchmal kann das daran liegen, dass wir von Vampiren besessen sind und wollen, dass aus dem Text das rote Blut der Rache fließt, ODER es könnte einfach daran liegen, dass wir beim Lesen eine wasserähnliche blaue Farbe aus dem Text tropfen lassen wollen. Manchmal habe ich sogar Leute gesehen, die dies mit div-Elementen verwendet haben, wenn die Seite vom Oberflächen- zum Unterwasserstil herunterscrollt, wo die Unterwasserbereiche viel stärker verschwommen sind und daher ein wenig zu tropfen scheinen (oder unter Wasser zu sein scheinen). Die Syntax dafür ist ziemlich einfach, daher werde ich die komplexe Erklärung weglassen – aber ich werde Ihnen in einem Satz eine Einführung in die Vorgehensweise geben. Es basiert alles auf Wiederholung. Nehmen wir also an, Sie möchten ziemlich weit nach unten tropfen. Um diesen Effekt zu erzielen, würden wir etwa 15 Textschatten mit unterschiedlichen Y-Offsets verwenden. Wenn wir nur wenige wollen, würden wir nur wenige mit kleineren Offsets verwenden. Ein Beispiel für die Verwendung eines roten Vampireffekts wäre: .drip { color: #EEE; Textschatten: 4px 4px 1px #300000; 4px 6px 1px #400000; 4px 8px 1px #500000; /*……und so weiter, bis*/ 4px 60px 5px #FF0000; } Grundsätzlich können Sie so weitermachen, bis Sie den gewünschten Grenzwert (Y-Achsen-Versatz) erreicht haben, oder rückwärts arbeiten, wenn Sie das Gegenteil und einen kleineren Versatz wünschen. Achten Sie jedoch darauf, dies nicht zu häufig zu nutzen – denn wie gesagt ist dies ein sehr ungewöhnlicher Effekt und einer, für den es sicher nicht viele Anwendungsfälle gibt. Aber probieren Sie es auf jeden Fall aus, denn es ist wirklich interessant, mit sich wiederholenden Textschatten zu spielen.
Stilvolle Funktionen
Der genähte Look
Wenn Sie Photoshop oder jQuery nicht verwenden möchten, um verrückte Stitching-Effekte zu erzielen, ist CSS3 wahrscheinlich die nächstbeste Wahl. Nun kann natürlich jeder einen gestrichelten Rand auf einen Inhalt oder ein Div werfen und sagen, es sei zusammengefügt, aber der eigentliche Schlüssel besteht darin, es in Verbindung mit ein paar anderen CSS3-Funktionen zu verwenden, die es wirklich als stilvolle Ergänzung hervorheben. An. Was Sie wirklich tun möchten, ist, einen schönen Schlagschatten mit einem großen Ausbreitungsradius aufzutragen. Der Grund dafür ist, dass die Hintergrundfarbe über den Rand hinausragen soll und Sie dazu den Ausbreitungsradius (das vierte Element) sehr hoch einstellen. Zum Beispiel würde ich so etwas tun: .stitched_element { border: 2px dashed #ffffff; Kastenschatten: 0 0 0 8px #ff0030; } Dadurch erhalten Sie einen schönen Effekt, für dessen Erstellung andere scheinbar zeilenweise unnötiges CSS ausgeben. Tatsächlich handelt es sich hierbei um einen Effekt, bei dem Sie zunächst eine Weile mit der Erstellung in Photoshop experimentieren sollten, nur damit Sie die Theorie hinter dem, was Sie hier tun, verstehen. Ich habe im letzten Monat wahrscheinlich sechs Stunden in Photoshop damit verbracht, mit zusammengefügten Effekten herumzuspielen, denn ehrlich gesagt machen sie wirklich Spaß – und helfen Ihnen zu verstehen, was genau Sie mit dem CSS bewirken sollen.
Dieses schicke kaufmännische Und
Sie fragen sich vielleicht: „Wo in aller Welt bekommen die Leute diese erstaunlichen kaufmännischen Und-Zeichen, die ich ständig sehe?“ Möglicherweise haben Sie in all den Standardschriften, die Ihnen über den Weg laufen, schon lange nach einer gesucht, und nun ja, Sie haben sie, genau wie ich, wahrscheinlich erst gefunden, als Sie jemanden gesehen haben, der darüber geschrieben hat. Der Grund dafür ist, dass es sich um eine Schriftart handelt, für deren Verwendung eine Lizenz erforderlich ist. Aus diesem Grund bevorzugen viele von uns die Webschriftart oder Standardalternativen. Eine der großartigen Alternativen auf einem Mac OSX-Betriebssystem (im Lieferumfang enthalten) ist das kursive „Cochin“. Wenn Sie alternativ eine Google Web-Schriftart bevorzugen, schauen Sie sich diese an Josefin Sans. Ich weiß, das ist nicht ganz CSS3, aber es ist eine nette kleine @font-face-Aktion und in diesem Fall werde ich Ihnen einen Link zum Herunterladen der Schriftart und allem bereitstellen. Da es sich hierbei um eine Google Web-Schriftart handelt, zeigen sie Ihnen auf ihrer Seite, wie das geht. Beachten Sie jedoch, dass Sie die beiden Attribute für die Arbeit mit Schriftarten kombinieren können. Und um die Zeit zu sparen, habe ich es hier in den Code eingefügt, und zwar direkt in die Schriftart, die uns ein schickes kaufmännisches Und gibt. Spielen Sie jedoch unbedingt mit der Kursivschrift dieser Schriftarten, da dort normalerweise die wirklich interessanten Verwendungen von kaufmännischen Und-Zeichen vorkommen. @font-face { Schriftfamilie: ‘Josefin Sans’; src: url(https://fonts.googleapis.com/css?family=Josefin+Sans); } Und los geht’s. Ein paar Hinweise zur Verwendung. Wie Sie dem Bild oben entnehmen können, handelt es sich hierbei um ein sehr „schickes“ kaufmännisches Und-Zeichen, das sich am besten für den Kontrast zweier Schriftarten oder für Hochzeitseinladungen oder andere „schicke“ Veranstaltungen eignet. Ich habe es aber auch in sehr modernen Designstücken verwendet, also denken Sie nicht, dass Sie es nicht verwenden können, weil Sie etwas Modernes machen. Ich sage nur, dass es möglicherweise nicht die perfekte „Grunge“-Lösung ist, wenn Sie das anstreben. Ich muss jedoch sagen, dass dieses kaufmännische Und zwischen einer fetten und einer dünnen Schriftart wunderschön aussieht.
Einseitiger Kastenschatten
Wir alle kennen und lieben Kastenschatten, aber manchmal ist der typische Schatten vielleicht nicht genau das, was wir wollen. Manchmal führen wir beispielsweise eine realistische Schattierung eines bestimmten Elements auf unserer Website durch und möchten, dass der Schatten nur auf einer bestimmten Seite erscheint. Oder wir sind vielleicht daran interessiert, ein Schwebeelement oder ein springendes Element zu erstellen, und seien wir ehrlich – nichts verstärkt die Schönheit darin so sehr wie ein einseitiger Kastenschatten. Was wir hier tun, ist eigentlich ziemlich einfach: Wir verwenden einen negativen Ausbreitungsradius, um den Kastenschatten von einer Kante abzudrücken. Stellen wir uns zum Beispiel vor, wir haben ein graues Box-Element und es ist mit einer Breite und Höhe von 40 x 40 Pixel eingerichtet. Unser CSS würde wie folgt aussehen: .one-sided-shadow {-webkit-box-shadow: 0 8px 6px -6px black} Das gibt uns genau das, was wir brauchen, und das in einer vereinfachten Codezeile. Wie ich bereits sagte: Wenn Sie ein Beleuchtungselement (oder -thema) verwenden, um Ihre Website in eine bestimmte Richtung zu schattieren, als wäre es ein Gemälde, ist dies die perfekte Lösung für Sie. Ebenso sind Bounce- oder Hover:Bounce-Elemente dafür einfach perfekt. Im letzteren Fall aktivieren Sie den Schatten, nachdem der Sprung begonnen hat, und deaktivieren ihn, sobald er gelandet ist, und dann scheint es, als würden Sie sich bereits in einen Designer verwandeln.
Rollover in ein CSS-Sprite
CSS-Sprites sind eine unterhaltsame Technik und die meisten von uns sind höchstwahrscheinlich mit ihnen vertraut. Aber für den Fall, dass Sie es nicht sind, lassen Sie mich zusammenfassen, was sie sind. Ein CSS-Sprite ist ein großes Bild, das mindestens zwei Anzeigebereiche enthält, einen innerhalb der Ansicht und einen, der durch eine Benutzerinteraktion (typischerweise ein Bewegen der Maus darüber) sichtbar wird. Nachdem Sie nun wissen, was das ist, werden wir tatsächlich unser erstes und wahrscheinlich grundlegendstes CSS-Sprite-Bild einrichten. In diesem Fall verwenden wir einen Link-Hover und die beiden Bilder können beliebig sein, wir nennen sie jedoch „sprite.png“. Wir werden auch ein Element verwenden, um unseren Link und unser Bild unterzubringen, deshalb werden wir die Hintergrund-CSS-Syntax verwenden. Unser Code sieht also wie folgt aus: a { display: block; Hintergrund: URL(sprite.png) no-repeat; height: 50px /*Beispiel, das für die Hover-Erklärung benötigt wird*/ width: /*die entsprechende Breite hier*/ } a:hover { background-position: 0 -50px; } Wie Sie sehen können, liegt das wahre Geheimnis hier darin, was passiert, wenn der Benutzer mit der Maus über das Bildelement fährt und das Bild auf der Y-Achse mit einer Länge von 50 Pixeln übergeht. Der Grund dafür liegt in der genauen Höhe des Bildes, sodass es beim Schweben des Übergangs zu keinem Überlappen oder Überlappen kommt und das Bild so sauber und glatt wie möglich aussieht. Dies ist das wahre Geheimnis von Sprite-Bildern und Hover-Over-Aktionen. Ungeachtet der Tatsache, dass Sie möglicherweise ein sehr seltsames oder längliches Bild haben, müssen Sie den y- (oder x-) Versatz, je nachdem, was Sie anstreben, genau auf die Breite (x) oder Höhe (y) Ihres Elements einstellen . Sauber und einfach – und noch dazu ziemlich lustig. Jetzt machen Sie sich an die Arbeit und erstellen Sie Ihre eigenen Sprites!
Schichtung
Möglicherweise sind Sie daran interessiert, Dinge auf Ihrer Website zu überlagern. Sei es Papier, Blätter, Bäume oder lächerlichere Dinge wie die Gesichter von Menschen, Sie können dieselbe Syntax verwenden, um mit dem durchzukommen, was Sie wollen. Es handelt sich im Grunde genommen um eine Auswahl von Kastenschatten Ihres ersten Elements, um den „Effekt“ zu erzielen, den Sie suchen. In diesem Fall verwenden wir ein einfaches Div mit grauem Hintergrund, damit Sie erkennen können, worauf wir uns beziehen. Wir werden wie immer gleich einsteigen und es anschließend erklären.
Hallo, mein Name ist ein Layered Div.
.layering { Hintergrund: #EEE; box-shadow: 0 1px 1px rgba(0,0,0,0.15), 0 10px 0 -4px #EEE, 0 10px 2px -5px rgba(0,0,0,0.15), 0 20px 0 -11px #EEE, 0 20px 1px -8px rgba(0,0,0,0,15); } Was wir hier sehen, mag etwas komplex erscheinen, ist aber eigentlich ziemlich einfach. Was passiert, ist Schatten, Schicht, Schatten, Schicht und Schatten. Die oberste Ebene ist in diesem Fall also ein Div mit der Hintergrundfarbe #EEE. Dann haben wir unseren ersten Kastenschatten, der als Schatten auf dieser obersten Ebene fungiert, dann wird die zweite Ebene angezeigt (beachten Sie das #EEE), und dann haben wir den Schatten der zweiten Ebene und dann die dritte Ebene (beachten Sie erneut das #EEE). und dann sein Schatten. Ziemlich einfach, und mit den von uns getroffenen Entscheidungen ergibt es einen schönen Stapel- oder Schichteffekt. Auch dies kann wirklich für alles verwendet werden, Sie müssen nur an der Ausrichtung herumbasteln, um es richtig hinzubekommen. Denken Sie jedoch daran, dass Sie beim Layering am besten von links oben nach rechts unten mit Ihren Bildern oder Divs arbeiten, da es dann natürlicher verläuft.
Funktionalität
Responsives Design: iPad-Stil
Seien wir ehrlich: Responsive Design ist unglaublich wichtig. Und es ist mir egal, ob Sie Medienabfragen und flüssige Raster hassen, Sie werden sie in ein paar Jahren verwenden, unabhängig davon, ob sie Ihnen gefallen. Erwarten Sie, dass es sich um einen Standard im Webdesign handelt, insbesondere wenn man bedenkt, wie viele verschiedene Bildschirmgrößen und Geräteauflösungen auf den Markt kommen und mit alarmierend hoher Geschwindigkeit angenommen werden – vom 27-Zoll-iMac bis zum iPod Touch und allem dazwischen , und sie alle surfen im Internet. Sie alle brauchen ein schönes Erlebnis und ehrlich gesagt möchte niemand für jedes Gerät eine andere Version seiner Website erstellen, denn das ist einfach zu viel Arbeit. Wir sind vielbeschäftigte Menschen, also brauchen wir eine Lösung für vielbeschäftigte Menschen. Hier kommen Medienanfragen ins Spiel. Ich werde mich hier auf iPad-spezifische Abfragen konzentrieren, aber daraus können Sie entnehmen, was Sie benötigen, um Ihre Abfragen auf andere Bildschirmgrößen zu übertragen. Danach muss nur noch das Layout Ihrer Website geändert werden, um diese geänderten Bildschirmgrößen widerzuspiegeln. Lassen Sie uns also etwas Code einfügen und anschließend darüber sprechen. Nur @media-Bildschirm und (Gerätebreite: 768 Pixel) { /*Allgemeine Layouts*/ } Nur @media-Bildschirm und (minimale Gerätebreite: 481 Pixel) und (maximale Gerätebreite: 1024 Pixel) und (Ausrichtung: Hochformat) {/*Portrait*/ } @media nur Bildschirm und (min-device-width: 481px) und (max-device-width: 1024px) und (orientation:landscape) { /*Querformat*/ } Das sollte auch nicht sein Es ist furchtbar schwer zu erkennen, was hier passiert, aber wir nutzen die Medienabfragen. spezifische Syntax um die Anzeige unserer Website aufzuschlüsseln und für bestimmte Bildschirmgrößen optimal darzustellen. Nehmen wir also an, wir haben einen H1 mit Text in einer Größe von 60 Pixeln … nun, das ist wahrscheinlich für iMacs und andere große Desktops in Ordnung, aber auf einer konservativeren Variante wird es höchstwahrscheinlich nicht zum Rest Ihrer Website passen iPad-Ansicht. Was wir also tun werden, ist in unseren Code zu schreiben: @media only screen and (device-width: 768px) { h1: font-size 60px } Und das wird die Größe für die iPad-Bildschirme entsprechend verkleinern. Natürlich waren diese Größen nur Beispiele. Sie sollten Ihre Website am besten auf bestimmte Größen usw. testen, bevor Sie mit der Fertigstellung Ihrer Abfragen fortfahren. Dies ist jedoch eine Methode, die Ihnen auf lange Sicht eine Menge Arbeit (und Empörung der Benutzer) erspart ). HINWEIS: Wenn Sie sich mit objektorientierter Programmierung auskennen, ist dies eine Selbstverständlichkeit. Was wir sehen, ist im Grunde eine Art „Wenn-dann“-Anweisung für die Darstellung der Anzeige unserer Website durch unseren Browser. Meiner Meinung nach ist dies eines der besten Dinge, die CSS je hervorgebracht hat.
Hilfreiche Navigation (erweiterbar)
Die Navigation auf unseren Websites ist nicht immer perfekt, und deshalb müssen wir manchmal noch einmal ans Zeichenbrett gehen, um zu überdenken, wie wir es machen und ob uns CSS3 dabei helfen kann. Stellen wir uns vor, dass wir oben auf unserer Website eine Navigationsleiste haben, aber wenn Benutzer mit der Maus darüber fahren, möchten wir ihnen einen Pop-up-Effekt hinzufügen, damit sie wissen, dass sie sie verwenden können und dass es für sie tatsächlich attraktiv ist klicke auf. Nun, der beste Weg, dies zu tun, wäre, einen einfachen Webkit-Übergang mithilfe der Ease-Methode durchzuführen. Wir geben also ein Beispiel für ein „Navigations“-Element. Natürlich müssen Sie in diesem Beispiel die gesamte Einrichtung selbst vornehmen, wir betrachten nur das genaue Übergangselement, das Ihnen in diesem Fall helfen würde. nav a { -webkit-transition: width 0,15s easy; } oder nav a { -webkit-transition: all .2 easy-in-out; } /* basierend auf Ihrer Vorliebe für Animationen offensichtlich */ nav a:hover { -webkit-transform: scale(1.1); } Ein paar Hinweise zu den Webkit-Übergangseigenschaften, damit Sie es richtig auf Ihrer Website verwenden können. Es ist im Grunde ein Zauberstab und nimmt drei Werte an. Die Eigenschaft, die animiert wird, die Dauer der Animation und eine „Timing-Funktion“ (dies wirkt sich auf die Beschleunigung der Animation aus, um einen gleichmäßigeren Effekt zu erzielen). Es gibt viele Möglichkeiten, damit zu arbeiten, und es gibt viele Ressourcen Hier Und Hier Und Hier. Aber ich habe gehofft, dass Ihnen das einen Einblick in die Möglichkeiten gibt, die mit ihnen möglich sind, und dass es Ihren Wissensdurst wirklich reifen lässt, so dass Sie rausgehen und ziemlich viel experimentieren. Hier kann man viel Spaß haben. Und so sind wir am Ende unserer Reise angelangt. Bitte beachten Sie, dass dies keineswegs eine erschöpfende oder vollständige Liste ist, aber ich hoffe, dass sie Ihr Interesse an einigen der interessanteren Dinge geweckt hat, die Sie mit CSS und CSS3 machen können. Es ist manchmal eine verrückte und unterhaltsame Welt, manchmal aber auch eine frustrierende. Schließlich wissen wir alle, wie es ist, wenn ein Designer ein Div nicht dazu bringen kann, ein untergeordnetes Element richtig anzuzeigen, oder wenn ein Textelement nicht ganz das tut, was Sie möchten. Bleiben Sie also mit Ihren Lieblingsdesignern in Kontakt und bauen Sie in diesem Bereich einen Freundeskreis auf, mit dem Sie kommunizieren und diese Tricks hin und her teilen können, denn ich weiß, dass ich auf diese Weise das meiste von dem gelernt habe, was ich heute geteilt habe, und das habe ich auch getan Ich denke, es ist das Beste, was man als Webdesigner tun kann. Twitter ist dafür und für die Suche eine großartige Ressource[dot]Twitter ein noch besseres. In der Zwischenzeit überlasse ich Ihnen das Experimentieren, aber nicht vor einem letzten Satz. Gehen Sie hinaus, junger Padawan, und spielen Sie mit dem Spaß, der Sie als Webdesigner in der wilden Welt des Stils und Designs innerhalb von CSS(3) erwartet.
Was sind Ihre liebsten neuen CSS3-Techniken? Oder wenig genutzte/wenig bekannte CSS-Techniken? Lass es uns in den Kommentaren wissen!
