Ответы пользователя по тегу CSS
  • Как осуществить перевод куска кода LESS в SCSS?

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

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

    Есть, уточните у своего провайдера, предоставляет ли он "белые" IP, и если да, то как его получить. Потом поднимаете любой HTTP-сервер, Nginx, Apache, Lighttpd, IIS и т.д., настраиваются они обычно довольно просто, особенно когда не нужны всякие доп. штуковины.

    А вообще, я бы рекомендовал Вам настроить хук Git'а и наслаждаться автодеплоем, или если ну прям совсем лень или не хочется использоваться/настраивать Git, можно воспользоваться готовой программой,
    1. Под Windows: это (либо поищите аналоги, их довольно не мало мне попадалось)
    2. Под Linux:
    а) Монтируем ФТП-сервер в файловую систему
    б) Юзаем inotify
    в) Пишем 5 строк скрипта, который будет копировать изменившиеся файлы на FTP (ну или пропускаем пункт А и используем какой-нибудь консольный ФТП-клиент)

    P.S. Из соображений безопасности, у себя на компьютере веб-сервер ради такой ерунды, я бы поднимать не стал. К тому же, "белый" IP обычно не бесплатный. Мне кажется, куда проще автодеплой настроить (особенно под винду), нежели заморачиваться с IP'шником.

    P.P.S. Если всё-таки решите поднимать веб-сервер локально, рекомендую дополнительно прикупить какой-нибудь домен за 1$ (любой), для этого дела. Значительно облегчит жизнь, и даст возможность задействовать поддомены для доп. сайтов.
    Ответ написан
    Комментировать
  • Есть ли библиотека образцовых сочетаний html/css?

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

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

    И да, и нет.

    Сфера фронтэнда переживает второе рождение. Так уж получилось, что гипотетически, она была самой простой довольно долгое время, но потом, внезапно, некто решил внедрить в неё лучшие практики других языков и платформ и тут понеслось... От синтаксических конверторов (кои называются, "комиляторы") CSS'а, вроде SASS/LESS/Stylus/etc. до полномасштабных сборщиков проектов, вроде Gulp, Grunt и так далее. А так же дюжина подходов к разработке и так далее, далее, далее...

    Если говорить про сайты с каталогом готовых библиотек, они есть и их много, например тут можно поискать готовые пакеты/библиотеки, или тут...

    Подход реализации готовых к использованию компонентов, включая адаптив и всё прочее, реализован в идеологии/методологии, например БЭМ, включая наличие самих каталогов с готовыми библиотеками.

    Но, полноценное решения уровня "воткнул и готово", Вы вряд ли найдете. К тому же, не редко изучение всех тонкостей выше описанных практик - гораздо сложнее, чем "просто разобраться с библиотекой N", даже если таких библиотек несколько. Максимум, что получиться сделать - это использовать полуфабрикаты (фреймворки) для вёрстки например, такие как Bootstrap или Foundation или Semantic-UI или [ещё дюжина других вариантов], сочетая их с готовыми, например, слайдерами (и другими кирпичиками), требующими от Вас минимальной настройки.

    В ином случае, лучше воспользоваться каким-нибудь конструктором сайтов (Wix, Ucoz, etc.) или чем-то вроде Visual Composer.
    Ответ написан
    2 комментария
  • Есть те кто верстают компонентно или по БЭМ, организация окружения?

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

    Не совсем понятно, что имелось в виду под этой фразой... HTML-код "там" пишется, в HTML-файлах, если Вы и для него какой-нибудь генератор не используете (лично меня вполне устраивает написание HTML-кода "руками", можно какой-нибудь ZendCoding на крайняк установить).

    Попроще, думаю есть. Например вот или вот.
    Ответ написан
    3 комментария
  • Использовать Bootstrap или нет для серьёзного проекта?

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

    За примерно лет 10, что мне приходится работать с вёрсткой, бутсрап я очень люблю, особенно для админок хорош. Как с версии 2 с ним познакомился, так до сих пор 80% админок на нём.

    + хочу использовать методологию наименования БЭМ,
    Даже не буду у Вас спрашивать, зачем?

    Или же проще написать с нуля всё?
    Это конечно очень индивидуально, так же как понятие "серьёзный проект" - весьма субъективно и у каждого исключительно своё. Но лично в моей голове, словосочетания "серьёзный проект" и "бутстрап для не-админки" вяжутся плохо. Одно время, я пытался исследовать популярность тех или иных подходов к работе (от визуальных редакторов HTML, до шаблонизаторов и препроцессоров). Результат был удручающим, большинство пользуется тем или иным инструментом не по тому, что он удобнее и сокращает время на разработку, а потому, как не хотят учиться и не редко, по другому делать просто не умеют.

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

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

    Конкретно для меня, в большинстве случаев, за пределами админки, бутстрап создаёт куда больше проблем, чем приносит пользы. Я не испытываю сложностей с тем, что бы потратить лишние 30 минут на вёрстку страницы и отрисовать все элементы, как нужно мне и так, как задумал дизайнер, вместо того, что бы потом потратить 30 часов на попытки переделать "то, что получилось" попутно выдирая волосы на разных частях тела и проклиная день, когда я решил воткнуть невтыкуемое.

    P.S. Ещё раз хочу обратить Ваше внимание, на то, что бутстрап может идеально подойти для определённого круга задач, макетов, решений и т.д. Но так как никакой конкретики на данный момент нет, ответить на Ваш вопрос более внятно - довольно сложно.
    Ответ написан
  • А что если писать сайт вообще в одном файле?

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

    Понятно, что будет неудобно работать, но это допустим не важно. Привыкнется)))
    Неудобно работать кому, Вам, или браузеру? Если браузеру, то за него не беспокойтесь, он парень сильный, справится. Если Вам - то есть сборщики проектов, коих как грибов в лесу. На крайняк можно написать свои 20 строк кода.

    Речь не идет про крупный проект, портал или магазин. Простой одностраничник)
    Вопрос звучит примерно как: "я тут приехал в какую-то деревню (город с населением 200тыс. человек), стоит ли там соблюдать правила дорожного движения и законы? Это же не миллионник и даже не мегаполис..."

    Дело не в том, скольки-страничник сайт, а в причинах, которые послужили предпосылкой к объединению скрипто-стилевого мусора в один файл. Основных причин было несколько:

    1. Большой файл грузится быстрее, чем много маленьких, по тому, что:
    а) Обращение к дисковой системе происходит 1 раз
    б) Исчезает промежуточный мусорный обмен трафиком между сервером, на загрузку каждого дополнительного файла

    2. Особенность браузеров, работающих по поротоколу HTTP 1.0/1.1 заключается в том, что они не могут открывать более 16-32 соединений (если мне память не изменяет, точные цифры не помню). Это значит, что одновременно более 16-32 файлов скачиваться не будет. А теперь представьте, что у Вас на "одностраничнике" штук 300 спрайтов, на всякие соц. сети, иконки, стрелки и пр. лабуду, и каждый будет загружаться отдельно...

    Я думаю, Вы уже знакомы с протоколом FTP... Попробуйте как-нибудь, ради интереса загрузить на сервер любую CMS, в которой 5-15тыс. файлов по FTP, в распакованном виде. А потом попробуйте упаковать все эти файлы в архив, с нулевым сжатием (TAR или ZIP без сжатия), загрузить на сервер и распаковать. Даже на самом "мёртвом" сервере, даже с учётом времени на распаковку, процедура с архивом обычно проходит в несколько (иногда десятков) раз быстрее, чем загрузка каждого файла по одному. В браузере разница не настолько критична, принцип тот же.

    Среди прочего, хочу отметить, что для протокола HTTP/2, который пока поддерживают ещё не все браузеры (хотя таковых и большинство) и далеко не все хостеры и админы осилили его интеграцию, проблема уже не так актуальна. Но одна из причин, по которой HTTP/2 позволяет ускорить загрузку заключается как раз в том, ограничение с пулом запросов было решено.

    Так же, сжатие всех скриптов в один - позволяет решить проблему порядка загрузки, и добавить скрипту флаг async, что было довольно актуально для меня в ряде случаев. А CSS - тем более грузятся по порядку, т.к. это каскадные таблицы, и как бы Вы их там не вращали, браузер априори будет их читать линейно и так же линейно применять, именно в том порядке, в котором они были указаны к загрузке. И в этом случае, сочетание протокола HTTP/1.0|1.1 и отсутствие многократного дёргания сервера, довольно очевидно.
    Ответ написан
    Комментировать
  • Что есть html страница в этом psd шаблоне для boostrap?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Для Bootstrap'а Вас это не особо должно беспокоить, т.к. там по умолчанию точно так же, 12 колонок и контентная часть, выровненная посередине. Страница начинается сверху, контентная часть по центру :)

    "Синие столбцы" - это отступы между колонками и какие-то внутренние поля самих колонок, судя по всему.
    Ответ написан
    8 комментариев
  • Как ограничить ширину элемента, не задавая ширину явно?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    codepen.io/anon/pen/PbyJVQ

    Пример куска кода/текст взят отсуда (сохраняю авторские права).

    Таким образом, Вы не задаёте ширину элемента, Вы ограничиваете его ширину.
    Ответ написан
  • Как избавиться от отступа у inline-block?

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

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Не совсем то же самое, но по теме:
    1. Masonry
    2. Можно взять любую сетку, от Bootstrap'а например или любую другую готовую

    P.S. "Там" это сделано руками, в большей степени, с помощью абсолютного позиционирования в т.ч.
    Ответ написан
  • Как растянуть фон блока по ширине и высоте в мобильной версии?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Проблема возникла в мобильное версии (разрешениее менее 750px), фон почему то идет с отступом.

    Скорее всего по тому, что фон задан не у самой секции, а у вложенного в неё блока, а в самой секции заданы отступы...
    Ответ написан
    Комментировать
  • На каких сайтах есть бесплатное обучение с выдачей сертификатов?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Битрикс (какой-то базовый курс), бесплатные сертификаты в электронном виде выдавал. Но, я думаю, Вы сами должны понимать, что "бесплатные сертификаты", кроме как для украшения стен туалетов больше никуда особо не годятся. Я когда на собеседование прихожу, обычно следующий вопрос после "что вы знаете об ООП, HTML5, CSS3 и прочих технологиях" сразу уходит с основной темы, о моих знаниях и переходит в тему, того какую я з/п хочу, условия работы и т.д., состою ли я в каких-то сообществах разработчиков и т.д. Пару раз, при подаче документов, "обнаруживались" сертификаты, но их никто даже не смотрел. Всё заканчивалось на вопросе:
    - что это?
    - это сертификаты всякие, по программированию, технике, Unix'ам...
    - а, ну классно


    Дальше их даже никто из папки не доставал.

    Сертификаты, которые хотя бы чего-то стоят, обычно сочетаются либо с обучением, либо с глубокой экзаменацией. Обычно, стоимость только самих экзаменов стоит 80-300$ (сертификат в стоимость включен разумеется, если экзамен сдадите).

    Например, экзамен по Symfony стоит 250€ + Twig (без которого, я себе Symfony плохо представляю) стоит 150€... Остальное - только лишний расход бумаги и Вашего времени.
    Ответ написан
    Комментировать
  • Как использовать не стандартные шрифты в html?

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

    Можно, но если у пользователя этих шрифтов нет - браузер будет перебирать шрифты в той последовательности, в которых Вы их указали. Обычно указывают несколько шрифтов одного семейства, для таких случаев. И, насколько я помню, браузер не будет скачивать шрифты, если они уже есть в системе, по крайней мере популярные браузеры не должны таким страдать. Внимательно смотрите на названия (про них написано ниже).

    P.S. установил их в Windows , фотошоп видит, а html css нет

    Значит, Вы не правильно указали имя шрифта в CSS. Обратите внимание на то, как шрифт называется в самом файле шрифта, при его установке и как он же называется в фотошопе (или в Word'e или в LibreOffice'е или в другой программе, где можно смотреть/выбирать/использовать разные шрифты). А потом сравните это с названием у Вас в CSS, наверняка они будут отличаться...

    Да, и у Вас в примере шрифты только в TTF-формате. Не все браузеры его понимают, для максимальной совместимости шрифты обычно конвертируют в несколько дополнительных форматов, например с WOFF(2) и SVG.
    Ответ написан
    Комментировать
  • Есть ли готовые костыли для адаптивных шаблонов сайта?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Мне кажется да, они называются Bootsrap, Foundation или просто "CSS-фреймворки для адаптивного веб-дизайна", могут быть соврешенно разной консистенции, от микрокостлей, вроде "готовая сетка для адаптивного дизайна" до масштабов "ортопедической клиники", с уже готовыми меню, сетками, поддержкой тем и всеми прочими "прелестями".
    Ответ написан
    Комментировать
  • Почему не работает функция scrollTo?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Разве для scrollTo() нужно указывать высоту body, а без этого она не работает?

    Если у Вас нет полосы прокрутки, то прокрутка "сработает", но визуально от этого ничего не изменится.

    По моему, ещё прокрутку желательно делать и для BODY и для HTML одновременно, т.к. в каких-то баузерах, с этим были проблемы. Возможно информация уже не актуальна...

    есть прокрутка страницы вниз на заданный интервал.

    Насколько я помню, ScrollTo(), делает прокрутку не на заданный интервал, а к заданным координатам.
    Ответ написан
    6 комментариев
  • Как реализовать теги которых нет в html?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Это не совсем "неопределенный тег", это "относительно определенный" тег. В большинстве случаев, такие теги заменятся на их "правильные" сущности/объекты, с помощью JS. Если мне не изменяет память, Google AMP использует аналогичный механизм.
    Ответ написан
    Комментировать
  • Какой плагин подойдет для такого слайдера?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    А чем активные от "не активных" отличаются? Другими цветами шрифта? Мне кажется, можно взять любой слайдер, например, OwlCarousel или BXSlider и добавить им нужную раскраску в callback смены слайдов, что бы он шрифты раскрашивал как Вам нужно.
    Ответ написан
    Комментировать
  • Как можно сверстать данный контент?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Обычная таблица или набор слоёв + display: table-*. В первую ячейку соотв. вставляете input, можно целиком на всю ячейку шириной/высотой, задаёте ему фон (в виде алмазика) и убираете у него бордеры, выставляете нужный pdding. Готово!
    Ответ написан
    Комментировать
  • Как затемнить картинку, не background-image?

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

    Хотя, в качестве альтернативного варианта, можно рассмотреть CSS-фильтры, за их кроссбраузерность не ручаюсь, пока не нужны были в серьёзных проектах.

    P.S. У фильтров можно устанавливать отрицательные значения, в примере по ссылке выше такой возможности нет.
    Ответ написан
    Комментировать
  • Как добавить определенные атрибуты к нескольким элементам DOM?

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

    $(document).ready(function() {
          $('.panel0 .panel1 .panel2').each(function(i, e) {
            var bgColor = $(this).css('background-color'); //Определяем цвет фона
            $(this).attr('data-color', bgColor); //Добавляем атрибут с найденным цветом фона
          })						
        });


    Ещё можно .panel0 .panel1 .panelX заменить на div и операция будет проходить со всеми слоями вообще...
    Ответ написан
    8 комментариев