Obwohl sich die Designtrends jedes Jahr ändern, können Sie sich auf die Verwendung von Standard-Schatteneffekten wie Box-Shadow und Drop-Shadow verlassen, um einen positiven Beitrag zur Ästhetik einer Website zu leisten. Sie können Schlagschatten verwenden , um angenehme, schön gerenderte Effekte zu erzielen, ohne kitschig zu wirken.
Schauen wir uns die CSS - Eigenschaft drop-shadow genauer an .
drop-shadow( ) ist ein CSS-Effekt, der einen Schatten um die Form eines bestimmten Objekts anzeigt. Hier ist die Syntax zum Anwenden eines CSS- Drop-Shadow .
Syntax: filter: drop-shadow(offset-x offset-y blur-radius color);
Es gibt eine breite Palette von Filterfunktionen, einschließlich Unschärfe ( ) , Helligkeit ( ) und Schlagschatten ( ) .
offset-x bestimmt den horizontalen Abstand und offset-y bestimmt den vertikalen Abstand. Beachten Sie, dass negative Werte den Schatten links ( offset-x ) und oberhalb ( offset-y ) des Objekts platzieren.
Die letzten beiden Parameter sind optional. Sie können den Unschärferadius des Schattens als Länge angeben. Standardmäßig ist es auf 0 eingestellt. Sie können keinen negativen Unschärferadius haben.
Die Farbe des Schattens wird als angegeben. Wenn Sie keine Farbe angegeben haben, folgt sie dem Wert der Eigenschaft color .
Sie wissen vielleicht bereits, dass Box-Shadow die Arbeit ziemlich gut macht. Sie denken vielleicht, warum brauchen wir überhaupt Schatten ? Es gibt zahlreiche Fälle, in denen die Funktion drop-shadow( ) lebensrettend ist. Schauen wir uns einige davon an:
Im Gegensatz zu einem Box-Shadow können Sie nicht rechteckigen Formen einen Schlagschatten hinzufügen . Zum Beispiel haben wir ein transparentes SVG oder PNG mit einer nicht rechteckigen Form – zum Beispiel einen Stern. Hier kann das Hinzufügen eines Schattens, der dem Objekt selbst entspricht, entweder mit box-shadow oder drop-shadow abgeschlossen werden . Betrachten Sie beide Szenarien:
HTML
CSS
.star-img img { display: inline-block; height: 15em; width: 25em; } .box-shadow { color: red; box-shadow: 0.60em 0.60em 0.2em; } .drop-shadow { filter: drop-shadow(0.60em 0.60em 0.2em); }
Ausgabe :
Wenn man beide Effekte vergleicht, wird deutlich, dass ein Box-Shadow einen rechteckigen Schatten ergibt; es spielt auch keine Rolle, ob das Bild transparent ist oder bereits einen Hintergrund besitzt. Auf der anderen Seite können Sie mit Drop-Shadow einen Schatten erzeugen, der der Form des Bildes selbst entspricht.
Die einschränkenden Faktoren bestehen darin, dass die Funktion drop-shadow( ) alle Parameter des Typs außer dem Schlüsselwort inset und dem Parameter Spread akzeptiert .
Es gibt mehrere Fälle, in denen Sie möglicherweise Komponenten erstellen müssen, indem Sie bestimmte Elemente überlappen. Wenn Sie box-shadow verwenden , stehen Sie vor dem Problem, einen Schatten richtig zu werfen. So funktioniert es, wenn Sie ein Bild und eine Textkomponente gruppieren:
HTML
Live in the moment
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.
Grundlegendes CSS
body { padding: 5em 1em; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } h2 { font-size: 2rem; } p { font-size: 0.8rem; } .parent-container { display: flex; flex-direction: column; height: 17rem; width: 50em; } .image-container img { width: 15em; position: absolute; z-index: 1; top: 2em; left: 1.5em; } .text-container { color: rgb(255, 236, 236); background-color: rgb(141 0 35); width: 30rem; padding: 3rem; align-self: flex-end; position: relative; }
Tragen Sie nun den Box-Shadow und den Drop-Shadow auf, um den Unterschied zu sehen.
.drop-shadow { filter: drop-shadow(0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.5)); } .box, .box img { box-shadow: 0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.3); }
Ausgabe:
Wie Sie sehen, wird der Kastenschatten auf jedes Element einzeln angewendet, während der Schlagschatten beide gruppiert und den Schatten anwendet.
Sie können die clip-path- Eigenschaft verwenden, um einen bestimmten Bereich zu beschneiden, der bestimmt, welche Teile eines Bildes oder Elements angezeigt werden sollen. Der Drop-Shadow-Filter ermöglicht es uns, einen Drop-Shadow auf dem abgeschnittenen Element zu erstellen, indem wir ihn auf das übergeordnete Element dieses Elements anwenden:
HTML
CSS
.parent-container { filter: drop-shadow(0rem 0rem 1.5rem maroon); } .clipped-element { width: 50em; height: 50em; margin: 0 auto; background-image: url(smiling-girl.jpg); clip-path: circle(50%); background-size: cover; background-repeat: no-repeat; }
Ausgabe:
Wir haben 50 % des Bildes mit einem kreisförmigen Pfad beschnitten. Daher wird der Schlagschattenfilter nur auf den sichtbaren Teil des Bildes angewendet. Ist es nicht toll?
Wie oben besprochen, unterstützt Drop-Shadow den Spread- Parameter nicht. Dies bedeutet, dass das Erstellen eines Umrisseffekts mit der Funktion drop-shadow( ) nicht möglich wäre, da er überall getötet wird. Außerdem rendert es verschiedene Schatteneffekte aus dem Box-Schatten und dem Text-Schatten (mit den gleichen Parametern). Sie haben vielleicht das Gefühl, dass die Unterschiede zwischen Box-Shadow und Drop-Shadow auf das CSS-Box-Modell zurückzuführen sind . Einer folgt ihm, der andere nicht. Hier ist ein Beispiel:
HTML
Every MUO article will bring you one step closer.
Every MUO article will bring you one step closer.
Every MUO article will bring you one step closer.
Grundlegendes CSS
body { padding: 5em 1em; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .parent-container { width: 72rem; } p { font-size: 3em; font-style: bold; }
Anwenden von Schatteneffekten
.drop-shadow { filter: drop-shadow(0.5em 0.5em 0.1em #555); } .box-shadow { box-shadow: 0.5em 0.5em 0.1em #555; } .text-shadow { text-shadow: 0.5em 0.5em 0.1em #555; }
Ausgabe:
Sie können sehen, dass der Box-Schatten einen schwereren, dunkleren Schatten ergibt als der Text-Schatten und der Tropfen-Schatten . Außerdem gibt es einen kleinen Unterschied in der Positionierung des Schattens zwischen text-shadow und drop-shadow . Dennoch können Sie je nach Bedarf verschiedene Schatteneffekte bevorzugen.
Die Drop-Shadow( ) -Funktion wird in allen modernen Browsern unterstützt, außer in älteren Browsern wie dem Internet Explorer. Obwohl dies die UX nicht ernsthaft beeinträchtigen würde, können Sie eine Funktionsabfrage mit einem Box-Shadow- Fallback hinzufügen .
Die Popularität von Box-Shadow ist aufgrund der Vielzahl von Anwendungsfällen ziemlich offensichtlich. Die Funktion drop-shadow() wird jedoch stark zu wenig genutzt. Wir hoffen, dass Sie mit verschiedenen Schatteneffekten experimentieren und versuchen, Schlagschatten in Ihren zukünftigen Projekten zu implementieren .
Pseudoklassen erweitern CSS und Ihr persönliches Webentwicklungsrepertoire um einen völlig neuen Funktionsumfang. Erfahren Sie mehr über sie, um ein kompetenterer und effizienterer Webentwickler zu werden.
Während Sie einen grafischen Taschenrechner auf Ihrem Computer verwenden können, kann der Interpreter der Programmiersprache Python auch als Tischrechner verwendet werden. Es ist ein so beliebter Laufwitz in der Python-Community, dass er im offiziellen Tutorial erwähnt wird. So können Sie Python als Taschenrechner verwenden.
Als Programmierer sollten Sie Herausforderungen annehmen, um zu überleben und einige Wunder im Entwicklungs- oder Programmierbereich zu schaffen. Wenn Sie also eine fortgeschrittene Programmiersprache lernen möchten, um Ihre beruflichen Fähigkeiten zu verbessern, ist Java eine der besten Aussichten, die es gibt.
Das Erlernen einer neuen Programmiersprache wie Python wird mühelos, wenn Sie eine umfassende Roadmap haben, die detailliert beschreibt, welche Konzepte Sie als Anfänger lernen müssen und wie Sie weiter vorankommen, um den nächsten Meilenstein zu erreichen. Auch fortgeschrittene Programmierer sollten ihre Grundlagen häufig auffrischen, um eine solide Grundlage für sich selbst zu schaffen.
Heutzutage ist es gängige Praxis, eine Website oder App zu erstellen, die ihre Benutzeroberfläche je nach Browser oder Gerät anpasst. Um dieses Ziel zu erreichen, gibt es zwei Ansätze. Die erste besteht darin, verschiedene Versionen Ihrer Website oder App für verschiedene Geräte zu erstellen. Aber es ist ineffizient und kann zu unvorhersehbaren Fehlern führen.
Das Arbeiten mit Zahlen ist ein wesentlicher Bestandteil der Programmierung. Jede Programmiersprache bietet Unterstützung, um Zahlen auf viele verschiedene Arten zu manipulieren. In diesem Artikel erfahren Sie, wie Sie mit iterativen, logbasierten und stringbasierten Ansätzen die Gesamtzahl der Ziffern in einer Ganzzahl ermitteln.
SQL vs. NoSQL: Was ist die beste Datenbank für Ihr nächstes Projekt?
Solidity ist die Programmiersprache, die von Smart Contracts auf der Ethereum-Blockchain verwendet wird. Es ist eine statisch typisierte, objektorientierte Programmiersprache.
GitHub Badges kann die Lesbarkeit eines Repositorys verbessern, indem es Benutzern eine schnelle Möglichkeit bietet, die Repository-Metriken zu erfassen. Badges können in Ihre README.md eingebettet werden, um anderen Entwicklern die Bedeutung und Notwendigkeit Ihres Projekts zu verdeutlichen. Als Ergebnis erhalten die Leser eine wirklich schnelle Vorstellung vom Repository, indem sie die beigefügten Badges überprüfen.
Ob es sich um eine Datenbankabfrage oder Ergebnisse mathematischer Operationen handelt, die Python-String-Format-Methode bietet eine dynamischere und ansprechendere Möglichkeit, einem Benutzer Ergebnisse zu präsentieren.
Anfang dieses Jahres hat Microsoft die Preview-Version von Visual Studio 2022 in die wilde Programmierwelt gebracht. Das sind gute Neuigkeiten! Es ist eine äußerst beliebte IDE, die jedoch angesichts des Tempos der Veränderungen im DevOps-Ökosystem, in dem sie gedeiht, für eine Optimierung oder vielleicht sogar eine Überarbeitung fällig ist.
Softwaremetriken sind Maße, die verwendet werden, um verschiedene Aspekte Ihrer Software zu quantifizieren. Diese Aspekte können von Kosten, Qualität und Effizienz des Entwicklungsteams reichen.
Als Windows-Benutzer sind Sie wahrscheinlich mindestens einmal auf die Worte .NET Framework gestoßen. Es handelt sich um ein von Microsoft entwickeltes Software-Framework, mit dem Sie C#-, C++-, F#- und Visual Basic-Programme erstellen und ausführen können. Die neueste .NET-Version ist 4.8, aber Ihr Computer benötigt möglicherweise eine ältere Version von .NET (wie .NET 3.5), um einige Apps auszuführen.
Wenn Sie ein Python-Entwickler sind, können Sie von der Vielzahl der verfügbaren Frameworks stark profitieren. Während einige Frameworks am besten für große Ökosysteme geeignet sind, sind andere darauf spezialisiert, bestimmte Entwicklungsziele zu erreichen. Lesen Sie weiter, um die grundlegenden Funktionen, Verwendungen und Unterschiede zwischen zwei Python-Frameworks zu erfahren: Flask und CherryPy.
Viele Programmierer lieben es, knifflige mathematische Probleme mit Code zu lösen. Es hilft, den Geist zu schärfen und die Fähigkeiten zur Problemlösung zu verbessern. In diesem Artikel erfahren Sie, wie Sie mit Python, C++ und JavaScript die kleinsten und größten n-stelligen perfekten Quadrate und Würfel finden. Jedes Beispiel enthält auch eine Beispielausgabe für mehrere verschiedene Werte.
Das Ausführen von Python über das Terminal ist oft unvermeidlich. Wenn Sie Python jedoch zum ersten Mal unter Windows 10 installiert haben, ist die Ausführung über das Windows-Terminal nur möglich, wenn es der Windows-Umgebungsvariablen PATH hinzugefügt wird.
Die if-Anweisung ist die treibende Kraft der logischen Programmierung. Infolgedessen ist ein besseres Verständnis von Python eine wesentliche Ergänzung zu Ihren Python-Programmierkenntnissen.
Tech ist zweifellos die Branche der Zukunft. Wenn Sie einer von Millionen junger Erwachsener sind, die kurz davor stehen, in den ersten Abschnitt Ihrer Karriere einzusteigen, fragen Sie sich vielleicht, was Sie tun sollen, wenn Sie nicht gerne programmieren.
Sie können ein reales Projekt in Python ohne eine virtuelle Umgebung nicht erfolgreich abschließen. Tools wie virtualenvwrapper und virtualenv werden häufig zum Erstellen und Verwalten virtueller Umgebungen für die Webentwicklung verwendet, während Anaconda von Datenwissenschaftlern häufig verwendet wird.
Wenn Sie planen, ein großartiges Webseiten-Layout zu erstellen, müssen Sie sich mit Rändern, Rahmen, Auffüllung und Inhalt auskennen. Jedes Element im Webdesign, ob Bild oder Text, verwendet eine Box mit diesen Eigenschaften. Sie können ganz einfach komplexe Layouts erstellen, indem Sie mit dem Boxmodell herumspielen. In diesem Artikel sezieren wir das CSS-Box-Modell und zeigen Ihnen anhand praktischer Beispiele, wie Sie diese Eigenschaften verwenden.
Suchen Sie nach einer WordPress-Alternative zum Erstellen Ihrer Website? Suchen Sie nicht weiter. Dieser Artikel zeigt Ihnen andere Content-Management-Systeme (CMS), mit denen Sie Ihre Site erstellen können.
Während Sie einen grafischen Taschenrechner auf Ihrem Computer verwenden können, kann der Interpreter der Programmiersprache Python auch als Tischrechner verwendet werden. Es ist ein so beliebter Laufwitz in der Python-Community, dass er im offiziellen Tutorial erwähnt wird. So können Sie Python als Taschenrechner verwenden.
Als Programmierer sollten Sie Herausforderungen annehmen, um zu überleben und einige Wunder im Entwicklungs- oder Programmierbereich zu schaffen. Wenn Sie also eine fortgeschrittene Programmiersprache lernen möchten, um Ihre beruflichen Fähigkeiten zu verbessern, ist Java eine der besten Aussichten, die es gibt.
Das Erlernen einer neuen Programmiersprache wie Python wird mühelos, wenn Sie eine umfassende Roadmap haben, die detailliert beschreibt, welche Konzepte Sie als Anfänger lernen müssen und wie Sie weiter vorankommen, um den nächsten Meilenstein zu erreichen. Auch fortgeschrittene Programmierer sollten ihre Grundlagen häufig auffrischen, um eine solide Grundlage für sich selbst zu schaffen.
Heutzutage ist es gängige Praxis, eine Website oder App zu erstellen, die ihre Benutzeroberfläche je nach Browser oder Gerät anpasst. Um dieses Ziel zu erreichen, gibt es zwei Ansätze. Die erste besteht darin, verschiedene Versionen Ihrer Website oder App für verschiedene Geräte zu erstellen. Aber es ist ineffizient und kann zu unvorhersehbaren Fehlern führen.
Das Arbeiten mit Zahlen ist ein wesentlicher Bestandteil der Programmierung. Jede Programmiersprache bietet Unterstützung, um Zahlen auf viele verschiedene Arten zu manipulieren. In diesem Artikel erfahren Sie, wie Sie mit iterativen, logbasierten und stringbasierten Ansätzen die Gesamtzahl der Ziffern in einer Ganzzahl ermitteln.
Container sind für die Softwareentwicklung, -bereitstellung und -verwaltung in einer virtuellen Umgebung von großem Nutzen. Docker ist im Containerisierungsprozess nützlich, aber nicht die einzige Plattform, die es gibt. Wenn Sie nach Alternativen zu Docker suchen, suchen Sie nicht weiter. Diese Liste zeigt einige funktionsreiche und effiziente Docker-Alternativen, die Sie in Ihrem nächsten Projekt verwenden können.
SQL vs. NoSQL: Was ist die beste Datenbank für Ihr nächstes Projekt?
Das Einbetten von Drittanbieterdiensten in Ihre WordPress-Posts ist eine aufregende Möglichkeit, das Interesse eines Besuchers zu wecken. Eingebettete Inhalte bieten auch visuelle Hinweise, die das Scannen erleichtern. WordPress hat das Hinzufügen dieser Art von Inhalten einfach gemacht.
Node.js ist eine JavaScript-Laufzeitumgebung, mit der Sie JavaScript außerhalb von Webbrowsern ausführen können, was es zu einer beliebten Wahl für die Entwicklung aller Arten von Anwendungen macht. Ein Teil seiner Popularität ist auf die Fülle von NPM-Paketen zurückzuführen, die das Entwicklererlebnis erleichtern sollen.
Solidity ist die Programmiersprache, die von Smart Contracts auf der Ethereum-Blockchain verwendet wird. Es ist eine statisch typisierte, objektorientierte Programmiersprache.
