de.hideout-lastation.com
Detaillierter CSS-Inspektor auf jeder Site mit CSSPeeper für Chrome
Das reguläre Chrome DevTools-Panel ist verrückt stark. Es ermöglicht jedem, tief in jede Seite einzutauchen, um das Layout einer Website, CSS und sogar HTTP-Header zu studieren, falls nötig.
Sie können viel mit dem DevTools CSS Inspektor tun. Aber es hat kein klares GUI-Panel und das ist eine Sache, die jeder Entwickler lieben würde.
Schauen Sie sich CSSPeeper an, eine kostenlose Chrome-Erweiterung, die diesen GUI-Inspector zu Ihrem Browser hinzufügt. Sie können die CSS-Eigenschaften von Elementen auf jeder Seite untersuchen, obwohl sie derzeit nur für Chrome erstellt wurden.
Nach der Installation besuchen Sie einfach eine Webseite und klicken in der Chrome-Add-On-Leiste auf die Hauptschaltfläche der Erweiterung . Ein neues Inspektorfenster erscheint oben auf der Webseite mit Details zu jedem Hauptelement.
Während Sie durch die Site blättern, können Sie auf jedes Element klicken, das Sie mit einer gepunkteten Linie sehen. Dies kann Schaltflächen, Seitenabschnitte, Kopfzeilen und Navigationselemente umfassen.
Von dort erhalten Sie einen ganzen Inspektor mit Details zur Typografie, Farbauswahl und Schriftarten. Es ist eine großartige Möglichkeit, Stile direkt von einer Webseite zu ziehen, ohne selbst in den CSS-Code einzutauchen.Mit CSSPeeper können Sie sogar verwandte Farben mit einem integrierten Farbwähler und Farbschemagenerator auswählen . Sie können Bilder von Seiten exportieren, eigene Farbschemata erstellen und diese mit Photoshop oder Sketch auf Ihre eigenen Modelle anwenden .
Ich empfehle diese Erweiterung in erster Linie für Designer anstelle von Entwicklern, da es ein viel mehr Designer-freundliches Plugin ist, das Roh-CSS zieht und den Code in einfach zu lesende Datenblöcke umwandelt.Aber dieses Plugin kann auch Entwicklern helfen! Es ist wirklich ein leistungsfähiges Website-Inspektions-Tool für alle Arten von CSS .
Werfen Sie einen Blick auf die CSSPeeper Homepage, um mehr darüber zu erfahren. Die Hauptseite enthält auch einen Link zum Chrome Store, damit Sie die Erweiterung kostenlos installieren und für einen Testlauf herausnehmen können.
![So zeigen Sie Symbole im WordPress-Menü an [WordPress Plugin]](http://hideout-lastation.com/img/tech-design-tips/581/how-display-icons-wordpress-menu.jpg){kind=icon}
So zeigen Sie Symbole im WordPress-Menü an [WordPress Plugin]
Die Ikone ist eine großartige Ergänzung für jede Art von Design. Viele Icons sind allgemein anerkannt . Nehmen Sie eine öffentliche Toilettenbeschilderung am Flughafen. Ohne die lokale Sprache zu kennen, ist es für Sie, wenn es Ihnen fremd ist, sofort klar, welche Toilette für die Damen und welche für die Herren von der Ikone an der Vorderseite der Tür sind.Dasselb
Was Sie nicht über die Berechnung der prozentualen Margins in CSS wissen
Die meisten Webdesigner denken, dass sie CSS ziemlich gut kennen. Schließlich gibt es nicht viel - ein paar Selektortypen, ein paar Dutzend Eigenschaften und einige Kaskadenregeln, an die man sich kaum erinnern muss, da sie auf den gesunden Menschenverstand hinauslaufen. Aber wenn Sie sich auf das Wesentliche konzentrieren, gibt es viele obskure Details, die nur wenige Designer wirklich verstehen.
