Contests
40 topics in this forum
-
Участники идут в том порядке, как они сдавали работы. Участвовать в голосовании могут все, у кого не меньше 3 сообщений на форуме, у каждого есть только один голос. Голосование продлится до пятницы 30 сентября, 10:00 UTC. psywalker (http://css-live.ru/Portfolio/Form-forum/main-page.html) alexriz (http://alexriz.wme.od.ua/htmlbook/form/) Gidroplan (http://re-surs.ru/files/forma/forma.html http://re-surs.ru/files/forma/forma2.html) Akaciya (http://podag.ru/form_h5/) Julia (http://cocktail-ru.1gb.ru/) Синдром (http://we1st.tk/htmlbook/ver1/step1.html http://we1st.tk/htmlbook/ver1/step2.html http://we1st.tk/htmlbook/ver1/step3.html http://we1st.tk/htmlbook/ver1/step4.html …
Last reply by psywalker, -
-
- 39 replies
- 31.7k views
На тему «Сады Семирамиды» нарисовать картинку с помощью свойств CSS3, при этом следует соблюсти ряд условий. Минимальный размер картинки 800х600 пикселов, допустимо сделать её масштабируемой в зависимости от размеров окна браузера. В процессе работы нельзя использовать любые изображения (включая base64), SVG, VML, скрипты, библиотеки и тому подобное. Фактически должен быть только HTML и CSS. Работа должна корректно отображаться в современных браузерах Firefox 6+, Chrome 13+, Safari 5.1, Opera 12, IE10 (т.е. фильтры можно не включать). Картинка может содержать анимированные элементы также созданные с помощью CSS3. Это условие не обязательно, но «живая» картинка выглядит…
Last reply by MadMinimal, -
- 46 replies
- 30.7k views
Конкурс пройдёт с 15 по 27 сентября, приём работ завершается в 10:00 UTC (13 Киева, Минска, 14 Москвы, 15 Ташкента, 16 Екатеринбурга, 17 Омска, 18 Красноярска, 19 Иркутска, 20 Якутска). В конкурсе имеет право принять участие любой желающий зарегистрированный на форуме. Предварительная регистрация или заявка не требуется. Победитель определяется путём открытого голосования посетителей форума. Для участия в голосовании надо иметь не менее трёх сообщений, при этом можно голосовать сразу за нескольких претендентов. Места распределяются согласно набранным голосам. Если участников будет больше 20, то устроим двухэтапную систему. Вначале происходит отбор 10 лучших участников, з…
Last reply by Vlad, -
Лучший дизайн формы 1 2 3
by Vlad- 63 replies
- 28.5k views
Участники располагаются в том порядке, как сдавали работы. Где только один рисунок, даётся прямая ссылка на него, если работа с описанием и несколькими изображениями, то ссылка идёт на сообщение. Petro21 (http://www.fotolink.su/pic_b/1d1a5680f825c289f8a3cc794c4bd687.png) Verder (http://freeway-design.ru/files/form.png) s0rr0w (http://forum.htmlbook.ru/index.php?showtopic=29186&view=findpost&p=222128) Temiks (http://forum.htmlbook.ru/index.php?showtopic=29186&view=findpost&p=222187) AnnaP (http://forum.htmlbook.ru/index.php?showtopic=29186&view=findpost&p=222193) ctpz (http://narod.ru/disk/24793330001/Форма на конкурс.psd.html) Shader (http://forum.…
Last reply by Vlad, -
С 5 по 12 сентября на форуме пройдёт мини-конкурс «Дизайн формы». Заданием конкурса является дизайн и юзабилити готовой формы. Сама форма даётся заранее, от участников требуется представить её в наглядном и эффектном виде. 1. В процессе работы можно использовать любые изображения, менять положение элементов формы, группировать их, редактировать текст, а также производить манипуляции, направленные на повышение удобства формы. К примеру, такими манипуляциями можно считать замену флажков на переключатели. 2. Работа должна быть представлена в виде изображения в формате PNG-24. Если предполагается применение вкладок или других средств, которые скрывают часть формы, тогда сле…
Last reply by Анна, -
-
- 47 replies
- 26.9k views
Работы выкладываются в том порядке, котором они публиковались. К сожалению, в опросе нельзя напрямую вставлять ссылки, поэтому добавляю их здесь. Все выставленные результаты с комментариями авторов, если они есть, можно посмотреть в этой теме. 1. nfsworld http://jsfiddle.net/...mbedded/result/ 2. nfsworld http://jsfiddle.net/...mbedded/result/ 3. Ironimus http://jsfiddle.net/...mbedded/result/ 4. Vlad http://jsfiddle.net/...mbedded/result/ 5. Vlad http://jsfiddle.net/...mbedded/result/ 6. Vlad http://jsfiddle.net/...mbedded/result/ 7. evasyakin http://jsfiddle.net/...mbedded/result/ 8. vinny http://jsfiddle.net/...mbedded/result/ 9. vinny http://jsfiddle.net/...mbedded/re…
Last reply by Vlad, -
Мини-конкурс «Блоки» 1 2 3
by Vlad- 72 replies
- 26.6k views
7 июля 2011 года на форуме стартует небольшой конкурс по вёрстке. Правила мини-конкурса В конкурсе имеет право принять участие любой желающий зарегистрированный на форуме. Предварительная регистрация или заявка на конкурс не требуется. Начало конкурса в 7:00 UTC (10 Киева, 11 Москвы, 13 Екатеринбурга, 14 Омска, 15 Красноярска, 16 Иркутска, 17 Якутска, 18 Владивостока, 19 Магадана). На конкурс выставляется три задачи по вёрстке объединённые темой блоков. На решение всех трёх задач даётся три часа времени. Участники выкладывают свои решения в специально созданную для этого тему. Время сдачи решения фиксируется по времени сообщения, чьё сообщение выше, тот сдал работу р…
Last reply by Vlad, -
- 31 replies
- 24.1k views
Радиоволны Время Часы
Last reply by Vlad, -
- 11 replies
- 22.3k views
Друзья, всех с наступающим Новым годом! Поднимем себе настроение выбрав понравившуюся анимированную открытку и его автора. 1. iKNG http://jsfiddle.net/iKNG/ahean/embedded/result/ 2. nfsworld http://jsfiddle.net/qb39A/embedded/result/ http://jsfiddle.net/FY8zf/embedded/result/ http://jsfiddle.net/rHgYT/embedded/result/ 3. vinny http://jsfiddle.net/6TRfn/1/embedded/result/ 4. rpmcmerphy http://jsfiddle.net/rpmcmerphy/ZfzvF/embedded/result/ 5. Andrey-009 http://free-sait.ru/otkr/ 6. Zhannet http://jsfiddle.net/Zhannet/R8sNn/embedded/result/ 7. memed http://jsfiddle.net/memed/snuu2/embedded/result/ 8. illya_v http://jsfiddle.net/illya_v/vGn2z/embedded/result/ …
Last reply by Vlad, -
- 9 replies
- 20.7k views
Необходимо нарисовать анимированную рожицу пользуясь только средствами CSS при соблюдении ряда условий. Размер картинки 200х200 пикселей. Картинка не должна выходить за область 320х320 пикселей. Обязательно использовать анимацию. В процессе работы нельзя использовать любые картинки (включая base64), SVG, VML, Canvas, скрипты, библиотеки и тому подобное. Фактически должен быть только HTML и CSS. Разрешается выкладывать до трёх работ, объединяя их в одном посте или фидле. Примеры работ можно посмотреть здесь. http://bennettfeely.com/csscreatures/ За основу можно взять этот код: http://jsfiddle.net/wrk8Lu4w/ Результат выставляем на сайт jsfiddle.net и публикуем его в …
Last reply by Vlad, -
Дизайн формы 1 2
by Vlad- 25 replies
- 20.6k views
Сюда вы можете выкладывать свои работы по мини-конкурсу Дизайн формы. Работа должна быть сделана в формате PNG-24 или PSD, здесь вы указываете лишь ссылку на неё в следующем виде: [ hide ] http://htmlbook.ru/themes/hb/logo.png [ /hide ] BB-коды пишутся слитно без пробелов.
Last reply by Vlad, -
Спасибо всем за участие в конкурсе! Все выставленные результаты открыты, можно посмотреть, кто как решал задачи и обсуждать подходы. Я пока возьму таймаут, займусь подведением итогов и подсчётом баллов, завтра присоединюсь к обсуждению и выскажу своё мнение о результатах.
Last reply by psywalker, -
-
- 13 replies
- 19.1k views
Необходимо составить задачу на практические знания CSS3 и привести её решение. Все присланные задачи публикуются в специальном разделе сайта htmlbook (http://htmlbook.ru/practical) с указанием автора и ссылки на его сайт. При написании задачи придерживайтесь следующих рекомендаций: задача должна решаться без дополнительных скриптов, только с помощью HTML и CSS;задача должна быть комплексной и задействовать разные приёмы и стилевые свойства;следует привести своё решение задачи, желательно с комментариями и пояснениями.задача не должна быть слишком сложной и требовать много времени на её решение. Таким образом, целые страницы или сложные формы для вёрстки не годятся.Результ…
Last reply by SelenIT, -
Конкурс по Canvas завершён, всем спасибо за участие. Работы доступны, можно смотреть и обсуждать. Приняло участие 8 человек, одна из них девушка.
Last reply by HUNTERxp, -
-
- 62 replies
- 18.2k views
Спасибо всем участникам за работу, изображения для просмотра и обсуждения открыты. Голосовать здесь. Можно выбирать сразу несколько работ. http://forum.htmlbook.ru/index.php?showtopic=29302
Last reply by psywalker, -
- 29 replies
- 16.8k views
Необходимо сделать анимированную открытку к Новому год, используя традиционные атрибуты: ёлочку, снеговика, Деда Мороза, снежинки и др. Открытка обязательно должна включать анимацию, выполненную с помощью CSS3, JavaScript или их комбинаций.Допустимо использовать любые изображения, скрипты, библиотеки JavaScript, специализированные программы для анимации.Запрещено применять только две вещи: Flash (или его аналоги вроде Silverlight) и анимированный GIF.Размер открытки должен быть не менее 500х400 пикселов.Результат выставляем в специальной теме форума в виде ссылки на jsfiddle.net.Продолжительность анимации должна быть не менее 4 секунд или зациклена.Надпись «С Новым годом!…
Last reply by Vlad, -
- 53 replies
- 16.5k views
В эту тему выкладываются решения задач. Задачи должны быть предварительно выложены на сайт http://jsfiddle.net здесь же указывается только ссылка на них в следующем виде. [ hide ] http://jsfiddle.net/EhDWR/ http://jsfiddle.net/EhDWR/2/ http://jsfiddle.net/EhDWR/3/ [ /hide ] BB-коды пишутся без пробелов. Этот блок скрывает от просмотра ссылки и виден только мне и автору. После завершения времени конкурса все скрытые блоки открываются для всеобщего просмотра. Напоминаю важные правила Запрещено редактировать своё сообщение, в противном случае оно удаляется и решения в конкурсе не участвуют. Если вам требуется внести правки в ссылку или в решение, создайте новое сообщение. В…
Last reply by exessqd1, -
- 19 replies
- 16.2k views
Задание 1. Эскиз Уголки фиксированного размера, ширина и высота уголков одинакова, задаётся в пикселах. Задание 2. Блок с тенью Содержит скругления в заголовке и внизу блока. Вокруг блока тёмно-зелёная рамка и тень. Длина заголовка может меняться, соответственно, должна изменяться и ширина блока под ним, но при этом не превышать 250px. Задание 3. Блок с градиентом Полупрозрачная градиентная рамка вокруг блока с градиентным фоном под заголовком и небольшим треугольником. Фон на странице приведён лишь для наглядности эффекта полупрозрачности. Вы можете указать свою картинку или использовать ту, что в примере по адресу http://htmlbook.ru/example/images/redline.png Минима…
Last reply by Vlad, -
- 24 replies
- 15.7k views
Необходимо сделать игру на HTML5 Canvas и представить результат в виде веб-страницы, которая содержит: название игры, её правила, количество сделанных ходов, сообщение о завершении игры. Название игры: Плитки майя Правила игры Эта древняя игра-головоломка заимствована у индейцев племени майя и рассчитана на одного игрока. Задача заключается в том, чтобы поменять местами белый и серый ряды, перемещая фишки на свободные поля, причём центральная фишка в итоге должна остаться на своём месте. За один ход можно перемещать фишку на любое количество ходов, но перепрыгивать через другие фишки запрещается. Размеры поля, цвет и вид фишек может задаваться произвольно. Допустимо доб…
Last reply by Vlad, -
- 28 replies
- 15.3k views
Поскольку на конкурс выставили достаточно много работ, выбираем не лучшую задачу, а автора лучшей задачи. Награждать то его надо, по любому. В конкурсе приняло участие 11 человек, предоставили 48 задач. Авторы публикуются в той последовательности, что и сдавали работы, все задачи можно посмотреть в этой теме. Ниже ссылки на сообщения с задачами. 1. mrnobody http://htmlforum.ru/index.php?showtopic=46658#entry311452 2. iKNG http://htmlforum.ru/index.php?showtopic=46658#entry311458 3. Bassline http://htmlforum.ru/index.php?showtopic=46658#entry311612 4. Vezha http://htmlforum.ru/index.php?showtopic=46658#entry311618 5. terorama http://htmlforum.ru/index.php?showt…
Last reply by Vlad, -
- 62 replies
- 14.9k views
Сюда можно выкладывать ссылки на решение задачи про таблицу, описанной в этой теме
Last reply by moron, -
- 20 replies
- 12.4k views
С 4 по 9 августа 2011 года на форуме пройдёт небольшой конкурс по HTML5 Canvas. Конкурс рассчитан на новичков, для выполнения задания необходимо владеть начальными навыками по JavaScript и API Canvas. Правила мини-конкурса В конкурсе имеет право принять участие любой желающий зарегистрированный на форуме. Предварительная регистрация или заявка на конкурс не требуется. Начало конкурса 4 августа в 1:00 UTC (4 утра Киева, Минска, 5 Москвы, 7 Екатеринбурга, 8 Омска, 9 Красноярска, 10 Иркутска, 11 Якутска). Работы принимаются до 10:00 UTC 9 августа (13 часов Киева, Минска, 14 Москвы, 16 Екатеринбурга, 17 Омска, 18 Красноярска, 19 Иркутска, 20 Якутска). Участник должен сделат…
Last reply by Vlad, -
- 48 replies
- 12k views
В эту тему выкладываем свои решения мини-конкурса по HTML5 Canvas. Решение должно быть размещено на любом сайте, сюда выкладываете только ссылку на него в следующем виде: [ hide ] http://lionindesert.ru [ /hide ] BB-коды пишутся без пробелов. Этот блок скрывает от просмотра ссылку и виден только мне и автору. После завершения времени конкурса все скрытые блоки открываются для всеобщего просмотра. Если у вас нет сайта, на котором можно разместить документ, воспользуйтесь любым бесплатным хостингом. Удачного выступления!
Last reply by Nekromancer, -
- 49 replies
- 11.7k views
На киевском оффлайн форуме разработчиков подымалась тема устойчивой верстки. Что означает этот термин? Это верстка, при которой минимальны затраты на дальнейшие модификации и изменения, замена каких-то частей на другие не вызывает проблем с визуальным отображением. Именно так выглядит счастье кодера. Поэтому мы проведем мини-соревнование на верстку простого макета, и по пути рассмотрим, какие проблемы нас могут ждать с каждой из реализаций. Формат такой: вы верстаете макет, мы совместно тестируем его на устойчивость, определяя негативные и позитивные стороны, вы его дорабатываете и снова представляете публике. Лучше всего выкладывать код на http://jsfiddle.net Обратите …
Last reply by s0rr0w, -
- 17 replies
- 11.2k views
К Хэллоуину сделать изображение произвольного монстра с помощью свойств CSS3, при соблюдении ряда условий. Минимальный размер картинки 400х400 пикселов. В процессе работы нельзя использовать любые картинки (включая base64), SVG, VML, Canvas, скрипты, библиотеки и тому подобное. Фактически должен быть только HTML и CSS. Работа должна корректно отображаться в современных браузерах Firefox, Chrome, IE10. Свойства с вендорными префиксами для простоты не пишем (всё, что начинается на -moz, -webkit, -ms). Анимацию не используем. За основу разрешается брать любую готовую картинку и делать изображение по ней. Разрешается выкладывать несколько работ. Пример работы можно посмотрет…
Last reply by nfsworld,
-
Обсуждения
-
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ -
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ Портфолио https://www.behance.net/d4d4186e
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-