Задать вопрос
DimaShved

Дмитрий Шведов

Web designer
Ответы пользователя по тегу CSS

  • Как реализовать тень, вернее как правильно указать параметры тени исходя из макета в Photoshop?

    DimaShved
    @DimaShved
    Web designer
    Судя по всему у вас PS не старой версии, а следовательно выберите слой к которому применен стиль, правой кнопкой, затем копировать CSS и вставляем куда вам удобней.

    В итоге 
    box-shadow: 0.5px 0.866px 5px 0px rgba(0, 0, 0, 0.75);
    Ответ написан
    Комментировать
    Комментировать

  • Отображение шрифта icomoon не корректно?

    DimaShved
    @DimaShved
    Web designer
    1. Все должно быть в кривых и иметь замкнутый контур. Не каких линий и кружочков все в <path>
    2. Желательно иконки делать по сетки, что бы избежать сложных цифр (сэкономит несколько байт, на фоне 100 иконок очень сильно заметно)
    3. Прогоняем https://jakearchibald.github.io/svgomg

    Если вы не умеете работать с SVG в графических редакторах, отдавайте дизайнеру обратно.

    Не вижу скриншота, возможно не так понял проблему.
    Ответ написан
    Комментировать
    Комментировать

  • Можно ли, все экспортировать в .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.
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно задать высоту блока когда между верх и ниж. контентом большое расстояние?

    DimaShved
    @DimaShved
    Web designer
    Как тебе такой вариант?

    К левому блоку
    .navigation {
    background: #31475E;
    bottom: 0;
    left: 0;
    position: fixed;
    text-align: left;
    top: 0;
    width: 250px;
}

    К правому блоку
    .page {
    padding-left: 250px;
}

    В левом блоке делаем footer
    .footer {
    bottom: 0;
    position: absolute;
}
    Ответ написан
    2 комментария
    2 комментария

  • Как вывести посты в таком оформлении?

    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;
}
    Ответ написан
    1 комментарий
    1 комментарий