Jump to content

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


mrnobody
 Share

Recommended Posts

Задание:

 

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

 

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

 

eafeb441b72e.jpg

 

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

Edited by gvardi
Link to comment
Share on other sites

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

 

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

 

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

h_1385556455_3160934_dff477e67a.png

 

Решение:

 

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/

  • Like 1
Link to comment
Share on other sites

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

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

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

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

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

 

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

 

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

 

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

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

  • Like 4
Link to comment
Share on other sites

Тоже поучаствую :)
 
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

  • Like 3
Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy