Wie bekommen so viele App-Menüs diesen fertigen strukturierten Look?

Texturen sind normalerweise eine Art Rauschen oder Bitmap. Es gibt verschiedene Möglichkeiten, den Effekt in Photoshop, Illustrator und mit CSS zu erzielen.

Wenn Sie die Dinge so weit wie möglich auf CSS beschränken möchten, müssen Sie wahrscheinlich immer noch Bitmap-Bilder verwenden und die Eigenschaft background-image(oder background) als Teil Ihres Elementstils verwenden. Das Texturbild muss möglicherweise nicht zu groß sein, da Sie es horizontal und vertikal wiederholen und in Verbindung mit anderen CSS-Eigenschaften verwenden können.

Wenn Sie eine Textur oder ein Rauschen als Teil eines Farbverlaufs möchten, ist es fast immer besser, es einfach in ein Bitmap-Bild zu backen. Auch hier könnte es horizontal oder vertikal gekachelt werden, sodass Sie möglicherweise nur ein Bild mit einer Breite von ca. 10 Pixel benötigen.

Übrigens, beide Beispiele, die Sie gepostet haben, sehen so aus, als wären sie in Photoshop oder etwas Ähnlichem erstellt, nicht in CSS (ich könnte mich aber irren – haben Sie Links zur Quelle?).

Ist eine Methode (CSS/oder ganzes Bild) besser für Mobilgeräte geeignet?

Das ist eigentlich eine ziemlich schwierige Frage zu beantworten, da viele Faktoren eine Rolle spielen. Bilder haben in der Regel eine größere Dateigröße, werden aber schneller gerendert. CSS kann unglaublich langsam sein und mehr RAM beanspruchen, wenn Sie viele Schatten- und Inneneffekte haben. Aber CSS skaliert beim Vergrößern, was bedeutet, dass die Dinge in der Größe neu gerendert werden. Das sind großartige Neuigkeiten, bis Sie wirklich weit hineinzoomen und MobileSafari abstürzt, weil es zu viel RAM verwendet (passiert die ganze Zeit mit SVGs auf iOS).

CSS-Vorteile: * Rendern in Größe, wenn Sie in MobileSafari hineinzoomen. * Kann kleiner sein (in Bezug auf die Dateigröße), was bedeutet, dass es schneller über 3G usw. heruntergeladen wird.

CSS-Nachteile: * Kann viel mehr RAM beanspruchen und ist anfälliger für Browserabstürze. * Das Design kann mühsam sein (die Erstellung ist oft weniger visuell als das Erstellen von Bildern). * Erfordert Unterstützung in Browsern für bestimmte Funktionen. * Weniger Kontrolle über das Rendern (Gradienten-Dithering usw.).

Image-Profis: * Vollständige Kontrolle darüber, wie die Dinge aussehen. * Bilder sehen immer gleich aus, weil sie vorgerendert sind. * Es ist weit weniger wahrscheinlich, dass Browser aufgrund von Speichernutzung abstürzen.

Bild-Nachteile: * Zusätzliche Arbeit und CSS erforderlich, wenn Sie Anzeigen mit höheren DPI-Werten unterstützen möchten (normalerweise zwei Bildsätze). * Herunterzuladen normalerweise langsamer, da die Dateien größer sind.

Könnten Sie auf eine Qualitätsquelle für diese kleinen Bitmaps verlinken?

Wenn Sie nur etwas Rauschen möchten, können Sie ein Photoshop-Dokument erstellen und den Rauschfilter anwenden. Es gibt ein paar verschiedene Möglichkeiten, wie Sie es zum Laufen bringen können, aber es hängt von der genauen Situation ab, nach der Sie suchen. Vielleicht möchten Sie ein weißes Photoshop-Dokument erstellen, es mit viel Rauschen füllen (Filter > Rauschen > Rauschen hinzufügen), dann die Ebene größtenteils transparent machen (5 % Deckkraft?) und für das Web speichern. Auf diese Weise kann es auf eine andere Farbe aufgetragen werden und verleiht Textur.

Gibt es eine reine CSS-Methode, um diesen Rauscheffekt zu erzielen?

Nö. Rauschen ist nicht Teil der CSS-Spezifikation. Sie können jedoch Bilder in Ihre CSS-Datei einbetten. Hier ist ein Beispiel dafür:

http://www.mightymeta.co.uk/css-noise/

Diese Seite könnte auch interessant sein:

http://lea.verou.me/css3patterns/

Es gibt einige Möglichkeiten, Bilder zu verwenden, die sich auf unterschiedliche Breiten und Höhen ausdehnen können und Mittelabschnitte wiederholen. Es lohnt sich, mit CSS3 border-imagevertraut zu sein – es kann Ihnen ermöglichen, schnelle, flexible Divs und Schaltflächen zu erstellen, die mit Bildern gestaltet sind.

http://css-tricks.com/understanding-border-image/

Sie haben erwähnt, dass die CSS-Transformationen viel mehr RAM belasten. Ist dies ein einmaliger Preis, der zu zahlen ist, wenn das Layout erstmals gerendert wird?

In CSS gezeichnete Elemente benötigen oft viele Puffer, Compositing und Maskierung (Schatten, eingesetzte Schatten, Farbverläufe, abgerundete Ecken usw.). Diese werden normalerweise nur einmal ausgeführt, aber es scheint, als könnten Dinge neu gezeichnet werden, wenn sie vom Bildschirm gehen und wieder auftauchen (wenn der Benutzer scrollt oder wenn sich die Divs bewegen). Diese Frage ist wahrscheinlich nicht einfach zu beantworten, und die Ergebnisse können sich von Browser zu Browser ändern.

(Ich nehme an, Sie sprechen nur über in CSS erstellte Elemente und nicht über die eigentliche CSS-Transformationseigenschaft, die etwas anderes ist. Etwas verwandt: Ich habe festgestellt, dass CSS-Transformationen und CSS-Animationen normalerweise nicht neu gerendert werden, was bedeutet, dass sie schnell sind. verbraucht nicht mehr RAM und kann bei zu starker Skalierung verpixeln.)

Dies ist schwer zu beantworten, wie vorsichtig sollte ich in einer Umgebung mit wenig RAM sein, wenn ich meinem Projekt ein weiteres Div hinzufüge.

Du solltest wahrscheinlich in Ordnung sein. :) Meine Kommentare zu wenig Speicher beziehen sich auf das vollständige Zoomen von Webseiten mit ein paar großen CSS-Elementen oder SVG-Bildern (Vektorbildern) auf einem Retina-Gerät. Wir haben eine einfache Website mit einigen sehr einfachen SVGs und das Heranzoomen stürzt fast jedes Mal auf einem iPad ab.

(unter der Annahme, dass keine verrückte CSS-Transformation oder übermäßiges Box-Shading vorhanden ist) Sollte ich denken, dass jedes div eine Wirkung hat? oder alle 10? oder 100?

box-shadowkann einen großen Einfluss auf die Leistung haben. Seien Sie sehr vorsichtig damit, besonders bei großen Elementen. Was die Leistung betrifft, müssen Sie wahrscheinlich Ihre eigenen Tests durchführen. Das Hinzufügen weiterer 10 Divs sollte keine großen Auswirkungen haben, aber es hängt davon ab, was in ihnen enthalten ist, wie groß sie sind und wie sie gestaltet sind.

Etwas verwandt: Hier ist ein großartiger Vortrag über CSS-Leistungsoptimierung.

Ein Vortrag über einige gelöste Probleme im Zusammenhang mit der CSS-Leistung auf GitHub. Der Vortrag wurde auf der CSS Dev Conference in Honolulu, HI 2012 gehalten.

Am nächsten bin ich einer reinen CSS - Methode gekommen, um eine halbtransparente Kornkachel (PNG) zu erstellen . Auf diese Weise kann die Hintergrundfarbe per CSS geändert werden (z. B. ein Frontend-Farbschalter) und die Farbe sieht immer gleich körnig aus. Für neue Farben oder Formen müssen Sie nicht zu Photoshop zurückkehren.

Es hat seine Grenzen, aber ich muss sagen, es funktioniert ganz gut.

Ich benutze das gerne: http://www.noisetexturegenerator.com/

Also muss ich nicht einmal in Photoshop gehen ;)

CSS: {background: url(whatever.png) repeat repeat; }

• Listenpunkt

  Überschrift

enter preformatted text here

Blockquote Geben Sie hier die Linkbeschreibung ein Starker Text