Ответы пользователя по тегу CSS
  • Как верстать 18 колоночный макет?

    vilka_2009
    @vilka_2009
    Верстаю
    Тру решение для 1024 - scale всей страницы ))))
    Ответ написан
    Комментировать
  • Оцените пожалуйста верстку?

    vilka_2009
    @vilka_2009
    Верстаю
    1) Тег section не в правильном месте используешь. Он означает что-то более глобальное и общее.
    <div class="limpon-is">
            <div class="bg-color"></div>
            <div class="squares-bg"></div>
            <div class="wrapper">
                <div class="brandon-img"></div>
                <section class="limpon-text">
                    <div class="small-button"></div>
                    <h3>Limpon Is Suitable For<br> Anytype LandingPage</h3>
                    <p>Lorem ipsum...</p>
                    <a href="#" class="btn btn230blue">get started now</a>
                </section>
            </div>
        </div>

    Например тут section-ом должен быть блок с классом ".limpon-is", а у тебя просто его текстовая часть. Он должен объединять в себе весь логический блок, пусть в нем даже есть какие-то декоративные блоки.
    2) Так же, я бы не стала делать такие декоративные блоки (.bg-color, .squares-bg) и декорировала псевдо-элементами, потому что они не несут никакой смысловой нагрузки, в отличие от скриншотов и иконок.
    3) .testi-bg - почему картинкой, а не css-ом? если что-то можно верстать, то нужно верстать. Например, радиокнопки в форме - это обычно кружок в кружочке. Это точно не стоит лишних обращений к серверу за картинкой, их отрисовка и хранение. Здесь тоже не вижу никакого смысла делать вместо фона с закруглением - картинку.
    4) .review-block1 - Вот таких классов не должно быть ни в коем случае, .review-block - таких тоже лучше избегать. Это все равно что диву назначить просто класс block. Див - это же итак блок. Или еще круче div с классом div. Будет вообще шикарно.
    5) в blockquote в твоем случае излишне вставлять параграф .
    6) .review-block - фотографию автора обзора нельзя делать псевдо-элементом. Это не просто декоративный элемент, это как имя автора отзыва и относится не к самому блоку, а к его содержимому. Поэтому должен быть тег с классом .author-photo, например.
    Как лучше делатьь:
    <div class="review">
                <blockquote>It is a long established fact that a read her will be distracted by the readable content of a page when looking.</blockquote>
                <div class="review-author">
                    <img class="author-photo" src="image.jpg" alt=""/>
                    <span class="author-name">Rolin B. Mirano</cite>
                    <cite class="author-company">ceo, uihub</cite>
                </div>
        </div>

    Тут мы объединяем смысловые элементы одним родителем .review-author
    7) .plans-header - зачем тут делать ширину блока? Излишне.
    8) Список услуг в тарифах должен быть списком, а не одним параграфом. Жирный минус!
    unexceptable

    hqdefault.jpg
    9) Опять же, список тарифов - это section. А у тебя этим тегом каждый тариф выделен. ".team-list" - это не section. ".our-team" - это section.
    10) .team-plus - мой совет: не парься высчитыванием радиуса в пикселях. когда тебе нужно сделать круг. Просто border-radius: 50%, можно 100%, можно 9999рх. В любом случае, если нужно будет поменять размер круга, то не нужно будет менять размер радиуса.
    11) Такие штуки как .team-position - это не параграф в тексте или статье. Поэтому не используй тег пожалуйста. Используй тег .
    12) При желании в форме обратной связи можно оформить текст авто-заполнения, чтобы не было сильных отличий.
    13) В любом поле формы должен быть padding, как левый, так и правый. У тебя ни в одном поле нет правого падинга. Поэтому при длинном тексте он наедет на иконку. А длинным может быть и фио, и почта. А не только текст в текстареа.
    5d27626ad09e1936454445.png
    5d2764e97c3cb017292066.png
    14) Кнопочка "submit now" - иконка должна быть псевдоэлементом у текста. Иначе если текст поменяется придется и ее двигать.
    15) .foot-so - не делай сокращенные имена классов. Тут невозможно понять что это. Ступня?! footer-social, хотя бы.
    16) Предпочтительнее все таки футеру тоже назначать класс. footer.footer получается
    17) На ссылках хочется эффектов наведения (кроме cursor: pointer), а на кнопках - плавности наведения (transition).
    18) .subscribe button - попробуй border-radius: 9999px. Лайфхак, если радиус в 2 раза меньше высоты кнопки ;)
    19) А что это так? Почему только ко второму заголовку такое правило?
    .text-scroll h4:nth-of-type(2) {
        margin-top: 27px;
    }

    20) Центрируем флексами без подгонки пикселей отступов.
    .burger-areal {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer
    }
    .burger {
      width: 30px;
      z-index: 333;
    }
    .burger span:last-child {
      margin-bottom: 0;
    }


    Надеюсь ты не примешь критику близко к сердцу, а сделаешь из нее правильные выводы. В основном, честно, мне все очень понравилось. Все замечания чисто на опыте. Удачи тебе в развитии!
    Ответ написан
    4 комментария
  • Хороший пример структурированного CSS файла?

    vilka_2009
    @vilka_2009
    Верстаю
    Senseich, в принципе, ты на верном пути. Но, как порекомендовал, Алексей используй normalize или ему подобные файлы, и то что ты написал выпадет из основного файла css.

    И начнется у тебя файл с написания стилей для конкретно твоего случая, без обнуления стилей браузера и прочих подобных фич, которые дает тебе normalize.

    Будет так: сначала стили для html, body, потом для общего центровщика - wrapper, потом стили по стайл-гайду - все как у тебя: заголовки, параграфы, списки, ссылки, кнопки, изображения. Порядок тут не особо важен и скорее зависит от дизайна и того, как ты будешь верстать. Но закономерность можешь проследить в моем перечислении:
    1) сначала идут заголовки: всегда и везде в тексте сначала идет заголовок.
    2) потом параграфы: когда ты что-то читаешь после заголовка всегда идет параграф.
    3) потом в обычной статье мы можем что-то перечислить как сложно-сочиненным предложением, так и распределив перечисление в список, поэтому после параграфов идут списки.
    4) потом дополнить статью мы можем ссылками
    5) а ссылки можем сделать в виде кнопок
    6) а может и в виде картинки
    7) а может картинка - это не ссылка, подумаешь ты и поставишь стили для нее раньше ссылок. Но вдруг она когда-нибудь будет ссылкой, поэтому лучше стили для картинок поставить после ссылок, чтобы, если что, переопределить стили ссылки.

    Дальше стилизуешь уже более глобальные элементы, например формы, социальные кнопки, пагинация, хлебные крошки и т.п. Дальше больше: меню, асайды, слайдеры. Ну и т.д.
    Ответ написан
  • Как сделать такой background?

    vilka_2009
    @vilka_2009
    Верстаю
    Как один из вариантов - Маска:
    1) Подготовить в фотошопе белую волну
    2) Под тестом фоном использовать двойной background, например:
    background: url("image/pic-mask.png") no-repeat bottom, #000 top;
    background-size: 100% auto, auto;

    3) Пример можно глянуть тут в первом же блоке https://vilka-vk.github.io/sedona/
    Ответ написан
    Комментировать
  • Как заставить Visual Studio Code форматировать выделенный блок CSS, LESS, SASS, Javascript?

    vilka_2009
    @vilka_2009
    Верстаю
    Я понимаю, что вопрос уже решен. Но мне интересно, поможет ли тебе в этой задаче стандартный функционал vsc? 5af41fb5684b3125872753.png Тут нужно галочку поставить.
    Ответ написан
    Комментировать
  • Как верстать картинки которые шире блока?

    vilka_2009
    @vilka_2009
    Верстаю
    По ходу дела позиционирование не нужно. В левой колонке текст, в правой - фотка, которая появляется при разрешении в 1100px
    @media all and (max-width: 1099px) {display: none; visibility: hidden;}

    Родителю overflow: hidden; чтобы он обрезал картинку, если она вылезает за пределы родителя. Картинке определенный размер задать, например: width: 1300px;
    Ответ написан
    Комментировать
  • Корректно ли использовать bootstrap3 и flexbox одновременно?

    vilka_2009
    @vilka_2009
    Верстаю
    Корректно ли? Нет. Но почему бы не Да?!
    1) В идеале, если нужен бутстрап и флексы, то берите Bootstrap4 и не парьтесь.
    2) В реальной же жизни, приходится пользоваться тем, что дает нам судьба >< Хе-хе
    Можно делать все что угодно, но нужно оценить трудозатраты, удобства и возможность использования другого стека технологий исходя из собственного опыта и мнения. Решать только Вам.
    Ответ написан
    1 комментарий
  • Возможно ли изменить высоту скроллбара с помощью CSS?

    vilka_2009
    @vilka_2009
    Верстаю
    nicescroll слишком тормознутый и работает не плавно. Попробуй вот этот плагин manos.malihu.gr/jquery-custom-content-scroller Там тоже куча готовых тем, а так же возможностей самостоятельной кастомизации.
    Ответ написан
    Комментировать
  • Bootstrap - плохая практика добавлять к элементам фреймворка свои классы / стили. Как тогда лучше в моем случае?

    vilka_2009
    @vilka_2009
    Верстаю
    Автор, я такого ни разу не слышала.
    • Если вот так подумать, то наверно плохим тоном будет считаться добавление классов, которые потом будут в себе сочетать правила, касающиеся и размеров, и отступов, и стилизации оформления.
    • Бывают такие случаи, когда необходимо переопределить колонке внутренние/внешние отступы. Я думаю здесь лучше добавить класс к этой колонке, который будет отвечать за внутренние/внешние отступы.
    • Бывают такие случаи, когда необходимо стилизовать именно колонку. Как раз из-за этих самых отступов (не могу привести пример, память уже не та) - добавляй класс к ней.
    • Да в конце концов, бутстраповская сетка лишь помогает тебе не задумываться о ширине и отступах.
    • Мне изначально было вбито в голову, что большая вложенность - это плохо. Никто не запрещает, но нужно стараться избегать этого.
    • И самое главное, в нашем сообществе разработчиков слишком много людей, которые придумывают всяческие правила и нормы "поведения". По большей части из-за того, что они привыкли жить по правилам. А жизнь - это импровизация.
    Ответ написан
    Комментировать
  • Почему не срабатывает js?

    vilka_2009
    @vilka_2009
    Верстаю
    Удали эту часть кода
    $('.item').each(function(index) {
      if($(this).offset().left > 100 && $(this).offset().left > width - 100) {
        $(this).children('.add').css('transform', 'perspective( 400px ) rotateY(45deg)')
      } else {
        $(this).children('.add').css('transform', 'perspective( 400px ) rotateY(0deg)')
      }
    });
    Ответ написан
    Комментировать
  • Что изучать верстальщику и в каком порядке?

    vilka_2009
    @vilka_2009
    Верстаю
    Не слушай тех, кто говорит, что без JS верстальщик - не верстальщик. Такие люди уже слишком давно работают, чтобы осознавать насколько сложно быстро изучить js попутно получая свой первый опыт в верстке.
    Запомни вообще: мы не можем знать все и сразу. Опыт - это самое важное после стремления и умения учиться и развиваться. Чтобы ты не боялся, что не возьмут в другую компанию: https://habrahabr.ru/post/323188/ Взять к примеру сообщение Тима Дикерса: "Привет, в лид в гугле, и более чем 30 лет программирую. И каждый раз мне надо искать, как узнать длину строки в питоне." А ведь самый первый урок на любом языке начинается с примера, как узнать длину строки ))

    Теперь поделюсь немного своим опытом. Как начинала я: я уволилась с работы и пошла учиться на курсы в htmlacademy База там дается отличная, правда с первого раза мне сложно было заставить себя учиться, поэтому я прошла бесплатно второй такой же интенсив. Перед НГ защитилась на отлично, можно сказать, и в феврале меня уже пригласили на работу примерно как у тебя (тоже java, совдепия, xml, таблицы). Сидела я там и баги всякие поправляла. Ушла через 5 месяцев. Долго не могла устроиться и из-за отсутствия свободных мест, и из-за собственного же страха и неуверенности. Бралась за фриланс, получала опыт, даже бесплатно работала в стартапе)) Мне важно было как можно больше практиковаться и получать опыт. Благо вообще нравится верстать) Весной следующего после увольнения года мне предложили работать в какой-то новой конторке, нас там было всего трое - дизайнер, программист и верстальщик. Всему обещали научить и чему успели научили) И ведь до сих пор люди считают, что верстальщик в компании должен быть! А некоторые компании совмещают приятное с полезным: верстальщика с программистом-фронтендером. Тем самым экономят рабочие места и зарплаты. Удобно же, да?) И вот такие опытные разрабы и говорят, верстальщик без js - не верстальщик. Фигня все это. Сейчас верстка гораздо сложнее и заковырестее, чем работа контент-менеджера, которая заключается в том, чтобы текст писать и вставлять его куда надо. Когда ты умеешь js - ты уже junior фронтендер. Это мое ИМХО. Ты отвечаешь не только за верстку, но и за фронт. Короче, далее)) В этой маленькой конторке я получила норм опыт и через пол года меня уже переманили в другую, одну из топовых организаций нашего небольшого города (тоже 400к). Зп как я когда-то хотела, проекты интересные, полная свобода действий и самостоятельность, даже уважение!) и я не знаю JS. И флексбоксы только начала пробовать. И проекты в моем портфолио за 2 года можно по пальцам пересчитать. Нужно просто успокоить себя и осознать, что верстка - это совсем не сложно. И js тоже совсем не сложно. И быть неопытным - тоже не проблема. Те организации, которые готовы брать неопытных людей, знают на что идут, они могут выделить свое личное время на твое обучение, на допиливание твоего опыта) Мы с коллегами 2 раза в неделю остаемся после работы и учим js. Нам читают учебник learn.javascript (да да), быстренько так зачитывают, все на пальцах и примерах в браузере тут же показывают, объясняют простым языком и потом ты уже спокойно можешь перечитывать учебник и понимать, что там написано и выполнять задачки под статьями. Периодически, для закрепления материала, нам дают домашку. Точнее давали, мы уже закончили js-лекции. И все равно, нельзя сказать, что мы сейчас прям сядем и плагин свой напишем - ни! Мы теперь можем понять практически любой код, написанный другими людьми. И использовать его. Для написания своего нужен просто опыт, больше практики.

    Я думаю, что работая в этой конторке на отстающих технологиях ты просто тратишь время зря. Иди в любую другую, реально. Просто за опытом. И да, в Москве медом не намазано. Там абсолютно так же как и в твоем городке, просто мест больше. Лучше туда наоборот опытным матёрым фронтендером ехать, за деньгами. А опыт в любом месте можно найти.

    Вот мой "блог"-цель по развитию в профессии, может прибавит тебе чего. Я его чисто как чек-лист для себя составляла.

    По поводу адаптива: в бутстрапе тоже используются медиазапросы. И покапавшись в нем, поюзая его, я поняла и осознала, что такое адаптив. Не знаю, что там учить перед его использованием?! Его и создавали как раз для программистов-бэкэндеров, чтобы они не запаривались и не вникали в адаптивную верстку, а просто юзали нужные классы. Так что, начинай использовать бутстрик и норм будет ;)

    Вот те мини-план от меня:
    • отбросить страхи
    • включить уверенность
    • блочная верстка
    • сетка на float || inline-block
    • попробовать бутстрап
    • html5, css3, семантика (она плотно зашита в html5)
    • попробовать расположить все элементы на странице/блоке позиционированием
    • ( так же все это можно попрактиковать на бесплатный курсах html-академии )
    • медиа-запросы
    • устроиться на работу
    • осознать бутстрап (то есть попробовать осознанно сверстать несколько макетов на бутстрапе, с адаптивом, на работе прям и попробуешь, ведь ты же уже знаком с бутстрапом :))
    • флексы - узнать и осознать, что это круче и удобнее бутстрапа в миллион раз
    • Внедрить флексы в рабочий проект, утвердив с ведущими и доказав, что его можно спокойно юзать и что не надо поддерживать ie 9... да даже 10
    • Самое главное: уделять по 1-2 часу в день, чтобы прочитать 0,5-1 главу на learn.javascript и пройти задачки под каждой прочитанной статьей ( у меня примерно столько уходило времени).


    Кстати да, совсем забыла про svg - это само собой ) Выкладывать на гитхаб свои работы прям на ходу разработки - это тема! Проверяющие будут видеть как ты коммитишь и юзаешь гит.
    Ответ написан
    10 комментариев
  • Почему в браузере подтягиваются стили только одного класса сетки flexboxgrid?

    vilka_2009
    @vilka_2009 Автор вопроса
    Верстаю
    Вопрос решился установкой gem 'autoprefixer-rails'
    Ответ написан
    Комментировать
  • Знаю основы HTML CSS, но верстать не получается. Как преодолеть баръер?

    vilka_2009
    @vilka_2009
    Верстаю
    Нужно просто брать и верстать. Не думая ни о чем. Самое главное не думать о том, что что-то не получается и не получится. Это должно быть не про вас. Просто берете и делаете.
    Ответ написан
    Комментировать
  • Как сделать сортировку блоков?

    vilka_2009
    @vilka_2009
    Верстаю
    Было подобное "испытание" на htmlacademy . Возможно придется где-нибудь float переопределить (не уверена, уже не помню как делается эта штуковина, давно проходила). Но по большей степени придется менять местами блоки, чтобы все правильно встало )) Курс бесплатный, только зарегаться надо, я ничего не рекламирую, если что )))
    Ответ написан
    Комментировать
  • Как растянуть контент по высоте?

    vilka_2009
    @vilka_2009
    Верстаю
    Все гораздо проще. Если флексы не подходят из-за поддержки каких-нибудь старых браузеров, то вот так: https://jsfiddle.net/9z8u92dh/5/
    Ответ написан
    Комментировать
  • Верхняя панель в Chrome?

    vilka_2009
    @vilka_2009
    Верстаю
    По-моему (лично мое мнение) тут достаточно прописать лишь:

    .big_background {
      width: 100vh;
      height: 100vh;
      background-image: url("../img/big_gb.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
    }


    background-attachment: fixed - эта строка как раз таки не позволит прокручиваться фону.
    Ответ написан
    Комментировать
  • Как сделать отдельный цвет у * в input?

    vilka_2009
    @vilka_2009
    Верстаю
    Честно говоря, на данный момент этот способ не работает почему-то. Даже в вашем примере. Неужели данную фичу выпилили уже? ;((

    Но к счастью, есть другое прекрасное несложное решение ru.stackoverflow.com/questions/298676/%D0%9A%D0%B0...
    Ответ написан
    Комментировать
  • Как вывести tooltip за пределы блока с overflow:scroll?

    vilka_2009
    @vilka_2009 Автор вопроса
    Верстаю
    Решила с помощью jQuery codepen.io/anon/pen/MKLmpM
    Ответ написан
    Комментировать