感恩节期间我有一些额外的时间,所以决定花点时间对这个网站进行一些休闲设计。以下是一些快速笔记(我需要回到内容上了!)
- 色彩鲜艳!我认为大胆的色彩很有趣,并且可以提升这里的气氛。
- 字体是 Tandelle 和 Myriad Pro(我认为它非常适合作为正文和标题字体)。
- 这里有各种各样的 CSS 技巧——非常适合在这个网站上稍微过度使用一些。
- 代码高亮尽可能接近 TextMate 的 Twilight 主题,我使用的是 Prettify 代码高亮器。
- 该网站在 1200px 以上分辨率的显示器上效果最佳。即使是新的 11 英寸 MacBook Air 也有 1300 多个像素。但是,大约 6% 的网站访问者被困在 1024px 分辨率上,因此有一些媒体查询可以帮助解决这个问题。
总的来说,我非常喜欢它。我真的很感谢您报告任何特定浏览器中的布局问题,我相信那里有一些需要清理的地方。任何反馈都欢迎,让我们保持建设性。
嗨,Chris,
我非常喜欢更新后的设计:简约依然是王道!但我在主导航中发现了一个错误:我根本看不到任何文字。之前在旧设计中也遇到过这个问题。
我使用的是 Chrome 9 开发版和 Windows 7 Professional(64 位)。
来自德国的问候 :-P
Felix
我不确定那里发生了什么,抱歉。如你所知,这是一个开发版本,所以可能是一个错误。
Windows 7 上的 Chrome 9(9.0.597.0 开发版)也存在相同问题。
Windows 上 Chome 9.0.597.0 开发版在 1024×768(是的,很小!)上的问题截图。
这个“错误”似乎与较小的显示器有关。我刚刚将浏览器大小调整为 1024,主导航会根据此进行更改。
喜欢它的宽阔。我正在为我们公司的网站重新设计,并加入了类似的布局元素。空间太小似乎是一个问题,我正在发现我对自定义字体的欣赏。
我在 Chrome 开发版中也遇到过这个问题,之前的设计和 V8 都是。但在 Firefox 中看起来很棒。:D
编辑一下,使用最新的稳定版本(v8),您的网站看起来不错。;)
之前我在 Chrome 开发版中也遇到过同样的问题,但在最近的更新(9.0.597.10)后消失了。关于新设计:评论让我感到惊讶和印象深刻,css 过渡很酷,新的东西,我喜欢你处理它的方式,新的粗体颜色(我知道你经常使用这个词,所以……)很糟糕,尤其是这个 rgb(168, 0, 255)。还有一件事,感谢你激励我学习 wp,我终于知道如何重建我旧的但仍然在线的垃圾了;)
在 Safari 5 中,评论表单位于底部。它似乎不位于文章下方,而是在所有内容下方。
我认为设计还可以,但我建议去掉徽标和其他具有粗体阴影的元素上的描边/阴影。此外,您可以稍微降低一下颜色吗?
如果你能稍微拉伸一下浏览器窗口,我想你会看到评论重新出现。
我喜欢这些颜色。
嗯,我在使用 1280×800 的屏幕。我相信这是目前比较流行的分辨率之一,窗口已经拉伸得相当远(大约 1000 像素宽),我认为破坏如此广泛受众的功能将是一个错误的举动。此外,就像其他人所说的,所有东西看起来都太大了。
我认为颜色可以稍微柔和一些,不过你可能是在对比度较低的屏幕上查看的。
此外,文章标题不应该与“轮到你了”等字体相同吗?
在 1200px 时,设计处于其常规桌面浏览器设计状态。
我是一个新手,但我同意去掉徽标中的阴影。
在我看来,这是糟糕的设计,我使用垂直任务栏,这会弄乱事情,并将评论向下推,正如其他人所报告的那样。
我还在我的 24 英寸台式机屏幕上使用窗口而不是最大化,它在那个屏幕上也不够宽,尽管我可以为此网站拉伸窗口,但仅仅为了这个网站这样做并不好。
当我第一次看到重新设计时,我以为网站上没有任何评论。我向下滚动到文章底部,没有看到 x 条评论(因为你在文章顶部有那个,而我对此视而不见)。由于评论被推到侧边栏下方,所以看起来您完全禁用了评论。这会让用户感到困惑,不是一个好主意。
至于整体重新设计,在我看来,它比 v7 差,而 v7 比 v8 差。当然,你不可能让所有人都满意。
好吧,我非常喜欢它……而且评论也很棒!
加油,继续努力,Chris!
我爱网站的每一个细节。即使是阴影也很酷。Chris 的另一个很棒的设计。
太棒了!我非常喜欢!另外,请允许我感谢你所做的出色工作!我从这个网站中学到了很多东西!继续努力。
在我看来,此页面上的所有内容都太大了。
按 Command 减号键 =)
我不得不表示同意。就好像你在使用 120% 左右的缩放比例。
但我确实喜欢评论的设计。
此外,我认为将评论表单放在所有评论下方是有道理的,因为人们应该在添加新评论之前阅读评论,并且可以通过点击返回箭头图标来回复评论。
我实际上喜欢更大的东西。高分辨率显示器正变得越来越主流。在你的显示器上看起来很大的东西,在我的显示器上可能看起来刚刚好。
我也很喜欢这样。新设计简直太棒了!
我喜欢这个设计。它表明你有胆量。最初的一秒钟我感到震惊,但几秒钟后我就能欣赏它了。它实际上启发我在我正在进行的设计中添加了一些更亮的颜色。
即使我有一台屏幕分辨率为 1280x800px 的 MacBook,我也总是将浏览器的宽度保持在 ±1000px。所以
我忘记完成我的上一句话,因为我决定添加那段引用,并在完成评论之前点击了“提交”,所以这是剩下的部分:“所以在我看来,宽度有点不愉快。”
喜欢你在这次刷新中所做的所有小动画!
在我看来,标语的抗锯齿似乎被关闭了,我使用的是 Safari 5 和 Mac OS X 10.6.5,这是一个截图:http://cl.ly/3Tud
除此之外,重新设计很棒!
Chris,干得漂亮,我喜欢你处理细节的方式。
过渡和 css3 方面的出色工作。
嗨,Chris,很棒的设计。简洁且极简主义。但是,在 iPhone 的 Safari 浏览器中,设计无法正常工作。此致。
我在我的 iPhone 4 上测试过了。虽然不是绝对完美,但有一个基于媒体查询的特殊设计,目前应该可以正常使用。当我拿到旧款 iPhone 时,我也会在那里检查一下,也许问题出在那里。从“无法正常工作”很难判断具体问题 - 因此,如果您能截个屏或更好地描述一下问题,将非常有帮助。
它似乎在我的 iPad 上导致 Safari 崩溃。它是我打开的唯一标签页,并且多次崩溃。
不过我真的很喜欢新的设计。你的作品总是给我留下深刻印象。
嗨,Chris。我正在我的 iPhone 4 上测试网页。搜索表单后面有一个空隙,一直延伸到“最新屏幕录制”部分。
不错,很大且易读。我必须承认,这是我见过的最好的 CSS-tricks 设计。评论部分赏心悦目,而且你似乎比其他设计师更注重色彩对比度。
干得好,Chris!
我完全同意评论部分的说法。Chris,做得漂亮!我唯一注意到的是,如果评论很短,姓名/日期部分会稍微重叠。在一个很棒的评论部分布局中,这是一个小问题。
我完全不同意。完全不符合我的品味。一切都显得如此笨重,所有随机的鲜艳颜色都让我的眼睛感到不适。我看着它就真的头痛。字体在我的电脑上也不好用。标题难以阅读。
我希望能够“选择主题”,这将让我们回到以前任何版本。那会很有趣,而且用 WordPress 做起来很容易,不是吗?第 7 版是我最喜欢的。
在 Chrome 9 中,你的字体似乎没有嵌入:http://imgur.com/m2frg
为什么不在 Typekit 之前指定 Myriad Pro 作为后备字体 - 我已经安装了它,所以我不需要它通过 Typekit 加载!
奇怪的是,在我的 Chrome 9 开发版本(今天更新)中,字体可以正常工作!
此外,Firefox 4 中没有发生过渡 - 你是否指定了 -moz- 前缀?
FF 4.0 以下版本不支持过渡。
糟糕,你说你在看 4 :( 我的错……
我发现了一些没有正确添加前缀的,并修复了它们。但是请注意,某些过渡在某些浏览器中根本无法工作。例如,我认为 Opera 还没有实现背景位置过渡,而这些过渡在这里被大量使用。
真是太棒了。我喜欢你拥有(并且能够)使用所有 CSS 和 JS 增强的能力。
喜欢新的设计!
很棒的设计!全部都喜欢!
我爱它!
我刚刚在我的 Nexus One(Android 2.2)上查看了它,看起来也还不错。不过,我想知道你为什么将视口设置为 550。使用 device-width 不更好吗?(我不需要缩放就能阅读)。我是不是错过了什么?
这个新设计有很多值得欣赏的地方。评论表单和滑动的星号非常棒,评论很花哨但极易阅读。很棒的东西。我不知道你是如何如此迅速地完成它的。太神奇了。
最后一个设计持续时间不长!喜欢新的。徽标无法链接回首页。
应该已经修复了,谢谢!
伙计,这个设计是一个大胆的举动。我敬佩你敢于尝试。如果你喜欢它,那就足够了 :)
我认为设计还可以,但我最关心的是内容 :)
很棒的改版!:) 我一直期待这些,而这一次完全让我措手不及。你最近的一些设计看起来像是之前版本的变体,但这一次与它们中的任何一个都截然不同。
<3 它!
继续努力!
——来自多伦多的忠实粉丝。:)
网站焕然一新,我喜欢这些很棒的亮色,导航似乎比以前更容易了。
我意识到的一件事是,标题中的徽标对我来说不是链接,这不好,因为我倾向于使用徽标返回首页。
再次喜欢新的设计!
Shedh
这简直太棒了!
我喜欢你设计评论和回复的方式……我目不转睛地看个不停……太神奇了。
并非所有transition规则都有无前缀版本,这是故意的吗(例如,Opera 中的动画以某种方式损坏)?
并非所有transition规则都有无前缀版本……
有没有办法编辑/删除/预览评论?:)
我非常喜欢。颜色对我来说看起来不错。我唯一的问题是,在 Windows XP 上的 Chrome 中,你顶部的商标星号显示为大写“I”——背景和动画旋转的物体都是如此。也许这只是我系统上的字体问题——HTML5boilerplate.com 上的星星在这台电脑上的 Chrome 中也不起作用。
酷!更明亮更有趣。
喜欢评论区域。做得很好!
嗨,Chris,
我的主要浏览器是 Chrome,在我的工作笔记本电脑(Windows XP 机器)上,字体看起来相当像素化/小。我正在运行 Chrome 7.0.517.44
这是该截图的链接点击此处
还在同一台笔记本电脑上用 Firefox(Firefox 4.0b7)打开了它,徽标上的星号看起来像太空侵略者,而且不动。
这是该截图的链接点击此处
干杯,
Steve
刚刚注意到,如果评论很短,在 Chrome 中,头像、姓名和日期在左侧重叠。
你能检查一下你是否安装了 Courier 字体吗?星号是 Courier 字体,如果它不存在,那么它看起来很奇怪是有道理的。我听说过一些说法,它看起来像太空侵略者,不过我挺喜欢的 =)
日期/头像重叠问题应该已经修复了。
错误报告
Mac Safari 4.03 - 博客文章底部(紫色条下方)的两则广告位置错误,并且位于文本的顶部。此外,当页面大小调整时,它们会随机四处浮动。
现在可以正常工作了,看起来不错。
不知道你是否更改了某些设置,或者是我的设置问题。
嗨,Chris……
我非常喜欢重新设计的风格……我只是在右侧边栏的“我喜欢的服务”部分发现了一个问题……
当您将鼠标移出它们以使它们恢复到原始状态时,链接的字体会发生变化。这没什么大不了的,但它让我感到困扰。
希望这有帮助!
干杯。
这仅仅是个人的喜好,但我喜欢在首页上一眼就能看到每篇文章有多少条评论。有时我会多次返回文章以关注对话,因此当我在首页上立即看到数字时,这很有帮助。除此之外,我非常喜欢它!:)
在我之前的设计中,我甚至完全去掉了那个数字,因为我认为它不太相关。但是,其他人提出了他们喜欢检查帖子是否有更多活动的观点。所以为了折衷,这个数字显示在帖子页面本身。希望这对您有用。
您还可以(现在在这个新版本中)通过 RSS 订阅评论线程,这在以前并不是这里的一个选项!
我真正喜欢上一个版本的是,在首页上,有指向文章本身的链接,或者,您可以直接转到评论部分。如果这个功能能够回归,我会欣喜若狂。
耶!评论又回到了首页! :)
嘿,酷!
抱歉要重复评论.. 另一件事我刚刚注意到,例如在这个页面上。当评论很短并且是回复时,评论者的图片有时会与前一个评论者的日期和姓名重叠。即使我将文本大小减小到很小,或者将其放大到太大,也会发生这种情况。此外,您有评论者的姓名,然后是日期和单词 *AT*,但在 AT 后面没有时间..
哇,这很不错,而且颜色更丰富!我喜欢页脚,评论也很流畅。我也没有在 Chrome(Mac)上发现任何错误。
我建议您在将鼠标悬停在“提交评论”按钮上时将光标更改为手形。我认为这会让它更具触感,也更符合大多数访客的习惯。只是一个想法。
喜欢新的设计,更容易导航,也喜欢有趣的颜色。
我喜欢页面底部的注释。“* 本网站可能包含或可能不包含任何 CSS 或技巧。”在结束一个非常有信息量的网站时加入一点幽默。不错 :)
我喜欢所有的技巧,它在 IE8 中也降级得很好。在 IE7 中仍然可用,但开始变得有点混乱。总的来说,非常棒的作品!
评论部分是我见过的设计最好的之一。我个人喜欢所有的变化。我绝对更喜欢它而不是上次的重新设计,与之相比,上次的重新设计有点无聊。我认为你做得很好,伙计。
喜欢这个设计。我喜欢所有的颜色,现在很多网站似乎都害怕使用颜色……
一切看起来都很棒,并且通过微妙的 CSS 过渡,它赋予了网站很多个性,我真的很喜欢 css-tricks 的第 8 版!
嘿,新的外观很棒。
一件小事。
如果我将鼠标悬停在导航栏最左侧的小棕色区域上,所有选项都会稍微向左移动——也许这是故意的,但然后在“代码片段”选项区域上显示了两种绿色阴影。
仅供参考。不过,这项工作很棒。你是受到了 spacelog 网站的启发吗?spacelog.org?它有点让人想起那个——我想是在排版方面。
新鲜、简洁、大气、大胆、新颖、现代。只是一些形容重新设计的形容词。恭喜。
不错的网站!我从你这里学到了很多东西。我可以在哪里看到旧的设计。
我的天!今天早上我没想到会看到这个!我非常喜欢新的外观。
错误报告
Camino 2.06(Mac,最新版本)出现了一些问题
http://tinyurl.com/32xfegy
http://tinyurl.com/3xy8322
NetNewsWire 也看起来非常类似于上面的屏幕截图(除了帖子下方的两个广告漂浮在位置之外)。似乎字体获取方面存在一些问题。
这些字体真的很好。我在网络上见过的最清晰易读的字体之一。
是的,我不知道,似乎这两个浏览器都应该使用能够处理网络字体的渲染引擎,但显然不是?同样的问题也影响到我使用 Mac 版的新 Reeder 应用程序。可以肯定的是,它使用 WebKit 作为引擎,但为什么没有自定义字体?我不知道。
很棒的设计,Chris。我喜欢它的简洁性,评论区域也很棒。
导航有一些奇怪的地方。我的 Chrome 窗口可以轻松容纳 960px 宽的网站,但在这里,导航进入“移动/小屏幕分辨率”模式,并为每个链接变成 100% 的宽度。
我的天,这个重新设计太棒了。我喜欢侧边栏广告后面的背景图片。新设计的其他所有内容也都让人耳目一新。干得好。
嗨,大家好 ^^
我通常在<1024 px 宽度的屏幕上浏览(即使我的分辨率为 1280),一开始我对主导航感到震惊(在我看来太花哨了,但这只是我的个人品味),就像“侧边栏到哪里去了?!”。然后我想起了关于媒体查询的文章,并产生了放大浏览器的想法 ^^。这很不错,因为整个导航可以适合 1024 px 宽的浏览器。
我认为很多人仍然使用 1024px 宽的浏览器浏览。仅供参考 ^^
我必须补充一点,我真的很喜欢评论布局,它使嵌套评论非常易于阅读,并且标题中星星的动画也是一个不错的想法。
很棒的新设计。确实非常大胆。
我注意到的一件事是,当您调整评论框大小并覆盖右侧的文本时,“—THE MANAGEMENT—” 不会显示在下方,而是显示在顶部。
但总的来说,这是一个很棒的网站和设计。
嘿,Chris,我爱新外观!非常清爽,非常简洁易于导航。颜色非常鲜艳,我不明白为什么有些人认为应该降低颜色。干得好!
在 IE8 中查看后,我不得不说我认为我更喜欢评论的方形外观而不是圆形的 CSS3 版本。圆形看起来有点“幼稚”(缺乏更好的词语)并且有点过度使用。也许可以减小圆形的半径。我对于所有内容的整体规模也感到有点不知所措。仅供参考。你仍然很棒,Chris。 :)
我不知道……也许对我来说有点太简单了。另外导航字体?对我来说不起作用。我真的很喜欢评论部分的重力气泡。非常酷且有创意!但我爱你,Chris,这个网站很棒!!!只是在这里发表我的意见。
总的来说,我真的很喜欢新的设计!有很多视觉效果,并且字体选择得很好。它们都很好地工作,而不过于夸张。但是,我确实同意许多其他评论者的观点,即所有内容,尤其是正文,都太大了。如果您使文本更小,则可以缩小一些元素的大小,并将所有内容都放入 1024px 或 960px 宽的格式中。
Chris——我不得不说,一开始我有点震惊,然后我就像,“这太棒了”。
细节决定成败。广告框周围的透明阴影,天才。我从未想过要使用阴影,然后是空填充。然后,我必须知道……你是如何制作回形针的?这让我感到困惑?
我是粉丝,但我必须说,我不太喜欢这个新设计。我发现它对眼睛有点刺激,比上一个版本更刺激。我一直喜欢您网站的简洁理念,但这个对我来说有点过于多彩,也许只是我而已。
我想知道您在帖子中使用的语法高亮显示插件(如果有)。它是 WordPress 插件还是自定义编写的?
看起来不错,Chris!内容是网站最难的部分,至少对我来说是这样。
非常独特的设计,哦!你用 HTML5 实现它了!也喜欢评论部分..
评论表单和页脚确实是页面中最具创意的部分。
顶部导航有点卡顿,最后一项似乎换行了,悬停时会来回跳动 - chrome 8 mac
http://cl.ly/2o03113i1D2R311A1010
刚刚刷新了一下,似乎已经自动修复了……
看起来很棒!简洁实用。
我不知道这是不是故意的,但我正在输入的文本区域里的那个巨大的星号刚刚移出了文本区域。
1) 超级喜欢评论区,包括评论的显示和表单区域。
2) 非常喜欢新的亮色调。一直喜欢简洁明亮的页面。
3) 虽然不瞒你说……我可是你的老读者了,我一直看着你慢慢淡化了设计中的个人风格。我真的很怀念你在旧版页脚中加入的那些个人特色。比如班卓琴的照片等等。这些元素让网站更有温度,我一直很喜欢。你的个性总是在你的文章和屏幕录制中展现出来,将你自己融入设计中也总是相得益彰。
仅供参考。
我真希望今天早上有足够的时间告诉你我有多喜欢这个新设计!明亮的形状与柔和的中性背景的组合对我来说非常有效——它既易读又有趣。我同意之前的设计对你来说有点反常地单调。
我也欣赏文本的大尺寸。我一点也不觉得它“巨大”。我希望更多网站使用更大的文本。不,我的显示器并不很大——只是一个 1440×900 分辨率的 MacBook Pro。那些不喜欢它的人,请记住,你们的浏览器可以缩小。我相信 Firefox 甚至可以记住特定网站的缩放级别。设置好后就可以不用管了。
Chris,我不敢相信你如何能如此迅速地推出这些惊喜!你总是让我惊叹不已。
我喜欢这个新外观!大胆的色彩非常棒。干得漂亮。;)
漂亮,色彩鲜艳但简洁。一切都仿佛在正确的位置,有着恰当的设计。看起来焕然一新。
我只是想看看我的 Gravatar 在圆形里是什么样子……干得漂亮
看起来不错。
大胆而美丽。我特别喜欢你对评论回复缩进的思考。一个不错的方法。
Opera 中 CSS3 过渡不起作用。请使用 -o-transition 属性。它们的语法与那些以 -webkit- 为前缀的相同。
此外,如果评论只有一行,则其发布日期会被下一条评论的头像覆盖。
美丽的 Chris……简直令人惊叹。感谢你为此投入的所有时间和精力。我一定会查看一些源代码,看看你是如何做到的。
我喜欢新的设计!但我更喜欢 v7 中的导航和搜索字段。我认为这个版本中最好的东西是联系表单和顶部的那个小旋转 * :)
(只是我一个人还是 Wufoo 框在悬停时不显示徽标?)
我喜欢新的布局!它绝对不同于您在类似网站上看到的标准布局。亮色看起来很棒。我的唯一建议是将字体大小稍微减小一点。
耶!橙色回来了!(以及其他一些颜色)
我真的很喜欢新的布局。特别是您重新设计的评论部分。它就像我从未见过的。
Chris,在最新的正式版 Firefox 中,从评论向上滚动到主要内容会导致页面无法使用。
是的,顶部在 Firefox 中似乎有点问题。
不过在其他浏览器中看起来不错!
我在 Firefox 中也遇到了一些问题。在工作和家里都遇到了,所以可能不是个别情况。
渲染似乎正常,但在切换到一个新标签页然后返回包含 css-tricks.com 的标签页后,页面顶部的渲染就会出现问题,出现严重的重影(截图:http://i22.photobucket.com/albums/b337/qwertycarl/css-tricks-rendering.jpg)
发生这种情况时,网站顶部将无法使用。奇怪的是,网站底部一切正常。我在同一台电脑上的 Chrome 中没有遇到此问题。尚未测试其他浏览器。
两个版本的 Firefox 都是 3.6.12,一台电脑运行 Windows 7,另一台运行 Windows XP。
我喜欢这个设计,Chris,Command + Minus = 太棒了!
你的网站帮助了我很多,谢谢,继续努力!
嗯,
这里有一两分钱……
对于主导航……
也许加载——咳咳——Haettenschweiler 代替那个衬线字体
Tandelle 全大写有点古怪的上上下下的感觉。使用 League Gothic 代替?
它绝对独一无二!说实话,第一眼看到时我就像哇,把旧设计带回来吧,但它会慢慢让你接受。
我认为使用亮色非常大胆,而且效果也很好。哦,还有评论列表看起来很棒。
在 Chrome 和 Firefox 中,一些评论照片和日期似乎相互重叠。
Chris,
喜欢新外观,它简洁、现代,字体选择也完美契合。颜色对我来说有点太饱和了,但我仍然认为它符合你的设计主题。
如果非要挑剔并选择我不喜欢的东西,那就是动画菜单项。动画似乎只是为了存在而存在,我没有看到它有任何可用性功能。
干得漂亮,恭喜!
TonyP
我注意到在主页上,文章的评论数量没有被保留。只是好奇为什么。我总是喜欢查看评论数量,看看文章的讨论有多活跃。
我遇到了一些问题(事实上除了菜单什么也没看到)在 Firefox 中查看网站。(win7 ff 3.612)
而 Chrome 中一切正常。
现在没问题了,渲染等等都正常了
总体来说很棒,但正如其他人提到的,我不确定宽度……
我的笔记本电脑的桌面分辨率是 1280px,但我一直打开一个 Google Gadget 侧边栏,它占据了大约 150px,现在我在你的网站上出现了水平滚动条。也许可以使布局更灵活一些?
还有小细节,但我觉得很有讽刺意味,因为我记得在这里学到了这两点……文本选择颜色是默认的(我认为不同的颜色是一个很棒的 CSS 技巧),而且我非常喜欢的 a:active 上的 1px 凸起在任何地方都没有出现。
总的来说,Chris,这是一个很棒的设计。
很棒的设计!我喜欢你对网站所做的改进!颜色搭配得非常好。评论部分无可挑剔。字体使用得当。这个设计没有可访问性问题。干得漂亮!
我**非常**喜欢你的页脚;)
……
现在,我意识到这可能会被误解,但我猜/希望你知道我的意思;)
我喜欢评论部分……看起来很漂亮!
我是一个习惯性的人,所以至少可以说我不太喜欢完全重新设计,因为它会影响我对网站的用户记忆。导航中的极端对比让我有点不知所措,而网站的其余部分对比度却非常低。总的来说,我个人更喜欢之前的设计。但是,我阅读你的网站是因为你是大佬——所以你想怎么做就怎么做吧,我无论如何都会回来的 :)
我的天哪……这个设计太漂亮了
我爱你,亲爱的 Chris……<3
有没有其他人也遇到在该网站上尝试调整浏览器窗口大小时出现严重延迟(以及元素变形)的情况?我已经测试过是不是 Safari 浏览器本身的问题,但其他标签页中的网站可以流畅地调整大小。
我使用的是 MacBook Air 13,配备 2.13GHz 处理器和 4GB 内存,Safari 5.0.3 版本。
后续:看起来 Safari 在新设计中出现了严重的重绘问题(导致活动监视器中资源使用出现巨大峰值)。记录的处理器使用率超过 117%(出现沙漏),内存使用率超过 1GB。我检查了其他页面,在调整大小时的平均使用率为 40%,页面调整大小时内存使用率为 500MB。
我在 Safari 中滚动时也遇到了严重的延迟。即使是最新版本的 WebKit nightly 版本也是如此。我滚动的越往下,延迟就越严重。当我滚动到这个评论的时候,它已经完全无法使用了(每次操作都会延迟 2-3 秒)。
这似乎与 GPU 相关,因为当我强制我的 Macbook Pro 使用独立显卡时,情况有所改善。
嘿,Dale,
在看到你的评论后,我再次检查了一下……也看到了同样的情况……我滚动的越往下,延迟就越严重……
不太确定是什么导致了这个问题……这里没有任何东西应该让 256MB 的显卡工作。
对 JavaScript 效率做了一些修改,看看是否能有所帮助。我目前还无法在我的环境中重现任何明显的延迟。
即使只是尝试在 Safari 中输入这个评论也会导致速度下降到无法跟上我的打字速度的地步,相信我,我并不是打字很快的人。这种行为似乎主要限于 WebKit,因为 Firefox 和 Opera 在显示此网站时遇到麻烦要少得多。它们仍然比较吃力,但没有什么异常。另一方面,Chrome 和特别是 Safari 似乎很难处理它。
无论是什么原因,当用户不得不打开一个外部文本编辑器才能输入评论时,肯定哪里出了问题。;-)
嗨,Chris,
感觉这可能与您用于确定容器高度的脚本有关。当我向下滚动页面时,背景容器在视觉上似乎一直在尝试重新计算其高度(并将其扩展)以适应内容。这可能会解决延迟问题,或者至少是一个起点。
评论框也出现了延迟……我也遇到了这种情况,虽然还没有到完全卡死的地步,但也比较明显。
滚动问题现在似乎已经解决了;即使是在较弱的集成显卡上,一切也都能流畅运行,并且不会占用过多的内存。(但前提是浏览器窗口宽度大于 1200px;否则仍然非常缓慢)
在包含长评论线程的页面上,窗口调整大小仍然相当延迟,但我认为这不是什么大问题,因为大多数人不会不断调整浏览器窗口大小。
这是到目前为止 css-tricks 最好的设计版本,干得漂亮
喜欢新的设计,尤其是评论和评论表单!CSS 过渡的运用也很好。
只有两点
1. 如果评论太小,下一个作者的头像会与上一条评论的日期重叠。(Mac OSX 版 Chrome)
2. 我喜欢大多数地方的亮色,但我认为上一篇文章的亮紫色框太分散注意力,让人无法关注实际文章。
干杯
更正:“I the love” -> “I love”
我也在 iPhone 4 上试了一下。在首页上,一篇文章中的代码示例框会将侧边栏推开。屏幕截图:http://cl.ly/3Trb
感谢您邀请大家对您的网站调整提供反馈,有些人把这当成了邀请他们来扮演艺术总监的机会,这总是很有趣的。
无论如何,赞一个——我喜欢这些设计更改。
很酷,而且我理解想要更改自己网站的愿望,但可能不是一个好主意这么频繁地更改。V7 不是大约在 9 月份推出的吗?
喜欢它——评论看起来很棒,页脚中关于您其他作品的区域现在也很完美。很棒的东西!
顺便说一句,我注意到一些评论出现了一个小问题——当我点击查看隐藏的评论时发生的——http://d.pr/LNFz——FF4/OSX
这是一个不错的设计,但你需要完善很多地方。首先,徽标非常像素化,我相信使用纯文本而不是图像会得到更好的结果;使用 :before 和 :after 伪类添加“CSS”和星号,并通过在 CSS 中使用唯一的页面标识符来更改颜色。
告诉用户手动调整他们的浏览器以便他们能够正确查看您的设计是什么意思?你是一位专业的设计师,让你的设计能够正确显示是你的工作。我想你不会在构建的每个网站中都为客户提供一份说明手册吧。你觉得你应该这样做吗?
我知道我听起来有点尖酸刻薄,这不是我的本意,但作为一名专业设计师,你真的应该更加注意细节。绝对不要指示看到你设计中错误的用户自己手动调整所有东西。尤其是设计似乎依赖的字体大小或屏幕尺寸之类的东西。
糟糕。刚刚注意到徽标实际上是纯文本。那就忽略我之前说的吧=P
正如 Chris 在上面所说,大多数人使用 1200px 的设计来查看网站。他还创建了多个媒体样式表,根据视口的大小调整设计。
而那些声称字体大小太大的“设计师”可以自己手动调整它。16px 的字体并不“太大”,只是使用 10px 的文本已经过时了,为了网络的健康发展,需要对其进行纠正。
说 Chris Coyier 没有注意细节?你疯了吧。
说得对。
新设计……新实验……:) 希望它是受 Wufoo 启发的 :)
<3你的网站 :)
确实可以看出我的一些新的 Wufoo 风格,不是吗?
当您开始在评论部分输入时,星号会消失。问题是,当我删除所有输入的文本并停止聚焦于输入评论的文本框时,星号不会恢复。这可能是由于疏忽而被忽略的问题,因为网站的其余部分看起来非常简单易用。
此外,当您(Chris Coyier)在按钮上使用 border-radius 时,背景会有点溢出。
还有一件事,您可能需要将文本框(输入评论的地方)的调整大小限制为垂直方向,因为在 WebKit 浏览器中垂直调整大小会破坏设计。您可能需要对 WebKit 浏览器(以及其他可能支持它的浏览器)使用 resize: horizontal; 来解决此问题。
除了上面提到的这些之外,该网站真的很有趣,而且使用起来很直观。我喜欢它。
我非常非常喜欢评论的设计!非常清爽。在全球网站/设计领域,感觉新颖而独特。
我也对正文字体感到惊喜。我认为它效果很好。它非常易读,感觉独特,但也符合您的网站风格和整体声音。
喜欢评论部分,Chris,但导航不适合我。
我发现动画很突兀。它们完全没有必要,而且会降低可用性。
我还希望看到页脚网格元素始终保持高亮显示。与现在相比,我更有可能注意到它们并采取行动。
我们会看看导航会发生什么……似乎这是一个普遍的槽点。我不在乎“不必要”的东西,这个网站上有大量的东西都属于这个类别,但它们是有趣的 CSS 技巧,而这是展示它们的完美场所。你也可以争辩说它们提高了可用性,因为当您将鼠标移到链接目标上时,它的大小会增加,从而带来更舒适的点击体验。我不是在争论这一点,我只是说它可以被争论=)
导航动画感觉非常过时……不是讨厌它们,但感觉非常像早期的js手风琴脚本。我认为如果它们不是纯色背景会更好。
关于页脚:也许让它们默认为中间状态(比如,淡出),并在另一个进入焦点时将非活动状态淡化为灰色?
作为用户体验总监,我很乐意和你讨论这个话题;)
不过我接受你的理由,Chris。如果曾经有一个合适的场所来实现这样的功能,那就是这个网站。
用Facebook的话来说:喜欢!
酷……对我来说有点大,但我可以用[ctrl]+[–]来修复它:)
图像旋转在Fx(回形针)中很卡顿,尽管经过一些研究,我猜这是FireFox的错误。在其他(好的)浏览器中看起来不错。
是的,我只是不知道这个设计。我不认为我能够加入其他人的行列。在我看来,页脚是该设计中唯一真正酷的部分。
喜欢这个网站,我怀念v7。
不错,Chris,又一次更新了许多新功能。
顺便说一句,我喜欢评论表单和页脚动画。
感谢你总是给我们带来更多灵感。
我喜欢这个设计!只是想说一下,你的星号在没有安装Courier字体的Windows上看起来一点也不好。大多数Windows电脑(我认为)只有Courier New,现在它显示得锯齿状。
我在论坛上提过,我认为在这里也值得一提。旋转的三角形隐藏了每个“文章”的左上角,它没有足够“向上”覆盖所有白色区域(Win7,Chrome 7)。
使用检查工具并将顶部值更改为“top: -11px”可以解决问题。也许只是Chrome渲染和向上/向下舍入值的方式?
还有其他人能看到这个问题吗?
越来越喜欢这个网站。向打破常规“向最低公分母努力”规则的人致敬。这可能存在争议,但如果我们都向前迈进,那些落后的人只会错过——他们仍然可以看到内容!!
“看起来很粗犷”=‘有点可爱,有点像辛普森一家’
我可能是少数派(至少在评论中),但我更喜欢你上次设计的风格(和智慧)。
我理解当bug出现时想要“用花哨的新代码重做”的感觉——只是之前的版本布局更好,更专业。
(你确实问了)
干得好,Chris,这绝对是我最喜欢的网站版本。
我只是会稍微修改一下logo,并将背景颜色调暗一些,这是唯一两个困扰我的地方,因为设计的其余部分都非常出色。
干得好,Chris,非常丰富多彩且独特的布局。
抱歉,但在我的设置(XP)上,我发现这个设计很糟糕。
Ff3.6的字体大小到处都是。好吧,这是一个旧的浏览器,所以试试现代的……
Chrome、Safari和Opera(所有最新版本)的字体渲染非常块状,难以阅读。我可以在浏览器中禁用此字体吗?
导航和延迟时间不是很好。
不得不说,我更喜欢之前两种设计,但我想没有改变就没有改进。
Chris,我喜欢你新设计的某些方面,特别是页脚链接和“轮到你”表单。虽然不确定是否有人在他们的Droid手机上访问此网站,但页脚链接仅为灰色,因为没有悬停功能,我不知道是否有iPod/iPhone可以测试。
但我最喜欢v7的一件事是能够将鼠标悬停在新的帖子预览上的————*————上,并在点击之前查看帖子的活跃度。
喜欢你的实验!
Chris,
评论表单有点卡顿……需要一点时间才能开始输入,不知道是否已经有人提过了。
别忘了你的超级选择器,它又变成了蓝色!!!
你应该为每个版本的网站创建一个子域名。
这样我就可以回滚到“version7.css-tricks.com”
Federico喜欢这个。
BAM
这个设计存在一个非常基本的CSS问题:字体栈(或缺乏字体栈)。你应该加深你的字体栈,因为当我用NetNewsWire查看时,你指定的字体由于某种原因没有加载。让我告诉你,当所有内容都以默认衬线字体(Times New Roman)渲染时,所有这些努力看起来都很丑陋。
我实际上非常喜欢你选择显示评论流的方式。它看起来不错,而且易于理解。
讨厌菜单上的悬停效果,带有移动的文字和增长的li……
我认为它们非常漂亮!!也喜欢菜单上颜色的使用。
啊!!评论区简直太他妈的棒了!!!你让我在几乎完成我的网站设计时重新思考了一下……:D
很棒的设计,我正在使用Chrome 9,一切都很棒……完全没有问题。
很棒的工作,Chris!
绝对喜欢设计的简洁性和清晰度,加上所有CSS3和HTML5的优点……哦,这足以让任何设计师和开发者爱上你1000次以上:P
不,但说真的,我觉得这个设计是CSS Tricks设计的顶峰。
继续努力!
你好!
喜欢新的布局,很棒!
但是..
FireFox 3.6.1.2。(以及新的测试版)使得字体阅读起来不太舒服。
例如,请查看图片:@ http://www.crazylady.eu/Chrome-Firefox.png
IE/Chrome似乎没有这些问题,
有人有想法吗?
问候 Harry
我发现新设计清新、大胆且原创。我花了几分钟才习惯,但我喜欢它,尤其是评论部分。
我不喜欢的是所有动画。我知道这是一个应用它们的良好场所,但我认为它们只会损害可用性,而不是增强它。当然,可以进行实验。
Wufoo来电了……他们说他们想要他们的颜色回来。
只是在开玩笑!!我真的很喜欢这个网站和颜色。出色的工作!
哈哈..说得对!这个新版本的灵感完全来自那里!
我喜欢这些颜色,但我正在办公室,IE7是他们的选择。
因此,帖子的图片没有显示出来,它将网站的那一部分推到了梦幻国度。
在FF4中看起来非常棒,Chris,
像这样的重新设计需要你多长时间?我最近花了很长时间试图让我的博客看起来像样,但与这个相比,它仍然看起来像一堆垃圾!!
喜欢这些小细节。
Phil
从时间上来说,我想总共大约3天,但从时间上来说,可能分散在9天里。最好让工作时间短一些,然后再回顾这些想法。对我来说,迭代次数越多越好。
从Photoshop中的基本想法开始,转到静态HTML/CSS,完善并迭代一段时间,将想法扩展到其他页面并查看其效果,再次迭代。然后转到WordPress主题。然后过早地启动它,并在几天内修复大量错误。这通常是我的流程=)
克里斯,设计非常棒!目前我唯一能看到的问题是,我当前的浏览器(Windows 上的 Google Chrome 9.0.597.0 开发版本)无法加载主导航栏中的字体。可能是因为这是开发版本,但我还是想提出来。再次强调,设计很棒,易用性也很好。
你好,专业人士!
喜欢你的设计
可爱!页脚真是太棒了。主导航有点烦人(悬停时大小调整),但这只是我个人的意见。
当我将缩放比例调整到 110% 时,出现了一些随机图标,包括 Lynda.com 和 WP 的徽标。在文章的左侧。还有一些其他图标,包括 RSS 图标。看起来像是那些在悬停状态之前处于屏幕外的滑动图标。
还有一些 Gravatar 重叠到评论区域(即白色评论区域)。尤其是在嵌套线程中。
除此之外,以及导航根据缩放级别显示在两行或更多行上的随机问题,以及投票按钮堆叠在一起(并且实际上是相互接触),我认为设计相当不错。非常独特和大胆。
浏览器:Chrome | OSX [雪豹] | 1280×800 分辨率 - MacBook Pro
我欣赏你的尝试,但抱歉,克里斯,它太大了。
我看到两个主要问题:1) 加载字体导致页面整体加载速度非常慢……我这边花了大约 8 秒钟,而且我的网络连接速度很快,并且似乎没有被缓存。2) 我认为其他人也提到了这一点,但在 Safari 中,页面有时会无响应,我甚至可以在输入此评论时感觉到延迟……
我刚刚查看了你的一篇旧文章。当代码超出评论的宽度时,代码会溢出。
克里斯,你做得很好!
我想知道这个版本是否是因为你(像我一样)正在变老,并且更喜欢阅读稍微大一点的文字……我喜欢不必使用 CMD+ 来查看任何文字的事实:D
一个小建议……鉴于文字更大,并且你添加了很多空白,我认为在页面底部添加一个“页面向上”链接可能是个好主意……我知道它们有点过时了,但是……你不会希望我因为鼠标滚轮而患上腕管综合症吧?
Chris,
我在查看导航菜单的全部内容时遇到困难。Windows 7 Pro 64 位,使用 Firefox 3.6.12。
希望你有机会修复它:D
你可能已经注意到了,但我发现导航文本的高度不太舒服。特别是“论坛”,还有“首页”、“视频”和“代码片段”,文字的高度在单词中会发生变化,并且会使文字本身产生一种令人不悦的波浪效果,至少在我看来是这样的。
伙计,太棒了!我喜欢新的评论布局,非常有进步性。我看到很多评论提到了宽度——你在重新设计之前是否进行过很多分析来查看流行的分辨率?(我刚刚重新设计了一个 940 像素宽度的网站,我感觉有点局促,但它是根据访客统计数据确定的。)
我喜欢新的设计。评论部分很棒,我不确定我对 1200px 的大小有什么感觉。
我从来都不是 v7 的粉丝,发现自己访问该网站的频率越来越低。
希望你能再次包含班卓琴的照片!
我在 PC 上使用 FireFox 3.6.12,在联系页面上,绿色代码片段菜单换行显示。(菜单)
我只是想进来表示,这绝对是你迄今为止最好的设计。所有其他设计都感觉有点花哨(纸/软木板纹理与 CSS 有什么关系?)。
此设计比上一个版本更生动,但保留了你拥有的那种简洁性。一切感觉都很好地融合在一起,并且功能齐全。真的很喜欢你实现的一些细微的 jQuery 效果。
希望你能坚持使用一段时间,因为它很棒。
继续努力。
嘿,克里斯,为你的设计更新点赞。颜色和微妙的动画(以及贯穿始终的 Wu-Fluence)是一个不错的点缀。就个人而言,我出于某种原因更喜欢之前的设计,但也许只是需要一个适应过程。
无论如何,我有一些小的注意事项,以防其他人没有提到这些
i. Webkit 和 Firefox 在渲染小帖子角方面存在细微但明显的差异。这不是什么大问题,但很有趣。证明如下:https://skitch.com/jfreehill/rn98a/css-tricks-corner
ii. 能够看到你的(橙色)或有用的(蓝色,或任何其他颜色)评论中的颜色差异会很好。也许这次你可以将它们限制为仅在名称周围的圆圈或边框颜色上使用不同的颜色。
iii. 评论中文字下方的大间距是为了提高可读性吗?它似乎增加了页面的高度,但也许我只是吹毛求疵。
iiii.(最后一个保证)。新的媒体查询非常棒,在任何 Android 浏览器上都能很好地工作,但我还在 Safari 中遇到了调整大小时的性能问题,所以值得研究一下。
拥有你自己的免费 UI 测试人员大军一定很不错吧?呵呵。
嘿,克里斯,尝试不错。
我真的很喜欢帖子右上角的元数据和评论。
但是顶部导航菜单的动画看起来很奇怪,尝试使用一些不常见的动画。
:)
切换到其他网站然后返回此网站的选项卡时会出现问题。此外,我无法滚动回顶部导航。
说真的,你改得太频繁了。
克里斯,我来自印度。在火狐浏览器中,由于 CSS 过多以及这里的带宽较慢,处理需要花费太长时间。因此浏览器实际上会挂起。我甚至尝试了其他网站,但这些网站并没有导致浏览器变慢。
嗨,克里斯,
设计 v8……在上次更新后,我以为它只会变得更好,但实际上它变得更糟了。太糟糕了!玩具反斗城的颜色,难看的字体使用等等。
鞋匠应该专注于自己的工作……做代码,而不是设计。
此致,stephen
新设计很正规!喜欢大胆的颜色。
我非常喜欢你在评论部分所做的设计(设计方面),底部的按钮以及链接的样式。我对顶部菜单不太喜欢。
我喜欢你在右侧广告方面所做的尝试,但那里有一些东西让我感到困扰,但我不确定具体是什么。
总的来说,这是一个不错且令人耳目一新的设计,我只是认为顶部菜单有点毁了它。
非常鲜艳干净的设计。与之前的设计相比,对比度更好,在我看来更容易阅读。
总的来说,这是一个很棒的网站,感谢你的辛勤工作!
评论看起来真的很棒!我认为,这是我见过的最好的设计之一。
我喜欢新的选项卡,并且同意大胆的颜色使内容更加生动。
我好像昨天评论过。我最喜欢的缺失功能是,在 v7 中,你可以在点击帖子之前看到评论数量。当你在预览底部悬停时,它有一个很酷的悬停效果,对于兼容的浏览器,它只显示评论数量和“继续阅读!”链接,对于不兼容的浏览器则只显示评论数量和“继续阅读!”链接。
新部分我最喜欢的部分是“轮到你了”。
我对底部完全灰显(除非悬停在容器上)有混合的感觉,因为如果你使用触摸屏,则无法检测到悬停。
有计划修复 IE7 的显示问题吗???
根本看不到任何帖子,首先是关于视频播客的文章,我是 IE 用户,通常使用 IE7 浏览这里,我的电脑无法加载 IE8,而且我不愿意这样做,运行 XP,所以无法升级到 IE9
另外,请务必保留到档案的链接
Al
不是要冒犯你,或者任何东西……但是你怎么能访问像这样的网站,并且仍然想使用 IE 呢?
我认为重新设计看起来很棒。我的分辨率为 1920X1200,我将其降低到 1200X800 以查看效果,它仍然很好。
我真的不认识任何使用低于 1200x- 的屏幕的人。如果你仍然使用低于该分辨率的屏幕,请将其视为升级的理由。现在是 2010 年了。
我在 iPhone 4 上注意到一个问题,就是主页上,导航栏下方的 Google 搜索栏下面什么都没有,只是一片空白。可能是故意的吗?
是的……我的老教授和同事总是说:“为 800×600 设计。” 我觉得他们有点疯了!
还有谁还在为 800×600 分辨率设计吗?太疯狂了……有一个网站(我得找找)会告诉你使用某些屏幕分辨率的人的百分比。800×600 在一段时间前就已经过时了。我不认识多少人还在为 800×600 设计。
我喜欢你处理评论和底部框的方式。不过,“转角”风格现在有点过时了。另外,我不喜欢链接移动,就像主导航栏中的链接一样。
除了标题中使用的颜色外,该网站仍然感觉像是进化而不是全新的东西,我相信这符合你对这类事情的理念,所以干得不错。
我喜欢这个设计,但我讨厌这个字体。它不清晰,看起来有点“像素化”。
很难阅读。
看起来像是用墨水量低的打印机打印出来的。
嗨,Chris,
很棒的新外观;我认为该网站有一种新鲜感。此外,我真的很喜欢网站底部的社交应用/广告框——这些功能的悬停效果很棒! :)
谢谢,
Rob
@DAVID 我同意,我不知道为什么任何定期阅读此网站的人会在 IE7 上浏览它而不是 Safari、Firefox 或 Chrome 甚至 Opera。我认为这个网站在我的 Droid 手机上看起来不太好,但实际上,这是一个你可以玩代码片段的网站,谁会在手机上写代码呢……
它简直太棒了。喜欢你的作品,伙计!
哇,这真是一个具有里程碑意义的主题!针对不同浏览器大小的 CSS 非常前沿!我正准备调整帖子元数据 div 的大小以使其与一些边距一起浮动到右边,然后我调整大小以截取屏幕截图,它就弹到了右边并带了一个回形针……太棒了。
菜单不错,但页脚太疯狂了!!另外,预计会有大量的评论,因为这是我见过的最好看、最性感的评论表单!
不过有一点,请在提交按钮上设置 cursor:pointer!
做得好,真的很喜欢新的设计
一开始我对新设计有点惊讶,但现在我觉得这是迄今为止最好的设计!继续努力!
哇!!太令人耳目一新了。漂亮的网格、排版和酷炫的广告横幅和头像!!
我认为它很棒!克里斯,干得好……
我对这个设计有点犹豫。它肯定有一些不错的功能,尽管有时它让我想起了那些早期的 Flash 网站,它们会做所有那些花哨的效果,_仅仅因为_它们可以。
我也不喜欢主页上“在屏幕外”的内容有多少。我定期访问该网站,通常不会浏览到最新的文章之外,不过如果我更了解更新的屏幕截图等内容,我可能会在这些区域花费更多时间。
我承认,我对上一个设计也有些不确定,但随着时间的推移,我开始喜欢它了。我相信这个也会一样。
我可以理解不喜欢“仅仅因为而存在的那些花哨效果”的心情,但这个网站专门是一个我认为过度使用这些效果是可以的网站,这与它的名字相符。
这是一篇很好的文章,批判了“屏幕折叠”的概念 http://iampaddy.com/lifebelow600/
不喜欢你的新设计。我通常很喜欢你的作品,但这个我一点也不喜欢。看起来像一些儿童网站。
在我看来,上一个版本要好得多。
抱歉……
Ps
不过我喜欢圆形的头像图标
太棒了。我完全赞同。
一直在玩底部的悬停框,这些很酷。
超级设计,克里斯
克里斯!
我爱它!……持续的变化是生命的证据!……
感谢您提供的优秀资源!您已经多次拯救了我的生命!
Daniel。
我至少震惊了三次。
1. 什么鬼?
2. 为什么有这么多积极的反馈?
3. 如果它真的那么好,我是否应该继续做设计师?
抱歉,克里斯,我很欣赏你的作品,但这真的不合我的口味。我喜欢新外观的一些部分,但总的来说我不喜欢。值得庆幸的是,博客内容仍然很棒!
这里没有建设性的东西,我觉得它过于粗鲁了。
嗨,Chris,
这里有很多值得喜欢的地方,我绝对尊重你的设计胆识。当我在我的 27 英寸 iMac 上时,它看起来很棒,我可以使用它。但是,当我在大约 1200 像素宽的显示器上(比如我的笔记本电脑)时,你真的没有为我们这些在类似 OSX 的环境中工作的人留下任何回旋余地,我们并不总是将浏览器窗口扩展到最大。对于除非常大的屏幕之外的所有屏幕,一切都显得有点太大。无论如何,这是我的看法。
除此之外,我非常喜欢评论的布局,是我见过的最好的,任何地方都是如此。鲜艳的色彩和动画不是我的菜,但它们非常适合一个基于 CSS 的网站,而且颜色使它有别于所有其他看起来很无聊的基于网页设计的网站。
-Shane
不确定你是否知道,克里斯,但该网站在 FF3.6.12 中乱七八糟。
在 Google Chrome 中无法正常工作。
仅在新版 Beta 版中启用了 GPU 加速时。
抱歉重复发送了 :)
又重新设计了?哇,我以为我已经重新设计了很多次了。不过看起来不错!喜欢它的简洁外观。
克里斯,绝对出色的重新设计。我非常喜欢。唉,我希望我有更多时间来学习你的技巧和所有工作。很棒的知识来源。
这就是我所说的最适合网站名称的设计。使用了大量的 CSS 技巧。太棒了,克里斯!
你是网页设计的宗师
就像之前所说的,你尝试大胆和非传统的东西真是太棒了。我很少使用 Safari/Chrome,但动画很有趣。
与上一个设计相比,我真的很喜欢这个设计——做得很好。我觉得之前的那个设计有点牵强。
我知道这有点过界了,我事先对论坛的干扰表示歉意,但我认为这是一个非常好的机会。
应该有一种好的方法来测试网站,跨越最相关的操作系统和浏览器。
我知道这很难(可能很愚蠢)试图在一台电脑/服务器上测试它,但这可以节省我们很多时间。谢谢。
好吧……遗憾地说,克里斯,但我现在不喜欢这个网站的样子。我很难找到合适的词——但首先想到的是——它太像棒棒糖了。可能使用了太多不同的颜色。
但无论设计如何——我都会一直访问你的博客,不是为了设计,而是为了从你的帖子中学到很棒的知识。
此致。
Martin。
嗨,Chris,
我不知道这是否是提及此问题的地方,但每次我访问您的网站时,它都会出现奇怪的滚动问题,最终导致 Firefox 崩溃。我想知道是否还有其他人遇到这个问题?
你好!有人知道为什么 Chrome(Win XP SP3)中的字体看起来这么糟糕吗?http://dl.dropbox.com/u/2919142/scrnshot.jpg?提前感谢!
嗨,Chris,
好的,这是我的拙见。首先,我认为这是一个有趣的设计,仍然实用且易于使用。但我不喜欢的一点是导航,我不确定您是否故意这么做的,但您的导航在“悬停”时会左右移动,这很不寻常,感觉像个错误。您可能已经研究过这个问题了,但如果您保持“悬停”和“a”的宽度一致,您就可以解决这个问题……只是我的拙见。感谢您的辛勤工作……我真的很感激,并从您那里学到了很多东西。
干杯,
Carlos
非常棒,Chris。我喜欢它的简洁性。你激励我完成了我的网站。:-)
我想我是唯一一个不喜欢它的人 :)
看起来更适合 Toys ‘R Us 或任何它叫什么名字的地方,就像一个供小孩子玩耍点击东西并欣赏颜色的网站。
Chris,它当然与版本 7 有很大不同。但是有一些元素我真的很喜欢。
首先,我喜欢右侧边栏中的广告部分与您的网站很好地结合在一起,因为它们在其后面有颜色方案,在我看来,这使得它们看起来不像随机广告。这是一件好事。
其次,评论部分看起来非常独特,我喜欢 Gravatars 如何链接评论框。页脚也很漂亮,当您悬停在每个上面时,颜色会发生变化。
我唯一担心的是设计可能有点“单调”。我之所以这么说,是因为纹理或维度很少,因此这会让它感觉有点平淡。冒着自相矛盾的危险,我实际上是扁平化颜色设计布局的粉丝,但在这种情况下(也许与您以前的设计相比),它变化太大了。
一如既往,干得漂亮。
它真的很棒,喜欢颜色和排版。尽管我在 FF 中遇到此设计的一些奇怪问题,确实非常奇怪。我浏览到地址,但没有任何内容显示。什么也没有。只有最后一个打开的标签页的内容。只有当我移动鼠标时,链接、图像和这些内容才会开始弹出。这非常不寻常,奇怪甚至有点吓人。也许是某些 HTML5 问题。
Wndows 7 32 位 Firefox 3.6.8。
除了这些问题,我真的很、真的很喜欢这个设计。我嫉妒。我将从这个设计中提取想法到我的小项目中,特别是当我同样使用灰色调颜色和少量彩色点缀时。
除了我使用 Firefox 3.6.12 外,我的设置和问题都一样。
如果我导航到或刷新页面,主内容“部分”会呈现,但页眉(包括导航栏)和每侧的空白区域(因为我的窗口大约 1920 像素宽)会显示上次加载的标签页。如果我将鼠标悬停在导航栏应该出现的位置,它就会出现。
此外,当我向上滚动时,会出现一个奇怪的伪影,其中绘制水平平铺;我最终在屏幕上获得了一系列与滚动距离相等的条纹,重复相同的内容(大致是首页上第一个文章引导框的下半部分)。
恐怕我现在只能在 Internet Explorer 中阅读您的内容了……
我也有同样的问题,但它只出现在我的 XP 机器上,而不是我的 Win 7 机器上。
嗨,Chris,
我必须说,你一直在改进你的网站。我喜欢重塑自我的想法。它体现了成熟和尝试新事物的风险。这就是网页设计师和开发人员的全部意义所在。我必须说,你已经取得了优势。这必须是那里最好的新改版之一。它展示了 CSS 的强大功能,最棒的是评论线程使网站独一无二。
干得好!!!继续努力!!!
看起来很酷、华丽、吸引人……干得好!
但是有没有办法转到博客文章的第二页(第三页、第四页等)?我只能看到最新的 5 篇博客文章。
嗨,Chris,
喜欢你的文章。而且,虽然我认为你的新设计很简洁,但让内容首先脱颖而出也是有道理的。在这里,有时很难看到树木而不是森林。
喜欢重新设计 – 但为什么你的帖子末尾没有“分享”链接?
Chris,我找不到任何分页!如何转到第二页?
不错的设计,Chris,我最喜欢的是评论 :D
我也非常喜欢它,无论如何,偶尔改变一下是好的;)
我不喜欢它
哇。仅仅哇。
这是我见过的最伟大的 CSS 和 HTML5 成就,毫无疑问。细微之处真正锦上添花——我肯定会在接下来的几个小时里仔细检查代码的各个角落和缝隙。
虽然我可能不同意一些设计决策,但这对于 Web 标准来说是一个令人印象深刻的技术演示。不过,我仍然认为动画应该始终由 JS 调用(如果浏览器支持 CSS 转换,则 JS 动画引擎应出于性能原因在后台调用它们),以实现关注点分离。
我必须对你说,恭喜!!!新的外观非常非常酷,漂亮且简洁。我真的很喜欢它。
几个月前我阅读了一些关于 CSS 的教程,以从 PSD 模拟网站到 XHTML,这对我帮助很大。感谢此教程!
我认为你在新外观上做得非常出色。
我认为结合对比色和漂亮的排版是制作漂亮网站的完美方式。
简单但非常流畅的对比色和排版,很棒!
用户和评论界面制作得非常用心。
制作一个简单而漂亮的网站是一件很难做到的事情。
抱歉我的英语很糟糕,我正在改进它。
这可能已经被提到了(没有时间阅读 260 多条评论),但新设计似乎有很多错误。我在使用 Firefox 3.6.12,屏幕分辨率相当标准。
在切换浏览器标签并返回到此网站时,布局会出错。各种元素会重复并相互重叠。此外,滚动条不再滚动到页面顶部,似乎很多内容都丢失了。
此外,一切都显得超级大。
不过,我很喜欢评论区域。
他说的没错。我无法再在 Firefox 3.6(Windows XP)中查看此网站了。
切换标签然后点击返回到 CSS Tricks 标签会导致浏览器崩溃,并且从首页点击任何文章也会导致浏览器崩溃。这台 XP 机器也很强大(3.0GHz 四核,3GB 内存)。
我同意,
我没有时间阅读 200 多条评论,但在 Firefox(最新版本)中,此网站看起来确实有很多错误。导航栏完全乱了,所有项目都重叠,加载时间很长,等等等等。
我用 Chrome 测试过,它看起来没问题,在我的 Mac 机器上的 Firefox 上也看起来没问题。所以,这与 PC 上的 Firefox 有关。
我正在使用 Win 7 pro。
不错的新设计 :)
我不是想贬低你,Chris,但我很好奇。你现在对页面上字体锯齿状的外观满意吗?还是我的显示器出了问题?
我之所以提及这一点,是因为在我的显示器上,由于较小的字体在标题和标签处有锯齿状边缘的字体,因此很难阅读,因为它们有较亮和较暗的区域。
糟糕的设计
非常棒的工作,Chris。绝对是你迄今为止最好的版本。
有趣……我看到很多其他网站都在使用 Tandelle 和类似的字体。我在正在进行的重新设计中开始使用 Bebas,看起来非常接近。评论和页脚设计尤其出色。
您一直是我的灵感来源,先生。干杯。
伙计们,你们的意思是在 Firefox 3.6 或更新版本中存在错误吗?
这很奇怪,因为它似乎在 Firefox 3.6(Mac OSX)中可以正常工作。
至少在我的情况下是这样的。
好吧,总是有一些问题与“害群之马”浏览器有关……(IE)
你试过那个浏览器吗?
Victor —
问题出在 Windows XP/Vista/7 上的 Firefox 3.6+。它在 OSX 上可以工作。
我没有注意到这个网站的页脚部分!
不错,我以前从未见过这种页脚。
它真的很漂亮。
嗨,Chris,
我对你的新设计的印象并不重要,但它一开始让我想起了 Windows Phone 的 UI——它非常好并且简单(令人惊讶^^)。
此致,
– Alex
发现字体问题仅存在于 PC 上。在我的 MacBook Pro 上,字体绝对没有任何问题。(Mac 统治):-)