Vlad

Мини-конкурс «Новогодняя открытка»

Recommended Posts

Необходимо сделать анимированную открытку к Новому год, используя традиционные атрибуты: ёлочку, снеговика, Деда Мороза, снежинки и др.

  • Открытка обязательно должна включать анимацию, выполненную с помощью CSS3, JavaScript или их комбинаций.
  • Допустимо использовать любые изображения, скрипты, библиотеки JavaScript, специализированные программы для анимации.
  • Запрещено применять только две вещи: Flash (или его аналоги вроде Silverlight) и анимированный GIF.
  • Размер открытки должен быть не менее 500х400 пикселов.
  • Результат выставляем в специальной теме форума в виде ссылки на jsfiddle.net.
  • Продолжительность анимации должна быть не менее 4 секунд или зациклена.
  • Надпись «С Новым годом!» не забываем, а то какая же это открытка.

Принять участие в конкурсе может любой желающий, зарегистрированный на форуме htmlbook.ru.

 

Результат выставляем в специальной теме форума.

Приём работ начинается с 1 декабря и завершается 15 декабря в 10:00 UTC (13 часов Киева, Минска; 14 Москвы; 16 Екатеринбурга; 17 Омска; 18 Красноярска; 19 Иркутска; 20 Якутска).

Все работы будут выставлены на общее голосование, победителем становится участник, набравший максимальное количество голосов к 10:00 UTC 21 декабря. Участники, занявшие первые три места получают книги по их выбору, плюс 30 к репутации и медальку победителя. Все участники, независимо от занятого места, получают плюс 10 к репутации и медальку лауреата.

Share this post


Link to post
Share on other sites

А есть минимальные ограничения анимации? Например, если в открытке будет только снежинка одна падать, это засчитается?

Share this post


Link to post
Share on other sites
если в открытке будет только снежинка одна падать
это не новый год. это дипрессия 

Share this post


Link to post
Share on other sites

А есть минимальные ограничения анимации? Например, если в открытке будет только снежинка одна падать, это засчитается?

 

Внёс уточнения на этот случай.

Share this post


Link to post
Share on other sites

 

если в открытке будет только снежинка одна падать
это не новый год. это дипрессия 

 

Может там снежинка в 3D )))

Share this post


Link to post
Share on other sites

 

 

если в открытке будет только снежинка одна падать
это не новый год. это дипрессия 

 

Может там снежинка в 3D )))

 

Ага, 3D в виде только box-shadow

Share this post


Link to post
Share on other sites

Народ, похоже, время зря не терял, уже несколько открыток выставили.

Share this post


Link to post
Share on other sites

Народ, похоже, время зря не терял, уже несколько открыток выставили.

 

Ну я создал тему для работ, а то тебя что-то не было, люди начали спрашивать куда скидывать результаты своего творчества

Share this post


Link to post
Share on other sites

Необходимо сделать анимированную открытку к Новому год, используя традиционные атрибуты: ёлочку, снеговика, Деда Мороза, снежинки и др.

  • Открытка обязательно должна включать анимацию, выполненную с помощью CSS3, JavaScript или их комбинаций.
  • Допустимо использовать любые изображения, скрипты, библиотеки JavaScript, специализированные программы для анимации.
  • Запрещено применять только две вещи: Flash (или его аналоги вроде Silverlight) и анимированный GIF.
  • Размер открытки должен быть не менее 500х400 пикселов.
  • Результат выставляем в специальной теме форума в виде ссылки на jsfiddle.net.
  • Продолжительность анимации должна быть не менее 4 секунд или зациклена.
  • Надпись «С Новым годом!» не забываем, а то какая же это открытка.

Принять участие в конкурсе может любой желающий, зарегистрированный на форуме htmlbook.ru.

 

Результат выставляем в специальной теме форума.

Приём работ начинается с 1 декабря и завершается 15 декабря в 10:00 UTC (13 часов Киева, Минска; 14 Москвы; 16 Екатеринбурга; 17 Омска; 18 Красноярска; 19 Иркутска; 20 Якутска).

Все работы будут выставлены на общее голосование, победителем становится участник, набравший максимальное количество голосов к 10:00 UTC 21 декабря. Участники, занявшие первые три места получают книги по их выбору, плюс 30 к репутации и медальку победителя. Все участники, независимо от занятого места, получают плюс 10 к репутации и медальку лауреата.

я хочу принять участие

Share this post


Link to post
Share on other sites

Организатор конкурса возможно не засчитает данную работу. А вы молодец продолжаете в том же духе? хех :)

Share this post


Link to post
Share on other sites

Организатор конкурса возможно не засчитает данную работу. А вы молодец продолжаете в том же духе? хех :)

Продолжаю

Share this post


Link to post
Share on other sites

Ну вот, проворонил конкурс, увидел только голосовалку с результатами. На этой неделе как раз сделал открытку для родной конторы подходящую по требованиям. Покажу вне конкурса. http://www.mobak.ru/ny2014/ 

Чтобы не было сомнений в подлинности воткнул комментарий в начале body.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • 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