CSS Pivot Chris Coyier 于 2011年3月27日 DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费信用额度! CSS Pivot 允许您将自己的 CSS 应用于网站,然后共享结果(您将获得一个唯一的 URL,该 URL 会在顶部栏/iframe 中打开该网站)。 非常巧妙的功能。 如果您看到别人对网站进行的调整非常喜欢,并且希望使其保持不变,则可以使用 此 Chrome 扩展程序。 我将此发布为文章而不是链接,这样如果有人有任何很酷的示例可以分享,就可以进行评论。
这是一个很酷的想法。看看我对 CSS-Tricks 做了什么 :O
http://www.csspivot.com/kb6d9
还不错,但我不喜欢悬停时跳动的导航选项卡。(当然,那是 Chris 的,不是你的…… :) )
这是您 pivot 的另一个变体(添加金色背景):http://www.csspivot.com/832zT
非常感谢您的反馈和想法!
他们定义了 html 元素的背景。
…这是带有完全金色背景的版本
http://www.csspivot.com/l014f
一个明显的良好用途是帮助某人在 stackoverflow.com(或类似的地方)修复他们的 CSS;有时 jsfiddle.net 不够。
这类似于 Stylish;但您不需要任何 CSS 知识,对吧?
对于 CSS-Pivot,您需要了解 CSS。我不知道 Stylish 是如何工作的
您抢先一步了——我也想建议这个。
Stylish,对于那些不知道的人来说,是一个类似的附加组件,适用于 Firefox,它会将 CSS 添加到您指定的任何网站。它还拥有大量的预先存在的样式,并且您可以通过它共享这些样式。
Stylish 有 Firefox 版本吗?
Stylish 最初是为 Firefox 开发的。我认为它 _可能_ 也适用于 Chrome。
有人在打开网址时遇到问题,它只是将您重定向到网站而没有让您添加调整吗?
(例如:网址:http://frys.com -> 打开 CSS 输入文本字段,然后通过代理加载 frys.com?)
是的。Stackoverflow.com 不允许我更改任何内容。有人知道为什么吗?
他们很可能使用了一些 JS“框架破坏”。基本上……
if (top != self) {
top.location.href = self.document.location;
}
我们肯定正在努力解决这个问题——但不确定我们能否捕获所有框架破坏程序。
我不确定我是否会“处理它”——如果人们不希望他们的内容在框架中提供(或者在您的情况下,通过框架通过代理提供),我会尊重这一点。
正如 ~Josep 所说,这没有意义。在 http://userstyles.org 上有一个 Stylish 扩展程序,其中包含庞大的自定义样式表数据库。
我看到的唯一一个使用它的理由是快速向某人展示“实时”个性化外观,而无需尝试/安装在自己的浏览器中和/或查看附加的屏幕截图。
我认为这是一个非常重要的原因。: )
Stumbleupon 上是否使用了这个?真是太酷了!
这是一个很棒的想法
在我看来,最有用的情况是帮助人们调试 CSS 问题,然后将调整共享给他们。我认为它可能派上用场,所以我为它创建了一个书签:http://twofishcreative.com/michael/blog/2011/03/28/css-pivot-bookmarklet
哇,太棒了!从 csspivot.com 的页脚链接到您的帖子。
我认为 csspivot 的最大优势在于极其简单的共享——只需向某人发送一个简短的链接,他们就可以看到设计的实时版本。在许多情况下,可以替代发送图像。
仍然存在一些问题——某些页面无法正确加载或退出 iframe(例如 spiegel.de),以及一些字符编码问题。我们整个周末都在加班加点地工作,并将继续改进该应用程序。
感谢所有反馈——请继续提出!
我可能会使用 Stylebot 来修复 css-tricks.com 上可怕的字体。我之前抱怨过(在 Chrome 和 Firefox 中看起来很糟糕)。再见 myriad-pro-1…我希望我从未认识你。 :)
有趣的是——我正在使用 Chrome,它看起来完美无缺。
在 Windows XP 上使用 Chrome 和 Firefox 3.6 时,它看起来是这样的。请注意,我今天刚刚安装了 Firefox 4,并且在 Firefox 4 中它看起来并不差。
http://img23.imageshack.us/i/csstricks.png/
这绝对不是 Myriad 的错,我不确定是谁的错。我想我会说是 Typekit,因为它们是基于用户代理的,所以在字体看起来很糟糕(或未知)的平台上,它们不应该提供字体并让它回退。
啊,您似乎是正确的。这不是 Myriad 的错。我只是禁用了脚本,网站看起来不错。所以某些脚本使其看起来很糟糕。
您为什么认为它被称为 CSS“Pivot”呢?
很高兴看到越来越多的网站使用 html5 模板。更高兴看到他们保留了热粉色突出显示 :)
更明显的是,html5 模板的网站图标和 Apple 触控图标仍然存在。
不确定在这里使用模板是否有意义,因为该网站无论如何只能在现代浏览器中正确呈现。我看到的网站上唯一的 html5 是 和 标签。
话虽如此,但这确实很酷。我绝对可以看到自己使用它来向其他人展示我在 firebug 中拼凑出的内容。
很酷的网站!我喜欢这个想法……看看我对 Youtube 的修改!
http://www.csspivot.com/v9d5p
更浅的背景、搜索框的自定义轮廓颜色、蓝色徽标。
我的意思是更深的背景……另外我还有一个新的链接
http://www.csspivot.com/hcIHO
抱歉。; )
有足够的时间来捣鼓,这可能是新的 css Zen Garden。
这是我的:http://www.csspivot.com/R17CH
非常好 :)
我一直想这么做,现在可以了
http://www.csspivot.com/tUxGe
改进的推特首页
http://www.csspivot.com/rsYbo
我喜欢它更简洁一点。
真是个好主意……我认为这是CSS的新实现
我使用Firefox的css stylish插件。
http://www.csspivot.com/p950v
谷歌,使用font-face作为logo字体,使用谷歌网页字体,并对背景进行了一些更改,以及为logo和页脚的一些版权信息生成CSS内容:P
这是Chrome的固有功能。右键点击页面并“检查元素”,您可以更改任何元素上的任何HTML和CSS,并立即查看结果。
此服务的唯一优势在于它是可链接的。
科尔比
我喜欢这个想法,我认为这是测试现有网站创意的好方法。将其与Firebug的强大功能结合起来,您将获得非常强大的功能。现在,如果我知道如何使用stylish做同样的事情就好了。
看看我的两个修改
YouTube – http://www.csspivot.com/F6MUC
Facebook主页 – http://www.csspivot.com/s54sl
感谢Chris分享这个网站!:D