Работы на конкурс «Задание по CSS»

[Vezha]

Спасибо, буду знать

Действительно, правила применяются и без него, хтмл становится ещё меньше http://jsfiddle.net/4kTp9/9/

 

в CSS тоже можно убрать body

[gvardi]

Задание:

 

Используя CSS3 написать куб в трехмерном пространстве.

 

Куб должен корректно работать в последних версиях, Google Chrome, Mozila Firefox, Safari.

 

 

Если надежды больше нет и силы иссякли, то загляни сюда - http://jsfiddle.net/4kTp9/14/

Edited November 27, 2013 by gvardi

[lexxcode]

Раз такие пляски с кубиками, то выложу и свою старую наработку....

 

Задание: "css3 Cube and transition"

 

Куб на css3 работает во всех современных браузерах кроме IE (даже IE11, к сожалению)

 

Решение:

 

http://jsfiddle.net/alexriz/X8KNQ/

 

На весь экран:

http://jsfiddle.net/alexriz/X8KNQ/show/

 

---

 

Задание простой loader на css3: CSS3 Animation Loader

 

Решение:

http://jsfiddle.net/alexriz/anzMB/

 

На весь экран

http://jsfiddle.net/alexriz/anzMB/show/

[Softlink]

Поучаствую, пожалуй

1.Сделать диаграмму.

Условия: чтобы работало в самых свежих версиях браузеров, без картинок.

Реализация
http://codepen.io/Softlink/full/lDAbt
 

2. Сделать лоадер загрузки 

 

Условия: последние версии браузеров, зацикленная анимация, без картинок

 

Реализация
http://codepen.io/Softlink/full/mHkpq

 

Оба решения применялись\применяются в действующем проекте.

Бонус http://codepen.io/Softlink/full/Cjygm (делал просто так)

[sigma77]

Тоже поучаствую
 
1. Круговая диаграмма
 
Задание: используя следующий html-код получить круговые диаграммы - http://codepen.io/fainz777/full/whpfx
Цвета секторов - по желанию. Обратить внимание, что в последних двух диаграммах размер секторов разный.

Работать должно во всех современных браузерах.

<div class="circle a"></div><div class="circle b"></div><div class="circle c"></div><div class="circle d"></div><div class="circle e">   <div class="i"></div></div>

Вариант решения: http://codepen.io/fainz777/pen/whpfx

 

---

2. Главная страница сайта.

 

Задание: сделать главную страницу сайта с эффектом раздвижных дверей по образцу - http://codepen.io/fainz777/full/mFgap

Обратить внимание, что под центральной частью колонки также реагируют на наведение. Т.е. ссылка должна вести на раздел в любом месте, если она расположена над колонкой. Работоспособность во всех современных браузерах. Картинки и цвета на ваш вкус.

Пример с некоторыми визуальными изменениями используется в реальном проекте.

 

Вариант решения: http://codepen.io/fainz777/pen/mFgap

[gvardi]

Как будто в бой вышли танки ветераны.

[Vlad]

Как будто в бой вышли танки ветераны.

Участвовать могут все, в том числе танки-ветераны.