Libiros

User
  • Content count

    73
  • Joined

  • Last visited

Community Reputation

-1 Плохая

About Libiros

  • Rank
    Участник
  • Birthday 08/20/1991

Information

  • Sex
    Мужчина
  • From
    Краснодар
  • Interests
    HTML5, CSS, JavaScript, Wordpress, Bootstrap

Contacts

  • Skype
    Libiros

Recent Profile Visitors

937 profile views
  1. Давно придумали костыли в виде .js библиотек, чтобы везде все поддерживалось. Один лишний HTTP-запрос роли не сыграет, зато геморроя станет куда меньше.
  2. Libiros

    background-attachment

    Scroll - Фон прокручивает вместе с элементом. Это значение по умолчанию Local - Фон прокручивается вместе с содержимым элемента А наглядно можно здесь посмотреть
  3. Как минимум, вот так. Но нужно еще сделать динамические переносы для <p>. Но сами разберетесь .services { display: flex; } .service { text-align: center; margin-right: 32px; padding:0; display: inline-flex; } .service:last-child{ margin-right: 0; } .service img { max-width: 100%; margin: 0 auto; } .service a p { align-items: flex-end; text-decoration: none; font-size: 16px; font-weight: bold; color: #2a2a2a; }
  4. Дополню еще тем, что можно поставить box-sizing: border-box; Тогда вообще все размеры будут известны и ничего высчитывать не придется
  5. А мне нравится. А что там не так? Я согласен. Я стараюсь делать исключительно так, чтобы было удобно и комфортно. А семантика вот важна. Хотя, в последнее время я занимаюсь проектами, которые предполагают оплату контекстной рекламы и на семантику им плевать. Но ведь хочется же, чтобы все было по красоте... Эх.
  6. Видел Но пример привести не смогу, увы. Но и само расположение элементов на таком сайте было простым, честно говоря. Раньше темы на Wordpress были такими вот семантически верными и можно было или вручную или с помощью плагина подключить разметку Scheme и вообще все было в порядке. Но без уникального дизайна, потому что тогда придется плодить div'ы
  7. Я смотрю на современные сайты и их исходный код. Потом я смотрю на то, какой получается верстка, благодаря bootstrap и ему подобных css-фреймворков. И у меня зреет далеко не новый вопрос - как верстать? Чтобы выровнять тот или иной блок, приходится прибегать к тому, что мы плодим бесконечные <div>. Для каждого пишем класс и разрабатываем его в лишних строках CSS. И подключаем еще один CSS с media queries, чтобы все получилось адаптивно... Да, сейчас к нам приходят flex и это здорово! Это как раньше была замена табличной верстки или введение анимаций. Но семантика рушится. Раньше я ориентировался на What Beautiful HTML looks like, но сейчас это далеко не всегда возможно. Какие ваши мысли?
  8. Насколько я понял, нужно сделать так: <span> <a href=""> Description Description Description Description Description Description </a> </span> CSS: span { display: block; text-align: center; } a { line-height: 2; padding-bottom: 5px; border-bottom: 1px solid green; text-decoration: none; } Рабочий пример в песочнице: https://jsfiddle.net/e6ptfx6s/2/
  9. Тоже хорошая идея!
  10. Я решил проблему использованием полигонов. Возможно, было хорошим предложением использовать SVG, но применение сомнительно из-за семантики текстовых блоков. Примеры в песочнице выше. Интересно было бы выяснить, насколько тяжело рендерить полигоны, особенно если точек в них много. Например, в редакторе brackets мой ноутбук подвисает (хотя, при открытии файлов типа bootstrap.css тоже). Также решаема проблема со случайными величинами. Скажем, я использовал определенный полигон, но что делать, если мне нужно использовать разные значения каждый раз? Очень просто генерировать их с помощью javascript используя Math.round(Math.rand()....). Что касается круглых DIV или изогнутых, то здесь ситуация чуть сложнее и решается двумя способами. Один был уже предложен, правда его стоит доработать. Второй описан в этой статье, хотя там не совсем про "волны", но можно решить и ими, а также генерацией необходимых значений.
  11. ...и текст. Интересует, насколько семантически верно использовать текст в SVG? Я бы засунул его с помощью <text>, но насколько это будет правильно, в сравнении с используемыми мной на сайте тегами h2, h3, strong, p?
  12. В целом, у меня получилось сделать все правильно, с учетом того, что у div и div:before стоит свойство height:100vh в моем проекте. Однако теперь возникает проблема в нижней границе. В песочнице видно, что есть нижняя граница толщиной, на вид 1px, но я решил эту проблему градиентом. К слову, тоже не ясно, почему это проявляется. И еще есть проблема в том, что несколько таких div'ов использовать я не могу. Так как мне нужно наложить один четко под другим. Но он располагаются на расстоянии. В картинке отражаю.
  13. Получается вот так: И вроде бы все хорошо, но попробуйте написать внутри <div> какой-нибудь <p> как все едет. Почему, не понимаю
  14. Это интересная идея. И она бы подошла, если бы обрезка не была такой же "кастомной". То есть сейчас в примере у меня изогнутые линии. Возможно, какие-то блоки будут в виде остроугольного забора. Пока что нашел решение генерировать div через clip-path: polygon(); но теперь нужно придумать, как сделать border на нем... Варианты есть, но все выглядят как костыли.