Ответы пользователя по тегу CSS
  • Проблема при компиляции sass?

    GoodProject
    @GoodProject
    Верстальщик
    ../img/img-name.jpg.
    и лучше иметь всего 2 папки css и sass тогда точно проблем не будет)
    Ответ написан
    2 комментария
  • Как правильно изменить ширину контейнера bootstrap 3 на большую?

    GoodProject
    @GoodProject
    Верстальщик
    Вот замечательное видео по созданию Bootstrap сетки НУЖНОГО размера :)
    https://www.youtube.com/watch?v=7j2MnoFeHJg
    Ответ написан
    Комментировать
  • Как сверстать такой input?

    GoodProject
    @GoodProject
    Верстальщик
    У меня в одном из проектов иконка через background-image инпута выводится, вариантов как это сделать очень много, тот же самый label или через псевдоэлемент :after у инпута, но через bgi быстрее, + нужно спозиционировать через bg-position.

    Пример:
    9afc6a7296304fbaa6f888f1db417858.jpegbackground-image: url(../img/search_icon.png);
    background-repeat: no-repeat;
    background-position: 170px 7px;
    Ответ написан
    Комментировать
  • С помощью каких инструментов самому сделать блог?

    GoodProject
    @GoodProject
    Верстальщик
    WordPress ))) Ну или ModX, ибо ты сам говоришь что HTML недостаточно, нужен блог, ну WP и подходит вроде, либо какой нибудь ну оч скудный движок где кроме блога ничего нельзя сделать..
    Ответ написан
    Комментировать
  • Какие есть неписаные правила организации верстки?

    GoodProject
    @GoodProject
    Верстальщик
    Sass можно закинуть в папку CSS, либо в Css создать папку Sass

    А так должно быть так:

    /img - все изображения
    /css - тут файлы с оформлением
    /libs - тут плагины js (слайдеры, анимашки, бутстрап, и т.д)
    /js - сюда можно положить js файл где будут указаны параметры этих самых плагинов (common.js)

    Лично у меня Sass лежат в папке CSS ибо Koala почему то дублирует файлы там где находятся файлы Sass и туда куда я указал компиляцию т.е в /css, получается каша, поэтому я все css, sass файлы кидаю в одну папку /css и всё нормально, но лучше конечно в CSS создать папку Sass если нету подобной проблемы. А вообще, разницы толком нету, делайте как удобно, главное что бы вы понимали что и где лежит.

    А и ещё, в Brackets например при работе в Sass не заполняются ссылки на изображения, например когда пишешь в src="" - img т.е начинаешь заполнять src то редактор обычно сам предлагает пути к файлам а если sass лежит не в той же папке что и CSS то пути будут разными и писать нужно уже в ручную ибо будет уже не ../fonts/ а будет уже ../../fonts ибо папка Sass будет лежать не там куда компилируется CSS файл а внутри т.е /css/sass
    Ответ написан
    1 комментарий
  • Вордпресс не видит стили некоторых элементов. В чем дело?

    GoodProject
    @GoodProject
    Верстальщик
    <link href="css/main.css" rel="stylesheet" type="text/css">

    Замените на:

    <link href="<?php echo get_template_directory_uri(); ?>/main.css" rel="stylesheet">
    Ответ написан
    1 комментарий
  • Что значит символ & перед селектором?

    GoodProject
    @GoodProject
    Верстальщик
    Это фиша препроцессора Sass с синтаксисом SCSS.
    Например ты создаешь кнопку:
    .button {
    
    }

    И тебе нужно задать для этой кнопки свойства при наведении на неё:
    .button {
        &:hover {
    
        }
    }

    Т.е вместо знака & в данном случае подставится .button после компиляции данного кода.

    Удобная штука, попробуй обязон, тем более SCSS мало чем отличается от CSS по синтаксису, сейчас каждый уважающий себя верстальщик должен пользоваться такой штукой. Особенно нравится вложенность, не нужно постоянно в строку перечислять все классы, просто создал один класс header, и уже внутрь него добавляешь нужные классы, типа:

    header {
        h1 {
        //свойство:значение;
        //свойство:значение;
        }
        p {
        //свойство:значение;
        //свойство:значение;
        }
    }


    В CSS будет выглядеть так:

    header {
    }
    header h1 {
    }
    header p {
    }


    Т.е тебе придется 3 раза написать header, это бесит, лично меня.
    Ответ написан
    3 комментария
  • JavaEE + front-end(фриланс) - реально?

    GoodProject
    @GoodProject
    Верстальщик
    С тупо версткой сейчас на фрилансе новичку делать нефиг..
    Ответ написан
  • Зачем используют box-sizing: border-box; с псевдоклассами?

    GoodProject
    @GoodProject
    Верстальщик
    На сколько я знаю, кроссбраузерность у бокс сайзинг не идеальная
    Ответ написан
  • Как правильно избавится от отступа горизонтального списка?

    GoodProject
    @GoodProject
    Верстальщик
    nav ul li {
    margin-right: -4px;
    }

    Отступ появляется из за инлайнового отображения, это такая особенность, поэтому делать нужно через float:left, либо отнимать 4px, или шрифт на font-size: 0 ставить внутри этого блока, а там где надо шрифт до стандартного увеличить (который был по умолчанию) т.е вне блока fz0 а внутри уже какой нужен, что бы отступов не появлялось как у вас.
    Ответ написан
    Комментировать
  • Как сократить описания классов?

    GoodProject
    @GoodProject
    Верстальщик
    Нельзя называть классы транслитом, это упоминается при изучении CSS - это плохой тон, вот и всё, вы можете как хотите называть классы, но верстальщики вас не будут уважать, и будут ломать себе лицо фейспалмами, это просто совет, делайте как хотите.

    Если нужно указать 1 значение нескольким классам то это нужно делать через запятую, например нужно указать цвет для тега a и span:

    a,
    span {
    color:red;
    }
    Ответ написан
    Комментировать
  • Текст по центру блока?

    GoodProject
    @GoodProject Автор вопроса
    Верстальщик
    Решил проблему что выставил line-height: 33.34vh; такой же как и у блока, но за идеи спс.
    Ответ написан
  • Примеры верстки, где найти?

    GoodProject
    @GoodProject
    Верстальщик
    Заходишь на любой сайт и жмешь ф12
    Ответ написан
    Комментировать
  • Какие название используете для классов в HTML/CSS?

    GoodProject
    @GoodProject
    Верстальщик
    Лови

    Основные
    .wrapper - /*обвертка сайта*/
    .header - /*верхняя часть сайта*/
    .sidebar - /*сайдбар (левая или правая часть сайта)*/
    .content - /*тело сайта (центральная часть)*/
    .footer  - /*нижнаяя часть сайта*/


    Название блока (обвертка)
    .bl 
    .block 
    .box
    .wrap
    .inner
    .container
    .main


    Секции блока
    .head, .header - /*верхняя часть блока например заголовок*/
    .cnt, .content, .body - /*тело блока например текс с картинкой*/
    .footer - /*нижняя часть блока к примеру дата добавления, категория и т.д.*/


    Колонки
    .column, .col - /*колонка*/

    Списки
    .list
    .item


    Позиционные классы
    .top /* элемент сверху */
    .left /* элемент слева float:left */
    .right /* элемент справа float:right */
    .bottom /* элемент внизу */
    .center /* элемент отцвентрирован  margin:0 auto; */
    .fixed - /*фиксированный элемент postion:fixed */


    Переходы
    .next  - /*следующий*/
    .prev  - /*предыдущий*/
    .last  - /*последний*/
    .first - /*первый*/
    .back  - /*назад*/
    .ahead - /*вперед*/


    Чисельные
    .one
    .thwo
    .three
    .four
    .five


    Размеры
    .xs, .tiny   - /*очень маленький*/
    .s,  .small  - /*маленький*/
    .md, .medium - /*средний */
    .lg, .large, .big - /*большой */
    .xl, .extra-large - /*очень большой*/


    Цвета
    .danger  - /*цвет опасности*/
    .default - /*стандартный цвет*/
    .warning, .error - /*цве ошибки*/
    .success - /*цвет успеха (к примеру верно введн код подтвержления)*/
    .primary - /*основной цвет */


    Кнопки
    .button, .btn - /*кнопка*/
    .loading - /*загрузка*/
    .close - /*закрыть*/
    .open  - /*открыть*/
    .touch - /*клик*/
    .edit  - /*редактировать*/
    .more  - /*больше*/
    .remove  - /*удалить*/
    .logout  - /*выход*/
    .select  - /*выбрать*/
    .divider - /*выпадающийся список меню*/
    .caret, .arrow - /*стрелочка*/
    .up - /* Вверх */
    .down - /* Вниз */
    .delete - /* удалить */
    .reply    - /*ответить*/


    Персона
    .profile - /*профиль*/
    .person - /*человек*/
    .ava, .avatar - /*аватарка, картинка*/
    .name - /*имя*/
    .description - /*описание*/
    .address  - /*адресс*/
    .nickname - /*ник*/
    .birthday - /*дата рождения*/
    .sex - /*пол*/
    .author - /* автор */

    Заголовки
    .title - /*заголовок*/
    .short-title - /*скороченный заголовок*/
    .full-title  - /*полный заголовок*/


    Ссылки
    .link - /*ссылка*/

    Текст
    .text, .txt, .paragraph  - /*текст*/
    .info, .information - /*информация*/


    Картинки
    .image, .img - /*картинка*/
    .icon, .ic   - /*иконка*/
    .bg - /*фоновая картинки или цвет*/


    Формы
    .search, .form-search - /*поиск по сайту*/
    .input - /*текстовый элемент*/
    .form  - /*форма*/
    .form-group - /*группа элементов формы*/
    .help-block - /*текст подсказки*/
    .label - /*название элемента формы*/


    Катагории
    .type - /*тип*/
    .cat, .category - /*катигория*/
    .subcat, .subcategory - /*подкатегория*/
    .section    - /*раздел*/
    .subsection - /*подраздел*/


    Видео
    .video
    .play  - /*пуск*/
    .stop  - /*стоп*/
    .pause - /*пауза*/


    Социальные сети
    .social - /* социальные сети */
    .vk   - /*вконтакте*/
    .fb   - /*фейсбук*/
    .twit - /*твиттер*/
    .inst - /*инстаграм */


    Активные классы
    .none     - /*скрытый элемент*/
    .disabled - /*заблокированный*/
    .active, .current   - /*активный */
    .selected - /*выбраный*/
    .visible  - /*видный элемент*/
    .focus    - /*нажатый*/


    Временные классы
    .time  - /*время*/
    .date  - /*дата*/
    .day   - /*день*/
    .month - /*месяц*/
    .year  - /*год*/


    Очистка
    .clear, .clearfix, .clr - /*очистка*/

    Разделители
    .separator, .divide - /*разделитель вертикальный для слов */
    .br, .line - /*разделитель горизонтальный для блоков*/


    Остоньлые названия
    .logo    - /*лого сайта*/
    .new    - /*новинка*/
    .sale   - /*распродажа*/
    .feedback - /*обратная связь*/
    .support - /*помощь */
    .group  - /*группа*/
    .module - /*модуль*/
    .posters - /*пост*/
    .form   - /*форма*/
    .tabs   - /*вкладки*/
    .slider - /*слайдер*/
    .news   - /*новости*/
    .table  - /*таблица*/
    .full   - /*полный*/
    .breadcrumbs - /*Хлебные крошки*/
    .pagination, .pager - /*Нумерация страниц*/
    .navbar, .nav, .menu, .navigation - /*Навигация (меню)*/
    .dropdown - /*выпадающейся меню */
    .comment  - /*комментарий*/
    .subscription - /* Подписка */
    .special - /* особенный элемент */
    .standard - /* стандартный элемент */
    .screens - /* Скрины */
    .rate - /* рейтинг */
    .online - /* онлайн */
    .panel - /* панель */
    .popup - /* попап */
    .version - /* версия */
    .page - /* страница */
    .banners - /* баннер */
    .map - /* Карта */
    .more - /*еще, подробнее*/
    .tags - /* тег */
    .price - /* цена */


    Взято с этого видео.
    Ответ написан
    2 комментария
  • Как реализовать подобную анимацию?

    GoodProject
    @GoodProject
    Верстальщик
    А почему анимации так тормозят, не придумали ещё что ли, что нить что бы ничего не тормозило в браузере?
    Ответ написан
    Комментировать
  • Как дополнить стандартный css класс не перекрывая его?

    GoodProject
    @GoodProject
    Верстальщик
    Допустим есть класс бутстраповский .button, что бы его изменить, создаёте в своём css (main.css например) класс .button и изменяете цвет, размеры и т.д, просто править всё это нужно в своём CSS файле, а не в бутстраповском.
    Ответ написан
    Комментировать
  • Как сделлать нормальный проект без хороших знаний?

    GoodProject
    @GoodProject
    Верстальщик
    Если не в состоянии - так и сказать, ибо могут быть разные проблемы, ну либо найти того, кто сделает.
    Ответ написан
  • Как правильно писать свои CSS стили для оформления тегов, если есть стандартные стили фреймворка?

    GoodProject
    @GoodProject
    Верстальщик
    Сетка Bootstrap + header, footer, section и т.д.
    Ответ написан
    Комментировать
  • Какие вы знаете JS-плагины для разработки таких сайтов?

    GoodProject
    @GoodProject
    Верстальщик
    Это Animate.css, вроде как) + плавная анимация и Parallax
    Ответ написан
    Комментировать