• Авторизация


Музыкальная открытка HTML5 на CodePen. Как создать. 01-06-2021 14:11 к комментариям - к полной версии - понравилось!




1. Зайдите на Codepen и регистрируйтесь: Codepen

2. Создайте новую работу

3. Перейдите по ссылке на мою страницу с открыткой Codepen Georgiy Gavril

4. Скопируйте код HTML и вставьте в окно своей новой работы. Открытка скопирована, при клике должна звучать музыка.

5. Отредактируйте свой код, заменив ссылки на свои музыку и картинку.

 

Ваша музыкальная открытка готова. Нажмите на верхней панели редактора Сохранить \ Save .

Для публикации в дневник скопируйте браузерный адрес своей работы (пример :  https://codepen.io/georgij-gawril/pen/qBrqeMm ) и отредактируйте его так: 

прописать full вместо pen , размеры подобрать соответственно Вашей картинки.  [**flash=830,680,https://codepen.io/georgij-gawril/full/qBrqeMm] 

В редакторе ЛиРу убрать звёздочки после квадратной скобки, можно опубликовать.


В дальнейшем расскажу как усовершенствовать проект.

 

вверх^ к полной версии понравилось! в evernote
Комментарии (88): вперёд» последняя»
Jorjorych 01-06-2021-14:14 удалить
Почему на Codepen создаются работы? Потому что редактор ЛиРу не поддерживает HTML5!
Ответ на комментарий Jorjorych # Всё правильно сделал, что рассказал...Многие захотят также сделать...Или хотя бы попробовать...)))
Дюанка 01-06-2021-14:27 удалить
Спасибо большое Георгий !!!
Ответ на комментарий Jorjorych # Ой, забыла поздороваться...))) Привет, Георгий...)))
Jorjorych 01-06-2021-14:40 удалить
Ответ на комментарий Быкова_Любаша # Здравствуй, Люба! Целый день дождь, вот и выдал. Упростил до минимума.
Спасибо!!Очень красиво и музыка шикарная.
jzayka 01-06-2021-15:06 удалить
Спасибо..чуть не забыла сказать! Я ВЧЕРА ЗАРЕГИСТРИРОВАЛАСЬ..А сегодня вот такой подарок!!!
Ответ на комментарий Jorjorych # А у нас солнечно...)) Я сейчас тоже сделала новую ручку с плеером на 10 песен...
Георгий, а теперь в код добавить кнопку, чтобы не нажимать на фон, а на кнопку.
LiSu 01-06-2021-16:19 удалить
Спасибо за подробный урок!
Jorjorych 01-06-2021-16:19 удалить
Ответ на комментарий Татьяна_Волкова_Литвинова # Всё будет, Таня! Пошагово, терпение!
Jorjorych 01-06-2021-16:20 удалить
Ответ на комментарий jzayka # Лена, победим флешностальгию!
Jorjorych 01-06-2021-16:23 удалить
Ответ на комментарий LiSu # Присоединись, Лиля, красивостей немало будет!
Jorjorych 01-06-2021-16:26 удалить
Ответ на комментарий Быкова_Любаша # Это Yoshio Kimura или что-то появится скоро. Сижу тут под эту музыку!
Jorjorych 01-06-2021-16:31 удалить
Ответ на комментарий Дюанка # Творите и радуйте, радуйтесь!
Jorjorych 01-06-2021-16:32 удалить
Ответ на комментарий Таня_Кулиш # Создайте такое простое, дальше украсим, разнообразим!
Ответ на комментарий Jorjorych # Да, да..Это про него плейлист...Я видела, что ты тоже делал, но я нашла сайт, где про это написано и взяла коды там...))
Adigoni 01-06-2021-17:06 удалить
Добрый вечер,Георгий!! Я Вами восхищаюсь,всё время что-то изучаете,творите!!Я смотрю на окружающих меня людей,они даже справиться с телефоном не могут))
jzayka 01-06-2021-17:11 удалить
Ответ на комментарий Jorjorych # Спасибо,Георгий,оказывается ничего сложного
Нина36 01-06-2021-17:18 удалить
Георгий,большое спасибо,нужно попробовать.Что-то пыталась и не получилось.
Flash_Magic 01-06-2021-17:32 удалить
Приветик Георгий. Великолепно!!! Спасибо за новые идеи.
Jorjorych 01-06-2021-17:40 удалить
Ответ на комментарий Flash_Magic # Привет, Наташа! Не совсем новая, давно тыкаю там, но возникла необходимость оприлюднить! Присоединяйся!
Jorjorych 01-06-2021-17:41 удалить
Ответ на комментарий Нина36 # Внимательнее, Нина, читай и пробуй. Не бойся экспериментировать!
Jorjorych 01-06-2021-17:42 удалить
Ответ на комментарий Adigoni # Если бы все были одинаковы, было бы неинтересно!
Jorjorych 01-06-2021-17:44 удалить
Ответ на комментарий jzayka # Есть же опыт action script!
Jorjorych 01-06-2021-17:46 удалить
Ответ на комментарий Быкова_Любаша # В курсе, много чего можно найти в Гугл поиске!
jzayka 01-06-2021-17:51 удалить
Ответ на комментарий Jorjorych # да какой там опыт..а почему чёрная полоса сверху? или это убирается с помощью css?...
Jorjorych 01-06-2021-17:58 удалить
Ответ на комментарий jzayka # Без полосы только премиум пользователям (платное). но есть приём маскирования в дневе, расскажу погодя.
Mir5 01-06-2021-18:37 удалить
Спасибо,Григорий!Сделала.Вот бы еще черную полосу убрать.


Комментарии (88): вперёд» последняя» вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник Музыкальная открытка HTML5 на CodePen. Как создать. | Jorjorych - Дневник Jorjorych | Лента друзей Jorjorych / Полная версия Добавить в друзья Страницы: раньше»