Recommended Posts

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

В общем проблема в следующем, есть меню, диагональное меню http://clip2net.com/s/50cAtD вот такое, я понятия не имею как его верстать, уже и так и сяк, не буду говорить что перерыл весь интернет, но по запросам "нестандартное меню, Диагональное меню ... " перерыл google до 10 страницы, а дальше сами понимаете, прошу помощи, может кто делал, кто знает.

За ранее спасибо, буду благодарен за любой ответ.

Share this post


Link to post
Share on other sites

что-то вроди http://jsfiddle.net/RLScn/

но мне кажется лучше сделать сначала основной блок меню с единым фоном. а на активный элемент внутри основного блока накладывать поверх еще фон с png'шкой со срезанными углами.

Edited by wwt

Share this post


Link to post
Share on other sites

Ну тут можно с помощью css трансформации и спрайтов сделать это меню.

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

В общем проблема в следующем, есть меню, диагональное меню http://clip2net.com/s/50cAtD вот такое, я понятия не имею как его верстать, уже и так и сяк, не буду говорить что перерыл весь интернет, но по запросам "нестандартное меню, Диагональное меню ... " перерыл google до 10 страницы, а дальше сами понимаете, прошу помощи, может кто делал, кто знает.

За ранее спасибо, буду благодарен за любой ответ.

Ещё думаю ,можно ссылки с картинками в тег <figure> обернуть

Share this post


Link to post
Share on other sites

Ну тут можно с помощью css трансформации и спрайтов сделать это меню.

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

Никогда не цитируйте свои собственные сообщения, если это не требуется для того чтобы кому-то что-то объяснить и указать на ваш пост, но в тоже время оппонент должен реагировать на ваши сообщения, а не вы сами общаться сам с собой ))) А если вам просто что-то хочется добавить пишите так -"я писал в посте номер таком-то". Это совет, без обид =)

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

Лучше, да не лучше. Если нужны скошенные углы, и это важно. Трансформация + деградация для старых браузеров. Проще и эффективнее сделать стандартный фон для не активных элементов и в активном элементе накладывать картинку со срезанными углами. Это будет работать везде. =)

ЗЫ Я за улучшение веб-технологий, но все таки из двух зол нужно выбирать меньшее, но это скоро кончится я надеюсь =) Может даже доживу хD

Edited by wwt

Share this post


Link to post
Share on other sites
Лучше, да не лучше. Если нужны скошенные углы, и это важно. Трансформация + деградация для старых браузеров. Проще и эффективнее сделать стандартный фон для не активных элементов и в активном элементе накладывать картинку со срезанными углами. Это будет работать везде. =) ЗЫ Я за улучшение веб-технологий, но все таки из двух зол нужно выбирать меньшее, но это скоро кончится я надеюсь =) Может даже доживу хD

У варианта с картинкой, и у того же варианта с псевдо-элементами, который предложили выше, есть очень неприятная проблема. Проблема в том, что зона взаимодействия, все равно остается прямоугольной, а значит не соответствует с визуальным отображением, а это неправильно, ИМХО

Share this post


Link to post
Share on other sites

У варианта с картинкой, и у того же варианта с псевдо-элементами, который предложили выше, есть очень неприятная проблема. Проблема в том, что зона взаимодействия, все равно остается прямоугольной, а значит не соответствует с визуальным отображением, а это неправильно, ИМХО

А что мешает эту неприятность решить путем наложения поверх каждого пункта меню активной области изображения (используя area)?

Share this post


Link to post
Share on other sites
А что мешает эту неприятность решить путем наложения поверх каждого пункта меню активной области изображения (используя area)?

Ничего не мешает, только это совсем другая ситуация, при чем тоже со своими проблемами

Share this post


Link to post
Share on other sites

У варианта с картинкой, и у того же варианта с псевдо-элементами, который предложили выше, есть очень неприятная проблема. Проблема в том, что зона взаимодействия, все равно остается прямоугольной, а значит не соответствует с визуальным отображением, а это неправильно, ИМХО

А что мешает эту неприятность решить путем наложения поверх каждого пункта меню активной области изображения (используя area)?

Отличная идея!

Share this post


Link to post
Share on other sites

Как будете решать отображение ховер эффектов в подходе на мапах?

area:hover однако,это никем не практиковалось

Share this post


Link to post
Share on other sites
area:hover однако,это никем не практиковалось

пример на jsfiddle, пожалуйста :)

Share this post


Link to post
Share on other sites
можно ссылки с картинками в тег <figure> обернуть

Но не нужно. Он предназначен для другого — иллюстраций, примечаний и т.п. А в таком меню, по большому счету, картинка — чистое оформление, и место ей в CSS-фоне/спрайте.

Share this post


Link to post
Share on other sites

И ты, Брут alexriz, с «-.31em;»... ну ладно -.31 для конкретного шрифта могу понять, но почему для Оперы -.43? Почему не -1, наконец, так же короче?..

Share this post


Link to post
Share on other sites
И ты, Брут alexriz, с «-.31em;»... ну ладно -.31, но почему для Оперы .43? Почему не -1, наконец, так же короче?..

хмм, осталось, со старых времен значение)) Спасибо, буду знать

А с "-.31em", знаю знаю, надо быть осторожным :)

Share this post


Link to post
Share on other sites
И ты, Брут alexriz, с «-.31em;»... ну ладно -.31, но почему для Оперы .43? Почему не -1, наконец, так же короче?..

хмм, осталось, со старых времен значение)) Спасибо, буду знать

А с "-.31em", знаю знаю, надо быть осторожным :)

Ссылки становятся inline-block'ами (грубо говоря словами в строке), между ними образуются пробелы (word-spacing). В Вашем примере проблему решает letter-spacing (расстояние между буквами). Также Вы добавляете word-spacing. Я так понимаю что это решения для разных браузеров? Почему в данном случае работает letter-spacing?

Share this post


Link to post
Share on other sites

Это очень интересная и захватывающая история, лучше я предоставлю слово товарищу SelenIT'у, он отлично ее рассказывает :)

Share this post


Link to post
Share on other sites

Это очень интересная и захватывающая история, лучше я предоставлю слово товарищу SelenIT'у, он отлично ее рассказывает :)

Просим

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Valery Subbotin
      Здравствуйте, подскажите, пожалуйста, в чем может быть проблема: при вертске, блоки текста имеют совсем иные переносы нежели на макете.
      Шрифт, насыщенность(font-weight), размер - все как на макете, но что-то, видимо, все равно не так.


    • By Svenden
      Как слово эквилибриум сдвинуть немного вниз ? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Эквилибриум </title> <link rel="stylesheet" href="/ecomapp/assets/css/style.css"> <meta name="description" content=""/> <meta name="keywords" content=""/> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top"> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8"> <ul class="nav navbar-nav"> {% if not request.get_full_path == '/' %} <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Категории <span class="caret"></span></a> <ul class="dropdown-menu"> {% for category in categories %} <li><a href="{{ category.get_absolute_url }}">{{ category.name }}</a></li> {% endfor %} </ul> </li> {% endif %} </ul> </div> </nav> <!-- Page Content --> <div class="container"> {% block content %} <div class="row"> <div class="col-lg-3"> <p class="lead">Эквилибриум</p> <div class="list-group"> {% for category in categories %} <a href="{{ category.get_absolute_url }}" class="list-group-item">{{ category.name }}</a> {% endfor %} </div> </div> <!-- /.col-lg-3 --> <div class="row"> {% for product in products %} <div class="col-lg-4 col-md-6 mb-4"> <div class="thumbnail"> <img src="{{ product.image.url }}" alt="" style="width:100px; height: 150px;"> <div class="caption"> <h4 class="pull.right">{{ product.price }} руб.</h4> <h5><strong><a href="{{ product.get_absolute_url }}">{{ product.title }}</a></strong></h5> <p>{{ product.description }}</p> </div> </div> </div> {% endfor %} </div> <!-- /.row --> </div> <!-- /.col-lg-9 --> </div> <!-- /.row --> </div> <!-- /.container --> <div class="container"> {% endblock content %} </div> </body> </html> <footer class="py-0 bg-dark"> <div class="container"> <p class="m-145454 text-green">Copyright © Your Website 2019</p> </div> <!-- /.container --> </footer>
    • By Valery Subbotin
      Здравствуйте, подскажите пожалуйста как избавиться от отступов в тексте, чтобы границы блока обтекали текст пиксель в пиксель.
      Все padding-и разумеется убрал, но непонятный зазор между границей блока и текстом все ровно остался.

  • Member Statistics

    46,434
    Total Members
    3,128
    Most Online
    Sterben
    Newest Member
    Sterben
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Если свойства нет в спецификации, то откуда его возьмет браузер? Даже если в каком то одном из браузеров введут это свойство то смысла его использовать все-равно не будет, так как в остальных оно работать не будет 🙂   Тогда бардак творился, DHTML, разные объектные модели и все дела. У netscape действительно была такая фича. Хотя не факт что она работала. Вот тут https://www.uv.es/jordi/v3/html/dynhtml/dynamic.pdf можно увидеть что float:center; присутствует в коде, но следом написано что элементы можно выровнять с помощью float слева или справа, или с помощью js по центру. Также в книге указаны допустимые значения для float - left, right, none. Так что это скорее всего была запланированная возможность, которая не получила реализации.
    • Если бы с html и css, все браузеры строго соответствовали спецификациям) Да статье около десятка лет, а то и более. Вот я тоже склоняюсь к тому, что это ошибка. но эта лекция была написана даже с учётом ещё живого на тот момент netscape navigator. Может быть он позволял интерпретировать такую конструкцию. В описании автор указывает, что так блок становится обтекаемым с двух сторон.
    • Может с clear путаете? Или в статье спутали. Наверно, древняя?
      http://htmlbook.ru/css/clear
  • Popular Contributors