Contests
40 topics in this forum
-
- 9 replies
- 18.1k 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, -
- 13 replies
- 8.8k 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, -
- 13 replies
- 4k views
Здесь публикуются работы для мини-конкурса Рожицы. Приём работ завершается 8 сентября в 10:00 UTC (13 часов Киева, Минска; 14 Москвы; 16 Екатеринбурга; 17 Омска; 18 Красноярска; 19 Иркутска; 20 Якутска; 21 Владивостока). После этого тема закрывается и новые сообщения не добавляются.
Last reply by Jack_V, -
- 13 replies
- 18k views
Необходимо составить задачу на практические знания CSS3 и привести её решение. Все присланные задачи публикуются в специальном разделе сайта htmlbook (http://htmlbook.ru/practical) с указанием автора и ссылки на его сайт. При написании задачи придерживайтесь следующих рекомендаций: задача должна решаться без дополнительных скриптов, только с помощью HTML и CSS;задача должна быть комплексной и задействовать разные приёмы и стилевые свойства;следует привести своё решение задачи, желательно с комментариями и пояснениями.задача не должна быть слишком сложной и требовать много времени на её решение. Таким образом, целые страницы или сложные формы для вёрстки не годятся.Результ…
Last reply by SelenIT, -
- 1 follower
- 29 replies
- 14.5k views
Необходимо сделать анимированную открытку к Новому год, используя традиционные атрибуты: ёлочку, снеговика, Деда Мороза, снежинки и др. Открытка обязательно должна включать анимацию, выполненную с помощью CSS3, JavaScript или их комбинаций.Допустимо использовать любые изображения, скрипты, библиотеки JavaScript, специализированные программы для анимации.Запрещено применять только две вещи: Flash (или его аналоги вроде Silverlight) и анимированный GIF.Размер открытки должен быть не менее 500х400 пикселов.Результат выставляем в специальной теме форума в виде ссылки на jsfiddle.net.Продолжительность анимации должна быть не менее 4 секунд или зациклена.Надпись «С Новым годом!…
Last reply by Vlad, -
- 11 replies
- 21.6k 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, -
- 1 follower
- 14 replies
- 5.5k views
Здесь публикуются анимированные открытки для мини-конкурса Новогодняя открытка. Приём работ начинается с 1 декабря и завершается 15 декабря в 10:00 UTC (13 часов Киева, Минска; 14 Москвы; 16 Екатеринбурга; 17 Омска; 18 Красноярска; 19 Иркутска; 20 Якутска).
Last reply by ESSqS, -
- 28 replies
- 13.2k 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, -
- 31 replies
- 21.1k views
Радиоволны Время Часы
Last reply by Vlad, -
Предлагаю возродить практику мини-конкурсов на форуме, посвящённым разным веб-технологиям. С меня призы (книги, в основном), с вас - идея, что можно сделать. Например, к хэллоуину "нарисовать" на CSS3 монстриков. Вот симпатичный пример. http://media.smashingmagazine.com/wp-content/uploads/uploader/images/css3-designs/css3-monsters-dragon/
Last reply by Vlad, -
-
- 17 replies
- 10.3k views
К Хэллоуину сделать изображение произвольного монстра с помощью свойств CSS3, при соблюдении ряда условий. Минимальный размер картинки 400х400 пикселов. В процессе работы нельзя использовать любые картинки (включая base64), SVG, VML, Canvas, скрипты, библиотеки и тому подобное. Фактически должен быть только HTML и CSS. Работа должна корректно отображаться в современных браузерах Firefox, Chrome, IE10. Свойства с вендорными префиксами для простоты не пишем (всё, что начинается на -moz, -webkit, -ms). Анимацию не используем. За основу разрешается брать любую готовую картинку и делать изображение по ней. Разрешается выкладывать несколько работ. Пример работы можно посмотрет…
Last reply by nfsworld, -
- 47 replies
- 24.6k 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, -
- 14 replies
- 5.5k views
Моя первая работа. http://jsfiddle.net/...mbedded/result/ Моя вторая работа. http://jsfiddle.net/...mbedded/result/ Бонус. http://jsfiddle.net/...mbedded/result/
Last reply by illya_v, -
- 62 replies
- 11.5k views
Сюда можно выкладывать ссылки на решение задачи про таблицу, описанной в этой теме
Last reply by moron, -
- 0 replies
- 2.4k views
Сюда можно выкладывать ссылки на решение задачи про скроллбар, описанной в этой теме
Last reply by s0rr0w, -
- 49 replies
- 9.5k views
На киевском оффлайн форуме разработчиков подымалась тема устойчивой верстки. Что означает этот термин? Это верстка, при которой минимальны затраты на дальнейшие модификации и изменения, замена каких-то частей на другие не вызывает проблем с визуальным отображением. Именно так выглядит счастье кодера. Поэтому мы проведем мини-соревнование на верстку простого макета, и по пути рассмотрим, какие проблемы нас могут ждать с каждой из реализаций. Формат такой: вы верстаете макет, мы совместно тестируем его на устойчивость, определяя негативные и позитивные стороны, вы его дорабатываете и снова представляете публике. Лучше всего выкладывать код на http://jsfiddle.net Обратите …
Last reply by s0rr0w, -
- 37 replies
- 9.2k views
Представитель некоторого хостинга предлагает провести конкурс по Joomla и/или WordPress. Он со своей стороны всем участникам выделяет площадку у себя для сайтов и призы. Но есть ряд вопросов организационного характера. 1. Сколько желающих примет участие в конкурсе? 2. Какого рода задание давать - сделать свою тему, полностью сайт, дизайн. 3. Как оценивать работы. В общем, предлагайте свои варианты проведения конкурса, а также высказывайтесь о его нужности в целом.
Last reply by RodgerFox, -
Идея конкурса 1 2
by Vlad- 27 replies
- 8.6k views
Сайту htmlbook.ru не хватает специализированной мобильной версии, так что можно убить двух зайцев сразу – устроить конкурс на создание мобильной версии, это дизайн, вёрстка и структура. Как вам такая идея?
Last reply by SelenIT, -
- 39 replies
- 29.4k views
На тему «Сады Семирамиды» нарисовать картинку с помощью свойств CSS3, при этом следует соблюсти ряд условий. Минимальный размер картинки 800х600 пикселов, допустимо сделать её масштабируемой в зависимости от размеров окна браузера. В процессе работы нельзя использовать любые изображения (включая base64), SVG, VML, скрипты, библиотеки и тому подобное. Фактически должен быть только HTML и CSS. Работа должна корректно отображаться в современных браузерах Firefox 6+, Chrome 13+, Safari 5.1, Opera 12, IE10 (т.е. фильтры можно не включать). Картинка может содержать анимированные элементы также созданные с помощью CSS3. Это условие не обязательно, но «живая» картинка выглядит…
Last reply by MadMinimal, -
Участники идут в том порядке, как они сдавали работы. Участвовать в голосовании могут все, у кого не меньше 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, -
-
- 26 replies
- 8.6k views
Сюда выкладываем свои рисунки в виде ссылок на сайты, где показана работа. Ссылки вставляйте между кодами [ hide ] и [ /hide ] пишутся они без пробелов.
Last reply by Vlad, -
- 46 replies
- 28.1k views
Конкурс пройдёт с 15 по 27 сентября, приём работ завершается в 10:00 UTC (13 Киева, Минска, 14 Москвы, 15 Ташкента, 16 Екатеринбурга, 17 Омска, 18 Красноярска, 19 Иркутска, 20 Якутска). В конкурсе имеет право принять участие любой желающий зарегистрированный на форуме. Предварительная регистрация или заявка не требуется. Победитель определяется путём открытого голосования посетителей форума. Для участия в голосовании надо иметь не менее трёх сообщений, при этом можно голосовать сразу за нескольких претендентов. Места распределяются согласно набранным голосам. Если участников будет больше 20, то устроим двухэтапную систему. Вначале происходит отбор 10 лучших участников, з…
Last reply by Vlad, -
- 9 replies
- 4.4k views
Сюда выкладываем свои решения в виде ссылок на макеты. Желательно макеты выложить в свободный доступ, чтобы их можно было смотреть сразу, а не делать их в виде архиве для скачивания. У таких работ шансы на победу резко уменьшаются. Ссылки вставляйте между кодами [ hide ] и [ /hide ] пишутся они без пробелов.
Last reply by exessqd1, -
- 18 replies
- 4.8k views
Первые три места по итогам голосования распределились так. 1. exessqd1 2. Verder 3. s0rr0w Эти участники получают книги по их выбору. Заходите на books.ru, выбираете книгу, мне сообщаете ссылку, адрес доставки и фио. Все участники получают +30 к репутации, у кого меньше 30 сообщений переведены в группу Пользователей, плюс медалька всем выдана.
Last reply by tuch, -
- 62 replies
- 15.5k views
Спасибо всем участникам за работу, изображения для просмотра и обсуждения открыты. Голосовать здесь. Можно выбирать сразу несколько работ. http://forum.htmlbook.ru/index.php?showtopic=29302
Last reply by psywalker,
-
Обсуждения
-
border: none border-radius примерно 4 пикселя На background добавиь картинку лупы и справа сделать padding, чтобы текст не залез на картинку Ну и с остальных боков тоже сделать padding, чтобы было как на макете. -
By Igor Schnaider · Posted
Попробуйте отступы сверху-снизу добавить и отрицательными полями их компенсируйте. -
By d0ublezer0 · Posted
Привет. Помогите советом: есть ли какой-то трюк с расположением элементов внутри скролл-контейнера, чтобы при наведении и увеличении они не обрезались родителем? https://codesandbox.io/s/scroll-and-scale-yv3kq0?file=/src/App.js Можно и не внутри контейнера, но главное, чтобы лишнее скроллилось, а при наведении не обрезалось. -
-
Готовы к рабочим будням? Мы - да! Все тематики - фарма, казино, крипта, красота, строительство, декор и многое другое. Обязательная проверка в Grammarly® premium, вычитка редактором носителем языка Жду старых и новых заказчиков ) в telegram https://t.me/D007user -
Случайно вспомнил этот форум, зашёл, а тут как раз ностальгируют) -
-