Contests
40 topics in this forum
-
- 13 replies
- 9.7k views
mrnobodyhttps://jsfiddle.net/mrnobody/97bhryg7/2/embedded/result/ https://jsfiddle.net/mrnobody/4vvwt9mt/1/embedded/result/ anonimaccounthttps://jsfiddle.net/anonimaccount/gjxzum53/3/embedded/result/ Senseihttp://jsfiddle.net/j0puz083/ Crystal-3http://jsfiddle.net/Lbcu90bc/2/ I.Phttp://codepen.io/badcode/full/KdKjBG kattiperkhttps://jsfiddle.net/kattiperk/gxbpwrw8/embedded/result/ amelicehttp://codepen.io/amelice/full/vNEpyJ/ treanhttps://jsfiddle.net/trean/07sgwqgq/13/embedded/result/ orainnnhttp://codepen.io/pena/pen/OyPrNQ?editors=110 http://codepen.io/pena/pen/jbEJBa?editors=110 OlgaVRhttp://jsfiddle.net/OlgaVR/7k8yL6s0/ https://jsfiddle.net/OlgaVR/z3gt7kty/ vinnyhttp…
Last reply by Vlad, -
Дизайн формы 1 2
by Vlad- 25 replies
- 20.8k views
Сюда вы можете выкладывать свои работы по мини-конкурсу Дизайн формы. Работа должна быть сделана в формате PNG-24 или PSD, здесь вы указываете лишь ссылку на неё в следующем виде: [ hide ] http://htmlbook.ru/themes/hb/logo.png [ /hide ] BB-коды пишутся слитно без пробелов.
Last reply by Vlad, -
- 24 replies
- 15.9k views
Необходимо сделать игру на HTML5 Canvas и представить результат в виде веб-страницы, которая содержит: название игры, её правила, количество сделанных ходов, сообщение о завершении игры. Название игры: Плитки майя Правила игры Эта древняя игра-головоломка заимствована у индейцев племени майя и рассчитана на одного игрока. Задача заключается в том, чтобы поменять местами белый и серый ряды, перемещая фишки на свободные поля, причём центральная фишка в итоге должна остаться на своём месте. За один ход можно перемещать фишку на любое количество ходов, но перепрыгивать через другие фишки запрещается. Размеры поля, цвет и вид фишек может задаваться произвольно. Допустимо доб…
Last reply by Vlad, -
- 19 replies
- 16.3k views
Задание 1. Эскиз Уголки фиксированного размера, ширина и высота уголков одинакова, задаётся в пикселах. Задание 2. Блок с тенью Содержит скругления в заголовке и внизу блока. Вокруг блока тёмно-зелёная рамка и тень. Длина заголовка может меняться, соответственно, должна изменяться и ширина блока под ним, но при этом не превышать 250px. Задание 3. Блок с градиентом Полупрозрачная градиентная рамка вокруг блока с градиентным фоном под заголовком и небольшим треугольником. Фон на странице приведён лишь для наглядности эффекта полупрозрачности. Вы можете указать свою картинку или использовать ту, что в примере по адресу http://htmlbook.ru/example/images/redline.png Минима…
Last reply by Vlad, -
- 16 replies
- 4.9k views
Сделать дизайн приведённой формы (файл form.html). В процессе работы можно использовать любые изображения, менять положение элементов, редактировать поясняющий текст, а также производить манипуляции, направленные на повышение удобства формы. К примеру, такими манипуляциями можно считать замену флажков на переключатели. Текст внутри списков, рядом с флажками и переключателями формируется программно и изменению не подлежит, остальной текст можно менять по своему усмотрению. Работа должна быть представлена в виде изображения в формате PNG-24 или PSD. Если предполагается применение вкладок или других средств, которые скрывают часть формы, тогда следует сделать несколько изобр…
Last reply by Vlad, -
- 24 replies
- 6.5k views
Сделал для себя кое-какие выводы по организации, которыми и поделюсь. Больше таких жёстких условий с ограничением времени делать не стоит. Идея конечно классная и приближена к боевым условиями (например, на собеседовании), но в действительности не сильно и выявляет лучших. Многим людям требуется какое-то время, чтобы найти и выдать оптимальное решение и если им дать времени побольше и не давить скоростью, то они смогут решить любую задачу. Второй момент связан с часовыми поясами. Получилось, что кому-то начало конкурса не в жилу оказалось, другому, наоборот, повезло. Перенос времени ничего не решит, в любом случае снова окажутся те, кто не смогут из-за времени поучаствова…
Last reply by Vlad, -
Идея конкурса 1 2
by Vlad- 27 replies
- 10.6k views
Сайту htmlbook.ru не хватает специализированной мобильной версии, так что можно убить двух зайцев сразу – устроить конкурс на создание мобильной версии, это дизайн, вёрстка и структура. Как вам такая идея?
Last reply by SelenIT, -
- 18 replies
- 6k views
Первые три места по итогам голосования распределились так. 1. exessqd1 2. Verder 3. s0rr0w Эти участники получают книги по их выбору. Заходите на books.ru, выбираете книгу, мне сообщаете ссылку, адрес доставки и фио. Все участники получают +30 к репутации, у кого меньше 30 сообщений переведены в группу Пользователей, плюс медалька всем выдана.
Last reply by tuch, -
- 46 replies
- 31k views
Конкурс пройдёт с 15 по 27 сентября, приём работ завершается в 10:00 UTC (13 Киева, Минска, 14 Москвы, 15 Ташкента, 16 Екатеринбурга, 17 Омска, 18 Красноярска, 19 Иркутска, 20 Якутска). В конкурсе имеет право принять участие любой желающий зарегистрированный на форуме. Предварительная регистрация или заявка не требуется. Победитель определяется путём открытого голосования посетителей форума. Для участия в голосовании надо иметь не менее трёх сообщений, при этом можно голосовать сразу за нескольких претендентов. Места распределяются согласно набранным голосам. Если участников будет больше 20, то устроим двухэтапную систему. Вначале происходит отбор 10 лучших участников, з…
Last reply by Vlad, -
- 37 replies
- 11.4k views
Представитель некоторого хостинга предлагает провести конкурс по Joomla и/или WordPress. Он со своей стороны всем участникам выделяет площадку у себя для сайтов и призы. Но есть ряд вопросов организационного характера. 1. Сколько желающих примет участие в конкурсе? 2. Какого рода задание давать - сделать свою тему, полностью сайт, дизайн. 3. Как оценивать работы. В общем, предлагайте свои варианты проведения конкурса, а также высказывайтесь о его нужности в целом.
Last reply by RodgerFox, -
Предлагаю возродить практику мини-конкурсов на форуме, посвящённым разным веб-технологиям. С меня призы (книги, в основном), с вас - идея, что можно сделать. Например, к хэллоуину "нарисовать" на CSS3 монстриков. Вот симпатичный пример. http://media.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-monsters-dragon/
Last reply by Vlad, -
-
Участники идут в том порядке, как они сдавали работы. Участвовать в голосовании могут все, у кого не меньше 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, -
-
- 28 replies
- 15.5k 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, -
- 11 replies
- 22.4k 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, -
- 47 replies
- 27.1k 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- 63 replies
- 28.8k 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, -
- 39 replies
- 32.1k views
На тему «Сады Семирамиды» нарисовать картинку с помощью свойств CSS3, при этом следует соблюсти ряд условий. Минимальный размер картинки 800х600 пикселов, допустимо сделать её масштабируемой в зависимости от размеров окна браузера. В процессе работы нельзя использовать любые изображения (включая base64), SVG, VML, скрипты, библиотеки и тому подобное. Фактически должен быть только HTML и CSS. Работа должна корректно отображаться в современных браузерах Firefox 6+, Chrome 13+, Safari 5.1, Opera 12, IE10 (т.е. фильтры можно не включать). Картинка может содержать анимированные элементы также созданные с помощью CSS3. Это условие не обязательно, но «живая» картинка выглядит…
Last reply by MadMinimal, -
- 20 replies
- 12.5k 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, -
Мини-конкурс «Блоки» 1 2 3
by Vlad- 72 replies
- 27k views
7 июля 2011 года на форуме стартует небольшой конкурс по вёрстке. Правила мини-конкурса В конкурсе имеет право принять участие любой желающий зарегистрированный на форуме. Предварительная регистрация или заявка на конкурс не требуется. Начало конкурса в 7:00 UTC (10 Киева, 11 Москвы, 13 Екатеринбурга, 14 Омска, 15 Красноярска, 16 Иркутска, 17 Якутска, 18 Владивостока, 19 Магадана). На конкурс выставляется три задачи по вёрстке объединённые темой блоков. На решение всех трёх задач даётся три часа времени. Участники выкладывают свои решения в специально созданную для этого тему. Время сдачи решения фиксируется по времени сообщения, чьё сообщение выше, тот сдал работу р…
Last reply by Vlad, -
С 5 по 12 сентября на форуме пройдёт мини-конкурс «Дизайн формы». Заданием конкурса является дизайн и юзабилити готовой формы. Сама форма даётся заранее, от участников требуется представить её в наглядном и эффектном виде. 1. В процессе работы можно использовать любые изображения, менять положение элементов формы, группировать их, редактировать текст, а также производить манипуляции, направленные на повышение удобства формы. К примеру, такими манипуляциями можно считать замену флажков на переключатели. 2. Работа должна быть представлена в виде изображения в формате PNG-24. Если предполагается применение вкладок или других средств, которые скрывают часть формы, тогда сле…
Last reply by Анна, -
-
- 13 replies
- 19.2k views
Необходимо составить задачу на практические знания CSS3 и привести её решение. Все присланные задачи публикуются в специальном разделе сайта htmlbook (http://htmlbook.ru/practical) с указанием автора и ссылки на его сайт. При написании задачи придерживайтесь следующих рекомендаций: задача должна решаться без дополнительных скриптов, только с помощью HTML и CSS;задача должна быть комплексной и задействовать разные приёмы и стилевые свойства;следует привести своё решение задачи, желательно с комментариями и пояснениями.задача не должна быть слишком сложной и требовать много времени на её решение. Таким образом, целые страницы или сложные формы для вёрстки не годятся.Результ…
Last reply by SelenIT, -
- 29 replies
- 16.9k views
Необходимо сделать анимированную открытку к Новому год, используя традиционные атрибуты: ёлочку, снеговика, Деда Мороза, снежинки и др. Открытка обязательно должна включать анимацию, выполненную с помощью CSS3, JavaScript или их комбинаций.Допустимо использовать любые изображения, скрипты, библиотеки JavaScript, специализированные программы для анимации.Запрещено применять только две вещи: Flash (или его аналоги вроде Silverlight) и анимированный GIF.Размер открытки должен быть не менее 500х400 пикселов.Результат выставляем в специальной теме форума в виде ссылки на jsfiddle.net.Продолжительность анимации должна быть не менее 4 секунд или зациклена.Надпись «С Новым годом!…
Last reply by Vlad, -
- 9 replies
- 21k 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, -
- 17 replies
- 11.3k views
К Хэллоуину сделать изображение произвольного монстра с помощью свойств CSS3, при соблюдении ряда условий. Минимальный размер картинки 400х400 пикселов. В процессе работы нельзя использовать любые картинки (включая base64), SVG, VML, Canvas, скрипты, библиотеки и тому подобное. Фактически должен быть только HTML и CSS. Работа должна корректно отображаться в современных браузерах Firefox, Chrome, IE10. Свойства с вендорными префиксами для простоты не пишем (всё, что начинается на -moz, -webkit, -ms). Анимацию не используем. За основу разрешается брать любую готовую картинку и делать изображение по ней. Разрешается выкладывать несколько работ. Пример работы можно посмотрет…
Last reply by nfsworld, -
Спасибо всем за участие в конкурсе! Все выставленные результаты открыты, можно посмотреть, кто как решал задачи и обсуждать подходы. Я пока возьму таймаут, займусь подведением итогов и подсчётом баллов, завтра присоединюсь к обсуждению и выскажу своё мнение о результатах.
Last reply by psywalker, -
-
Обсуждения
-
Актуальные контакты: 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-