de.hideout-lastation.com
Paradies Für Designer Und Entwickler


5 CSS-Eigenschaften, die Sie kennen sollten

Es gibt CSS-Eigenschaften wie Hintergrundbilder, Rahmenbilder, Maskierungs- und Ausschneideeigenschaften, mit denen Sie Bildern direkt Webseiten hinzufügen und deren Verhalten steuern können. Es gibt jedoch auch weniger häufig erwähnte bildbezogene CSS-Eigenschaften, die mit Bildern arbeiten, die mit dem Bild hinzugefügt wurden HTML-Tag, das die bevorzugte Methode zum Hinzufügen von Bildern zu Webseiten darstellt.

Die Jobbeschreibung dieser letzteren Eigenschaften variiert von der Kontrolle des Bildschattens bis zur Einstellung der Schärfe und hilft uns, das Aussehen und die Position der Bilder, die mit dem Bild hinzugefügt werden, besser zu kontrollieren Etikett. Lassen Sie uns eins nach dem anderen sehen.

1. Schärfen Sie Bilder mit image-rendering

Wenn ein Bild hochskaliert wird, glättet der Browser das Bild, sodass es nicht pixelig aussieht. Je nach Auflösung des Bildes und Bildschirms ist dies jedoch nicht immer die beste Lösung. Sie können dieses Browserverhalten mit der Eigenschaft image-rendering steuern.

Diese gut unterstützte Eigenschaft steuert den zum Skalieren eines Bilds verwendeten Algorithmus . Seine zwei Hauptwerte sind crisp-edges und pixelated .

Der Wert für crisp-edges behält den Farbkontrast zwischen Pixeln bei . Mit anderen Worten, es wird keine Glättung von Bildern durchgeführt, was für Pixel-Artworks großartig ist .

Wenn pixelated verwendet wird, können die Pixel in der Nähe eines Pixels sein Aussehen annehmen, so dass es aussieht, als ob sie zusammen ein großes Pixel bilden, was für hochauflösende Bildschirme großartig ist.

Wenn Sie die Blütenkanten in der GIF weiter unten genau betrachten, können Sie den Unterschied zwischen einem regulären und einem pixelated Bild sehen.

 img {Bild-Rendering: pixelig; } 
2. Strecken Sie Bilder mit object-fit

Die contain, cover, fill Werte sind alle bekannt, wir verwenden sie für die background-size Eigenschaft, die steuert, wie ein Hintergrundbild das Element füllt, zu dem es gehört. Die object-fit ist ihr ziemlich ähnlich, da sie auch bestimmt, wie ein Bild in seinem Container angezeigt wird .

Der contain Wert enthält das Bild in seinem Container . cover funktioniert genauso, aber wenn das Seitenverhältnis des Bildes und des Containers nicht übereinstimmt, wird das Bild abgeschnitten . fill bewirkt fill dass sich das Bild dehnt und seinen Container ausfüllt . scale-down wählt die kleinste Version des anzuzeigenden Bildes aus .

#container {Breite: 300px; Höhe: 300px; } img {Breite: 100%; Höhe: 100%; Objekt-fit: enthalten; }
3. Verschiebe Bilder mit object-position

Ähnlich wie bei der komplementären background-position der background-size gibt es auch eine object-position für die object-fit .

Die object-fit verschiebt ein Bild innerhalb eines Bildcontainers in die angegebenen Koordinaten . Die Koordinaten können als absolute Längeneinheiten, relative Längeneinheiten, Schlüsselwörter ( top, left, center, bottom und right ) oder eine gültige Kombination davon definiert werden ( top 20px right 5px, center right 80px ).

#container {Breite: 300px; Höhe: 300px; } img {Breite: 100%; Höhe: 100%; Objektposition: 150px 0; }
4. Stellen Sie Bilder mit vertical-align

Wir fügen manchmal hinzu (die von Natur aus inline sind) neben Textzeichenfolgen für zusätzliche Informationen oder Dekoration . In diesem Fall kann das Ausrichten des Textes und des Bildes an die gewünschte Position ein bisschen knifflig sein - wenn Sie nicht wissen, welche Eigenschaft zu verwenden ist.

Die Eigenschaft " vertical-align ist nicht ausschließlich für Tabellenzellen vorgesehen . Es kann auch ein Inline-Element in einer Inline-Box ausrichten und damit ein Bild in einer Textzeile ausrichten . Es braucht eine recht große Anzahl von Werten, die auf ein Inline-Element angewendet werden können, so dass Sie viele Optionen zur Auswahl haben.

PDF 5. Schattenbilder mit filter: drop-shadow()

Wenn Schatten unauffällig in Texten und Kästen verwendet werden, können Schatten eine Webseite beleben. Das Gleiche gilt für Bilder. Bilder mit Kernformen und transparenten Hintergründen können vom CSS-Filter für drop-shadow profitieren.

Seine Argumente ähneln den Werten der schattenbezogenen CSS-Eigenschaften ( text-shadow, box-shadow ). Die ersten beiden repräsentieren den vertikalen und horizontalen Abstand zwischen den Schatten und dem Bild, der dritte und vierte sind die Unschärfe und der Verbreiterungsradius des Schattens, und der letzte ist die Schattenfarbe .

Genau wie text-shadow erzeugt der drop-shadow auch einen Schatten, der an das zugehörige Objekt angefügt ist . Wenn es also auf ein Bild angewendet wird, nimmt der Schatten die Form des sichtbaren Teils des Bildes an.

 img {Filter: Schlagschatten (0 0 5px blau); } 

30 Papierkunst-Designs

30 Papierkunst-Designs

Designer können uns mit ihrem Talent und ihrer Kreativität überraschen, wenn wir verschiedene Logos, Zielseiten und Banner sehen. Wir können jedoch doppelt beeindruckt sein, wenn sie sich mit ungewöhnlichen Kunstformen wie Straßenkunst oder Papierspielen wie Origami beschäftigen. Allerdings sollte man Papier nicht unterschätzen, oder wie erstaunlich talentiert manche Künstler sein können .Heute wer

(Tech- und Design-Tipps)

Beste iPhone 7 & iPhone 7 Plus Fälle bis jetzt

Beste iPhone 7 & iPhone 7 Plus Fälle bis jetzt

Nun, da es offiziell ist - das iPhone 7 und 7 Plus haben die gleichen Abmessungen wie das iPhone 6S und 6S Plus - wenn Sie darüber nachdenken, könnten Sie sich fragen, ob Sie Ihre aktuellen Fälle weiterhin verwenden könnten, insbesondere wenn sie personalisiert wurden in gewisser Weise.Leider müssen Sie Ihre neuen iPhone 7 und 7 Plus Hüllen neu personalisieren, da die alten Hüllen nicht in die neue Dual-Kamera und die Stereo-Lautsprecher auf der Rückseite des Telefons passen .Übrigen

(Tech- und Design-Tipps)