уроки html - Самое интересное в блогах

Следующие 30 »

Marina-Rozina

Изучаем языки HTML и CSS

Пятница, 08 Октября 2021 г. 14:12 (ссылка)

Это цитата сообщения Mariea Оригинальное сообщение

Изучаем языки HTML и CSS

Для тех кто творит в Сodepen.io

и стремится изучить языки для создания веб-страниц.

1.Блог Сodepen. Документация, подкаст - очень много матерала

Откройте страницу в новом окне

2.Коллекция бесплатных примеров кода слайдеров в HTML и CSS

Откройте страницу в новом окне

3.Изучаем языки для создания веб-страниц

Откройте страницу в новом окне

4.Примеры слайдеров из блога ylianova.ru

Откройте страницу в новом окне

*Mariea@mmg*

Моя страница в Сodepen.io - https://codepen.io/Georgievna

Комментарии (1)Комментировать В цитатник или сообщество

Marina-Rozina

Как к фоновому изображению добавить кнопку с прозрачным HTML5 аудиоплеером

Понедельник, 22 Марта 2021 г. 16:19 (ссылка)

Пишу урок, как я делаю плеер, который включается с помощью кнопочки, как во флеш. Важные атрибуты буду выделять красным цветом и объяснять, что они означают.

Пишу этот урок не как догму, а как руководство к действию. Поэтому и предлагаю сделать плеер сначала полупрозрачным, чтобы вы смогли видеть, что изображение вашей преобразованной кнопочки будет расположено точно под кнопкой включения/паузы аудиоплеера. Если при уменьшении ширины аудиоплеера до 90 пикселей кнопка включения/паузы исчезает, увеличьте его ширину до необходимого размера, например, до 100 пикселей. Тогда и ширину изображения новой кнопочки делайте таким же. Пока у меня нет возможности переделывать урок.

Обычный HTML5 аудиоплеер выглядит так

Его код:

<center>

<audio controls="controls" src="https://static.tunnel.ru/media/audio/2021-03/post/149729//andre-rieu---serenade-du-rossignol.mp3"></audio>

</center>

Так как мы будем добавлять аудиоплеер сверху на изображение кнопки, уменьшим его ширину до 90 пикселей.

Код:

<center>

<audio controls="controls" src="https://static.tunnel.ru/media/audio/2021-03/post/149729//andre-rieu---serenade-du-rossignol.mp3" style="width: 90px;"></audio>

</center>

Внимание!

Не задавайте значение ширины менее 90 пикселей, иначе пропадёт кнопка воспроизведения, и вы не сможете включать и выключать аудио в прозрачном плеере!

Комментарии (30)Комментировать В цитатник или сообщество

Marina-Rozina

Как превратить HTML аудиоплеер в круглую кнопку и разместить его поверх фонового изображения - повтор поста по просьбе

Суббота, 11 Апреля 2020 г. 14:33 (ссылка)

Обычный HTML аудиоплеер выглядит так

Его код:

<audio controls="controls" src="https://img1.liveinternet.ru/images/attach/d/0//51...e_my_brown_eyes_blue.mp3"></audio>

Атрибут «controls» здесь нужен обязательно, т.к. он добавляет панель управления к аудиофайлу. Атрибут «src» указывает путь к воспроизводимому файлу

Я размещу плеер в виде кнопки на изображении с анимацией, которую сама сделала. У меня получилось так