Ich bin neugierig. Es ist immer interessant für mich, die Tools des Browser-Entwicklers zu öffnen und zu verstehen, wie eine von mir betrachtete Website erstellt wird. Dieses Material ist meine erste Geschichte über solche Forschung. Tatsache ist, dass ich einige interessante Beispiele für die Verwendung von CSS gefunden habe (zumindest schienen sie mir interessant zu sein), über die ich sprechen wollte. Wir sprechen über CSS-Funde im neuen Facebook-Design. Dieser Entwurf erschien vor relativ kurzer Zeit. Ich habe ihn vor ein paar Wochen gesehen. Anfangs schienen mir alle Elemente der Benutzeroberfläche ungewöhnlich groß zu sein, aber ich habe mich innerhalb weniger Tage daran gewöhnt. Hier werde ich über all das Interessante sprechen, das ich im Design von Facebook gefunden habe.
Verwenden von SVG-Grafiken in Avataren
AvatareSVG-Grafiken werden für Avatar-Bilder verwendet, z. B. Profilfotos, Fotos auf Benutzerseiten oder in Gruppen.Hier ist der HTML-Code:<svg role="none" style="height: 36px; width: 36px;">
<mask id="avatar">
<circle cx="18" cy="18" fill="white" r="18"></circle>
</mask>
<g mask="url(#avatar)">
<image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
<circle cx="18" cy="18" r="18"></circle>
</g>
</svg>
Als ich das sah, fragte ich mich, warum dieser Ansatz verwendet wurde. Ich habe mehrere Antworten auf diese Frage:- Der Avatar muss einen inneren Rahmen haben, der eine durchscheinende schwarze Farbe hat (10%). Dadurch sollen leichte Avatare wie runde Bilder aussehen. Darüber hinaus, auch wenn es sich um vollständig weiße Bilder handelt.
- Sie
<img>können box-shadoweinem HTML-Element mit einem Schlüsselwort keinen inneren Schatten ( ) hinzufügen inset. SVG wird verwendet, um dieses Problem zu lösen. - Damit das Bild eine runde Form hat, werden SVG-Elemente
<mask>und verwendet <image>.
Wie gesagt, die Rahmen im Avatar sind sehr nützlich für helle Bilder. Hier ist ein Layout, das diese Idee veranschaulicht.Avatare Derinnere Frame wird mit folgendem CSS konfiguriert:circle,
rect {
stroke-width: 2;
stroke: rgba(0, 0, 0, 0.1);
fill: none;
}
Wenn das Bild quadratisch ist, wird die Abbildung verwendet rect:<svg role="none" style="height: 36px; width: 36px;">
<mask id="avatar">
<rect cy="18" fill="white" height="36" rx="8" ry="8" width="36" x="0" y="0"></rect>
</mask>
<g mask="url(#avatar)">
<image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
<rect cy="18" fill="white" height="36" rx="8" ry="8" width="36" x="0" y="0"></rect>
</g>
</svg>
Interessanterweise werden auf der Hauptseite des Feeds Avatare mit dem Tag <img>und dem Element erstellt, mit dem <div>der interne durchscheinende Frame konfiguriert wird:<div class="avatar-wrapper>
<img class="avatar" width="40" height="40" src="avatar.jpg" width="40" alt="">
<div class="avatar-outline"></div>
</div>
Hier sind die Stile für diesen HTML-Code:.avatar-wrapper {
position: relative;
}
.avatar {
display: block;
border-radius: 50%;
}
.avatar-outline {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
border-radius: 50%;
}
Da SVG in Avataren nur an einigen Stellen verwendet wird, kann ich davon ausgehen, dass der Grund für die Verwendung <img>und <div>mit einer Seitengröße verbunden ist. Wenn SVG-Grafiken in Avataren vom Band verwendet würden, würde dies zu einer Erhöhung der Datenmenge führen, die beim Scrollen durch das Band geladen wird.Verwendung als Trennzeichen für <div> -Elemente, nicht als äußere Ränder
Ich habe diese Zeiten nicht gefunden, als GIF-Bilder als Trennzeichen für Webseitenelemente verwendet wurden. Aber dann sah ich etwas, das dieser Technik ähnelte. Ich denke schon, was ich spreche, kann als Div-Trennzeichen bezeichnet werden.<div> Als Trennzeichen verwendete ElementeLassen Sie mich die obige Abbildung etwas näher erläutern. Dies ist ein Fragment des Abschnitts, der Freundschaftsanfragen enthält, die auf der Startseite angezeigt werden. Vor uns liegt ein bestimmtes Raster mit Informationen über Menschen. Dieses Gitter sollte einen linken äußeren Einzug haben. Normalerweise füge ich Elemente wie den Rand hinzu :margin-left: 16px. Aber Facebook hat dasselbe mit dem Element gemacht<div>, das das Raster vom Rand des Containerelements trennt.Warum haben Designer das getan? Ich habe ein paar Vermutungen:- Möglicherweise kann dem von ihnen erstellten Entwurfssystem keine Einrückung für Containerelemente hinzugefügt werden?
- Vielleicht ist dies eine React-Komponente, die überall verwendet werden kann, indem ihre Breite eingestellt wird?
Warum wird hier keine Einrückung verwendet? Was mich betrifft, kann eine CSS-Site (ungefähr 100.000 Zeilen), die voller Hilfsklassen ist, eine andere Klasse aufnehmen, mit der Sie die Einrückung des gewünschten Elements anpassen können.Verwenden von CSS-Filtern
Mit den Elementen <img> und <svg> erstellteSymbole Sehen Sie sich diese vier Symbole an. Ein Symbol mit einem Pluszeichen und einem Pfeilsymbol wird mithilfe eines Elements erstellt<img>. Und Messenger-Symbole und Benachrichtigungen - mithilfe von SVG-Elementen. Die Gründe für diese Mischung von Technologien sind mir unbekannt.Wenn Sie auf das letzte Symbol klicken, wird der Pfeil blau neu gestrichen. „Wie ändert sich hier die Farbe, weil der Pfeil ein gewöhnliches Bild ist?“, Fragte ich mich. Wenn Sie mit der Maus über das Symbol fahren, wechselt ein Bild möglicherweise einfach zu einem anderen? Nein es ist nicht so. Ich habe herausgefunden, dass ein CSS-Filter verwendet wird, um die Farbe des Symbols auf dem Symbol zu ändern:.icon {
filter: invert(39%) sepia(57%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(147.75%) hue-rotate(202deg) brightness(97%) contrast(96%)
}
Und das ist übrigens der Produktionscode für facebook.com. Dieser Code scheint mir sehr seltsam. Ist es schwierig, dieses Element <img>durch ein SVG-Bild zu ersetzen und nur die durch das Attribut angegebene Farbe zu ändern fill?Dasselbe wird beim Erstellen eines Symbols für verifizierte Konten verwendet.VerifiziertesKontosymbol Ähnliches gilt für Links aus dem Benutzerprofil:.icon {
filter: invert(59%) sepia(11%) saturate(200%) saturate(135%) hue-rotate(176deg) brightness(96%) contrast(94%);
}
So sieht es ausLinks im BenutzerprofilWenn Sie lernen möchten, wie Sie mit einem CSS-Filter ein Bild mit einer beliebigen Farbe in Schwarz einfärben, sehen Sie sich diese Antwort unter Stapelüberlauf an. Dort finden Sie ein Tool zum Erstellen von CSS-Filtern. Schauen Sie sich auch diesen Tweet an.Verwenden von Bildern zum Erstellen von Schatten
Ein Schatten, der mit dem Hintergrundbild erstellt wurdeDer Titel des Hauptfensters hat einen Schatten. Es kann davon ausgegangen werden, dass es mit der CSS-Eigenschaft erstellt wurdebox-shadow. Aber eigentlich ist es nicht. Hier haben wir ein Element<div>mit einem Hintergrundbild verwendet, das sich entlang der Achse wiederholtx.Ich habe das hier verwendete Bild hochgeladen, damit ich es mir genauer ansehen kann.Das zum Erstellen des Schattens verwendete BildDies ist ein 2x14-Pixel-Bild, das zum Erstellen des Schatteneffekts viele Male wiederholt wird. An der Entstehung des Schatteneffekts ist nicht nur das Bild, sondern auch ein besonderes Element beteiligt<div>. Warum wurde der Schatten so geschaffen?Ein Facebook-Mitarbeiter sagte, dass das Bild hier aus Leistungsgründen verwendet wurde. Es ist interessant, dass ein so kleiner Schatten zu Problemen mit der Geschwindigkeit der Site führen kann.Auf die Frage, wie dieses Problem identifiziert wurde, sagte er , dass der Schatten einen ernsthaften Leistungsabfall und unangenehme visuelle Effekte verursachte. Beim Scrollen durch eine Seite mit vielen Videos wurden einige Teile der Seite angezeigt und verschwanden.Nun, wenn der Schatten solche Probleme verursacht - ich sehe nichts falsches daran, ihn durch das entsprechende Bild zu ersetzen.Weit verbreitete Verwendung von CSS-Variablen
Ich liebe die Tatsache, dass Facebook-Designer CSS-Variablen verwenden. Nach dem, was ich gesehen habe, :rootwurden dem Element über 320 Variablen hinzugefügt. Diese Variablen werden sowohl in hellen als auch in dunklen Themen der Site verwendet.Wenn ein dunkles Thema aktiviert ist, wird dem HTML-Element eine Klasse hinzugefügt __fb-dark-mode. Dann überschreibt es alle im Element deklarierten Variablen :root::root {
-fds-active-icon: #3578E5;
--fds-attachment-footer-background: #F2F3F5;
--fds-blue-05: #ECF3FF;
--fds-blue-30: #AAC9FF;
--fds-blue-40: #77A7FF;
}
.__fb-dark-mode:root, .__fb-dark-mode {
--fds-active-icon: black;
--fds-attachment-footer-background: black;
--fds-blue-05: black;
--fds-blue-30: black;
--fds-blue-40: black;
}
Hier ist ein Video, das zeigt, was nach dem Wechsel zu einem dunklen Thema passiert. Ich rate Ihnen, es im Vollbildmodus anzusehen.Verwenden der CSS-Eigenschaft "line-clamp" zum Trimmen von mehrzeiligem Text
Signaturen verwenden mehrzeiliges Texttrimmen.Die Seitenleiste enthält eine Liste von Links, z. B. solche, die zum Benutzerprofil, zu den neuesten Materialien und zum Abschnitt "Erinnerungen" führen. Mir ist aufgefallen, dass hier mehrzeiliger Text zugeschnitten wird:.element {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
Hierbei handelt es sich um integrierte Stile, die je nach Browser variieren.Texttrimmcode in Chrome und FirefoxDiese CSS-Funktion bietet eine recht gute Browserunterstützung. CanIUse berichtet, dass alle führenden Browser diese Eigenschaft unterstützen (allerdings mit einem Präfix). Details zu dieser Immobilie finden Sie hier .Verwenden eines div zum Erstellen von Elementen, die auf Mouseover reagieren
In der Regel werden die Effekte, die die Maus über ein Element begleiten, mithilfe von CSS erstellt. Wenn beispielsweise eine bestimmte Schaltfläche beim Bewegen des Mauszeigers mit einem speziellen Grauton versehen werden muss, gehen Sie wie folgt vor:.element:hover {
background: #ccc;
}
Auf großen Websites wie Facebook scheint dieser Ansatz jedoch unpraktisch zu sein. Beim Erkunden der Site habe ich auf das Element aufmerksam gemacht, das nur angezeigt wird, wenn Sie mit der Maus darüber fahren (nennen wir es das „Hover-Element“). Dies ist seine Hauptaufgabe. Hier ist sein Stil:.hover-div {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
pointer-events: none;
border-radius: 6px;
inset: 4px 0px;
background-color: var(--hover-overlay);
transition-property: opacity;
transition-timing-function: var(--fds-animation-fade-out);
cursor: pointer;
}
Der Eigenschaftswert opacitydieses Elements wird von JavaScript von 0nach geändert 1. Ich habe damit experimentiert und herausgefunden, dass es für viele Komponenten verwendet wird. Unten finden Sie eine Reihe von Screenshots, die die Verwendung dieses Elements veranschaulichen.Verwendung eines SchwebeelementsIch mag die Einheitlichkeit und Einfachheit, die durch die Verwendung des gleichen Effekts für mehrere Elemente erzielt wird. Wenn dies etwas bedeutet, bedeutet dies, dass die auf der Site verwendete Designsprache einheitlich ist und das System sorgfältig entworfen wurde. Gute Arbeit, Facebook!Verwenden der Inset-Eigenschaft
Es handelt sich um eine abgekürzte Aufzeichnung von Eigenschaftswerten, die sich auf den oberen, rechten, unteren und linken Teil eines Elements auswirkt. Sie können die Eigenschaft insetwie folgt verwenden:.element {
inset: 4px 0;
}
Die Eigenschaft ist insetfür die oben genannten Hover-Elemente konfiguriert, die einigen anderen Elementen zugeordnet sind. Der Stil ist in HTML eingebettet. Ich habe seine Anwendung auf die unten gezeigte Komponente bemerkt.Bereiche, die von der Inset-Eigenschaft betroffen sind, werden blau hervorgehoben.Wenn dieses Material geschrieben wird,inset unterstützt die Eigenschaftnur Firefox 66+.Dir = "auto" -Attribut und boolesche CSS-Eigenschaften
Auf mehrsprachigen Websites wie Facebook ist es manchmal schwierig, genau vorherzusagen, wie der Inhalt aussehen wird. Beispielsweise hat der Benutzername in einer Komponente ein Attribut dir=«auto». Dies bedeutet, dass die Richtung des Textes von der Sprache abhängt. Wenn Sie Englisch verwenden, wird der Text von links nach rechts und bei Verwendung von Arabisch von rechts nach links angezeigt.Darüber hinaus sollte beachtet werden, dass es einen integrierten Stil gibt, der die Richtung des Textes ändert (es besteht das Gefühl, dass das Attribut dir=«auto»nicht ausreicht). So sieht es aus:<div dir="auto" style="text-align: start;">محتوى بالعربية</div>
Beachten Sie, dass dem Element ein Stil hinzugefügt wurde text-align: start. Dies verwendet eine logische CSS-Eigenschaft. Der Stil für LTR-Layouts sieht folgendermaßen aus text-align: right.Wenn Sie sich für die Funktionen der RTL-Stilisierung interessieren, schauen Sie sich dieses Material an.Dynamischer Hintergrund je nach Hauptfoto
Hintergrund abhängig vom HauptfotoHaben Sie bemerkt, dass ein Farbverlauf und eine Farbe ähnlich der Farbe des Hauptfotos zur Gestaltung des Hintergrunds verwendet werden? Dieser Hintergrund wird dynamisch gebildet und basiert auf der Farbe des Fotos. Wie es gemacht wird?▍1. Dominante Farbe bekommen
Zuerst müssen Sie die dominante Farbe (die häufiger als andere verwendet wird) des Hauptfotos erhalten. Nachdem diese Farbe gefunden wurde, wird eine verkleinerte Version des Hauptfotos erstellt, die nur mit dieser Farbe übermalt wird.Eine dominante Farbe finden▍2. Hinzufügen eines dominanten Farbhintergrunds
Hintergrund mit dominanter Farbegefunden Hintergrund verwendet dominante Farbe früher gefunden. Um es klarer zu machen, habe ich das auf der Seite angezeigte Bild als Hauptfoto mit einem weißen Rahmen hervorgehoben.▍3. Hinzufügen eines Verlaufs über dem Hintergrund
Verwenden Sie den folgenden CSS-Code, um einen Verlauf über dem Hintergrund hinzuzufügen:.element {
background-image: linear-gradient(to top, #FFFFFF, rgb(255, 255, 255), rgba(255,255,255,0.7), rgba(255,255,255,0.4), rgba(255,255,255,0));
}
Hinzufügen eines Verlaufs (helle Farben werden im Entwurf verwendet)Für den Fall, dass dunkle Farben im Entwurf verwendet werden, wird der umgekehrte Verlauf verwendet:.element {
background-image: linear-gradient(to top, #000, rgb(0, 0, 0), rgba(0,0,0,0.7), rgba(0,0,0,0.4), rgba(0,0,0,0));
}
Hinzufügen eines Verlaufs (im Design werden dunkle Farben verwendet) Mit diesem Werkzeug könnenSie die dominante Farbe des Bildes ermitteln.Mehrere Schatten
SchattenMir hat der Ansatz gefallen, mit dem Facebook-Entwickler Schatten für verschiedene Elemente wie Dropdown-Menüs erstellt haben. Ein solcher Schatten erzeugt die Illusion von Volumen, die viel realistischer ist als die Illusion, die mit einem regulären Schatten erreichbar ist.Dropdown-MenüsHier ist das CSS:.element {
box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
Hier haben Sie vielleicht eine Frage, warum hier ein weißer Schatten mit einer Transparenz von 50% erzeugt wird. Tatsache ist, dass dies ein Schatten für das dunkle Regime ist. Unten sehen Sie ein vergrößertes Fragment der Schnittstelle, in der ein solcher Schatten verwendet wird.Ein vergrößertes Fragment der Schnittstelle mit einem eingefügten Schatten.Ich mag diese vernünftige Lösung.Leere Artikel für Flexbox-Gitter
Mir ist aufgefallen, dass alle Rasterlayouts auf der Site auf Flexbox basieren. Hier ist ein Beispiel für ein solches Layout, das ich im Fotobereich des Benutzers gefunden habe.Leere Elemente im RasterlayoutHier ist das CSS:.wrapper {
display: flex;
flex-wrap: wrap;
justify-items: space-between;
}
.item {
width: 205px;
}
Es sieht alles interessant aus, oder? Die Verwendung eines Werts space-betweenzum Anpassen der Platzierung von Elementen ist riskant. Das Layout sieht nicht richtig aus, wenn beispielsweise nur drei Fotos vorhanden sind. Ein Beispiel für ein solches Layout ist unten dargestellt.Die Gefahr der Verwendung von ZwischenräumenWie hat das Facebook-Team mit diesem Problem umgegangen? Ganz einfach: Es gibt vier leere Elemente<div>, deren Breite der Breite des Fotos entspricht. Hier ist der HTML-Code für diese Lösung:<div class="wrapper">
<div class="item"><a href="#"><img src="photo.jpg"></a></div>
<div class="item"><a href="#"><img src="photo.jpg"></a></div>
<div class="item"><a href="#"><img src="photo.jpg"></a></div>
<div class="item"><a href="#"><img src="photo.jpg"></a></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
</div>
Bei diesem Ansatz spielen solche leeren Elemente <div>die Rolle künstlicher Elemente. Sie helfen dabei, den gleichen Abstand zwischen den Elementen einzuhalten.Vertikale Medienabfragen verwenden
Ich sehe sozusagen selten vertikale Medienabfragen in freier Wildbahn. Ich mag die Tatsache, dass Facebook-Entwickler diese Abfrage verwendet haben, um die Breite des Newsfeeds auf der Startseite zu verringern:@media (min-height: 700px) {
.element {
width: 584px;
}
}
Zusammenfassung
Das ist alles. Ich war sehr daran interessiert, an diesem Artikel zu arbeiten. Als ich das Design der Facebook-Seite erkundete, lernte ich viel. Ich hoffe, Sie haben in meiner Geschichte auch etwas gefunden, das Ihnen neu und interessant erschien.Liebe Leser! Haben Sie jemals etwas Interessantes gefunden, indem Sie den Code der von Ihnen besuchten Websites analysiert haben?