Ответы пользователя по тегу HTML
  • Какой фотошоп необходим верстальщику?

    DimaShved
    @DimaShved
    Web designer
    Любая версия, завесит от многих факторов, что вам нужно от PS, какие присылают макеты.
    У меня оптимизированный макет для верстки весит 40-80мб. Я думаю такой макет на вашей системе не тормозил бы с версией СС 2017.

    CS6 Достаточно для современной, комфортной верстки, если макеты без монтажных областей.

    Советую самому выбрать что вам больше подходит, смотрите инструменты и требования вот ссылки:
    Системные требования всех версий
    История версий
    Ответ написан
    Комментировать
  • Можно ли, все экспортировать в .png?

    DimaShved
    @DimaShved
    Web designer
    Все зависит от самого изображения, где его применять, размеры, кол-используемых цветов.

    Как выбрать формат?
    1. Все приходит с опытом. Чем чаще сохраняете "Сохранить для Web" и играетесь с настройками и тем самым наблюдаете за размером изображения, то вы начнете понимать где и как лучше сохранить изображение.

    2. Большое изображение в виде фона, большой фотографии где используется много цветов лучше сохранять в JPG. Но даже тут не без исключений. Создайте документ 1920x1080, белый фон, поставьте кистью точку около 10px без растушевки. Далее сохраняем для web. В настройках если указать JPG качество 70, такой файл весит около 24кб. А теперь возьмем PNG8 так как точка одного цвета, 10 оттенков хватит, в таком случае файл уже весит 2кб.

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

    4. Иконки и прочие мелкие элементы всегда SVG и PNG (PNG8 если используется мало цветов). Так же PNG подходит для постов у которых однотонный фон и на нем какая то графика (фигуры и прочее). Проще говоря PNG начинает много весить где используется много цветов (там где много градиентов и переходов)

    Советую поэкспериментировать с сохранением и понять зависимость.

    А ответ на вопрос простой: Да
    Плохой тон все сохранять в PNG.
    Ответ написан
    Комментировать
  • Как добавить в Sublime Text 3, HTML документа свой цвет определенному элементу?

    DimaShved
    @DimaShved Автор вопроса
    Web designer
    Вот что получилось!

    8b862dca99504b4c87f14fa2be1202a0.png
    Немного дополню ответ Александра. В моем случае нужно чтобы все подсвечивалось после //=, так как путь к шаблону может быть любой.

    Решил так, взял пример с комментирования. И переделал под свои нужды. В итоге открывающий тег получился //=, а закрывающийся .html. Прошу заметить, закрывающегося тега нет, так как gulp-rigger не сможет распознать нашу строку, но так как все шаблоны заканчиваются на .html, то пусть он и будет являться закрывающим. В итоге чтобы я не написал межды тегами //= и .html будет подсвечиваться.

    Как это выглядит в "HTML.sublime-syntax"
    Вставил после main у меня это 15 строка, с соблюдением отступов.
    - match: //=
          scope: rigger.html
          push:
            - meta_scope: rigger.html
            - match: '.html'
              pop: true


    Так как у меня установлена тема Piatto Dark то и файл я переделыва из этой темы.

    Как это выглядит в "Piato Dark.tmTheme"
    Вставил сразу после <array>
    <dict>
    			<key>name</key>
    			<string>HTML: Rigger</string>
    			<key>scope</key>
    			<string> text.html.basic rigger.html </string>
    			<key>settings</key>
    			<dict>
    					<key>foreground</key>
    					<string>#b39624</string>
    			</dict>
    </dict>

    Еще раз большое спасибо Александру, надеюсь кому нибудь пригодится. Мелочь, а приятно :)
    Ответ написан
    Комментировать
  • Как вывести посты в таком оформлении?

    DimaShved
    @DimaShved
    Web designer
    Я бы сделал проще и без PHP, если конечно такой вариант подходит.
    Обращался бы к элементам через псевдокласс :nth-child(even) (все четные элементы).
    Далее в стилях обращаемся ко всем четным элементам и делаем с ним все что угодно.

    Стандартный шаблон поста html
    <article>
            <div class="row">
                    <div class="col-md-6">Текст</div>
                    <div class="col-md-6">Изображение</div>
            </div>
    </article>


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

    css
    В итоге обращаемся к каждому второму элементу поста и меняем местами обтекание колов.
    article:nth-child(even) .col-md-6:first-child {
            float: right;
    }
    Ответ написан