Ответы пользователя по тегу Вёрстка
  • Анимация логотипа при наведении в веб?

    @lagudal
    для начала определить, как должны шевелиться волны. Отрисовать хотя бы еще одно их положение.
    SVG вставлять кодом, не img. По hover запускать css анимацию.
    очень упрощенно - но смысл такой.
    Ответ написан
  • Как бы вы сверстали этот блок?

    @lagudal
    вот реализация с ненавязчивой анимацией, на флексах
    https://codepen.io/dantilse/pen/oLvVeZ
    Картинки некоторые недоступны, ну да заменить не проблема.
    Ответ написан
  • Как правильно верстать такой дизайн?

    @lagudal
    Недавно совсем был вопрос по этому шаблону, не знаю, от вас ли от кого другого, лень искать.
    Конкретно в этом случае - если посмотреть на psd - в ресурсах лежат svg, и поскольку они (svg) нетяжелые, было бы логичным использовать svg как для фонов, так и для рисунков - во первых качество их будет безупречным, во-вторых, конкретно такие svg будут на порядок легче Jpeg или png- если их оптимизировать, конечно.
    В прошлый раз смотрел, когда показывали верстку, там были png по 100-200 кб, svg же - фоны вообще 1-2 кб, не больше, рисунки - по 10-20. Без потери качества.
    Ответ написан
  • Чем заменить position: sticky?

    @lagudal
    мне сейчас тоже пришлось найти альтернативное решение вместо position: sticky; , но у меня причина была в том, что по не вполне понятной мне причине главный wrapper-контейнер на странице имеет overflow: hidden, а при этом как известно position: sticky просто не работает. Непонятно почему, при изменении значения overflow на visible на маленьких разрешениях, мобильных, начинает плыть, размывается текст и контент съезжает в левую сторону, оставляя справа пустое пространство. Ставишь hidden - все четко и ровно.
    Знаю про решение с clip-path - да только конкретно мою проблему с размытием не решает.

    Остановился на простейшем нативном скрипте, в моем случае закрепляю хидер вверху страницы, когда небольшая по высоте плашка над хидером с не особо важной информацией проскролится.
    window.onscroll = function() {fixTop()};
    var header = document.getElementById("page-header");
    function fixTop() {
      if (window.pageYOffset > 33) { // 33px - высота "плашки"
         header.classList.add("sticky-header");
      } 
      else {
        header.classList.remove("sticky-header");
      }
    }

    думаю все понятно, дать добавленному классу для хидера fixed и все.
    Ответ написан
  • CSS height: auto для IE как пофиксить?

    @lagudal
    попробуйте для класса-обертки - img_box - вместо height:270px установить max-height: 270px
    Ответ написан
  • Можно скопировать страницы сайта?

    @lagudal
    Не просто можно, а нужно - тем более, если в дальнейшем планируется посадка на cms: как то трудно представляются себе страницы с одинаковым поведением но живущие при этом каждая своей жизнью, со своими классами, ид и тд... если вы еще не работаете с html-шаблонизаторами, попробуйте, потом не сможете без них... я сам не так давно опробовал pug, сейчас уже не понимаю, как раньше обходился без него... вообще как бы сейчас шаблонизаторы здорово облегчают жизнь верстальщика.
    Ответ написан
  • Вопрос об SVG графике в вебе?

    @lagudal
    Для новичка мне кажется это несколько сложный подход будет.
    Если вы вообще знакомы с векторной графикой, то будет проще начать таким образом.
    1.Откройте векторный редактор и нарисуйте нужную вам картинку - иконку, ну или любую пока простейшую картинку, какую хотите.
    2.Сохраните файл как svg.
    3. Откройте данный svg в любимом редакторе кода, например notepad++
    4. Посмотрите что находится между тегами и .
    5. Можете попробовать также следующее.
    а) Залейте этот svg файл на сервер себе, пропишите как обычную картинку - <img src = "path_to_file/file.svg" >
    б) Убедившись, что картинка отображается как обычная, удалите ее и ее вызов.
    в) В коде, где вы эту картинку вызывали, пропишите вместо <img src = "path_to_file/file.svg" >
    <svg> ---тут важ код svg--</svg>
    Почувствуйте разницу )))
    Думаю, вы сможете понемногу понять, что там все совсем не так сложно, во всяком случае башка на месте останется ))
    Пс. Ресурсы вам посоветовали отличные, изучайте )
    Ответ написан
  • Как сделать прозрачные буквы?

    @lagudal
    картинка не видна, но если вы сами выделили нужное вам в span - то почему бы просто не задать этому селектору opacity: 0.5; или сколько вам нужно?
    Ответ написан
  • Как сделать такую SVG анимацию?

    @lagudal
    Ну а почему нельзя - удочку - кроме вертикальной части лески и крючка - transform: rotate(здесь угол на который вертеть в deg), лучше всего вокруг катушки, а вертикальную часть синхронно transform: translate.
    Правда, тут вижу одну маленькую проблему - было бы изящнее, чтобы нижняя часть лески оставалась строго вертикальной, т.е. двигать ее только по Y - transform: translate(Y), но тогда удочку надо или немного удлиннять, или не крутить, а тоже двигать по оси Y .
    Или же нижнюю часть лески перемещать по обеим осям.
    В любом случае, если эти перемещения маленькие, только чтобы обозначить, то можно любой из вариантов использовать, лучше всего поиграться и посмотреть, как будет лучше выглядить.
    Кстати, я не вижу у этого рыбака правую руку, он инвалид что ли?
    Я просто чтобы понять, если рука не должна быть видна, то можно смело поднимать все по Y, если же рука видна, то поднимать все с рукой или все таки крутить.
    Ответ написан
  • Как сверстать макет из файла PDF?

    @lagudal
    У меня была подобная ситуация, проходил тестовую неделю на фирме. Дали макет в pdf, сетки нет, размеры непонятны вообще, на компе фотошопа и вообще ни одной графической программы нет и сказали "ты верстальщик тебе не нужен" - ps только для дизайнеров. Спросил - вы хотите на глазок? Да без проблем, кривые вы мои...
    В общем, взял скачал портабельный гимп, несколько сеток бутстраповских, подогнал дизайн - благо подошел под одну сетку.
    Макет выверстал, но в принципе знал, что работать у них не буду. Сказал, если у вас так все выстроено, то сорри, ищите других, а мне мои нервы дороги...
    Ответ написан
  • Как загрузить код (с js,css,fonts) одностраничника, доступ к которому под логином?

    @lagudal
    Т.е. вы хотите что называется рипнуть сайт? Если вы уверены что сайт чисто html css js то есть несколько вариантов. Самый простой - окрыть сайт после авторизации в devtools и постягивать все что надо.
    Вроде еще можно настроить телепорт или подобные программы для скачивания структуры сайта целиком - но я давно не имел с ними дел и не знаю честно говоря, как там с капчами сейчас. Может и есть нужное решение.
    Но вообще подобное чаще всего для того и применяют, чтобы труднее было стянуть.
    А может быть ведь еще одностраничник на php, или на фреймворках, типа angular react vue, там вообще мало что сделать можно.
    Ответ написан
  • Какие макеты верстать новичку?

    @lagudal
    В свое время, когда очень сильно искал работу и цеплялся за каждое предложение, согласился на испытательную неделю в другом городе (оплачиваемая работа, 5 дней в оффисе, верстка 2-х страниц, главной и контакта, + слайдер предпочтительно сказали на angular и контакт формуляр на php с ajax).
    В первый день получил рабочий ноут, под виндовс 7, на котором не было ни фотошопа ни вообще какой либо графической программы. В качестве макета получил вообще непонятно откуда взятый кривой pdf, размеры которого не совпадали с требуемыми на выходе. Да, еще нужен был полный респонсив, но на таблет- и мобильную версию даже такого не было дано.
    В общем, обплевался весь, поставил портабельный гимп, запилил туда бутстраповскую сетку, сделал с горем пополам jpeg, кое как подогнанный под эту сетку...
    В общем, в середине среды сделал, в общем то на мой взгляд, максимально неплохо, что можно было из этого сделать, но уже точно знал, что работать здесь не буду. Потому как мне сказали, что так будет всегда...
    Ответ написан
  • Баг с font-awesome или кривые руки?

    @lagudal
    у вас font-awesome подключен аж 3 раза - 2 раза в head ´
    <link rel="stylesheet" type="text/css" href="typo3conf/ext/multishop/templates/css/font-awesome/css/font-awesome.min.css?1528109206" media="all">

    <link rel="stylesheet" type="text/css" href="/fileadmin/templates/extern/font-awesome/4.6.3/css/font-awesome.min.css?1531392793" media="all">

    и один раз импортом, что вы и указали -
    @import url ("https://netdna.bootstrapcdn.com/fonz-awesome/4.6.3/css/font-awesome.min.css")


    один из подключеных в head, 4.4.0, два других показывают 4.6.3, из них что подключается с bootstrapcdn видимо как раз включает те иконки, что нет в других.
    Уберите эту чехарду, подключайте нужную версию только один раз, все равно в каком месте, и все будет нормально
    Ответ написан
  • Как правильно организовать пути и заливки в иконках svg при подготовке к вёрстке?

    @lagudal
    Вопрос следующий вообще можно не переводить пути в заливки? Если, да то для успешного изменения цвета стоит ли их группировать в файле ?

    Вопрос некорректный - кажется вы путаете path и stroke, или я не понял вопроса.
    Если все же понял, то лучше перевести, и создать составной контур, еще лучше - один контур, одна иконка.
    Тогда один раз hover - fill какой надо и все.
    Ответ написан