CSS Pivot ermöglicht es Ihnen, Ihr eigenes CSS auf einer Website anzuwenden und die Ergebnisse zu teilen (Sie erhalten eine eindeutige URL, die diese Website in einem Top-Bar/iframe-Deal öffnet). Ziemlich clevere Sache. Wenn Sie eine Änderung von jemand anderem gesehen haben, die Ihnen wirklich gefallen hat und Sie sie beibehalten wollten, könnten Sie diese Chrome-Erweiterung verwenden.
Ich poste das als Artikel und nicht als Link, damit wir eine Kommentar-Thread starten können, falls jemand coole Dinge zu teilen hat.
Das ist eine nette Idee. Schau dir an, was ich mit CSS-Tricks gemacht habe :O
http://www.csspivot.com/kb6d9
Nicht schlecht, außer dass ich die springenden Navigationsreiter beim Überfahren mit der Maus nicht mag. (Natürlich ist das Chris's und nicht deines.... :) )
Hier ist eine weitere Variante Ihres Pivots (mit einem goldenen Hintergrund): http://www.csspivot.com/832zT
Feedback und Ideen sind sehr willkommen!
Sie definieren den Hintergrund des html-Elements.
...hier ist es mit einem vollständigen goldenen Hintergrund
http://www.csspivot.com/l014f
Ein offensichtlich guter Anwendungsfall ist es, jemandem bei der Behebung seines CSS auf stackoverflow.com (oder ähnlichen Seiten) zu helfen; manchmal reicht jsfiddle.net nicht aus.
Das ist ähnlich wie Stylish; aber man braucht keine CSS-Kenntnisse, oder?
Für CSS-Pivot muss man CSS kennen. Ich weiß nicht, wie Stylish funktioniert
Du warst schneller als ich – ich wollte das auch vorschlagen.
Stylish ist für diejenigen, die es nicht wissen, ein ähnliches Add-on, das für Firefox funktioniert und zu jeder von Ihnen angegebenen Website CSS hinzufügt. Es hat auch eine große Basis von bereits vorhandenen Stilen, die Sie darüber teilen können.
Gibt es eine Firefox-Version von Stylish?
Stylish wurde ursprünglich für Firefox entwickelt. Ich denke, es ist auch für Chrome _verfügbar_, obwohl.
Hat jemand Probleme beim Öffnen einer URL, und sie leitet einen einfach auf die Website weiter, ohne dass man seine Änderungen hinzufügen kann?
(z.B. URL: http://frys.com -> öffnet CSS-Eingabetextfeld, lädt dann einfach frys.com über einen Proxy?)
Ja. Stackoverflow.com erlaubt mir nicht, irgendetwas zu ändern. Weiß jemand warum?
Sie verwenden höchstwahrscheinlich ein bisschen "Frame Busting" per JS. Im Wesentlichen...
if (top != self) {
top.location.href = self.document.location;
}
Wir arbeiten definitiv daran – ich bin mir nicht sicher, ob wir alle Framebuster abfangen können.
Ich wäre mir nicht sicher, ob ich überhaupt "daran arbeiten" würde – wenn Leute nicht wollen, dass ihre Inhalte in einem Frame (oder in Ihrem Fall über einen Proxy über einen Frame) angezeigt werden, würde ich das respektieren.
Wie ~Josep sagt, das ergibt keinen Sinn. Es gibt die Stylish-Erweiterung mit einer riesigen benutzerdefinierten Stylesheet-Datenbank unter http://userstyles.org.
Ich sehe nur einen Grund dafür: um jemandem schnell einen "lebendigen" personalisierten Look zu zeigen, ohne ihn im eigenen Browser auszuprobieren/zu installieren und/oder sich einen angehängten Screenshot anzusehen.
Ich denke, das ist ein ziemlich guter Grund. : )
Ist das das, was sie auf Stumbleupon verwenden..? Das sind tolle Sachen!
Das ist eine großartige Idee
Mir scheint, der nützlichste Fall ist, Leuten bei der Behebung von CSS-Problemen zu helfen und die Änderungen dann an sie zurückzugeben. Ich dachte, es könnte nützlich sein, also habe ich ein Bookmarklet dafür erstellt: http://twofishcreative.com/michael/blog/2011/03/28/css-pivot-bookmarklet
Wow, großartig! Ich habe deinen Beitrag vom Fuß der csspivot.com verlinkt.
Ich denke, der große Vorteil von csspivot ist die extrem einfache Weitergabe – sende jemandem einfach einen kurzen Link und er sieht eine Live-Version des Designs. Könnte in vielen Fällen den Versand von Bildern ersetzen.
Es gibt immer noch ein paar Probleme – manche Seiten werden nicht richtig geladen oder kommen aus dem iframe heraus (z. B. spiegel.de) und es gibt einige Probleme mit der Zeichenkodierung. Wir haben dieses ganze Wochenende fieberhaft gearbeitet und werden die App weiter verbessern.
Danke für all das Feedback – immer weiter so!
Ich werde vielleicht Stylebot verwenden, um die schreckliche Schriftart hier auf css-tricks.com zu korrigieren. Ich habe mich schon früher darüber beschwert (sieht in Chrome und Firefox schrecklich aus). Tschüss Myriad-Pro-1... Ich wünschte, ich hätte dich nie gekannt. :)
Interessant – ich benutze Chrome und es sieht perfekt aus.
So sieht es bei mir unter Windows XP mit Chrome und Firefox 3.6 aus. Beachten Sie, dass ich Firefox 4 heute gerade installiert habe und es in Firefox 4 NICHT schlecht aussieht.
http://img23.imageshack.us/i/csstricks.png/
Es ist definitiv nicht Myriads Schuld, ich bin mir nicht sicher, wessen Schuld es ist. Ich würde vielleicht Typekit sagen, weil sie User-Agent-basiert sind, so dass sie auf Plattformen, auf denen Schriftarten schlecht (oder unbekannt) aussehen, die Schriftart einfach nicht ausliefern und auf eine Rückfalloption zurückgreifen sollten.
Ah, du scheinst Recht zu haben. Es ist nicht Myriads Schuld. Ich habe gerade Skripting deaktiviert und die Seite sieht gut aus. Also macht irgendein Skript es schrecklich.
Warum denkst du, heißt es CSS 'Pivot'?
Es ist gut zu sehen, dass immer mehr Websites das HTML5 Boilerplate verwenden. Noch besser ist es zu sehen, dass sie die knallpinke Hervorhebung beibehalten :)
auffälliger sind noch das HTML5 Boilerplate Favicon und das Apple Touch Icon vorhanden.
Ich bin mir nicht sicher, ob die Verwendung des Boilerplates hier Sinn macht, da die Seite ohnehin nur in modernen Browsern korrekt gerendert wird. und das einzige HTML5, das ich auf der Seite sehe, sind die und Tags.
Abgesehen davon ist das ziemlich cool. Ich kann mir definitiv vorstellen, das zu verwenden, um anderen zu zeigen, was ich in Firebug zusammengebastelt habe.
Coole Seite! Mir gefällt die Idee dahinter... Schauen Sie sich meine überarbeitete Version von YouTube an!
http://www.csspivot.com/v9d5p
Hellere Hintergrundfarbe, individuelle Umrandungsfarbe für die Suchleiste, blaues Logo.
Ich meinte dunkleren Hintergrund... Außerdem habe ich einen neuen Link
http://www.csspivot.com/hcIHO
Mein Fehler. ; )
Mit genügend Zeit zum Herumbasteln könnte das der neue CSS Zen Garden sein.
Hier ist meine: http://www.csspivot.com/R17CH
Sehr nett :)
Ich wollte das schon ewig tun können, jetzt kann ich es
http://www.csspivot.com/tUxGe
Verfeinerte Twitter-Startseite
http://www.csspivot.com/rsYbo
Ich mag, dass es ein bisschen minimalistischer ist.
Was für eine tolle Idee... ich denke, es ist eine neue Idee, die für CSS umgesetzt wird
Ich benutze das CSS Stylish Plugin für Firefox.
http://www.csspivot.com/p950v
Google, mit font-face für das Logo, Verwendung von Schriftarten aus Google Web Fonts und einigen Änderungen am Hintergrund, sowie CSS-generiertem Inhalt für das Logo und einige Credits im Footer :P
Das ist eine inhärente Funktion in Chrome. Rechtsklick auf eine Seite und "Element untersuchen", und Sie können jeden HTML- und CSS-Code auf jedem Element ändern und die Ergebnisse sofort sehen.
Der einzige Vorteil dieses Dienstes ist, dass er verlinkbar ist.
Colby
Mir gefällt diese Idee und ich denke, es ist eine großartige Möglichkeit, Ideen auf bestehenden Websites zu testen. Kombinieren Sie es mit der Macht von Firebug und Sie haben etwas ziemlich Mächtiges. Jetzt müsste ich nur noch wissen, wie man Stylish benutzt, um dasselbe zu tun.
Schauen Sie sich meine beiden Anpassungen an
YouTube – http://www.csspivot.com/F6MUC
Facebook Homepage – http://www.csspivot.com/s54sl
Danke Chris für das Teilen dieser Seite! :D