Ответы пользователя по тегу CSS
  • Адаптивная верстка css файлы отдельно? как правильно обустроить?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Я просто оставлю это здесь...
    Ответ написан
    Комментировать
  • SASS компилятор для Sublime Text (Windows)?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Или как компилируете scss>css вы?

    Думаю, оптимальный способ при соло-разработке - это NodeJS+Gulp+модули. Он умеет и SASS и много ещё чего, и не смотря на ряд его недостатков - работает он довольно таки быстро. В т.ч. Вы сможете перезагружать изменившееся страницы автоматически, автоматически собирать изменившееся SASS-файлы и т.д.

    Плагин, например вот. Мануалов по настройке Gulp'а, его установке и т.д. - в интернете - как грязи.
    Ответ написан
    Комментировать
  • Как правильно верстать bootstrap?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    И сейчас большинство верстальщиков пользуются сеткой Bootstrap,как я понял потому что с ней можно в разы ускорить процесс адаптации и верстки в целом.

    В целом да, можно. Так же как и нажить себе дополнительных проблем. Ещё ей пользуются не редко по тому, что по другому делать качественно не умеют.

    Пожалуйста объясните ,как вы понимаете что например 'этот макет' можно сверстать с помощью bootstrap сетки , а 'этот' нельзя.
    Любой можно, вопрос в кол-ве правок, которые туда придётся внести. У страпа есть набор разрешений, если они подходят - значит можно. Вопрос в машстабировании элементов, а не в сетке.

    Вот вы открываете макет,на что вы сморите в первую очередь ?
    Обычно на экран телефона, ожидая ответ от дизайнера, что бы высказать всё, что я о нем думаю. А заодно уточнить, как "это" по его мнению должно быть отрисовано на уровне браузера...

    Как вы понимаете что допустим макет шириной 1920px, в котором 12 столбцов и если вы зададите элементу ширину "col-lg-* " ту которую она занимает в макете,то элемент встанет именно туда куда нужно?
    Для этого в макете есть разметка, в т.ч. по колонкам, в т.ч. её можно наложить самому, если очень хочется. По запросу "Photoshop сетка 12 колонок" или прочим им подобным - можно найти очень много всего интересного. Смотрите на сетку и понимаете, что куда встанет. Это в том случае, если внезапно по какой-то причине её там не оказалось.

    Или вы добавляете какие то маргины pedding'и к каждому элементу,который не встал ровно + это же надо все высчитывать ,посмотреть отступ который в макете ,посчитать сколько в бутстрапе отступ, а потом добавить/убрать.
    Макет либо отрисован под страп, либо заказчик готов смириться с тем, что всё будет немного не так, как в макете, либо - он делается без страпа, т.к. "подогнать под него", не редко сложнее, чем обойтись без него вообще, в том ракурсе, в котором Вы описали.

    Я пытаюсь понять что я делаю не так ? Почему мне приходится переопределять стили по 333раза. Хочу научиться пользоваться фреймворком,которые создали люди для людей и ускорить процесс верстки,а на деле получается что я трачу раза в 3 больше времени
    С этим я Вам к сожалению не подскажу, т.к. не знаю, что Вы делаете вообще, что бы понимать, что из этого "вообще" может быть "не так".

    Может есть какие то ресурсы ,где доходчиво объясняют такие нудные и глупые ошибки?Или может объясняют как правильно делать ,а как нет. И пожалуйста, не нужно говорить "почитай документацию на сайте" .
    Документацию читать на сайте, мне кажется ещё рано. Для начала я бы посоветовал почитать что-то более абстрактное, не знаю даже, что бы это могло быть конкретное... Возможно, стоит посмотреть какие-то видео аля "как заклепать сайт на страпе за 15 минут", или что-то в таком духе. Аудио-визуальную композицию, воспринимать обычно проще, чем текст.
    Ответ написан
    Комментировать
  • Можно ли размывать при помощи css только часть элементов?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Не уверен, что понял Ваш вопрос на 100%, особенно касательно фразы "часть элементов"... Но, если Вы имели в виду "часть элемента", то мне кажется с помощью вот такой штуки можно сделать: ссылка 1, ссылка 2. С помощью масок, по идее можно часть элемента не только размыть, но сделать что-то ещё с ней. Ещё можно попробовать наложить поверх нужной области элемента наложить другой элемент с размытием, это должно дать эффект в теории.

    P.S. Точнее сказать затрудняюсь, т.к. не до конца понимаю, чего именно Вы хотите добиться. Если нужно сделать размытым фон меню, как у Вас на картинке (и всё что за ним) я думаю, это (скроллим до "blur()") должно помочь. Поверх этого фона (меню) можно наложить текст, который не будет размывать...
    Ответ написан
    9 комментариев
  • Как сделать выделение картинки по клику?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Можно без JS обернуть одну или несколько картинок в ссылку и воспользоваться :active, тогда, по клику они будут как-то выделяться (как вы их сами выделите), или извратиться с CheckBox'ами или [тут ещё какие-то извращения].

    То есть в целом - да. Подойдёт ли это конкретно Вам - уже другой вопрос.

    UPD. Глядя на Вашу подпись, решил, что без примера не обойтись... Как видите - можно (это же и ответ на Ваш вопрос - как?). Нужно ли, устроит/подходит - решать Вам.
    Ответ написан
    6 комментариев
  • Верстать ли на бутстрапе?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Не пойму в чем будет сложность поддержки )
    Сложность поддержки будет тогда, когда Вы столкнётесь требованием, которое в бутстрапе не предусмотрено. Например, Вам нужно будет не 3.5 разрешения, которые предоставляет бутстрап, а допустим, 8.

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

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

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Например, так...
    Ответ написан
    Комментировать
  • Как прижать блок к правому краю?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    float - не будет работать для элементов с абсолютной позицией. При postion: absolute; есть: right: 0;
    Ответ написан
    Комментировать
  • Как можно закодить 2 зависимых select'а?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Быть может, существует какой-то простой способ или плагин.

    Самый просто способ - начать изучать JavaScript. Отдельно рекомендую ознакомиться с JQuery.

    Так же могу предоставить простой пример собственного производства, собранный на коленке.
    Ответ написан
    Комментировать
  • Как добавить строку событий с фотографиями на веб-сайт?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    А что Вам нужно? Попап? Если да, то вот, два брата близнеца, по внешним признакам...
    Ответ написан
    3 комментария
  • Сайт не оптимизирован для мобильных устройств. В чем дело?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Яндекс и Гугл определяют сайт как Сайт не оптимизирован для мобильных устройств! В чем может быть дело?
    Конечно сложно сказать наверняка, но видимо дело в том, что сайт не оптимизирован для мобильных устройств? :)))

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

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Не грузится второй. Проблемы с лицензией?...

    У бесплатного шрифта? Сомневаюсь.

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

    Скорее всего по тому, что второй шрифт не сконвертирован в формат пригодный для браузеров?

    Рекомендую Вам воспользоваться сервисом GoogleFonts, и подключать шрифты с него. Особенно, если там эти шрифты уже есть. Тогда и проблем подобных не будет, и у ряда пользователей эти шрифты будут грузиться из кэша...
    Ответ написан
    2 комментария
  • Как делать адаптивные страницы?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    На столь размытый вопрос, Вы вряд ли получите менее размытый ответ. Для адаптиции есть два основных решения:
    1. Можете попробовать взять сетку готовую, например, Bootstrap-сетку
    2. Для этого существуют media-запросы
    Ответ написан
    5 комментариев
  • Как сделать фото на сайте адаптивной для всех экранов?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    4 комментария
  • Как прокручивать содержимое элемента до конца автоматически?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Например так. После каждого события "новое сообщение" или "загрузка страницы" прокручиваем элемент на высоту его содержимого, или на высоту заранее больше, чем высота его содержимого (аля 999999).

    Тут кое-что о размерах элементов.
    Ответ написан
    Комментировать
  • Тег h1 не вмещается и переносится на другую строку, что делать?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    8 комментариев
  • Серверная часть под Bootstrap?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    JS и jquery
    Вообще, JS и JQuery, это изначально всё-таки клиентская часть. И хоть они и могут использоваться на сервере, это скорее побочный эффект, чем изначальная задумка. Особенно это касается JQuery.

    Из личного опыта, могу посоветовать посмотреть на CodeIgniter, как на первый PHP-фреймворк, среди прочих его достоинств - у него есть документация на русском. Так же, можете посмотреть в моём профиле самые популярные ответы (написанные мной), там есть пару абзацев, относительно выбора PHP-фреймворка.

    Ну и, для начала Вам было бы неплохо ознакомиться хотя бы с самыми популярными вариациями языков программирования и выбрать тот, который Вам нравиться больше. В частности рекомендую обратить внимание на PHP, Ruby, Python (и другими, по вкусу), на всех них можно делать "серверную часть".
    Ответ написан
  • Зачем нужен overflow:hidden у wrapper?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Что бы элементы лежащие внутри него, при выходе за границы "wrapper'a", не выступали. Если убрать "overflow: hidden;" и сделать у вложенного элемента отрицательный отступ, то он вылезет за границы враппера, в ином случае, он скроется внутри него.
    Ответ написан
    Комментировать
  • Насколько верно и валидно помещать заголовок внутрь тега Р?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Я думаю, валидатор не одобрит заголовки внутри абзацев, но браузеру в целом вообще до лампочки. Если Вас интересует "здравая логика" (или валидатор), оформите этот заголовок в тег span и проблема решена...
    Ответ написан
    1 комментарий