• Какой оптимальный размер фонового изображения?

    andykov
    @andykov
    Shit happens
    1080р это вообще то видео разрешение.

    Для фона лучше использовать как минимум 1920px т.к. основная масса мониторов в этом разрешении или 2560 если учитывать 27 дюймовые моники.
    Если используете разные картинки в медиа запросах, помните, браузер будет грузить их все, что плохо.
    Ответ написан
    4 комментария
  • Можно ли использовать атрибуты для тега footer?

    Ankhena
    @Ankhena Куратор тега HTML
    Нежно люблю верстку
    https://webref.ru/html/footer

    Атрибуты
    Для этого элемента доступны универсальные атрибуты и события.
    Ответ написан
    4 комментария
  • Как сделать первый блок в высоту окна браузера?

    @shketi4 Автор вопроса
    Slow
    Все-таки разобрался сам, после написания поста(((
    background-size: cover;
    min-height: 100vh;
    Помогло
    Ответ написан
    2 комментария
  • (Визуальный редактор медиа-выражений и работа с psd прямо в редакторе/онлайн) Response and extract for brackets - альтернативы есть?

    @dmz9
    текстовый редактор - для текста, графический - для графики и макетов.
    пихать всё в одно это бред.
    я обычно для верстки использую пхпшторм, фотошоп для макетов, хром для результатов.
    ---------------------------------
    tl:dr
    в фотошопе юзай хоткеи, спрайты собирай сборщиком (не онлайн), мелкие картинки с макета экспортируй скриптом (есть встроеный сценарий), юзай гугл-фонтс или белку, адаптивные макеты одной и той же вьюшки лучше скидывать в одно рабочее поле
    в редакторе - юзай эммет (если есть), юзай лайвтемплейты (если редактор поддерживает), юзай автокомплит (если редактор поддерживает). юзай сборщики файлов (более системный совет). юзай другой редактор (если он нифига не поддерживает), например phpstorm / webstorm, грамотно организуй структуру проекта (логически), работай на основе какого нибудь адаптивного фреймворка (например бутстрап 4), юзай scss
    ---------------------------------
    longread
    в фотошопе можно ускориться так
    1. юзать хоткеи. по факту верстальщику надо знать от силы 15 хоткеев
    например вот такие (неполный список конечно же)
    • скопировать слой в новый файл.
    • тримминг пустых пикселей
    • сохранить в формате для веб (типа сохранение картинок) - их всеравно потом лучше бы пережать так как ФШ добавляет много лишнего мусора внутрь (этот хоткей есть так то)
    • вкл-выкл режим показа границ слоёв. мегаполезная фишка.
    • вкл-выкл направляющие.

    2. спрайты - мелкие фотки со всех макетов скидываешь в один новый файл, потом переименовываешь каждый слой по смыслу (в т.ч. ховер-слои) так чтобы названия не повторялись. далее запускаешь скрипт - импорт слоёв в файлы. он быстро всё триммингует, сохраняет в пнг и выплевывает в папку. название слоёв становится названием файла. однако скрипт достаточно "противный" и дописывает свои индексы в начале файла. исправляется единоразовой правкой самого скрипта (уже не помню где лежит, делал года 2 назад).
    далее, если ты действительно верстаешь а не пишешь голый цсс - у тебя есть сборщик. например я юзаю бутстрап 4 (который наверно уже не альфа) и грунт. в грунт прикрутил команду grunt sprite которая берет все пнг из папки (которые фотошоп туда положил) и собирает из них
    • файл спрайта
    • парциал сцсс для использования каждого спрайта по отдельности в коде других парциалов

    сборщик это примерно такой
    "grunt-spritesmith": "^6.3.1"
    код примерно такой
    sprite:{
          all: {
            src: './sprite/*.png',
            dest: './../images/sprite.png',
            destCss: './scss_custom/_sprite.scss',
            imgPath: '../../../images/sprite.png',
            padding: 3,
            algorithm: 'left-right',
            cssVarMap: function (sprite) {
              sprite.name = 'sprite-' + sprite.name.replace(/\s|\(|\)/g, '_');
            },
            cssTemplate: 'css.sprite.template'
          }
        },

    спрайт темплейт примерно такой
    {{#spritesheet}}
    @mixin sprite(){
    	display:inline-block;
    	overflow:hidden;
    	background-image: url({{{image}}});
    	background-repeat: no-repeat;
    }
    .sprite{
    	display:inline-block;
    	overflow:hidden;
    	background-image: url({{{image}}});
    	background-repeat: no-repeat;
    }
    {{/spritesheet}}
    {{#sprites}}
    .{{name}}{
      background-position: {{px.offset_x}} {{y}};
      width: {{px.width}};
      height: {{px.height}};
    }
    @mixin {{name}}(){
      background-position: {{px.offset_x}} {{y}};
      width: {{px.width}};
      height: {{px.height}};
    }
    {{/sprites}}

    генерирует не только сам класс но еще и миксин (который можно юзать во всяких ховер-эффектах!)
    вобщем, тут сборщик очень сильно упрощает и автоматизирует сборку спрайтов. с ужасом вспоминаю дни когда руками их собирал в онлайн сервисе.
    если юзаешь что то другое (компас, гулп или что там еще за звери наплодились) - красава, разберешься наверно как прикрутить.
    3. вытаскивать фотки и сохранять - в фотошопе занимает около 4 секунд (по одной, руками).
    там даже мышкой не надо тыкать (при условии что слой уже выбран).
    алго примерно такой
    • хоткей - скопировать на новый документ, ок, ты перешел в новый таб
    • хоткей - тримминг пустых пикселей - фотка обрезана по размеру
    • хоткей - сохранить для веб - и вот ты уже выбираешь место сохранения.

    4. иногда дизайнеры ленятся и не обрезают фотки - на помощь приходит выделение нужного куска макета и "скопировать совмещенные данные". сразу же делаешь новый файл, энтер, ctrl+v, сохранить.
    5. юзай линейку, заставляй дизайнеров соблюдать одинаковые отступы, проси шрифты которые юзали в макетах (хотя бы в одном формате), храни наборы конверченых для пуленепробиваемого font-face у себя где нибудь на складе - часто могут пригодиться. подключение уже готовой пачки шрифтов на все вкусы браузеров - что может быть приятнее (и быстрее) ? ммм, наверно только гоогле-фонтс.
    6. адаптивные макеты я обычно скидываю все в один файл (один вид = 4-5 макетов, напр. карточка товара). так проще смотреть что куда уплывает и куда перемещается.
    -----------------------
    ускорение в редакторе
    юзаю phpstorm. в его состав входит webstorm поэтому этот варик чуть менее чем абсолютный эпик вин. в него интегрируется вообще что угодно, в т.ч. можно настроить собственные вотчеры файлов (сасс, лесс) (без грунта/гульпа итп). алсо - автоподсказки кода (и тех миксинов спрайтов тоже), лайв-темплейты очень удобная штука, а еще встроеный эммет - совсем красота.
    в шторме есть лайв-релоад. если имеешь хотя бы 2 монитора - можно заценить. на одном браузер, на другом верстаешь - тут же видишь результат (вотчер компилирует цсс, лайв релоад его перечитывает и обновляет)

    всё делается на парциалах (т.е. файлы-кусочки в терминологии сасс "partials"). парциалы прикольны тем что вотчер не станет компилировать новый парциал в готовый код, пока ты его никуда не подключил. а если писать без подчеркивания - станет (т.к. это уже не парциал). т.о. создание таких файлов не ломает промежуточные результаты работы.

    для адаптивной верстки выглядит примерно так
    /* /includes/header/_header.scss */
    header{
    	@include media-breakpoint-up(md){
    		margin-bottom: .5rem;
    	}
    	.top{
    		border-bottom: 1px solid #ccc;
    		height: (42rem/16); // нужно было 42 пикселя, а рем = 16. приходится изворачиваться
    		font-size: (14rem/16);
    		margin-bottom: (28rem/16);
    		@include media-breakpoint-up(md){
    			margin-bottom: 3rem;
    		}
    		@include media-breakpoint-up(lg){
    			border-bottom: 0;
    		}
    	}
    }

    для справки -
    $grid-breakpoints: (
    		xs: 0,
    		sm: 480px,
    		md: 768px,
    		lg: 960px
    );

    media-breakpoint-up - миксин бутстрапа 4, просто сразу говорит о том что "для экрана больше чем md будет вот так то". само собой есть и -down, -between.
    причем вся конструкция для миксина тоже не пишется руками - для этого есть лайв темплейт
    поэтому я пишу (tab - это раскрытие эммета или лайв-темплейта)
    bp (tab) md (tab) mb.5rem (tab)
    это раскрывается в
    @include media-breakpoint-up(md){
      margin-bottom: .5rem;
    }

    и компилируется в
    @media (min-width: 768px) {
      header {
        margin-bottom: .5rem;
      }
    }

    не призываю юзать бутстрап прям везде и всюду - призываю лишь юзать "наработки" которые позволяют забыть о написании медиа-запросов руками. даже если от бутстрапа юзается одна сетка - да или хоть вообще одни миксины - это того стоит.
    Ответ написан
    2 комментария
  • Как добавлять класс при наведении и удалять, когда курсор ушел с элемента?

    Wolfnsex
    @Wolfnsex
    Если не хочешь быть первым - не вставай в очередь!
    Как отредактировать этот код, чтобы когда курсор ушел с элемента класс удалялся?

    Например, так.
    Ответ написан
    2 комментария
  • Как выровнять несколько тэгов li с float:left по центру ul?

    lacrim
    @lacrim
    Отшибленный на всё голову экспериментатор.
    Ваша задача решается отказом от float left в пользу display: inline-block

    Вот так например:

    ul {
    text-align:center;
    }
    ul li {
    display:inline-block;
    }
    Ответ написан
    Комментировать
  • Как конвертировать текст в речь на php?

    snipeer777
    @snipeer777
    Middle E-Commerce
    Есть js библиотеки , с помощью которых делают сайты для слабовидящих, с озвучкой
    Ответ написан
    Комментировать
  • Как делать адаптивные страницы?

    webirus
    @webirus
    Тыжверстальщик! Наверстай мне упущенное...
    Руками, берете и верстаете адаптивно. Профит! У вас адаптивная страница.
    Ответ написан
    1 комментарий
  • Как правильно скоротить код JavaScript с IF\ELSE?

    kentuck1213
    @kentuck1213
    Удалить весь этот код. И написать на css с брекпоинтами.
    Ответ написан
  • Как задать цветовой фон поверх фонового изображения?

    @DmitriiAl Автор вопроса
    начинающий верстальщик
    спасибо, before и z-index помогли :)
    Ответ написан
    Комментировать
  • Как правильно загружать CSS/JS ("//" или"http ://")?

    yarkov
    @yarkov Куратор тега JavaScript
    Помог ответ? Отметь решением.
    // Явно обращаемся по https
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    // Обращаемся по используемому на вашем сайте протоколу
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    Ответ написан
    2 комментария
  • Как правильно сверстать такое?

    @WQP
    Обычным border-radius вместе с overflow: hidden
    Ответ написан
    1 комментарий
  • Ломается сайт когда вставляю html код?

    webinar
    @webinar
    Учим yii: https://youtu.be/-WRMlGHLgRg
    Ничего там не ломается. Просто Вы слайдер в шапку вставляете и у него высота больше чем у шапки, соответственно все двигается вниз, кроме меню, у которого явно фиксированное позиционирование с отступом сверху равному высоте старой шапки.
    Ответ написан
    Комментировать
  • Существует ли решение для компиляции LESS/SASS/Stylus/etc. без Node.js на десктопе?

    loratokareva
    @loratokareva
    html верстальщик
    http://winless.org

    работаете в файле mysite.less
    автоматически изменения формируются в файл mysite.css он и подключен в html
    <link rel="stylesheet" href="mysite.css">
    Ответ написан
    Комментировать
  • Как можно при компиляции less в css сохранить комментарии?

    loratokareva
    @loratokareva
    html верстальщик
    /*! Ваш комментарий !*/

    этот вид комментария в name.less сохраняется после компеляции в файле name.css
    Ответ написан
    Комментировать
  • Как перевести стандартную верстку 960 grid в адаптивную?

    @Gustov
    ширина блоков в пикселях + медиазапросы и тд.
    Ответ написан
    Комментировать