Ответы пользователя по тегу CSS
  • Как задать свойства следующего элемента?

    soprun
    @soprun
    Software Architecture
    .panel {
    	border: 1px solid black;
    }
    .panel + .panel {
    	border-top-color: red;
    }

    Ну или же через nth-child
    Ответ написан
    Комментировать
  • Оцените первую верстку из psd макета?

    soprun
    @soprun
    Software Architecture
    Начало хорошие :)
    Советы на будущие:
    Не используй position: absolute без необходимости.
    top, right, left, bottom - Это очень плохо.

    margin - это отступ от блока.
    Например есть горизонтальный список и необходимо у каждого элемента списка сделать отступ с лева и права.

    ...

    nav a:first-child {
        padding-left: 19px;
        margin-left: 128px;
    }

    К примеру у bootstrap есть класс container который центрует содержание страницы.

    ...

    .hero-shirt {
        margin: 67px 0 0 78px;
    }

    Здесь нужно было использовать padding, так как по логике элемент должен идти внуторь, а не изнутри.

    ...
    Так же очень важно использовать модульную сетку grid. Она помогает позиционировать элементы на страницы.
    ...

    nav a:after {
        content: "|";
        padding-left: 18px;
    }

    Лучше было бы использовать как то так:

    nav {
        /* ... */
    }
    nav ul {
        text-align: center;
        letter-spacing: -.3em; /* убирает пробелы между inline */
    }
    nav li {
        display: inline-block;
        letter-spacing: normal; /* нормализует пробелы */
    }
    nav li + li {
        border-left: 1px solid white;
    }
    nav a {
        display: block;
        color: white;
        padding: 0 10px; /* Но лучше использовать EM */
    }


    Не используй локальные шрифты!
    Ну для начало, это не легально..
    Есть специальные сервисы по хранению шрифтов. Они бесплатны и не нарушаешь права/лицензию и т.д.
    Google Fonts,
    fonts.com

    А вообще ты умничка и у тебя очень здорово получилась первая работа, желаю дальнейших успехов ))
    Ответ написан
    Комментировать
  • Связана ли адаптивная верстка с дизайном?

    soprun
    @soprun
    Software Architecture
    Адаптивный дизайн - подразумевает собой оформления веб-страницы таким образом что элементы могут перемещаться, сдвигаться и убираться не нарушая целостность композиции.

    Адаптивная верстка - это уже техническая составляющая. HTML и CSS разметка сделана таким образом что элементы имеют "плавность" и легок адаптируются по размер браузера, так же оптимизировано под загрузку мобильных устройств.
    Сжатие html, css, javascript и оптимизация изображений, как правило для дисплеев retina добавляются специальные правила, что бы на современных телефонах отображались более качественно.

    Кроссбраузерность
    Корректность работы зависит от программиста, если он хороший то этой проблемы не будет, так как опытный человек изначально создает кроссбраузерную верстку. (это на уровне подсознания)

    Связана ли адаптивная верстка с дизайном?
    Да! Если дизайн не подразумевает собой возможность "плавать" (визуально оставаться целостным), то возникают проблемы.
    Ответ написан
    Комментировать
  • CSS. Как избавиться от наследования?

    soprun
    @soprun
    Software Architecture
    Так и не получится.
    opacity в данном случае не наследуется.
    Элемент прозрачный на 30%, соответственно все внутренние элементы будут прозрачнее...
    Ответ написан
    2 комментария
  • Почему при масштабировании страницы верстка летит?

    soprun
    @soprun
    Software Architecture
    Не могу сказать что это нормально или нет.
    Но пару советов могу дать!

    Так как проблемы часта из за размера шрифтов при масштабировании самый лучший и простой вариант использовать %, em, rem.

    REM - CSS 3 не везде поддерживается, лучше использовать % или EM.
    Для расчета EM'ов используй препроцессоры LESS или SASS.

    Как правило при верстке используют гиды "grid", они всегда должны быть в %.
    Ответ написан
    Комментировать
  • Chrome или Firefox для веб разработки?

    soprun
    @soprun
    Software Architecture
    Мой основной браузер Chrome, для проверки кроссбраузерности использую другие то есть, Firefox и [цензура] IE.
    Opera, Chrome, Safari на webkit, так что между ними минимальная разница.
    Ответ написан
    Комментировать
  • Как сделать форматированный вывод в LESS подобно SASS?

    soprun
    @soprun
    Software Architecture
    У меня все в одну строчку ( компрессия )...
    Красотой нужно любоваться в самом less, а css должен быть оптимизирован для пользователей ( то есть как можно меньше весил )
    Ответ написан
    Комментировать
  • Можно ли адаптивно сверстать данный макет?

    soprun
    @soprun
    Software Architecture
    Ну вообще я тоже придерживаюсь мнения

    А ваш макет рожден быть фиксированным. Хотите адаптивный, то думайте об этом перед созданием дизайна.


    Однако можно и его адаптировать, но с дополнительным затрат времени.
    Под под планшеты можно сделать без особого геморроя.

    И если есть Возможность делайте редизайн! И не заморачивайтесь с адаптацией текущего макета.
    Ответ написан
    Комментировать
  • Где вы используете размеры в em?

    soprun
    @soprun
    Software Architecture
    Еще она отлично масштабируется и ее использую для указания размера элементов.
    Что касается сетки то лучше использовать не EM, а REM так как размер считается по другому..
    Так же посмотрите на VH и VW...
    Ответ написан
  • Как создать условие в php для проверки странницы?

    soprun
    @soprun
    Software Architecture
    Наверное самый простой способ:
    switch($_SERVER['REQUEST_URI'])
    {
        case '/register/':
            echo '/register/';
            break;
        case '/page/':
            var_dump('/page/');
            break;
        case '/user/':
            print_r(array('/user/'));
            break;
        default:
            echo 'Хьюстон, у нас проблемы!';
            break;
    }
    Ответ написан
    Комментировать