CSS3设计大赛排名

让你真正关心的CSS3兴奋,上个月,我们宣布CSS3设计大赛,并鼓励设计师的实验,并获得创意用CSS3。正如预期的那样,我们已经收到了许多的创意和原始资料。选择比赛的优胜者,我们认为技术或方法,其独特的创意。的想法更重要的比执行。

这个过程中已采取了很多时间,因为它是不容易的,因为我们收到了不少创意的意见书:然而,决定必须采取的,所以我们彻底从一个比赛进入到另一个。并在作出决定。所以,今天,它的时间公布获奖者,并提交意见书的较量。

请注意,比赛结果是实验,不一定看,或工作在不同的浏览器都。下面介绍的技术,应被视为创新,创造性的方法展示什么可实现纯CSS3和创造性思维位。请随时向这些思想建设,以创造更多的技术和设计解决方案,使他们为设计界提供。

 

第一名:CSS3的图表

CSS3的图表[预览|下载]
此技术是JavaScript和使用中的图像,例如,没有实验的CSS3图表。我们想念这里清洁的标记和表格数据的适当标记,但使用CSS3选择器是真正令人印象深刻:第n个孩子目标,转换,梯度和使用中的过渡。设计是由来自美国的肖恩哦

001

002

第二名:CSS3的魔方

CSS3的Rubiks魔方[预览|下载]
一个CSS3的设计有趣的想法。设计师的想法是创建一个导航菜单:虽然它不是定期航行非常用户友好从事组合网站,它可能是有趣的。梯度和使用中的转换。由来自意大利的弗朗西斯Benanti和Maicol Zenatti设计。

003

第三名:CSS3D

CSS3D [预览|下载]
你手边有你的3D眼镜?如果是的话,把它们和观察这种三维立体效果,用CSS3创建的。在所有的现代浏览器中的作品,也iPhone上。3D红青色眼镜。simurai从荷兰设计。

004

第四名:CSS3的怪物BLOB

CSS3的怪物BLOB [预览|下载]
一个CSS的怪物,与纯CSS3的创建。还检查了BLOB的弟弟,CSS3怪兽龙。不用说,CSS怪物是可伸缩的。眼动画jQuery的视差效果。由来自法国的塞巴斯蒂安Plaignaud设计。

005

第五名:CSS3的:在时间的纵

CSS3的一个时间裂谷[预览|下载]
有趣的实验布局:标准的HTML / CSS网站一直垂直和水平。该条目显示,如果一个网站可以实现翻转45度角。在行动转换和变换。设计麦克斯韦伯顿从美国。

006

恭喜!

我们的CSS3设计大赛的获奖者表示祝贺,我们再次sincerley感谢你的一切,我们已经收到了很大的条目。我们非常感谢您的时间,创造性思维,我们尊重你的工作和努力。所有获奖者将在未来24小时内联系。下面你会发现比赛中的其他条目的详细介绍。非常感谢您,并请参加下一次!

CSS3的Jewelcase

CSS3的Jewelcase [预览|下载]
“我爱音乐和封面,所以这是一个不错的小项目,探索一些CSS3特性。”设计的Bouke Regnerus来自荷兰。

007

CSS3的Vicero

CSS3的Vicero [预览|下载]
“我来到这个想法时,我正在整理我的电影我的电影流服务器上的所有。它会这么好,有一个网络接口,这是一个Web服务器上同一台机器上滚动。但如果你没有服务器,只是有普通DVD / BR的,那么你可以键入的电影是在架子上。所以,我们应该怎样看今天呢?这一主题的最好经历在Safari /铬,因为一些CSS3的影响;但它的作品在FF,IE和Opera也“ADIS从瑞典Kurtalic设计。

008

对CSS3的iPad与阴影

对CSS3的iPad与阴影[预览|下载]
“我有一个位在本次比赛的疯狂。我一直在尝试用CSS3位。但是,当我看到这个比赛,不过,我觉得我的自我.. 嘿,让我们检查在W3规范。出现了以上只是圆角(这是伟大的方式)。使用后几个小时阅读。我惊呆了…… whow!3D效果,阴影。我在想…… 也可涂在CSS3使用正方形,圆形……我坐在我的手在阅读有关CSS3的一个iPad。我放在桌子上,…,以为我现在看到的这个图片,应该是有可能使刚刚用CSS3。最好的解决方案是在谷歌Chrome浏览。“设计莫滕Dischington卡尔松又名琼斯先生

009

CSS3的时间机

CSS3的时间机器[预览|下载]
“使用jQuery触发CSS3的动画在”时间Machine’时尚的小例子。“设计弥敦道伯内特来自美国。

010

对CSS3的CSS效果

CSS3的CSS效果[预览|下载]
“当我开始学习CSS3的实验游乐场开始- CSS动画。有五个简单的循环效应(动画)。每一个使用JavaScript最初设置的环境,但在那之后,一切都通过CSS动画循环。“设计河野洋平Shimomae来自加拿大。

011

CSS3的书籍

CSS3的图书[预览|下载]
“这样的设计允许您将在的”columnified布局p任何内容的数量,使得站点范围灵活,完全可定制的’书’的感觉。它使用的多列布局(与1 Opera和IE的JavaScript的解决方案,两个浏览器对CSS3的多列模块,到迄今为止,我不支持这个模块-这一解决方案1塞德里克Savarese的修改版本CSS3的多column.js,使用CSS形状,边界半径,变换,箱阴影和渐变创建书的外观相结合。

通过JavaScript(pageturn.js)实现翻页。送入不同的样式以及通过Javascript的浏览器,以检测是否支持多列或不(stylesheet.js -基本的浏览器检测,假设是Opera,Firefox,Safari和Chrome用户更新他们的浏览器定期)。由于没有图像已使用此模板,总定制的外观很容易实现(此外,CSS是注释)。对于如何在两列,多页面布局工作充分说明,请访问下面的教程。“设计来自比利时的彼得·克拉多克

012

CSS3的火箭矮人

CSS3的火箭人[预览|下载]
“每当我为自己的项目上工作,我喜欢尝试和学习新的东西。本次大赛给我一个机会与CSS3的发挥,而不必担心客户问为什么在一些浏览器,而不是在其他。我好奇的是最主要的关键帧动画,这是我听说过,但没有发挥所有的东西。我很高兴,我进入比赛的唯一原因,我学到了很多东西。我不知道用CSS过渡和动画工作是多么容易。这次演习,我对未来真的很激动。我不能等着看明天的新秀设计师使用纺纱剑和龙喷火。“ 来自美国的詹姆斯·韦基奥设计。

013

CSS3的Wii的ISH思想

CSS3的Wii的ISH思想[预览|下载]
“对CSS3作为举办一些图像的想法只是一点点。一些JS一起工作真的很好。“设计来自英国的斯蒂芬·库克

014

CSS3的视频CSS

CSS3的CSS [预览|下载视频]
“这是一个JPEG文件中的隔行扫描视频。而不必每帧在其共同的顺序,每行与行的下一帧交错。所以,你可以看到第一行的第一帧,然后在第一行的第二帧,第一行的第三架等。JPEG文件大小的限制,这样一来就能有很多帧,我在一个16×16格的行已经重新排序。网格的左上角是第一排,旁边的权利是第二行,接下来的第三,在未来colunm我们的n +16 th行。这是代码生成的JPEG文件。其中名为帧a0001.jpg,a0002.jpg,a0003.jpg …

<php
$num_img=128;
$out2=imagecreatetruecolor(256*16, 16*$num_img);

for ($j=0; $j<$num_img; $j++)
{
$num=$j*4+10001;
$filename="xplsv/a".substr($num, -4).".jpg";
$out=imagecreatetruecolor(256, 256);
$img=imagecreatefromstring(file_get_contents($filename));
imagecopyresampled($out, $img, 0, 0, 0, 0, 256, 256,
imagesx($img),
imagesy($img));
for ($i=0; $i<16; $i++)
{
for ($n=0; $n<16; $n++)
{
imagecopy($out2, $out, $n*256,
$i*$num_img+$j, 0, $n+$i*16, 256, 1);
}
}
imagedestroy($img);
imagedestroy($out);
}

imagepng($out2, 'test.png');

?>

然后,我使用的CSS位移我在可乐中使用的地图,可以和其他位移图才算是Ajax为我所做的。位移映射解交织的JPEG文件。然后,用CSS3取代每行的背景位置,我得到的视频效果。最后,我添加了一个了不起的杂志上顶部的透明PNG视频创建叠加效应。我真的很喜欢与形状的网站上添加视频,它看起来真的很不错。我想补充说,这是一个疯狂的方式来增加视频和任何真正的目的,它不应该被使用。当我做的事情就是这样只是纯粹的怪胎娱乐,并表明这是可能的。我会建议为CSS3/HTML5有一个背景视频标签“。设计来自西班牙的哈维尔·罗马。

015

CSS3的Megans半径字体

CSS3的Megans半径字体[预览|下载]
“我是一个喜欢不时用CSS + HTML全文发挥的打印/网页设计师。我有实验排版激情,喜欢探索新的方式创造型。对于这个项目,可以调整字体改变,只是通过改变几个小图片到一个完全不同的面孔。“设计梅根·布朗·泰勒,您好,从檀香山美国。

016

CSS3的怪兽龙

CSS3的怪兽龙[预览|下载]
“,CSS怪物只用CSS创建矢量图像。”设计来自法国的塞巴斯蒂安Plaignaud

017

对CSS3的iMac

对CSS3的iMac [预览|下载]
“一个纯CSS的iMac -没有图像。你可以用它在屏幕上显示的东西。在这个例子中,我设置为幻灯片的图像的Flickr的饲料。它也是完全独立于分辨率。所有的相对规模-感受自由,它的规模或改变您的字体大小。我用了一些很酷的技术,包括CSS的梯度(和Safari径向渐变),CSS边界半径,文字阴影,甚至使用的Safari CSS 3D变换为踢!我用一些jQuery幻灯片Flickr的图片和图片标题叠加。总的来说,我认为它横空出世了。我有一定的人可以借此到一个新的水平。为任何人改变Flickr的饲料,并把自己的照片,如果他们想,它真的很容易。我希望看到那里的地方。精彩!我爱CSS3的!在工程的Firefox 3.5 +,歌剧10.5 +,Safari 4的+ +,但当然,谷歌Chrome 4.0 -看起来在Safari中最好的“设计。约书亚Gatcke来自墨西哥。

018

CSS3的一个图书的HTML5,CSS3和JavaScript

CSS3的一个图书的HTML5,CSS3和JavaScript [预览|下载]
“我想用对CSS3动画出血边缘的3D功能,而用JavaScript触发互动事件。使用的CSS动画是一个游戏,我也觉得有趣的东西。“设计从美国库尔特Zenisek

019

CSS3的相机

CSS3的相机[预览|下载]
“只用CSS3创建后备浏览器不支持CSS3的梯度渐变,这种”相机“。测试(工作):
谷歌Chrome
歌剧院10.54
火狐3.6.6“
由芬兰的的奥斯卡Lemstr米设计的?

020

根据海洋中的CSS3

在CSS3中海CSS3的[预览|下载]
“网页使用CSS3的海洋主题下,”卡罗罗萨蒂从美国设计。

021

CSS3的90年代

CSS3的90 [预览|下载]
“描述:我的想法是创建与使用CSS3变换形式desconstruction像大卫卡森,1非常90年代的设计风格。它仍然只是对Webkit的工作,因为过渡。“设计从巴西的法比奥·萨索

022

CSS3的杂志

CSS3的杂志[预览|下载]
“一本杂志的设计灵感从有线。内置使用A4尺寸。使用以下特点:透明的颜色,甚至多选择,旋转,文字阴影,箱阴影,边界半径,自定义字体。就已经很喜欢用于在6个小时的WebKit和Mozilla支持的概念,设计和HTML的差异,如果没有。CSS3的石头!“,由来自美国的阿南德Gorantala

023

CSS3的光剑

CSS3的光剑[预览|下载]
“我是一个巨大的”星球大战“书呆子,以及Web标准的怪胎。当然,这两个*啊哈*利益,必将最终碰撞。我很高兴CSS3的光剑,而不是我进精神病院入场。其实,我写我如何做这个CSS3的lightaber的教程,可以发现,  “设计由美国最大Luzuriaga

024

CSS3的非凡杂志标志

CSS3的非凡杂志标志[预览|下载]
“粉碎”杂志标志使用CSS3和一些JavaScript,以取代“,”与一个“C”设计“中的”德艺双馨“Ğ 来自菲律宾的尼科·卢纳

025

CSS3的专家库克

CSS3的专家库克[预览|下载]
“简单,因为它可能似乎这个模板在很大程度上依赖CSS3动画,转换和梯度,它使用各种选择和不同的CSS3效果,实现了设计,你看。”安德烈·奥普雷亚设计来自罗马尼亚。

026

CSS3的Visoki德卡尼寺

CSS3的Visoki德卡尼寺[预览|下载]
“CSS3的网页设计展示致力于塞尔维亚东正教的寺院Visoki德卡尼。”设计米洛斯Zekovic从塞尔维亚。

027

CSS3伪3D径向按钮

CSS3伪3D径向按钮[预览|下载]
设计制作的“易于使用的3D径向按钮。”丹尼斯·阿尔希波夫从俄罗斯。

028

CSS3的移动棒图

CSS3的移动棒图[预览|下载]
“使用CSS边界半径和动画创建一个简笔画,并使用jQuery添加移动控制。”设计Jeffri香港从印尼。

029

CSS3的图像经阴影

CSS3的图像经阴影[预览|下载]
“一个简单的CSS3技术申请扭曲的阴影元素。”设计来自美国的泰勒道森

030

CSS3的兔子

CSS3的兔子[预览|下载]
“只是在玩”设计的法比安斯基沃泰CSS3属性(兔)。

031

CSS3的 – 未来就在这里

CSS3的-未来就在这里[预览|下载]
“我的愿望是创造设计,显示了完整的概念,提出不同的能力和对CSS3方面。设计可能会显得你熟悉的,就是这样,因为我用您的网站上发布的模板的视野。我认为非常适当的情况下设计的,因为它的功能和捕捉用户的眼睛。老实说,我并没有时间去思考我自己设计的,但我认为我完成我的使命,展示设计师和开发人员,他们可以做更多的努力,这就是我还学到了一些新的东西。我希望我的设计将让别人重新考虑他们所使用的浏览器的可用性,并激励他们做一些动作,挺身而出。“安东尼奥从保加利亚Stoilkov设计。

032

033

034

CSS3的彩虹模板

CSS3的彩虹模板[预览|下载]
“天空和彩虹主题的网站模板设计”的设计从印度尼西亚安谷Pribadi

035

CSS3的完全新鲜的

CSS3的完全新鲜的[预览|下载]
“完全新鲜的是一个有趣的项目,不仅显示对CSS3的能力,而是要展现一个令人兴奋的设计,在弹出2维的帆布,干净和适当的标记。我倾向于简单的设计,印刷件,但我想这种设计感到“新鲜”的设计,因此,类似于汽车空气清新剂。它反映了在3维空间的有形的打印件。“ 来自美国的克里斯Nager设计。

036

进一步条目

下面是一个简要概述提交给大赛的进一步条目。

  • CSS3的导航帽子戏法[预览|下载]
    “这里是一个简单的方法,让游客知道哪些页面是使用简单的CSS移动导航菜单列表项权利。我添加了一个花哨的箭头,以增强疗效。通过给每个页面在身体标记和一个独特的类别,您的浏览器时,看到身体的ID,列表项匹配的类将使用CSS每个列表项的唯一ID。只要在HTML文件相同的目录,将用于花哨的箭。列表项目的位置“内”的CSS会导致移动到列表项的权利,这将直观地显示他们是在哪个页面的访问者。我用这种方法,在以下网站的客户很高兴。“设计的格雷格·斯彭斯
  • 对CSS3不能滑板不关心[预览|下载]
    “在日常的一天,一个90年代的滑板/垃圾主题,旨在探索CSS3的规则,可用于没有我们得到的所有常用浏览器的限制,跨浏览器的体面范围磨业务。“,旨在通过从新西兰的乔希·坎贝尔
  • CSS3的3D致敬[预览|下载]
    “这是我的第一跳,到CSS3的…我喜欢它!我将字体嵌入,转化活动,多列段,利用圆角,包括背景梯度。转化森林只适用于WebKit浏览器,创建一个很好的3D效果,但很好地呈现向下对其他浏览器,而以下不同的方式在所有必需的浏览器上的跳跃悬停动画。“ 沃尔特Beardwood来自加拿大。
  • CSS3的承重横条[预览|下载]
    “一个CSS3的承重横条。CSS动画只能在Chrome和Safari。“乔尔美国Schwarting设计。
  • CSS3的个人投资组合[预览|下载]
    “设计Sikandar Aazam从印度。
  • CSS3的编带过预告[预览|下载]
    “页面即将与纸板,胶带,木材主题。确保你点击“提交”在WebKit浏览器,看到完整的效果!“由来自美国的罗伯特·德Ercole设计。
  • CSS3的非凡的CSS3影响[预览|下载]
    “一个排版的设计相结合的新CSS3特性。”设计添马舰艾登来自土耳其。
  • CSS3的这个菜单项[预览|下载]
    “最基本的导航菜单巧妙地在标签顶部的菜单风格。”设计丹比斯顿来自澳大利亚。
  • CSS3的使命风格的呼叫[预览|下载]
    “由呼叫职务现代战争2装载屏幕的启发。没有内容块,固定的页眉和页脚动画。“ 来自美国的Jason
  • CSS3的图像3D菜单[预览|下载]
    “我本次比赛的项目是超过一个概念设计。我看到人们使用CSS3创建2D艺术和思想,所以我自己做的,但这个想法似乎太容易了。然而,使用CSS3的3D艺术是我还没有看到的东西!我想创造一个图像3D页面布局,使用CSS3。它采取了一些演奏周围的代码,以找到最好的方法产生图像的三维元素,但我肯定高兴,我的发现和兴奋。虽然3D元素被引入后,我觉得,通过它仍然缺乏。我需要更多的,我需要在三维空间中的相互作用。然后我创建一个三维导航栏作为按钮的行为。通过CSS3的缩放方法,我创建了后退按钮,鼠标悬停在三维空间内的假象,并处于活动状态的链接创建更多的用户互动的感觉。这仅仅是这个布局的开始,我打算扩大它创建一个完全设计的网页模板将纳入更多“按钮,如”整个设计的互动。总体而言,本次比赛肯定已经把我推到用CSS3多玩,我真正高兴能成为一种Web标准!“设计来自美国的克里斯·约翰逊
  • CSS3的梦想家博客[预览|下载]
    “我觉得对CSS3和探索在现代网络时代的技术是伟大的。”由维杰北路Vanve设计。
  • CSS3的外国人菜单[预览|下载]
    “当然,这并不是为比赛……(有没有时间,发明somethink优秀T_T)这仅仅是你开心:)他让我微笑。希望他的能力会影响你太:D“的由塔拉斯Kharuk设计。
  • CSS3的OSX的像基座[预览|下载]
    “页/标签交换Mac OSX的应用程序的停靠。” 阿列克西Grön来自芬兰的设计。
  • CSS3的Autom.ato [预览|下载]
    “我们的想法是只使用代码做平面设计的碎杂志曾发表了我inpiration这peace.The tipographic海报。我只是试图做的,一个不同的。我也启发了由巴西艺术家,亚伯拉罕Palatnik(谷歌吧:))。他被称为科技艺术的先驱。光他的作品很漂亮,我做这项工作之前,我看着他们一点点。哦!autom.ato,我差点忘了,是我belong.We不会有我们的博客还没有一个艺术团体,可能是一个很好的继续CSS3学习动机。“设计海黛利马从巴西。

最后点击

CSS3的超级马里奥3D动画[预览|下载]
不幸的是,这个项目被提交太晚了,不能参加比赛,但肯定是值得一提。这里是从开发商的见解:“我的最新CSS3的实验没有图像(Internet Explorer的纯CSS标志)后,有朋友建议以创建一个三维动画3D复古马里奥GIF图像基于Cezkid由超级马里奥图标。嗯,这是两个星期的工作结果-三维动画超级马里奥图标内置CSS3中完全没有图像“设计。来自德国的安德烈亚斯·雅各布

037

 

原文:http://coding.smashingmagazine.com/2010/07/12/css3-design-contest-results/comment-page-1/#comment-581545