mrnobody

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

Recommended Posts

Задание:

 

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

 

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

 

eafeb441b72e.jpg

 

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

Edited by gvardi

Share this post


Link to post
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/

Share this post


Link to post
Share on other sites

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

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

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

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

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

 

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

 

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

 

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

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

  • Member Statistics

    46,389
    Total Members
    3,128
    Most Online
    Неугомонный
    Newest Member
    Неугомонный
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.



  • Спрашивают сейчас

  • Пишут сейчас

    • https://jsfiddle.net/q2Lfaew5/2/ Пытаюсь добавить иконку к ссылке. Казалось бы, довольно простая задача, но есть несколько условностей, из-за которых пока ничего не получается. 1) Текст должен быть inline-элементом. Для того, чтобы к каждой строке применялась граница, и пустота в них была не кликабельной (как в первом примере). 2) Иконка всегда должна быть вертикально отцентрированная. Реально ли это сделать?
    • Здравствуйте. Почему в этом примере https://jsfiddle.net/pk2rgj3o/4/ в IE11 не срабатывает max-width для изображения? Мне нужно, чтобы фото не выходило за пределы родителя, при этом его ширина и ширина flex-item оставались автоматическими. В данный момент я нашел два решения этой проблемы: 1) width: 100% для фото и 2) flex: 1 для flex-item, но они оба не подходят.
    • Задаю контенту фиксированную высоту, но все равно он под футером. Вы не знаете, лучше оставить высоту футера auto?   <main class="project">
          
          <div class="blog-container">
              <div class="blog-header">
                  <div class="blog-cover">
                      
                  </div>
              </div>
              <div class="blog-body">
                  <div class="blog-title">
                      <h1><a href="#">Lorem ipsum dolor sit amet</a></h1>
                  </div>
                  <div class="blog-text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque sapiente quae enim eius sit ratione doloremque, non quo, quaerat soluta sint aspernatur nostrum doloribus dolor perferendis saepe numquam molestiae rerum. Iusto explicabo molestias cumque expedita officia repellendus excepturi vitae iure.</p>
                  </div>
                  <div class="blog-tags">
                      <ul>
                          <li><a href="#">Lorem</a></li>
                          <li><a href="#">ipsum</a></li>
                          <li><a href="#">dolar</a></li>
                          <li><a href="#">consectetur</a></li>
                      </ul>
                  </div>
              </div>
              <div class="blog-footer">
                  <ul>
                      <li class="published-date">4 days ago</li>
                  </ul>
              </div>
          </div>     
      </main> <footer>
          
      <nav>
          
      <a href="index.html">HOME</a>
                      <a href="projects.html">PROJECTS</a>
                      <a href="blog.html">BLOG</a>
                      <a href="contact.html">CONTACT</a>
                      <a href="about.html">ABOUT</a>
                      <a href="services.html">SEVICES</a>
                      <a href="location.html">LOCATION</a>
                       </nav>
      <div class="logo">
          <a href="index.html"><img class="graphiclogo" src="logo.png" alt="logo"></a>
      </div>
      <div class="social">
          <a href="#"><img src="img/social/em.png" alt="em"></a>
          <a href="#"><img src="img/social/face.png" alt="em"></a>
          <a href="#"><img src="img/social/goo.png" alt="em"></a>
          <a href="#"><img src="img/social/inst.png" alt="em"></a>
          <a href="#"><img src="img/social/pint.png" alt="em"></a> </div> <p>Version 2019</p>
      </footer>
          <script src="js/script.js"></script>
      </body>                     .blog-container {
          background: #fafafa;
          border-radius: 5px;
          box-shadow: rgba(0,0,0,0.2) 0 4px 2px -2px;
          font-weight: 100;
          margin: 48px auto;
          margin-bottom: 100px;
          width: 50rem;
          height: 20px; } footer {
          width: 100%;
          height: auto;
          background: black;
          margin: 0 auto;
          text-align: center;
          padding-top: 25px;
          position:absolute; 
          bottom:0
      }
  • Popular Contributors