挥动那面方格旗! 评论已关闭,报名表也已关闭,因为 CSS Off 的截止日期已过。 我们收到了令人难以置信的 **136** 份报名! 有几份是在最后一刻提交的,这让我担心有些人可能没有成功提交,但这都是规则。 我真的以为只有 20、30 份左右。
我们很快就会开始评审。 这对 @dougneiner 和我来说将是一项艰巨的任务,所以请耐心等待,这可能需要几周的时间。 在某个时候,我们会将所有作品都提供给大家浏览,并附上评语和分数。 之后不久,我们将公布获奖者,并开始奖品选择环节。
正如承诺,我将向海地救灾慈善机构捐款 408 美元。 我会进一步调查,但我正在考虑 无国界医生组织。
其他新闻
在开始一个新的 WordPress 项目时,我会使用我自己的“基本”WordPress 主题。 我把它叫做 BLANK,今天我把它 发布在 Digging Into WordPress 上,如果你想看看,可以去那里查看。
最近有人问我是否有一种方法可以创建一个公开页面,向某人(例如客户)展示其在 Are My Sites Up 帐户中的网站状态。 你可以做到,我 展示了如何实现。
哇,136 份很多!
我迫不及待地想看到结果。 我通过参加比赛学到了很多东西。
同意。 我以前从未使用过 z-index,现在它救了我一命 :)
我也是,关于 z-index,我已经使用过,但从未用过这么多。
参加比赛真的很有趣。 虽然我有一些想法没有时间实现(我前几天才开始),但我对自己的作品感到非常自豪。 希望我没有把所有内容都放在 .zip 文件夹中,这不会让我被取消资格吧!
哇! 报名人数真多。 祝你和 Niener 先生好运。 我相信这会花很长时间。 我绝对有兴趣看到所有不同的作品。
哦,另外,感谢你提供 BLANK WordPress 主题供下载。 从现在开始,它将成为我的默认 WordPress 主题。 :)
该死! 没有成功提交。 参加这次比赛真的很有趣。 迫不及待地想看到结果!
太棒了!
期待看到结果,有点后悔自己没有在上面花更多时间哈哈
我喜欢听你们是怎么做的?
你们是怎么处理字体的?
按钮呢?
我使用 cufon 脚本为标题、菜单和按钮设置字体。 我一开始尝试了 @font-face,但后来决定放弃。 我实际上在这一方面追求了像素级完美,这也是我选择 cufon 的原因。
然后,为了做一些炫酷的东西,我决定为日期字段创建一个精灵图,只是为了炫耀哈哈。
当然,我使用了滑动门技术来处理按钮。
如果我们完全不需要支持 IE,使用 CSS3 和多重背景等,事情会容易得多。 但是我认为即使没有它们,它也做得还不错。
可能需要更长时间才能完美。
我没有使用字体替换技术,因为存在许可问题。 所以我使用了图像替换。
嗯,没想到要更改字体 :/
虽然我希望我做到了。 至于按钮,我使用了一个单一的图像渐变,宽度约为 1 像素,将其重复,并使用 css3 和边框颜色进行修饰以产生效果。
似乎做得不错 - 在线发布怎么样? :>
我认为我会等到 Chris 完成投票后才发布 :)
我使用类似的字体(“Existence Light”)和 @font-face
很高兴听到我不是唯一一个在找时间的人! 我的作品是在今天午休时间完成的!
我走上了 CSS3 逐步降级的道路,不幸的是,我的午休时间不够长,无法让 IE6 完全满意,但其他方面都设置得很好!
我预计所有作品都将达到很高标准,期待看到结果!
祝贺 Chris,并感谢他提供如此具有挑战性的设计!
+ 感谢 Chris 和 Doug 抽出时间来评审这些作品!
一开始我对我想用它做些什么有很多计划,包括可能添加一些 jquery 和 css3 来进行渐进增强,但最终我选择尝试使用简洁、漂亮的代码,并使其在所有浏览器(包括 IE6)中尽可能地符合规范。 在这方面,我认为我成功了。 作为一名以前只做印刷设计的 designer,我编写 html 和 css 只有 8 个月左右,但我非常喜欢它,它非常有益,即使它会带来一些挫折。 我非常好奇地想看看我的作品与其他作品相比如何。 我非常尊重你在 Chris 这里所做的一切,希望有一天我能像你在你的领域一样优秀。 继续努力吧,你的工作值得赞赏。
我很享受这次比赛。 我不知道我会赢还是输,但我很高兴我的作品以及评语和分数将被公开。 我真的有兴趣了解其他人是如何编码设计的。 我想知道我的解决方案是否普遍,还是另类。
我对自己的作品感到自豪,并在这个过程中学到了很多东西。 我的最终代码与我最初看到 PSD 时最初计划的代码大不相同。 说实话,我认为设计具有欺骗性,很困难。
也许我甚至会写一篇博客文章,介绍我编码设计的思考过程。
是的,它确实比乍看起来难得多。
我大约在 3 个小时内完成了我的作品,所以没有机会使用任何酷炫的字体替换技术。 我只是为“花哨”的文本使用了图像。
我唯一感到困惑的设计部分是如何让段落像图像中那样环绕图像。 从我了解的 CSS 看,这似乎是不可能的,所以我简化了它。
希望我做得还不错。 它在所有浏览器中看起来几乎完全相同,所以太棒了!
如果你使用像 span 这样的内联元素作为图像容器,你可以将它添加到段落中,并将它浮动到左侧,应用一些边距进行间距,然后文本就会环绕它……
我希望我有时间参加比赛,但我期待着看到结果!
这很有趣! 我专注于简洁、语义化和可访问的标记。 它是纯 CSS 和 HTML。 这样做的好处是,我不需要任何浏览器黑客(即使对于 IE6)……
我花了大约 4 个小时,之后我希望我能花更多时间来完善整个作品(尤其是背景行为)。
让我们拭目以待……
我听说无国界医生组织很棒。那应该是一个稳妥的选择。
很酷能从你们这些酷酷的人那里得到一些反馈/笔记:)
有趣的是还有135位其他参赛者 - 不过说实话,我不确定会有多少人。很高兴了解到竞争对手的情况;)
我承认我的参赛作品原本计划更多 - 我打算把它作为一次尝试一些额外花哨和巧妙东西的机会,但在过去几天里被其他项目分散了注意力,最后只能简单地模仿PSD。
昨晚加班到很晚(实际上是凌晨)才完成它,今天午休时间完成了最后一些部分(幸运的是,CST时区比我们在英国的时区晚5个小时)。
有点兴奋,但也紧张,因为我们的作品将被评分并公开!看看别人的技巧会很有趣。
感谢你组织这场比赛,Chris。希望将来会有更多类似的比赛。我认为这可能会在CSS世界掀起一阵热潮,尤其是如果它成为一项定期活动的话。
PS。谢谢你,Dropbox!:D
我没有使用任何花哨的技术,因为它不需要任何类似的东西,我也没有使用图像替换或任何类似的东西,它全部都是CSS/HTML,以及一些渐进增强功能,在所有浏览器中都能正常工作,包括IE6(当然它在每个浏览器中的外观可能不同)
我也在今天完成了它,我没有足够的时间,但我对自己的成果感到很满意。
哇……135个作品……实在是太多了……我还注意到我犯了一个大错,不小心把所有内容都放在了错误的“CSS Off Entry - YOUR NAME”文件夹中……
尽管如此,我还是使用了纯HTML 5,以及html5启用脚本,以使其在IE中也能正常工作。我还使用了ie8.js和一个只针对IE的样式表,以解决此浏览器中的任何问题。
我使用了一个Font Squirrel的Fontface字体来替换那些没有安装Helvetica Neue的系统上的Helvetica Neue。由于反锯齿问题,我在IE中禁用了它。
我使用alpha背景和背景渐变来代替图片(即使在IE中也是如此)。
我使用了一个简单的字体阴影作为普通链接的悬停效果。
这是一场非常有趣的比赛,我有机会改进我的编码,所以我很满意,无论结果如何。
我的意思是“我还注意到我犯了一个大错……”
我决定把我的作品放到网上,但只放一段时间。它可以在ptmblogger.co.cc/files/CSS-Off中找到。告诉我你的想法,并记住我没有Helvetica Neue进行测试。
嗯,HTML 5 的使用很不错,但你没有在 IE 6 中检查过你的作品吧?在我看来,它完全乱掉了。
如果HTML 5和CSS 3没有得到认可,为什么要冒这个险呢?
顺便说一下,这是我在 IE 6 中截取的两张截图。在 IE 7 中,你的作品看起来好一点,但仍然很乱。我不知道你指的是“使用html5启用脚本,以使其在IE中也能正常工作”。
http://img685.imageshack.us/img685/870/ie6.png
http://img685.imageshack.us/img685/4835/ie61.png
DW: 我指的是这个脚本:http://code.google.com/p/html5shiv/
我故意隐藏了时钟,因为IE6在透明度方面存在问题,而且我无法在使用alpha滤镜时使用背景定位。
页脚上的那个问题是我的懒惰。我没有设法让版权和页脚文本在IE7及以下版本中按预期工作,所以我只是简单地禁用了所有浮动,但忘记了让版权与文本对齐。
而且我使用了“廉价替代”来代替CSS文本阴影,在IE中使用的是glow滤镜,但现在我后悔了……
无论如何,不要忘记,设计在旧版浏览器中不需要像素完美,只需要可用即可。
虽然我还是不明白你是如何让网络字体在IE中工作的,但我没有留下.eot文件,因为它在IE中看起来不好……O_O
看起来不错,但三个底部框中的淡化颜色在哪里呢?
另外,我不会使用@font-face,我认为它的支持太少了。我会使用图像替换,至少对于logo来说。
而且,主框左侧和右侧的红色线条上的小阴影在哪里?;)
哦,我完全忘记了那些阴影。好吧……:(
我真的很分心,我直到现在才注意到最终的作品要发布到网上!我决定现在就下架页面。
另外,感谢所有发表意见的人,因为你们让我从不同的角度思考问题,下次编码时我会考虑这些意见。
嘿,Chris,我想知道我是否可以把我的参赛作品放到我的网站上,作为研究与朋友分享,或者我是否要等到结果出来?
太令人兴奋了!等待结果的几个星期会很漫长。我希望我不是一个网页设计新手。我本希望能为这个模型提供一个解决方案。我收集钟表,并对它们进行修理,所以我很欣赏这个时间主题。我期待着看到所有参赛作品。
哇!136个作品,这对你的比赛来说是一个巨大的成功,Chris。你肯定很高兴知道你的读者有多么爱你和尊重你。我的意思是……我并不真的在乎奖品……但就像你说的,加入这样的比赛是一件值得骄傲的事情。
我在比赛过程中学到了一些东西。不可否认,这个模型比看起来更复杂。Z-index 的东西,元素相互重叠,图片出现在具有挑战性的位置……这就是我使用这个模型的乐趣所在。
当然,我希望我能赢得这次比赛,但如果不能,我还是非常高兴能从其他人那里学习。我想说,这个模型是迄今为止被转换为HTML最多的模型。有136种(希望如此)不同的实现方式。所以,从不同的角度和技术来看,一定很有趣。也许一些有创意的人会用jQuery、Javascript等方法让设计更出色。
总之,如果没有我的参赛作品,捐赠给海地的款项本可以达到405美元,哈哈,所以我也很高兴。
我很想知道压缩文件的尺寸范围。
我的大约是4-500kb
范围很大。从100k左右到近2MB都有。
我的文件是600Kb。我想我本来可以做得更优化一些。
我的大约是80kb~90kb
刚刚检查了我的。98kb
哇,真是不错的结果,我的大约是250。你用什么来压缩图片?
我的也是98kb。
哎呀,刚刚注意到我把所有图形都保存为PNG格式,所以文件很大……
我使用了PNG和JPG,我想。PNG-8和PNG-24都有。
好吧,我没有起诉任何人:)。我使用了;)
我的文件是125kb。
我的文件是823 KB
如果我忘记以正确的格式命名压缩文件,我就不能参赛了吗?
我认为我不会因为压缩文件名或文件夹名搞错了而扣分。但你确实需要在文件夹中有一个index.html文件。用其他方式寻找组织结构会花费太多时间。
我确实喜欢那个主意 (; 我没有时间参加比赛,但昨晚我花了几小时玩乐。出于好奇,我想看看其他作品 - 迫不及待地想要看到结果 (; 这是我的:http://mwit.info/css-tricks
(没有字体技巧,最小限度地使用继续阅读按钮,没有条件样式,没有 js)
标记是干净的,在 FF 中看起来很流畅,但在 IE 6 中,你的最小高度有点乱。
除此之外,做得很好。祝你好运。
取消上面那条评论,我的意思是 iPhone 版本。但我认为这不算数。做得很好:p
嘿,Chris,整个项目做得很好,你非常慷慨地为海地“筹集”了资金。做得确实很好。
哎呀,糟糕!我以为我说的是星期五 :/ 一直在做这个项目,哈哈:p 我希望你能再举办一次这样的比赛,这很有趣!
很高兴有这么多人参加!祝大家好运!:)
无国界医生组织是一个很好的选择。我在法国为这个组织工作过,担任视频编辑(MSF),他们真是好人,组织得很好。绝对是一个值得信赖的非政府组织。
真可惜,我因为一个紧迫的项目而非常忙碌,我想花更多时间在我的参赛作品上。无论如何,感谢这个很酷的 CSS 挑战,并向西班牙致敬:)
这是一个非常有趣的挑战。设计具有欺骗性地具有挑战性。非常好的练习。
不知何故,我找到了这个页面,我一直在寻找之前从未使用过的 WordPress,但现在我想把它放到我的页面上……所以感谢“空白主题”。
即使它不像我希望的那样空……:-)
有一些东西我甚至不知道是什么,比如
而 wp_head() 似乎链接到 jQuery ???……我不知道 WordPress 需要 jQuery
抱歉,我想在 digwp.com 上写它
我今天会一直猛烈地踢自己……我的参赛作品准备在凌晨 4 点(太平洋时间)提交,还有很多时间……然后发现截止日期是昨天。唉。既然它没有参加比赛,那就没什么害处了
-Michael
http://ctec.clark.edu/~mmcgu5853/explode/#
你的 css 中存在一个巨大的 :hover 故障!在任何悬停时都将图像投射。供参考。哈哈。
这样你就可以看到底层代码了。再看看。
我不明白为什么你需要在悬停时显示你的代码。我们都可以查看源代码并看到它。它只是让你的布局表现得怪异。
我尝试过,但我一直在工作中太忙了。我希望很快就会有另一个。我真的很喜欢这个主意!
哇,很多参赛作品
期待着结果和参赛作品的展示,看看 Web 开发人员是如何做到的会很有趣
对设计来说,这是一个有趣的挑战
Al
不幸的是,我没有时间参加 :( 当你发布它们时,Chris,看看人们做对了什么,做错了什么会很酷。我可能还是会自己做。最好的学习方法就是深入研究并去做。
也就是说,如果你能指出他们做对了什么,做错了什么。
哇,135 个其他参赛作品,我肯定要击败他们:P
但无论如何,像每个人一样,我认为我很有机会,感谢 Chris 主办了这场比赛。
只是在查看比赛的状况。哇,135 个!
不过,我很有信心。祝所有其他参赛者好运:)
我们正在努力,可能下周我们会发布结果。
二月是一个疯狂的工作月,所以我完全错过了 CSS 挑战。真可惜!看到自己在竞争中处于什么位置,得到评分和反馈会非常有用。这个周末我会完成练习,为了我自己学习。如果你不介意分享,人们完成练习花了多少时间?
大约 8 个小时,连续不断;)