Чтобы вы действительно взволнован о CSS3, в прошлом месяце мы объявили о CSS3 дизайн Contest и призвали дизайнеры поэкспериментировать и получить творческую с CSS3.Как и ожидалось, мы получили много творческих и оригинальных материалов.Чтобы выбрать победителей конкурса, мы рассмотрели оригинальность метода или подхода и его уникальность.Идея важнее, чем execution.

Этот процесс занял много времени, как это wasn’ T легко, потому что мы получили немало творческих представлений: Тем не менее, решение должно быть принято, и поэтому мы тщательно переходил от одного участия в конкурсе на другую.И решение было принято.Таким образом, сегодня it’ пора объявить победителей и представить представлений в contest.

Пожалуйста, обратите внимание, что результаты конкурса experimental и не обязательно выглядеть и работать одинаково в разных браузерах.Методы, представленные ниже, следует рассматривать как инновационный, творческий подход демонстрация того, что может быть достигнуто с чистого CSS3 и немного творческого мышления.Пожалуйста, не стесняйтесь опираться на эти идеи, чтобы создать дополнительные методы и дизайнерские решения и сделать их доступными для проектирования community.

Первое место: CSS3 Charts

CSS3 Чарты [ preview | download]Этот метод является примером экспериментальных графиках CSS3, без JavaScript и изображений в использовании.Мы скучаем по чистой разметки и надлежащего разметки для табличных данных здесь, но использование CSS3 селекторы поистине впечатляет: nth-child :target, трансформации, градиенты и переходы в использовании.Дизайн Шон Oh от USA.

Второе место: CSS3 Rubik’ S Cube

CSS3 Кубик Рубика [ preview | Download]Интересные идеи для дизайна CSS3.Designer’ Идея с заключалась в создании навигационного меню: хотя it’ с не очень удобным для регулярной навигации, она может быть интересна для привлечения портфолио сайтов.Градиенты и преобразований в использовании.Дизайн Франческо Benanti и Maicol Zenatti от Italy.

Третье место: CSS3D

CSS3D [ preview | download]У вас есть 3D-очки под рукой?Если да, надел их и наблюдать этот эффект стереоскопического 3D, созданный с CSS3.Работает во всех современных браузерах, а также на iPhone.3D красно-голубых очков требуется.Дизайн simurai от Netherlands.

Четвертое место: CSS3 Монстры Blob

CSS3 Монстры Blob [ preview | download]Монстр CSS, созданный с чистого CSS3.Кроме того, проверить Blob’ брат, CSS3 Монстры Dragon.Само собой разумеется, что монстр CSS является масштабируемой.Глаз анимированы с jQuery’ эффект с Parallax.Дизайн Sebastien Plaignaud от France.

Пятое место: CSS3: Rift в Time

CSS3 Rift во время [ Preview | download]Интересные Схема экспериментальной установки: стандартный HTML / CSS веб-сайтов всегда были вертикальные и горизонтальные.Эта запись показывает, что может быть достигнуто, если сайт переворачивается на 45 градусов.Переходы и преобразования в действии.Дизайн Максвелла Burton от USA.

Поздравляем

Мы поздравляем победителей конкурса дизайна CSS3 и мы снова sincerley поблагодарить вас за все великие записи, которые we’ ве получил.Мы ценим Ваше время, творческой мысли и мы уважаем вашу работу и усилия.Все победителями свяжутся в течение 24 часов.Ниже you’ сможете найти подробный обзор других записей конкурса.Спасибо вам большое, и, пожалуйста, присоединитесь в следующий раз

CSS3 Jewelcase

CSS3 Jewelcase [ preview | download]“ Я люблю музыку и обложки, так что это был хороший маленький проект, чтобы исследовать некоторые CSS3 features.” Дизайн Bouke Regnerus от Netherlands.

CSS3 Vicero

CSS3 Vicero [ preview | download]“ Я пришел с этой идеей, когда я разбирал все мои фильмы на кино-поток-сервер.Было бы хорошо иметь веб-интерфейс that’ S прокатки на веб-сервер на той же машине.Но если у вас нет сервера и просто регулярных DVD / BR, то вы можете ввести, где фильм на полке.Итак, что же мы видим сегодня?Эта тема лучший опыт в Safari / Chrome, потому что некоторые CSS3 эффект, но он также работает в FF, IE иOpera.” Дизайн Адис Kurtalic от Sweden.

CSS3 Ipad с Shadow

CSS3 Ipad с тенью [ preview | download]“ Я немного сумасшедший в этом конкурсе.I’ ве экспериментировал немного с CSS3.Но когда я увидел этот конкурс, я, хотя на себе ..эй, let’ S проверить эту технические характеристики в w3.Там есть более, чем просто закругленные углы (который является отличным кстати).После использования пару часов чтения.Я был ошеломлен .. whow!3D-эффекты, тени.И я думаю ..какие могут быть окрашены также могут быть сделаны в CSS3 использования площадей, circles… Я сидел с IPad в руках чтение о CSS3.Я положил его на table… и мысли, это изображение я вижу сейчас, должно быть возможно сделать только с помощью CSS3.Решение лучше всего просматривать в Google Chrome.” Дизайн Morten Dischington Carlsson ака Mr.Jones.

CSS3 время Machine

CSS3 Time Machine [ preview | download]“ Небольшой пример использования JQuery, чтобы вызвать CSS3 анимации в ‘ Время Machine’-fashion.” Дизайн Nathan Burnett от USA.

CSS3 CSS Effects

CSS3 CSS эффекты [ preview | Download]“ Это началось как экспериментальная площадка, когда я начал изучать CSS3 — CSS анимации.Есть пять простых циклов эффекты (анимация).Каждый использует JavaScript, чтобы сначала установить окружающей среды, но после этого, все петли через CSS animation.” Дизайн Yohei Shimomae от Canada.

CSS3 Book

CSS3 книга [ preview | download]“ Такая конструкция позволяет размещать любое количество содержания в ‘ columnified’ DIV компоновки, позволяя веб-узле гибкий и полностью настраиваемый ‘ книга like’ чувствовать.Он использует CSS3 нескольких столбцов модуль для мульти-колонки (и решением JavaScript для Оперы и IE, двух браузеров, которые на сегодняшний день не поддерживают этот модуль — этого решения является модифицированной версией Седрик Savarese’ S css3-мульти-column.js, и использует сочетание форм CSS, граница радиуса, преобразования, коробка-теней и градиентов создать книгу appearance.

Перелистывания страниц осуществляется через Javascript (pageturn.js).Различных стилей подаются в браузерах через Javascript, а также с тем, чтобы обнаружить ли несколько столбцов поддерживается или нет (stylesheet.js — основных обнаружения браузера, при условии, что Opera, Firefox, Safari и Chrome пользователям обновить своибраузеры регулярно).В связи с отсутствием изображения были использованы в этом шаблоне, общая настройка внешнего вида легко достигается (кроме того, CSS является аннотированный).Для полного объяснения того, как две колонки, многостраничные работы макета, пожалуйста, посетите следующую tutorial. ” Дизайн Петр Craddock от Belgium.

CSS3 Ракетно Man

CSS3 Rocket Man [ Preview | download]“ Всякий раз, когда я работаю над проектом для меня, я хотел бы попробовать и узнать что-то новое.Этот конкурс дал мне шанс сыграть с CSS3, не беспокоясь о клиентах спрашивают, почему он работает в некоторых браузерах, а не в других.Главное Мне было любопытно, был ключевой кадр анимации, это было что-то, что я слышал о, но не играл с на всех.Я рад, что я вошел в конкурсе по той единственной причине, что я многому научился.Я не понимаю, как легко было работать с переходов и анимации с CSS.Это упражнение мне очень рады, о будущем.Я can’ T ждать, чтобы увидеть завтрашние новичков-дизайнеров, использующих эту для прядения мечей и драконов, которые дышат fire.” Дизайн Джеймс Vecchio от USA.

CSS3 Wii-иш Idea

CSS3 Wii-иш идея [ preview | download]“ Просто немного CSS3, как идея для проведения некоторых изображений.Будет работать действительно хорошо вместе с некоторыми JS.” Дизайн Стивен Cook от UK.

CSS3 видео CSS

Видео CSS3 CSS [ preview | download]“ Это чередованием видео в файл JPEG.Вместо того, чтобы каждый кадр в общем порядке, каждая строка чередуется со следующей строки кадра.Таким образом, вы можете увидеть в первом ряду первого кадра, то первая строка второй кадр, первая строка третьего кадра и так далее.Jpeg файлы размером ограничено, поэтому, чтобы быть в состоянии иметь много кадров, I’ нас заказана строк16× 16 сетку.В левом верхнем углу сетки первом ряду, рядом справа во втором ряду, следующего третьим, а в следующем colunm мы имеем п шестнадцатом ряду.Это код для создания файла 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');

?>

Тогда, I’ м с использованием CSS карты смещения I’ уже использовали в Кокс и другие карты смещения я сделал для Ajaxian.Перемещение карт-де-чередования файлов JPEG.Затем, перемещая фона положение с CSS3 для каждой строки, я получаю видео-эффект.И, наконец, я добавил Smashing Magazine прозрачных PNG сверху на видео, чтобы создать эффект наложения.Я очень хотел, чтобы добавить видео на сайт с формами, он выглядит действительно хорошо.Я хотел бы добавить, что это сумасшедший способ добавить видео, и что она не должна быть использована для любой реальной цели.Когда я делаю такие вещи, как это только для чистого развлечения и выродка, чтобы показать, что это возможно.Я хотел бы предложить для CSS3/HTML5 иметь фон-видео tag.” Дизайн Хавьер Римская от Spain.

CSS3 Megans радиус Font

CSS3 Megans радиус шрифт [ preview | download]“ Я печати / веб-дизайнер, который любит играть с CSS HTML время от времени.У меня есть страсть к экспериментальной типографики, и хотели бы изучить новые способы создания типа.Для этого проекта, шрифт может быть настроен на изменения в совершенно другое лицо, просто изменив несколько небольших images.” Дизайн Megan Brown-Taylor из Гонолулу, Гавайи, USA.

CSS3 Монстры Dragon

CSS3 Монстры Dragon [ preview | download]“ CSS Монстры векторные изображения созданы только с CSS.” Дизайн Sebastien Plaignaud от France.

CSS3 iMac

CSS3 ИМАК [ preview | download]“ Чистая ИМАК CSS – нет изображения.Вы можете использовать его, чтобы увидеть что-либо на экране.В этом примере я могу настроить поток Flickr изображений в виде слайд-шоу.Он также полностью зависит от разрешения.Все относительные размеры – стесняйтесь масштабировать его вверх или вниз при смене размера шрифта.Я использовал некоторые интересные методы, включая CSS градиенты (Safari и радиальных градиентов), CSS границы радиуса, текст-тень, даже использовал Safari CSS 3D преобразования для кайф!Я использовал некоторые JQuery, чтобы сделать слайд-шоу с изображениями Flickr и наложений изображения титул.В целом, я думаю, что это оказалось большим.Я уверен, что люди там могли взять это на следующий уровень.It’ действительно легко для любого изменения подачи Flickr и положить в свои собственные фотографии, если они хотят.Я надеюсь, что это где-то там.Захватывающие!Я люблю CSS3!Совместимость: Firefox 3.5, Opera 10.5, Safari 4, Google Chrome 4.0, но, конечно – выглядит лучшим в Safari.” Дизайн Joshua Gatcke от México.

CSS3 книгу, полную HTML5, CSS3 и JavaScript

CSS3 книгу, полную HTML5, CSS3 и JavaScript [ preview | download]“ Я хотел использовать передним краем 3d возможностей CSS3 & анимации при работе с JavaScript для запуска интерактивных событий.Используя CSS анимаций для игр является то, что я также нахожу intriguing.” Дизайн Kurt Zenisek от USA.

CSS3 Camera

CSS3 камеры [ preview | download]“ Это “ camera” была создана исключительно с CSS3, с резервным градиентов для браузеров, которые не поддерживают CSS3 градиентов.Протестировано (и работают) на:Google ChromeOpera 10.54Firefox 3.6.6.”Дизайн Оскар Lemstr м от Finland.

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров