好了,在错过了一个截止日期后,结果出来了!您可以在 CSS Off 结果页面 上浏览所有分数并查看人们的参赛作品。
获胜者
当然,所有这些人都做得很 **出色**。为了他们的利益,我们只会吹毛求疵提出一些建设性的批评。
Steven Schrab - 查看条目
第 1 名 -笔记:对图像压缩要更轻松一点。CSS 图像替换在标题上看起来不错,但不太实用。
Edd Sowden - 查看条目
第 2 名 -笔记:IE 8 应该使用一些回退 alpha 透明度支持。IE 6 拥有原始样式表,这通常很棒,但在本次比赛中支持它会更好。
Mustafa Quilon - 查看条目
第 3 名 -笔记:更希望在字体栈顶看到 Helvetica 而不是 Gill Sans。错过了页脚线条的阴影,因为它们在文章页面下方。
Pam Griffith - 查看条目
第 4 名 -笔记:该font-stretch属性导致 WebKit 和 Gecko 之间的标题类型存在巨大差异。
这些获胜者已经联系,他们将反过来选择在 原始帖子 上获胜的评论者。一旦他们被选中,将联系这些人,然后开始选择奖品。
总体
每个参赛者都应该为自己鼓掌。总体而言,每个人都做得很好,应该感到自豪。这是一项为了公益和实践而进行的活动。我之所以提及这一点,是因为我知道你们中有些人会对自己的分数感到不满意。别太当真了……
评判
参赛作品由我和 Doug Neiner 评判。我们分别评判了每个参赛作品的不同交替部分。你可能认识我。这是 Doug
Doug 是一位设计师、开发人员,也是 Pixel Graphic Design Studio 的所有者。他是 Fuel 的 CTO,也是 Fuel Your Coding 的博主。他还拥有 个人网站。
我们在以下 100 分制中进行了评判
干净一致的风格 | 1 - 10 分 | 所有代码(HTML/CSS)都经过组织,可读性强 |
语义 | 1 - 5 分 | 使用了智能元素和类/ID 名称。HTML5 可获加分 |
文件夹组织 | 1 - 5 分 | 文件夹结构合理且经过组织 |
匹配原始设计 | 1 - 20 分 | 在现代浏览器中与原始模型的接近程度 |
好的选择点 | 1 - 20 分 | 做出了明智的选择:应该为文本的用文本,按钮以智能灵活的方式完成,悬停效果看起来不错,等等。 |
现代浏览器支持 | 1 - 10 分 | Firefox 3,Safari 4 |
略微过时的浏览器支持 | 1 - 5 分 | IE 7 |
旧浏览器支持 | 1 - 5 分 | IE 6 |
文件大小 | 1 - 10 分 | 最大(合理)条目得 1 分,最小条目得 10 分,然后根据该线进行评判 |
图像质量 | 1 - 10 分 | 图像的外观。这是为了平衡文件大小。在图像质量和文件大小之间取得平衡的条目将获得最多的分数。 |
总计 | 最高 100 分 |
特定问题领域
在 Helvetica Neue 的所有业务方面,我们对字体比较宽容。个人电脑没有这个字体,所以如果你在标题中使用了图像替换,那就没问题。但在文章标题中使用图像替换不是一个好主意,因此会因此扣分。我宁愿看到错误的字体,也不愿看到不灵活的东西。
经过所有这些评判,以下是人们最常遇到的问题
1. 行高
这个模型中到处都是文本,而且行高各不相同。这常常被忽略或误判。行高对于显示阅读起来舒适的文本至关重要。
2. 微妙的阴影
当三条细线延伸到文章框下方时,那里有一个微妙的阴影。
3. 网格
时钟的腿与模型中三个照片框的边缘完美对齐。许多设计没有做到这一点。如果时钟以灵活的宽度方式放置,但在窗口大小约为模型大小时对齐,那就可以接受。
4. 网页文本
底部三个“引号”框中的文本是三种不同颜色的 Georgia。这绝对应该是位于这些框顶部的网页文本,而不是图像,即使是图像替换或具有适当的 ALT 文本。网页文本渲染效果更好,更易于更新,可选择,等等。
有趣的条目
这些条目都没有获胜,但它们都做了一些有趣的事情,请查看!
#103 - 固定位置页脚,内容在下方滑动。
#117 - 查看源代码 =)
#104 – 其中一个例子,带有时钟指针的动画
#58 – 对设计的彻底改造
#127 – 也许是唯一尝试固定定位时钟的尝试
#11 – 使用了 MagicLine
总结
这是一段漫长的旅程!我们从举办这场活动中吸取的重要教训是,它比最初的想法要多得多工作。但我们挺过来了!下次我们会更坦率地说明时间框架,并让流程更加完善。一些赞助商会很好,以确保活动对每个人来说都是成本中立的。
如果您在上面错过了,结果在这里。
感谢发布结果,我真的很生气我的得分这么低,但我确实学到了一些东西,我希望下次我能做得更好。
感谢比赛 :)
顺便说一句:我在转换设计时遇到了一些问题,因为 GIMP 无法正确打开 PSD,所以我只能使用 JPEG。
我希望下次您也能在 GIMP 中测试 PSD。
下次我们可能会走两种路线之一……确保有一个免费程序可以像付费程序一样成功地打开文件,或者,直接说明这是一场 Photoshop 转换竞赛,并且该特定工具是先决条件。
感谢您的回复,我确实打算尽快购买 Photoshop,我想这是另一个购买它的理由 :)
Pixelmator 怎么样?
感谢您为此付出的时间和精力,Chris/Doug!
很高兴看到结果发布,并标注了让您失望/表现出色的区域。
期待下一次!
恭喜获胜者,我做得还不错(67 分)
我也用 Magic Line 做了导航栏!
我刚注意到我为 IE6 添加了透明 PNG 修复,但忘记了包含脚本文件 :)
每个人都做得很好!那里有一些很棒的作品。感谢 Chris 和 Doug 以如此精确的方式标记它们!
不错——我拿了荣誉提名!(#103)恭喜大家!
这次我没有机会参加,因为我被工作搞得焦头烂额(我相信你们也能感同身受),但我真的很期待下一次。您认为下一次什么时候举行?
66。对于新手来说足够了 :P
纯粹好奇:您在比赛标题中的“The Great”上使用了哪种字体?
你能回答我吗?…… :) 关于比赛标题中的“The Great”所使用的字体……
Chris,
非常感谢您!我玩得很开心,学到了很多。您在小的细节设计挑战方面非常聪明,比如在主要文章区域后面淡出的 3 条线。
感谢详细的评分。它为我遇到的下一个设计挑战提供了很多好的反馈。
干杯,
Jacob
感谢您举办整个比赛。在创建这个条目时我学到了很多(尤其是关于定位和 z-index 的细节)。它绝对比我预期的更具挑战性。
很高兴知道我需要改进的地方。我最严重的缺陷是整篇文章和页脚没有使用网页文本。
我期待着浏览其他人所做的事情。
再次感谢!
有些人要求更具体的反馈,我想知道 Chris 或 Doug 是否能提供我将来应该努力改进的其他方面?
这是我的 参赛作品。
我知道你们两个已经投入了很多时间,但我认为值得一试。如果方便,我可以发送电子邮件。
Laura,请发送电子邮件给我,我很乐意回复。您可以在我的网站上找到我的电子邮件。感谢您的参赛!
耶,60 分,还不错!XD
感谢您的建议,我确实在图像替换文章标题方面做出了错误的选择。
感谢比赛,并祝贺所有获胜者和高分选手。你们很棒!o/
我最喜欢 Mustafa 的作品,虽然我同意他可以用更好的字体(或者使用带有备用字体的 @font-face),但他似乎是唯一一个采用了“无字体作为图像”方法的人,我真的很喜欢。我感到难过,没有展示动态宽度条目,我正在制作一个,但没有及时完成。
谢谢 :)
我之所以没有使用图像,是因为它应该是一篇文章,因此,将其用作图像将非常不方便。我考虑过使用 @font-face,但是,所使用的字体,据我记得,Helvetica(缩体?)不能以这种方式使用(提示:许可证)。因此,我决定使用字体栈。
很棒的比赛!祝贺其他获胜者,现在正在浏览其他参赛作品。
说实话,我错过了。我认为它就像网站名称的标语而不是文章标题。我本应该用 HTML 文本而不是图形来编写我的作品。
现在我再看一遍,太明显了。
“我*认为*它就像一个标语”
同意,对字体使用的赞赏。
OMG!!
我错过了让一位伟大的设计师评论我的设计的大好机会。
附注:我正在考试
一些非常棒的参赛作品!真可惜这次我没有时间参加,我一定会关注下一次比赛。
浏览不同的设计和代码,看看所有用于创建相同最终产品的不同技术,真是令人着迷。这仅仅说明了当前 XHTML 和 CSS 的多功能性。
很可惜,一些参赛作品似乎没有完成,或者他们可能忘记上传或添加某些代码,如果所有都完成了,前 10 名可能会完全不同。
第 58 号参赛作品是我最喜欢的,他的重新设计太棒了。
谢谢您,您让我的这一天变得如此美好 :)
无法相信我是唯一一个重新设计它的人。我从来都不是一个墨守成规的人。不过,我必须匆忙完成编码方面,我应该在工作。
超级概念。我之前不知道,如果有机会,我也会参加!
在理想的世界里,我会使用 TypeKit 替换字体。我知道我的字体有点偏差,但我惊讶地发现“字体选择分数”这么低。
好吧,至少我将文件大小控制住了。
https://css-tricks.cn/examples/CSS-OFF-2010/84/
感谢您举办这场比赛。
尽管我非常喜欢 Edd Sowden 使用的 Webkit 动画和 HTML 5,但第一名的参赛作品绝对是最全面的,尤其是在图像缩略图上的悬停光晕等小细节方面。
真可惜,那些为 IE6 提供了回退样式表的人没有获得额外积分。
谢谢,我喜欢折腾这些细节,这是我整个流程中最喜欢的部分!
不客气。这真的让我很想点击网站,这是最终目标,毕竟这些单页面网站没什么内容。
哈哈,拒绝为 IE6 开发导致我错失了第一名。不过,我很满意这样的结果。祝贺其他所有参赛者。
David: 时钟不只适用于 WebKit,它在最新的 Gecko 浏览器中也能正常工作。
我发现我们的作品形成鲜明对比 :D 祝贺你,干得漂亮!喜欢你使用“CSS 变换”。事后看来,我为什么没有使用它呢?:)
HTML5 的一个很好的示例。我当时也不确定 IE6 支持会对比赛产生多大影响。我赞赏你选择把它抛诸脑后。:)
非常棒!
Edd,很棒的作品!我喜欢你的时钟,它真是太棒了。无论是否支持 IE6,如果 IE8 能够像 Safari/FF 版本的网站一样,你依然会赢。最大的问题是,你没有为 RGBA 透明度提供透明 PNG 回退。它会让 IE8 中原本的淡红色看起来非常亮。我想把那 3 分拿回来,但我无法解释为什么 IE8 的外观差异如此之大,而解决方法非常简单。
总之,你的作品非常棒,祝贺你获得第二名!
更棒了!过去几周我一直用 Safari,所以没有费心在其他浏览器中查看。
正是这些东西让 CSS 动画变得如此出色,在这里加载一个 JavaScript 库就显得太过复杂了。
我唯一得分较高的是文件大小。如果我的 Mac 早一周到货,我本可以减少图像替换的次数。
https://css-tricks.cn/examples/CSS-OFF-2010/25/
糟糕,我本应该控制好文件大小。我知道这会让我吃亏。也许我可以勉强挤进前三,但我喜欢我的翻转效果,它为整个作品添加了四个巨大的透明图像。
还要感谢 Chris & Doug 投入如此多的时间来举办这场比赛!
不知道你之前是否用过,但我用来减小 24 位 PNG 大小的一种工具是 PNGSquash。它是无损压缩,有时与 Photoshop 保存相比,它可以节省大量空间。只需将你的 PNG 拖放到其中即可。
http://github.com/msanders/PNGSquash
感谢你们举办这场比赛 - 真的很有趣!我的作品被评得很低 - 但我欢迎批评,并且已经迫不及待地期待下一场比赛,届时我会努力挽回颜面!
祝贺获胜者!
第二轮什么时候开始?!
PS: 还有其他人像我一样用 Flash 做了显示真实时间的时钟吗?像我这样?!:)
哈!现在你提到了,这个时钟确实做得很好!:D
祝贺你创意十足!
喜欢这个时钟。想看看是否有人可以用非 Flash 的方式实现。
22 :D 我真的没有想到,这太棒了
我只有一个问题,为什么我 IE7 得了 2 分,而 IE6 得了 4 分?:)
谢谢
嘿,你做得真的很好!图像压缩是影响你作品得分的主要因素,但这仍然是一个很棒的作品。
“稍旧”浏览器支持主要包括 IE7,但也包括 FF 3.0。而旧版浏览器则仅指 IE6。虽然在 IE6 中预期会出现一些视觉差异,但 IE7 只是落后一代,因此网站看起来应该几乎完全相同。此外,FF 3.0 中存在一个显示右侧图像的视觉错误。
就像我说的,你的作品真的很棒……下次不要压缩你的图像太多。干杯,老兄!
我真的很受宠若惊,谢谢 Doug。
关于图像压缩,有什么好的技巧/文章吗?
祝贺所有人。我特别喜欢那个反转网站颜色并基本上按照自己的意愿设计布局的人。我喜欢看到有人完全打破规则,做一些与众不同的事情。所以,是谁做的?…向你致敬,先生。
我对语义和智能选择类别有点困惑。到底如何使用“智能元素和类/ID 名称”?我是不是傻了?这是在谈论完全描述你使用元素用途的特定 ID/类名称吗?
我的作品可能在简单性方面做得有点过头了,但我习惯于为使用 Ext js 库的 Web 应用和网站进行样式设计,该库会添加像 id=”ex-num-47b” 这样的动态 ID 名称。我想我过于依赖 Firebug/开发者工具来关心它们叫什么。我只是查看代码,找到需要样式化的元素,然后进行操作,因为我无法依赖名称来告诉我我在哪里工作的内容。
智能选择对我来说也很奇怪。我用文本而不是图像替换了所有东西,除了“继续阅读”按钮。主要是因为我很懒,这部分是使用 jQuery 完成的。所以,除了这个,评委们到底在寻找什么?
我知道 Chris 和……Doug……必须滚动到顶部才能找到他的名字,他们手头上有很多工作要做。这真的很有趣。我真希望每个参赛作品都有一个评论区,说明参赛作品的不足之处以及应该做什么。
总的来说……感谢你们举办这场比赛。我无法想象当我看到大多数作品都一样时,还要去看所有这些作品。
我对语义和良好选择也有同感,我也在这两方面得分很低。
嘿,Jeremy!再次感谢你参加比赛。你的类名称和 ID 实际上没什么问题,但我从语义方面寻找了一些东西。
具体来说,当显示项目列表时(一行三个照片,页脚中三个图像/文本组合),我觉得这是使用 OL 或 UL 甚至 DL 的好时机。从语义上讲,列表以一种很好的方式对类似项目进行分组。导致许多人(包括你)在语义方面得分较低的一个大问题是使用 `p` 标签对一、二或三词组合进行分组。从任何定义上讲,段落不仅仅包含三个词。因此,将底部引语或右侧照片上的元数据拆分为带 display:block 或类似属性的 span 会更合适。
“良好选择”的得分也许应该叫“加分项”。这实际上是评委们为特别令我们印象深刻的作品加分的办法。不要因为分数低而感到难过。其他列的含义更具体,并为未来提供最好的反馈。再次感谢你们给我们提供评审这么多作品的机会,感谢你们的参与!
谢谢,Doug。现在明白多了。可能应该慢下来,但时间有限就容易偷懒!
我认为这项挑战很有趣,但我同意每个人的观点,即在设计中使用非标准字体会导致问题。
@font 之类的解决方案是个好主意,但还不够标准,不能算作最佳实践。而用图像替换文本则是一个非常糟糕的主意。不知道你们怎么想,但我不想为了更改标题文本而不得不去找设计师。
作为负责任的专业开发人员,我们需要与设计师交朋友,为文本设计想法提供 Web 文本解决方案。
我甚至都不想谈论如何管理翻译后的网站?!
这类比赛很棒,真的能挑战我们所有人写出很棒的代码。我这次没有时间参加,但期待着下一项挑战。
哇。我震惊了。有许多很棒的参赛作品,所以我不确定我的作品是怎么挤进前列的。其中有很多非常好的想法。
设计看起来很复杂,但实际上并不难。如果你没有尝试过,建议试一下,这真是一个很好的练习。
感谢 Chris 和 Doug 评审比赛,感谢你们的评价。我一直喜欢得到反馈。
祝贺你:)
祝贺 Steven!出色的作品!
祝贺获胜者!
我喜欢第二名获胜者的想法,时钟的指针是动画的。
真可惜我忘了提交作品,但我希望很快会有另一场比赛!;-)
再次感谢 Chris 和 Doug 举办这场比赛!
我在浏览器支持方面得分完美(10, 5, 5)的少数人中,对此我感到自豪。
哇,一些非常棒的参赛作品!我喜欢第 117 号参赛作品源代码中的 ASCII 图片…
我没有机会真正编码,但当我查看它时,我认为最让我困惑的是底部呼叫框中淡出的文字…出于某种原因,用三种不同的颜色来模拟淡出从未出现在我的脑海中 :(
总的来说,我认为有一些很棒的参赛作品,以及出色的评判。迫不及待地想要参加第二届年度 CSS-Tricks CSS Off。
我不得不做点什么来突出自己。时钟实际上在 WebKit 浏览器中也能移动。考虑到这是一场 CSS-off,我没有想到使用 JavaScript。
感谢 Chris 和 Doug 提供这个绝佳的机会!
这里有一些非常棒的提交作品,祝贺大家!
好吧,除了“良好选择”之外,我在所有方面都得分很高,直到提交后我才意识到我的糟糕选择。我认为一些懒惰和对其他项目的关注迫使我在糟糕的选择上动脑筋。好吧。看到一些人做了什么很有趣,尤其是时钟动画。我甚至没有想过要做这样的事情,所以恭喜。总的来说,我对我的参赛作品感到满意,即使我故意省略了一些内容来完成它 :(
我不明白为什么我会得到那个分数
https://css-tricks.cn/examples/CSS-OFF-2010/
我在“匹配原始设计”中得了 3 分,但我的设计看起来几乎与原始设计相同。
在浏览器支持方面,我得了 3-2 分,但我的设计在我的所有测试浏览器中都能完美运行
在“文件夹组织”中,我得了 1 分,但实际上是有组织的,所以我不明白为什么我的分数这么低。
我告诉你这些,不是因为我想赢,而是因为我的一些客户可能会看到这些,我希望分数真实,正如我所见,我不明白我的分数。我几乎可以肯定你犯了个错误,检查了其他作品,而不是我的作品
我在文件夹组织中得了 5 分,我只做了把 css 放到自己的文件夹中,脚本放到自己的文件夹中,图片放到自己的文件夹中。我不知道为什么会出现 1 分。
至于浏览器支持,我得了 3-3 分,所以很明显,在所有浏览器中都没有崩溃或看起来一样,并不是评判的标准。我认为他们在寻找现代浏览器的 CSS3 支持,至于旧浏览器,谁知道呢。我包含了一个条件样式表,用于大约 2-3 个样式,该样式表在 IE6 中使用 gif 而不是 png。
Erez,我很乐意向你提供有关你提交内容的更多详细信息。请通过 Skype 或电子邮件与我联系,这两种方法在我的网站上都有提供。
我也很好奇 :)
感谢 Chris 和 Doug,以及所有参赛的专业人士 - 很棒的作品。
我不确定“匹配原始设计”的分数是如何计算的。对于非常接近原始设计的参赛作品,该分数似乎有很大的差异,而一些得分高的参赛作品则存在明显差异。在这一领域和“良好选择”点上,一些具体的说明会有所帮助,但我可以理解为什么对于这么多参赛作品来说,这会是一项疯狂的工作量。
无论如何,感谢你们举办比赛,并祝贺获奖者!我从整个过程中学到了很多东西。
感谢你的反馈,Dale,我们的评论更多的是为彼此写的,没有意义发表。在下一轮比赛中,我同意这可能为我们做出的决定提供了更多见解。你的参赛作品非常棒,感谢你参加!
哇,我真不敢相信我不是前几名,我确实让它在旧浏览器中运行起来,我不知道为什么我在那部分只得了 1 分,我认为我的代码是尽可能干净的。好吧,这有助于我成为一名更好的设计师。
那个意大利人还不错! ;-)
评估每个人花费多少工时来完成它也很棒!
干得好,伙计们。
我真的很喜欢获奖页面上的悬停效果。
它使阅读变得容易,你肯定知道这是一个链接。
感谢 Chris 和 Doug 在 CSS-OFF 期间的辛勤工作。
这很有趣,这是一个很好的机会,可以让我们看看我们都在做什么,以及如何做得更好!
祝贺所有获奖者!: )
很棒的活动!感谢 Chris 和 Doug 的工作。
在国际水平上竞争非常有趣。毕竟,对于我来说,获得第 16 名是一个惊人的成绩!
我花了大约 4 个小时来完成它,下次我会更加注意细节 ;-)
哇,我感觉很好。我目前在大学(大四),在一家规模不大的网络开发公司工作。我认为考虑到参赛人数,我做得还不错。我知道,没有进入前四名,但相当接近了!
另外,我非常自豪于我的跨浏览器兼容性和小文件夹大小(虽然这可能影响了图片质量)。:)
还有一件事(不要太吹毛求疵),我注意到其中一个排名前列的参赛作品在 Firefox 3.0(如果你想知道的话,是 0.15)中看起来非常乱。
非常感谢举办比赛!这很有益,也让我感觉很好!:D 祝贺获奖者!
哦,对了,我花了大约 3-4 个小时完成我的作品 :D
祝贺大家,我发现自己还有很多东西要学,但对自己的成绩感到满意,因为我必须在 4 个小时内完成所有工作。
我已经在期待下一次 CSS Off 了!
祝贺获奖者!感谢 Chris 和 Doug 举办比赛。
我很想看到第二部分,即使没有奖品。;) 或者也许你能找到一些赞助商?:)
第二名的参赛作品对你来说运行正常吗?这个布局应该完美地适合 1024 像素的屏幕分辨率,但有一个水平滚动条,并且当浏览器窗口宽度小于 1300 像素时,内容看起来不好,这在正常工作中是不可接受的。
你能看到吗?还是只有我才能看到?(Firefox 3.6/Mac)
真希望我没有那么懒惰,并加入了那些滚轮,并将文章标题替换成文本,哈哈
哈哈,计时器太 Q~~~~了
哈,真希望我知道这场比赛…祝贺大家。
我很想听听那些在“良好选择”类别中得分很高的人的评论。我认为这可能是经验方面最优秀的人。
例如,如果那些在该部分得分很低的人中存在一些“糟糕”的选择,并一直被做出,那么将这些选择指出来作为一种传递知识的方式,可能会带来好运气……。
干得好,
有趣的是,比较结果的文件大小。最大的(2MB)看起来与最小的(60KB)完全相同。
我们能做到的事情真是太神奇了。
每个人都干得很好,我会参加下一场比赛 :)
Steven,恭喜你获得第一名,我迫不及待地想查看你的代码,看看我能学到什么。
另外,在阅读这些评论之前,我从未听说过 PNGSquash,感谢你分享它!
祝贺所有参赛者,我期待着下一场竞赛.. 如果我是你,Chris,我会感到害怕,看来会有更多的人参加。xD
致胜者们,恭喜你们获得前五名。祝贺所有参赛者!
期待下一次 CSS OFF。我觉得下次你们可能需要多几个人帮忙做决定。xD
真希望我有时间参加这次比赛,我一直忙得不可开交。
这是一个让你的技能得到一位优秀设计师评估的好机会。
我一定要参加下一次比赛!
恭喜获胜者!
我要感谢所有参与的人,就像大多数人一样,我匆忙做完了我的作品,但对一些分数感到满意。从查看获胜者的代码中获得了一些很好的技巧,期待下一次比赛并提高我的分数。
第六名。非常感谢比赛!祝贺大家!
我喜欢第一名 Steven Schrab 的 xhtml/css。
查看所有结果很棒,仅仅是查看参赛作品就让我坚持了很长时间。
感谢所有参赛者并在线展示你们的才华,我没有 PS,所以很难参赛,也许下次 PS 不是必需的,谁知道呢?
Al
糟糕,我知道少了一些东西:行高。
感谢你指出这一点!
下次我一定会注意那个小阴影!
感谢这场精彩的比赛。
不过有一个问题:我看到我在 IE6 和 IE7 中分别获得了 1 和 2 分,可以问一下为什么吗?
这是我的作品.
有人知道图片顶部“The Great”这个词用的是什么字体吗?我真的很喜欢它。谢谢你的帮助!
我认为会有更多人使用纯 CSS 而不是图片来制作页面剥离/折角效果,这并不难。
哦,我还没想到这一点。确实非常有效。谢谢你的提醒。
我很喜欢你的作品中很多悬停效果!
CSS 页面剥离/折角效果 - 我需要学习这个。
我考虑过,但这意味着你无法在左上角获得背景噪音效果。
很高兴看到结果和你们对获胜者的反馈,谢谢大家。
真希望我有时间和知识来参赛。我还在学习,但我已经保存了 PSD 和 JPG 文件,以便将来测试我是否学到了最近阅读的知识。我会尽快做到这一点。
这是我在此网站上的第一条留言,虽然我几乎每天都访问这里。很棒的网站,但你们都知道这一点。
我认为邀请 PSD2HTML.com 的团队来完成这项工作将是一个独特的机会。我们都可以看看他们的竞争和得分。现在邀请他们做这个模型并不算太晚。你怎么看?
很想了解如何解决“特定问题区域 #2 - 微妙阴影”。如何实现?
Chris/Doug - 你们是否打算向我们展示你们如何解决这个布局?
关于获胜者 - 可以查看 CSS 文件吗?
你只需查看源代码,就能找到每个参赛作品样式表的 URL。
例如,这是获胜作品中的一个样式表。
https://css-tricks.cn/examples/CSS-OFF-2010/83/_includes/css/common.css
感谢 rmlumley - 作为一名学习者,能够看到它是如何完成的,对理解实现结果的方式非常有帮助。
一直在查看 #2 和其他作品,但我将以 #2 为例。
如果你看一下 IE7 和 FF3.6 中的标题栏和导航栏,你会发现这些栏没有延伸到整个屏幕。在时钟加载之前它们是延伸的,但一旦加载完成,它们就不再延伸到时钟之外。
如果你在 browsershots.org 中查看 #2,你会发现这两个栏都完全延伸到整个屏幕。
这是怎么回事?有人可以解释一下吗?还有其他人注意到这个问题吗?
Al
您好,
下一次 CSS OFF 什么时候举行?
Marius
恭喜获胜者 Steven Schrab!同样问题,下一次 CSS OFF 什么时候举行?