nfsworld

Работы на конкурс Хэллоуин

Recommended Posts

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

Результат вставляем в виде ссылки на сайт jsfiddle.net, ссылку прячем в тегах [ hide ] и [ /hide ] (без пробелов). Если выставляется не одна, а несколько работ, публикуйте их в одном сообщении.

Share this post


Link to post
Share on other sites

Описание:

Internet Explorer в маске Франкенштейна. Кстати, из за отсутствия вендорных префиксов на webkit и(наверное, так как выше 9 explorer’а не пробовал) ms оно отображается довольно криво, хотя у меня есть подозрения что с префиксами все равно будет не правильно.

Сама работа:

full size: http://jsfiddle.net/...mbedded/result/

small size: http://jsfiddle.net/...mbedded/result/

Share this post


Link to post
Share on other sites

Тоже поучаствую:

http://jsfiddle.net/caprella/FrdJk/

Комментарий:

Проверено в Chrome 30.0, FF 23.0.1, IE10. В FF не совсем корректно рендерится border при закругленных углах с определенными значениями border-radius (см. попу паука и белые однопиксельные полосы). Так и не смогла побороть их - буду признательна за подсказку от знающих людей. Нашла похожую проблему на stackoverflow и остановилась на том, что это может быть багом FF.

Share this post


Link to post
Share on other sites

Фото монстра:

http://jsfiddle.net/PadVonE/JNFTE/

Досье на монстра:

Крамм (Krumm, Нечупара) — как и у всех членов его семьи, глазные яблоки Крамма не прикреплены к телу и он носит их в руках, что вызывает определённые трудности, когда перед ним возникает необходимость использования обеих рук (в этом случае он помещает свои глаза в рот). Основным оружием Крамма в пугании людей является невыносимый смрад его подмышек. Крамм обладает хорошим аппетитом и страдает от боязни высоты.

Share this post


Link to post
Share on other sites

Мой не совсем монстр:

http://jsfiddle.net/...mbedded/result/

Желание сделать этого персонажа появилось уже давно, но никак руки не доходили.

Может немного не вписывается в тематику, не судите строго.

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