PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
tors
Отправлено: 05 Декабря, 2020 - 13:36:31
Post Id


Новичок


Покинул форум
Сообщений всего: 50
Дата рег-ции: Апр. 2010  


Помог: 0 раз(а)




Как сверстать такоя?
Без js, только css.
https://prnt[dot]sc/tuhp95
https://forms[dot]gle/M3M9JdYEPv9AspZG7



Требования к результату:
- нужна возможность крутить схему, надписи должны оставаться горизонтальными;
- должен тянутся на 80% от вьюпорта;
- нужна возможность масштабировать весь блок изменяя один параметр;
- без использования js
 
 Top
Vladimir Kheifets
Отправлено: 08 Декабря, 2020 - 16:04:21
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 596
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 28 раз(а)




tors пишет:
Как сверстать такоя?
Без js, только css.
https://prnt[dot]sc/tuhp95
https://forms[dot]gle/M3M9JdYEPv9AspZG7

Требования к результату:
- нужна возможность крутить схему, надписи должны оставаться горизонтальными;
- должен тянутся на 80% от вьюпорта;
- нужна возможность масштабировать весь блок изменяя один параметр;
- без использования js


Добрый день!

Такое только на CSS не сделать.

Во-первых, потому, что очень трудоемко "рисовать" на чистом СSS.
Например, как можно сделать одну деталь этой схемы, которая состоит из трёх сегметов окружностей. (без background)
Спойлер (Отобразить)
Можно было бы применить псевдо-элементы ::before, ::after, слои ,топы, лефты маргины, чтобы собрать все
детали, но точно их спозиционировать будет не легко.

Во-вторых, если эти мучения завершатся успешно, то возникнет проблема с кручением схемы.
Есть возможоность анимировать схему на CSS, но если она будет крутиться постоянно,
её никто не прочтёт. Значит необходимо ставить обработчик событий,
например, по клику по одному из сегментов или по наведению на него курсора.
Можно попытаться применить псевдо-классы target или focus, но наврядли это даст желаемый результат.

Удачи!
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB