Jump to content
  • Sign Up

Как сверстать такоя?


Recommended Posts

Как сверстать такоя?

Без js, только css.

https://prnt.sc/tuhp95

 

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

Link to post
Share on other sites

без js вы никак её не закрутите. 

https://codepen.io/search/pens?q=circle+menu&cursor=ZD0xJm89MCZwPTI= 
можете здесь посмотреть результаты. Может запрос скорректируете. 

Link to post
Share on other sites
21 час назад, torsar сказал:

- нужна возможность крутить схему, надписи должны оставаться горизонтальными;

Нужно именно без js крутить, средствами css3.

Link to post
Share on other sites
10 часов назад, torsar сказал:

Нужно именно без js крутить, средствами css3.

Крутить в смысле, чтобы пользователь мог с ней взаимодействовать? Без JS, как написали, никак. Если просто повернуть в стилях, без динамики, то смотрите CSS transforms.

Link to post
Share on other sites
  • 3 months later...
11.08.2020 в 19:57, torsar сказал:

https://prnt.sc/tuhp95

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

Link to post
Share on other sites

Не надо делать за меня. 🙂

Дайте совет, какие ништячки css3 использовать?

Наведите на правильный путь. 🙂

Это тест к вакансии верстальщика:

https://forms.gle/M3M9JdYEPv9AspZG7

Цитата

 

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


 

Раз потенциальный работодатель требует, значит можно как то? 🙂

Link to post
Share on other sites

В догонку.

Смотрите вложение.

Как сверстать такое (выделено красными квадратами)?

Можно без изображений?index2.png

Можно ли блок (div) сверстать так,  как на изображении

(смотрите вложение). Выделено красным квадратом.

Чтоб div был конусом с закругленным основанием.index3.png

Без картинок.

Link to post
Share on other sites
22 часа назад, torsar сказал:

Можно ли блок (div) сверстать так,  как на изображении

(смотрите вложение). Выделено красным квадратом.

Чтоб div был конусом с закругленным основанием.

Не надо себе задачу усложнять. Целиком всю картинку на фон ставьте и вращайте целым блоком ее. Вращение текстовых блоков компенсируйте отрицательным вращением вокруг своей оси.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Member Statistics

    47,165
    Total Members
    1,451
    Most Online
    LilyK
    Newest Member
    LilyK
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Свежие Темы

  • Последние сообщения

    • Full-R
      А давайте все возьмем MS Edge на базе Chromium и начнем делать нормальные PWA, которые устанавливаются в систему. FF сознательно сломал всю свою экосистему переписав CSS на Rust. Это говно не только глючить начало, но и тормозить. У нас есть общепринятый Webkit, который работает на Chromium и Safari. Что еще нужно? Не смотрите вообще на FireFox. Те кто гикает на Linux - нормальными не считаются. Linux - серверам, Windows - десктопам. Люди покупают чаще ПК или ноутбук с предустановленной Windows, а там стоит нормальный себе Edge, который уже не нуждается ни в каких извращениях. Зачем понимать Java и изучать отдельные извращенства на React, Vue или Angular, если можно сделать то же Progressive Web Application просто на том же jQuery или чистом JS? Выбор очевиден. Не имеет смысла даже рассказывать что все разработчики всех браузеров работают по одной программе. Я вот забил бы на вашем месте выяснять почему так с FireFox - я бы просто по башке Mozilla настучал и выгнал их исправлять ошибки. Никто ведь про их браузер из нормальных людей ни чего даже не знает. Его никто не устанавливает так как первым делом русские лезут на Яндекс или Mail и скачивают тот же хромиум в стрингах. А еще раньше они берут в руки свой Android, а там просто Chrome на любом устройстве. Не воскрешайте труп пожалуйста.
    • Igor Schnaider
      Скорее всего, особенности работы движка. Firefox принимает естественную, а не действительную ширину изображения. Из-за этого и распирает обертку. Тут ведь цикличная зависимость получается: высота изображения зависит от контейнера → изображение вычисляет ширину с учетом соотношения сторон → контейнер должен получить теперь эту ширину. WebKit или какие там сейчас движки, по-видимому, пересчитывают эту ширину (последний этап), FF – нет. Как исправить? Зависит от задачи. Для чего вам эта обертка нужна. Используется ли как-то? Как вариант, позиционировать само изображение... Повторю, зависит от контекста задачи.
    • Full-R
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...