So erstellt man CSS

1. Einführung: Jetzt kann niemand bestreiten, dass ein guter Schlagschatten Ihr Design auf subtile, unbefriedigende Weise akzentuieren kann . Aber die Verwendung der Standardeinstellungen in den meisten Seitenerstellern führt zu begrenzten Ergebnissen und Sie werfen Schatten, die ein bisschen aussehen Samy, im heutigen Video werde ich Ihnen zeigen, wie Sie es sehr könnten Erstellen Sie schnell und einfach mehr einzigartige und oft fortgeschrittenere Schlagschatten. Sie sehen normalerweise cool aus, sehen aber tatsächlich viel lebensechter, interessierter und cooler aus. Schauen wir uns die Ergebnisse an, auf die wir heute hinarbeiten. Wie wir festgestellt haben, können Schlagschatten ziemlich cool sein, aber sie sind auch ziemlich begrenzt. Wenn Sie ein Tool wie elementar oder irgendetwas verwenden, bei dem Sie eine der vordefinierten Einstellungen verwenden. Es ist also schön, diese Dinge flexibler zu erledigen einige fortgeschrittenere Dinge tun zu können. Lassen Sie mich Ihnen kurz die drei Beispiele zeigen ich Ihnen im heutigen Video zeigen werde, aber es gibt fast unbegrenzte Möglichkeiten Sie dies in jede Richtung lenken können, in die Sie es möchten um verschiedene Effekte übereinander zu stapeln. Es wird fast alles über CSS erledigt, sodass Sie so kreativ werden können, wie Sie möchten. Werfen Sie zum Auftakt einen Blick darauf wie wir diesen ersten Schlagschatten erzeugen. Und das ist wirklich das Einfachste. Dies ist ein realistischerer Blick im Schatten mit einer Aufhellung von oben. Wir haben einen längeren Schatten und Sie werden sehen, dass er von Natur aus ziemlich gut abfällt, aber haben Sie einfach Geduld mit mir, denn er sieht viel realistischer aus. Also wie würden wir das machen? Was wir ein bisschen benutzerdefiniertes CSS verwenden werden, und wir werden auch eine kostenlose Online-Ressource verwenden die es Ihnen ermöglicht, alles visuell zu konfigurieren, zu optimieren und alles so zu gestalten, wie Sie möchten, und dann einfach nimm den Code. Wenn Sie dies jedoch bequem manuell tun möchten, tun Sie dies auf jeden Fall. 3. Brumm: Der erste Typ, den wir verwenden werden, ist der AF-Link, der in der Beschreibung enthalten ist. Sie können das also selbst überprüfen. Dies ist eine großartige Möglichkeit, visuell in der Lage zu sein, mit dieser kostenlosen Ressource genau die Art von Schlagschatteneffekt einzurichten, zu erstellen und zu optimieren und genau die Art von Schlagschatteneffekt zu erzielen , die Sie möchten. Dann haben wir diesen kleinen Codeblock und er verwendet den Box-Schatten-CSS-Selektor. Sie können also sehen, dass es all die verschiedenen Einstellungen gibt , die in diesem speziellen Setup verwendet werden , wo wir all diese Steuerelemente auf der rechten Seite haben, die es uns ermöglichen, konfiguriere das. Wir können also die Schattenebene auswählen und diese Art von stapelt wie viele Schattenebenen es gibt , um einen realistischeren Effekt zu erzielen. Im Allgemeinen gilt: Je mehr Ebenen Sie haben, desto realistischer als der Effekt wird erscheinen. Wie Sie sehen können, können wir diese so wie wir nach oben ziehen. Unsere Box-Schatten-Definitionen nehmen zu. Das gilt auch für die tatsächlichen Schichten unseres Schattens. Wir können auch die endgültige Transparenz anpassen, sodass Sie sehen können, ob wir einen viel stärkeren Schatten erzeugen möchten. Sie können diesen leicht erhöhen, wenn wir es für richtig halten. Offensichtlich würdest du damit nicht verrückt werden wollen. Aber Sie könnten etwas verwenden , das sich auf einem dunkleren Hintergrund befindet und hellere Transparenz zeigt es einfach nicht. Also kannst du das tun. Sie können das auch umkehren, wenn Sie den Alpha umkehren möchten, und Sie können sehen, dass die Schattierung einfach in die entgegengesetzte Richtung gedreht wird. Sie können sogar die Kurve der tatsächlich verwendeten Transparenz optimieren . Sie werden sehen, wenn wir dies anpassen, wird es an Standorten stärker. Wir können es mildern, wenn wir all dies anpassen und Ihre Transparenz anpassen möchten . Passen Sie Ihre Transparenzebenen bis Sie genau den gewünschten Effekt erzielen. Wie ich schon sagte, Sie haben wirklich gute Steuerelemente in diesen Seitenerstellern. Und ich verwende Elementor als Beispiel, aber es gibt viele andere Seitenersteller , die dir diese Funktionalität bieten. Aber sie werden nicht so tief, wie es uns das erlaubt. Sobald Sie das getan haben, gehen Sie George, vertikale Entfernung, die Sie anpassen können. Sie können sehen, dass wir den vertikalen Abstand vergrößern können, damit es so aussieht, als wäre die Lichtquelle oben stärker und wir können unsere Transparenz anpassen, um sie wieder stärker zu machen, die Anzahl der Schattenschichten zu erhöhen oder zu verringern. Damit wir das so realistisch wie möglich aussehen lassen können. Also lass uns das einfach ein bisschen zurückziehen. Dann haben Sie wieder die Kurve, mit der Sie den endgültigen vertikalen Abstand anpassen können . Während wir uns anpassen, können Sie sehen, dass wir das tatsächliche Aussehen des Schattens selbst ändern . Und Sie können sehen, dass wir diese Art von visueller Darstellung dieser Blöcke im Hintergrund haben visueller Darstellung dieser Blöcke im , die sich in dem Fall zeigt , den wir erstellen werden. Es ist ein viel stärkerer Schatten am Anfang, wo sie viel schneller sind gegen Ende abfallen. Das Gleiche gilt für die endgültige Schlagstärke. Sie können das anpassen und Sie können sehen, wenn wir das zu weit gehen, beginnen wir, diesen verrückten Box-Look-Effekt zu erzielen. Nehmen wir das einfach zurück, damit es immer noch ziemlich realistisch ist. Und wieder hast du deine blaue Stärke. Dies ist der am stärksten fokussierte Bereich auf der rechten Seite und der Falloff geht auf die linke Seite über. Und wieder können wir diese Kurve anpassen, um einen viel realistischeren Blick im Schatten zu erzielen, bis wir damit wirklich zufrieden sind. Dann hast du endlich Zeit, du kannst den Spread dort reduzieren. Das ist eine Art Straffung des Schattens, sodass es so aussieht, als ob das Licht mehr von oben nach unten scheint und daher die Ränder nicht ganz so im Schatten sind. Aber der mittlere Teil ist, wie gesagt, Sie können die Transparenz all dieser Elemente steuern und anpassen , um einen wirklich cool aussehenden Effekt zu erzielen. Sobald Sie damit zufrieden sind, müssen wir das in unseren Seitenersteller übernehmen , um dies über CSS anzuwenden. Jetzt können Sie dies in Ihrem Theme verwenden, wenn Sie möchten. Sie müssen nur sicherstellen, dass Sie eine CSS-Klasse oder ID verwenden. Und dann assoziieren Sie das mit dem bestimmten Element, das Sie möchten, ob es sich um ein Bild handelt, ob es sich um eine Box handelt, für was auch immer Sie es festlegen möchten. Sobald wir das haben, nehmen wir einfach diesen kleinen Codeblock als Kopie. Lass uns wieder zu Elemental zurückkehren. Und wie gesagt, ich verwende dieses Beispiel nur elementary. Sie müssen nicht zur Option Benutzerdefiniertes CSS wechseln. Und Sie können sehen, dass ich bereits die Optionen darin habe. Lassen Sie uns das im Moment komplett loswerden. Nachdem das entfernt wurde, möchte ich dies auf das Bild anwenden , das wir hier haben . Wie Sie sehen können, wurde dies ausgewählt. Was wir also tun müssen, wenn es um Elemental geht , ist, dass wir dies mit dem Selektor beginnen. Und das sagt nur zwei Elemente oder das ist das spezifische Element, das ich mit diesem CSS ansprechen möchte. Jetzt, da wir dieses Styling an das Bild anhängen wollen, fügen wir einfach das HTML-Tag für das Bild ein, das IMG ist. Öffne unsere geschweiften Klammern, schließe unsere geschweiften Klammern. Und jetzt haben wir den CSS-Selektor hochgeschickt um das Bild zu holen und das zu tun, was wir damit tun müssen. Wenn das an Ort und Stelle ist, fügen Sie den Code nicht einfach dort ein. Sie können sehen, dass unser Schlagschatten ist. Wir haben diesen realistischeren Look im Schatten geschaffen und wenden ihn speziell auf dieses Bild direkt in elementar an. Sie können jedoch alle Tools verwenden, die Sie möchten. Sie können auch reinkommen und verschiedene Elemente auswählen und ihre eigenen CSS-Klassen zuweisen. Und Sie könnten dies wahrscheinlich über Ihren eigentlichen Customizer für Ihr Theme zuweisen . Und dann können Sie dies anwenden , wann und wann Sie möchten. Ich zeige Ihnen das nur, weil ich Ihnen zeigen möchte, wie der Code mit dem Artikel selbst interagiert. dieser kostenlosen Online-Ressource und Punkt f erstellen Auf diese Weise können wir diesen realistischeren Schatten mit . Schauen wir uns jetzt die nächste Option an. Also kommen wir wieder vorbei. Und die nächste, die wir wollen, ist diese flexiblere Schlagschattenoption. Wir haben gesehen, wie man das zu einem Bild hinzufügt. Wie wäre es, wenn Sie es tatsächlich auf den Container selbst setzen möchten ? Sie können also sehen, dass wir diesen Abschnitt haben und einen Schlagschatten darauf anwenden möchten. Also hier drinnen haben wir einen Titel und wir haben etwas Text. Wir werden diesen speziellen Abschnitt auswählen. Wir werden wieder auf fortgeschrittene und wieder auf unser benutzerdefiniertes CSS zurückkommen . Also machen wir das Gleiche noch einmal, wir machen den Selektor. Aber anstatt IMG oder ähnliches für das HTML-Element einzufügen, lassen wir es leer. Und wir werden es einfach in die geschweifte Klammer stecken und die geschweifte Klammer schließen. Jetzt haben wir diesen speziellen Abschnitt ins Visier genommen und können das CSS-Styling darauf anwenden. Also habe ich eine leichte Variation von dem erstellt , was wir zuvor erstellt haben. Ich werde das kopieren und wir werden noch einmal rüberspringen und es einfach in unseren Bereich einfügen. Und Sie können sehen, dass unser Schlagschatten auf diesen Abschnitt angewendet wird. Sie haben also ein enormes Maß an Flexibilität. Sie können es nicht nur auf HTML-Elemente anwenden. Sie können es immer noch innerhalb des werkzeugartigen Elementars auf den Behälter selbst auftragen . Und lassen Sie das um verschiedene Elemente wickeln, wie ich in diesem Beispiel sage, wir haben den Titel, wir haben Text darunter. Wir können alles andere hinzufügen, was wir wollen. Wir können sagen, schauen wir einfach vorbei. Ich weiß es nicht. Sagen wir einfach, wir lassen dort ein Bild fallen. Und wir wählen einfach ein Bild aus und fügen es einfach rein. Da. Da haben wir's. Wenn wir also jetzt ein bisschen Platz dafür schaffen, nur damit wir genug Platz haben, um zu sehen, wird alles nur 100 Pixel Padding um uns herum platzieren . Sie können sehen, dass unser Schlagschatten angewendet wird, um den gesamten Container zu erkennen. So ziemlich cool. Jetzt, wo wir gesehen haben, wie das geht. 6. Verwenden Sie eine andere Möglichkeit, Schatten zu erstellen: Wie wäre es mit etwas Fortgeschrittenerem? Sie können sehen, dass wir dieses ACF-Logo haben. Wenn ich dir sagen würde, dass dieser Schlagschatten Teil von PNG oder SVG ist, würdest du wahrscheinlich denken, dass das ziemlich vernünftig klingt. ist es jedoch nicht. Es wird alles über CSS erledigt. Also werden wir es tun, ich werde dir zeigen, wie du es benutzen kannst. Eine weitere Online-Ressource , um genau das zu tun. Und wie wir den Unterschied zwischen dem Box-Shadow und einem anderen CSS-Selektor bekommen haben. Schauen wir uns das als Nächstes an. So werden wir die Dinge also einrichten. Sie können sehen, wenn ich dieses kleine bisschen Code entferne, sind wir wieder bei dem, womit wir anfangen sollten, was im Grunde nur ein transparentes PNG ist. Wenn wir hier einen anderen Farbhintergrund verwenden, wirst du genau sehen, was ich meine. Also sagen wir einfach, los geht's. Da ist dein transparentes PNG. Also gebe ich einfach ein bisschen Farbe hinein, damit du sehen kannst, was ich mache. Jetzt. Wir müssen das Bild in diesem Bereich ins Visier nehmen. Also werden wir das Gleiche nochmal machen. Wir kommen zu unserem Custom CSS. Wir können diesen Bereich auswählen. Wir können das wählen. Es ist nicht wirklich wichtig, auf welche Weise Sie das machen möchten. Ich komme wieder rein und wir wählen ein aus, wie wir es zuvor getan haben. Img, wie wir es zuvor getan haben. Wir wollen nur das Bild auswählen und werden diese geschweiften Klammern öffnen und schließen. Also haben wir Dinge vorbereitet. Also werden wir jetzt eine etwas andere Variante verwenden. Wir haben Box-Shadow gesehen. Dieses Mal werden wir tatsächlich Schlagschatten benutzen. Schlagschatten respektiert die Form von PNG- und SVG-Bildern. Dies ist also der Punkt, an dem Sie zum Beispiel ein PNG mit Transparenz oder ein SVG-Logo haben zum Beispiel ein PNG mit Transparenz oder ein SVG-Logo und einen Schlagschatten anwenden möchten. Das könnte eine wirklich coole Art sein, das zu tun. Jetzt zeige ich Ihnen nur ein wirklich einfaches Beispiel, aber ich würde empfehlen, einen Blick auf diese Seite zu werfen. Ich werde einen Link in die Beschreibung einfügen, viel detaillierter darauf eingeht, was Sie tun können, wie Sie Dinge einrichten können und all diese wirklich nützlichen Dinge. Was wir also tun werden, ist, dass wir ein bisschen Code nehmen, der besagt, dass ein Filter angewendet wird, ein CSS-Filter. Und wir werden Drop Shadow verwenden und danach haben wir alle Optionen. Also der Offset, die Transparenz, die verwendeten Farben, all diese Dinge. Also werden wir das einfach kopieren, wie wir es zuvor getan haben. Wir springen wieder rüber. Wir haben unser „Select a Center“. Nehmen wir an, wenn Sie elementar nicht verwenden, können Sie dies so einrichten, dass es sehr einfach auf diesen bestimmten Gegenstand abzielt . Also ist es einfach da drinnen runtergefallen und boom, da ist unser Schatten aufgetragen. Respektieren Sie die tatsächliche Form des PNG-Bildes dessen Inhalt und ignorieren Sie die Transparenz um es herum. Wenn Sie also möchten, können Sie den Offset leicht anpassen. Also sagen wir einfach, wir setzen das auf eins. Und Sie können sehen, dass Sätze des Offsets beim nächsten Wert dasselbe bewirken. Wenn Sie das auf zwei setzen, haben wir jetzt eine viel stärkere Wirkung. Wir können andere Werte stufenweise anpassen. Wir setzen das auf eins und Sie können sehen, dass das Blau jetzt reduziert wird. Oder wir könnten das auf etwa, sagen wir mal acht, setzen . Wir bekommen ein viel weicheres Blau, dann kannst du die anderen Werte anpassen. Wir können also sagen, dass wir dies auf eins setzen wollen , und Sie können sehen, dass es jetzt wirklich reduziert oder die Transparenz erhöht wird, was es viel weniger offensichtlich macht. Sie können diese anpassen, konfigurieren und genau das bekommen, was Sie wollen. Spielen Sie so lange, bis Sie genau den Effekt haben , mit dem Sie zufrieden sind. Aber Sie können sehen, dass dies eine wirklich gute Methode ist Bilder nicht zu beschädigen, aber dennoch Dinge wie Schlagschatten auf sie anzuwenden. Wirklich cooler Effekt. Und das sind nur einige der Dinge, die Sie mit CSS tun können , indem Sie diese Art von Techniken verwenden, die wir heute behandelt haben. Ich werde alle Links zu all diesen verschiedenen Seiten setzen , die demonstriert haben. Sie können das also selbst ausprobieren. Jetzt denke ich, dass Sie zustimmen können diese Schlagschatten viel überzeugender aussehen als die Moorstandardschatten für die wir wahrscheinlich absolut verwendet haben. Das Alter war immer bis zum nächsten Mal. Pass auf dich auf.