Вопросы с меткой [html5]

HTML5 (HyperText Markup Language, version 5) — пятая версия языка разметки, служащего для структурирования и представления содержимого страниц для всемирной паутины.

Фильтрация
Сортировка
Метки
86 голосов
2 ответа
12k показов

Строчка, которая изменит мир [закрыт]

window.history.replaceState(state, title, url); Вот она :) state - может быть объектом, может быть строкой, что менять url - строка, на что менять title - новый title страницы Недавно во всем ...
Alex Silaev's user avatar
  • 4,042
84 голоса
14 ответов
4k показов

Новогодний конкурс 2020 года!

В прошлом году подобный конкурс неожиданно привлек большой интерес участников RUso. Было весело, люди хотели продолжение праздника вновь и вновь. К слову, было проведено 4 конкурса с ...
Alexandr_TT's user avatar
35 голосов
1 ответ
6k показов

Что такое HTML5 WebSocket, Long/short Polling, AJAX, WebRTC, Server-Sent Events?

Я тут решил сделать велосипед: небольшой чат для друзей. Мне стало интересно, а как это происходит наподобие вконтакте или других проектах? Ведь сообщения/уведомления приходят мгновенно и не ...
Алексей Шиманский's user avatar
27 голосов
6 ответов
1k показов

Можно ли контенту псевдоэлемета css задать повторение?

Допустим, есть код: div { position: relative; background: blueviolet; height:100px; } div:before { content: 'продано'; color: white; } <div></div> Хочу ...
kizoso's user avatar
  • 9,331
25 голосов
7 ответов
54k показов

Нарисовать круг, используя только CSS

Можно ли нарисовать круг, который будет отображаться в большинстве браузеров (IE, Mozilla, Safari), используя только CSS? Перевод вопроса: Draw Circle using css alone
Alexandr_TT's user avatar
24 голоса
3 ответа
1k показов

Как повторить этот css эффект?

Подскажите, как я могу повторить эффект появления блока, как на этом видео? На данный момент имею что-то вот такое. Появление реализовано через свойство clip-path. Не могу додуматься как мне ...
Aleksandr Krais's user avatar
23 голоса
3 ответа
5k показов

Линия до и после текста над картинкой

Я хочу создать линию до и после центрированного заголовка. Линия и текст должны иметь прозрачный фон, чтобы иметь возможность позиционировать их на неодинаковом фоне. Строка не должна быть больше 100% ...
Alexandr_TT's user avatar
19 голосов
4 ответа
2k показов

Как создать 3D сферу в CSS?

Я пытался создать 3D сферу, используя только чистый CSS, но я не смог сгенерировать требуемую форму. Я видел цилиндр , но я не могу найти ссылку на создание реальной сферы. .red { ...
Alexandr_TT's user avatar
18 голосов
3 ответа
2k показов

Как в CSS сверстать неровную фигуру?

Нужно сверстать вот такую фигуру, но не знаю как правильно это сделать. Делал квадрат и через before добавлял обрезанный border, но на разных разрешениях экранов он как будто "отклеивался".
Александр's user avatar
17 голосов
1 ответ
3k показов

Анимация планет солнечной системы

У меня есть картинка планет солнечной системы. Получилось сделать с помощью команд <circle> орбиты и сами планеты. С помощью линейных и радиальных градиентов придать им объём. Нашел топик, ...
Alexandr_TT's user avatar
16 голосов
3 ответа
502 показа

Как создать эффект затвора камеры с помощью divs

Я попытался сделать круговую камеру затвора фотоаппарата, но у меня проблема с тем, чтобы заставить его выглядеть реалистично. Вот как это должно выглядеть: Ниже код, который я пробовал: let ...
Alexandr_TT's user avatar
16 голосов
3 ответа
279 показов

Как сделать на CSS колечки на линии

Кто нибудь с таки сталкивался? Нужно в landing page реализовать три колечка на линии.
Александр Перепелица's user avatar
15 голосов
3 ответа
2k показов

Создайте дизайн молнии

Я пытаюсь воссоздать символ молнии от "The Flash (DC Comics)" (или знак на футболке, которую носит Sheldon Cooper из "The Big Bang Theory" ) в CSS. Этот символ будет действовать, как система ...
Alexandr_TT's user avatar
15 голосов
1 ответ
207 показов

Можно ли в img внутри alt="" сделать зачеркнутый текст?

Можно ли в img внутри alt="" сделать зачеркнутый текст? Почему-то думала, что в alt и title используется markdown, но две подряд тильды желаемого не дают: <img src="img/slider.jpg" alt="Наш ...
kizoso's user avatar
  • 9,331
14 голосов
7 ответов
2k показов

Три цвета фона расположенные под углом

Как мне получить фон, похожий на этот образ: Только 3 цвета, которые идут от верхнего угла, как солнечный луч. Может быть, лучше использовать простой PNG или SVG для фонового ...
Alexandr_TT's user avatar
14 голосов
5 ответов
1k показов

Создание CSS3 эффекта мигающего века

Я пытаюсь создать экран ожидания c цифрами обратного отсчета, который показывает глаз вместе с веком, и глазное яблоко с эффектом радужной оболочки. Учитывая, что многие из нас бессмысленно ...
Alexandr_TT's user avatar
13 голосов
1 ответ
587 показов

Как реализовать появления текста вслед за движением объекта?

оригинал вопроса : https://toster.ru/q/525769 Примечание: вопрос удален модератором на toster.ru Как всегда вопрос заинтересовал меня своей необычностью, приложу макет Начал с SVG и получилось это : ...
user avatar
13 голосов
1 ответ
302 показа

Не работает canvas.toDataUrl() для холстов слишком большого размера

При сохранении холста, методом toDataUrl, а затем преобразованием его в изображение на сервере - бывает сохраняется пустое изображение. Это случается на iphone 6,7, а так же недавно заметил что и на ...
Vitaly Boris's user avatar
11 голосов
7 ответов
288 показов

Как убрать объект в левом верхнем углу до начала анимации animateMotion?

Данный вопрос инспирирован ответом. Красный круг находится в левом верхнем углу до начала анимации animateMotion. Ниже пример кода: <div id="pathContainer4"> <button id="btn1" ...
Alexandr_TT's user avatar
11 голосов
5 ответов
243 показа

Как сделать иллюзию того, что линия проходит в букву насквозь через отверстие, а не поверх нее

пример того как выглядит, а заголовок то что должно получиться
ZUGR's user avatar
  • 119
11 голосов
3 ответа
328 показов

Как CSS лоадер преобразовать в SVG лоадер?

Коллеги, помогите этот пример на css полностью перевести в SVG, так как хочу его использовать не только на всю страницу, то и на более мелких объектах типа слайдер... * { margin: 0; ...
Air's user avatar
  • 14.6k
11 голосов
2 ответа
311 показов

HTML5 – это отдельный язык?

Пересмотрел кучу статей в интернете и как мне кажется, так до конца и не понимаю, что такое HTML5 и CSS3. Понимаю, что такое HTML4 и CSS2 - грубо говоря, набор тегов, который был актуален пару лет ...
Павел Игорев's user avatar
11 голосов
4 ответа
1k показов

Окружность вокруг div при наведении курсора

У меня есть div в форме солнца. Я просто хочу показать границу при наведении, с прозрачным промежутком между объектом и границей. Сначала я пробовал box shadow, но не мог сделать белый пробел. Он ...
Alexandr_TT's user avatar
11 голосов
2 ответа
639 показов

Размытый фон под блоком

Подскажите пожалуйста, с помощью чего можно реализовать эффект размытия. Необходимо реализовать так, чтобы под блоком с меню контент размывался. У меню допустим свой фон background: rgba(32, 32, 32, 0....
nimble's user avatar
  • 143
11 голосов
1 ответ
482 показа

Worker-ы убивают IE11

Выполнение этого небольшого теста: window.URL = window.URL || window.webkitURL; var response = "self.onmessage=function(e){ if (console && console.time) console.time('worker '+e.data); var l =...
t1nk's user avatar
  • 1,840
10 голосов
10 ответов
65k показов

Как скруглить края у таблицы (border-radius)

<table class="table_block"> <thead> <tr> <td>ID</td> <td>Название</td> <td>Цена</...
acidernt's user avatar
  • 2,868
10 голосов
2 ответа
561 показ

CSS шестиугольник с цветной вращающейся рамкой

Я хочу сделать шестиугольник, который имеет градиентную заливку границы, которая вращается. Пример GIF: Я попытался создать фигуру только с помощью CSS, но это не сработало, потому что теги :after и ...
Alexandr_TT's user avatar
10 голосов
3 ответа
233 показа

Как сохранить постоянное направление тени при вращении предмета?

Например у div есть прямоугольная тень. При вращении прямоугольника происходит вращение направления прямоугольной тени, что вызывает проблемы, так как тень прямоугольника должна создать иллюзию ...
Alexandr_TT's user avatar
10 голосов
1 ответ
580 показов

Как сделать эффект распыления текста?

Увидел на youtube один эффект но без объяснения и утверждается что только html и css и ни какого js и тому подобного Вопрос в виде картинки но как по другому это спросить не знаю
Резидент Казахстана's user avatar
10 голосов
1 ответ
318 показов

Почему в формах в HTML 5.1 разрешены только GET и POST?

Протокол HTTP 1.1 включает в себя 9 методов: GET, POST, PUT, DELETE и прочие. При этом HTML 5.1 предполагает использование в формах только двух из них: GET и POST: The method and formmethod content ...
Nick Volynkin's user avatar
  • 34.1k
9 голосов
5 ответов
951 показ

Как нарисовать букву Z для иконки?

Мне нужно нарисовать букву Z на SVG для иконки. <?xml version="1.0" encoding="iso-8859-1"?> <svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 32 32"> ...
webphp's user avatar
  • 1,342
9 голосов
3 ответа
421 показ

Как сделать так, что бы при горизонтальном скролле элемента, у его потомков тянулся фон на всю ширину родителя

Всем привет! Коллеги, подскажите пожалуйста, столкнулся с тобой проблемой, вроде на первый взгляд не сложно все, но ни как не могу ее без костылей решить. У меня есть таблица на бутстрапе у которой ...
Олег Цыганов's user avatar
9 голосов
2 ответа
2k показов

Практические примеры применения масок svg

Прочитал эти статьи по теории масок, но не уверен, что понял всё правильно https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask http://css.yoksel.ru/svg-masks/ Вот пример по маскам, ...
Alexandr_TT's user avatar
9 голосов
3 ответа
2k показов

Как оптимизировать svg код полученный из векторного редактора

Мне необходимо как-то оптимизировать код, получаемый на выходе из векторного редактора Inkscape Для примера рисую базовую фигуру SVG - circle, формула которой состоит всего из нескольких строк ...
Alexandr_TT's user avatar
9 голосов
1 ответ
312 показов

Как сделать минимальный пример с видео на nodejs?

Как не подключая сторонних модулей сделать пример http-сервера с видео на странице?
Qwertiy's user avatar
  • 124k
9 голосов
5 ответов
12k показов

Не работает html5 видео в мобильниках

Вставил фоном html5 видео (видео расположено локально): HTML </header> <div class="video"></div> <video autoplay loop> <source src="po_13.mp4" type='...
Гошка Тарасов's user avatar
9 голосов
1 ответ
3k показов

Как поменять цвет контролов тега audio?

Имеется html5 тэг audio. Я в списке webkit нашел как поменять цвет таймлапса, но не нашел как поменять цвет контрола. Подскажите, для какого свойства нужно указать цвет? UPD: Для примера взял все ...
ilyaplot's user avatar
  • 3,603
8 голосов
4 ответа
515 показов

Как сделать прелоадер с изменением размера и цвета кругов

Нужен такой анимационный прелоадер, который будет работать пока будет отправляться и обрабатываться запрос. Пытался найти в интернете подходящий по макету - не нашел. Можно сделать кодом или gif.
Denis's user avatar
  • 1,701
8 голосов
3 ответа
355 показов

Прозрачное зачеркивание текста

Мне нужно реализовать прозрачное зачёркивание текста с помощью CSS, поэтому нет необходимости заменять тег <H1> на тега <IMG>. Мне удалось реализовать линии через текст с помощью CSS, ...
Alexandr_TT's user avatar
8 голосов
3 ответа
1k показов

Плавный морфинг одного изображения в другое

Допустим, в начале на дисплее находится лого Wordpress, которое начинает плавно исчезать и одновременно с этим, на этом же месте, начинает прорисовываться лого Twitter. В конце процесса остается ...
Alexandr_TT's user avatar
8 голосов
2 ответа
1k показов

SVG анимация блик элемента

Как при наведении на SVG-элемент реализовать эффект блика (когда осветлённый градиент проходит через весь элемент). Желательно без SMIL анимации, чтобы анимация касалась, как иконки, так и текста. ...
BlackStar1991's user avatar
8 голосов
2 ответа
2k показов

Как сверстать семейное древо на css?

Как можно сверстать такое семейное древо на css?
Sevastopol''s user avatar
  • 28.2k
8 голосов
2 ответа
2k показов

Как анимировать радиальный градиент с помощью CSS?

Я пытаюсь создать эффект анимации блеска с радиальным градиентом для блока div, но я не уверен, что мой способ, - лучший способ сделать это. Я не нашел других решений для достижения того, чего я ...
Alexandr_TT's user avatar
8 голосов
2 ответа
144 показа

Эффект свечения с тенью

У меня проблема со стилизацией объекта. Мне нужно создать эффект свечения с тенью в нижней части окна. У меня не получается создать такой эффект. Вот так должен выглядеть эффект свечения, который ...
Alexandr_TT's user avatar
8 голосов
3 ответа
542 показа

Линия с круговым отступом

Помогите разобраться, как сделано сердце с отступом вокруг него. Как получить такую же изогнутую линию? Это возможно с помощью CSS, HTML? Я знаю, как добавить сердце с ...
Alexandr_TT's user avatar
8 голосов
1 ответ
475 показов

Неравномерная анимация движения объекта со спецэффектами

Вопрос инспирирован ответом https://ru.stackoverflow.com/a/1048677/28748 Как сделать неравномерную анимацию движения автомобиля? То есть должно быть ускорение, замедление, остановка, трогание с ...
Alexandr_TT's user avatar
8 голосов
4 ответа
65k показов

Задать заливку svg в css

Всем доброго времени суток! Решил попробовать использовать svg-файлы в верстке, но столкнулся с проблемой - не задается цвет заливки. Пытаюсь прописать через fill, но тщетно. Вот код css .icon { ...
konstantin90's user avatar
7 голосов
3 ответа
449 показов

Как расположить текст полукругом поверх изображения?

Подскажите, как можно сделать как на картинке, текст полукругом поверх изображения?
user332017's user avatar
7 голосов
3 ответа
1k показов

Трехмерный (X, Y и Z) график с использованием D3.js

Я ищу график, который имеет 3 измерения (x, y и z) и использует D3.js. Пожалуйста, подскажите, есть ли какой-либо сайт по визуализации данных, где я могу найти такой график, или есть на самом сайте ...
Alexandr_TT's user avatar
7 голосов
3 ответа
3k показов

Как анимировать SVG с помощью ванильного JS?

Только начал открывать для себя SVG изучая немногочисленные туториалы. Разобрался, что существует три способа анимации: SMIL, CSS, JS. Если с первыми двумя всё понятно, то про третий я совершенно не ...
user avatar