Ответы пользователя по тегу CSS
  • Переделать картинку сделать средствами html + css?

    Hyubert
    @Hyubert
    JS
    я б предпочел через псевдоелементы, так адаптивно получаеться

    codepen.io/Hyubert/pen/BpXmqZ
    Ответ написан
    Комментировать
  • Как стилизовать панель браузера на телефоне?

    Hyubert
    @Hyubert
    JS
    вроде так

    <!-- Chrome, Firefox OS and Opera -->
    <meta name="theme-color" content="#000">
    <!-- Windows Phone -->
    <meta name="msapplication-navbutton-color" content="#000">
    <!-- iOS Safari -->
    <meta name="apple-mobile-web-app-status-bar-style" content="#000">
    Ответ написан
    5 комментариев
  • Как можно сверстать вот такие кнопки со стрелками?

    Hyubert
    @Hyubert
    JS
    Вот держи костиль

    UPD: если нужно имено адаптив, попробуй так 7ea6dba57d0c41118e2bb770aa50ad87.png

    подели на row (красный блок на рисунку) каждую строку, и к последнему елементу добавляй вертикальную линию, а появления дополнительного блока в row регулируй media

    Что бы компенстровать промежутки между медиа, используй решение Sergey Goryachev, с флексбоксами
    Ответ написан
    Комментировать
  • Считаюсь ли я программистом?

    Hyubert
    @Hyubert
    JS
    Извиняюсть что так много, но тут полное разъяснение.

    Web Developer

    Синонимы: веб-разработчик, веб-инженер

    Обычно, подразумевает использование каких-либо CMS. Некоторые люди на полном серьёзе считают, что начинающие используют «простые CMS», а эксперты – «продвинутые CMS». Хинт: если человек спрашивает – Какую CMS используете? у компании программистов в конференц-зале – вероятно, он полный нуб. И это не обвинение, а констатация факта. Серьёзные современные проекты не используют CMS, ну разве что в качестве вспомогательного инструмента. Wordpress для ведения блога компании – да, возможно. Wordpress в качестве магазина – уже сомнительно. «Социальная сеть на Joomla» – фантазии подростка. CMS имеют свое место на рынке, но они давно перестали быть «государствообразующим» элементом.

    «Делать сайт на CMS» примерно тоже самое, что «клепать дизайны под ThemeForest». «Копейка рубль бережёт!» – Nuff Said.

    Веб-инженер занимается контентом, «правит» вёрстку, делает разное и (occasionally) программирует. Web Developer – это низший уровень из всех возможных «веб-разработчиков». В случае с фрилансом, под веб-разработчиком, обычно, подразумевается «человек-оркестр», а точнее – «человек-батрак».

    CSS / HTML Developer / Markup Developer

    Синонимы: верстальщик

    Должность, на которой требуется верстать дизайн. Требования к знанию JS и программирования минимальные или отсутствуют. Желательно необходимо знание основ дизайна, т.к. дизайн почти никогда не переводится из PSD в HTML один-к-одному. «Pixel-Perfect» – фраза-«звоночек». Маркер менеджера-самодура, ни имеющего ни малейшего понятия о том, как работает браузер и замеряющего качество работы попиксельным (с зумом!) сравнением PSD макета и HTML страницы. Попытки объяснить разницу между рендерингом шрифта в фотошопе и в браузере, обычно, воспринимаются как «споры вместо работы». Избегайте «попиксельных» вакансий всеми силами.

    Верстальщик всегда дорабатывает за дизайнером. Веб-программист всегда дорабатывает за верстальщиком. Соседние пары в этой цепочке почти всегда недолюбливают друг-друга по этой причине.

    FrontEnd Designer / Web Designer

    Синонимы: веб-дизайнер

    Самизнаетекто™. От специалиста требуется знание визуального дизайна (возможно, дизайна интерфейсов), знание типографики, владение Photoshop. Знание JS, обычно, не требуется.

    На западном рынке, дизайнеры обычно занимаются и вёрсткой. Во-первых современная вёрстка, с учётом респонсив- и адаптив- приставок и анимаций посредственно описывается статической картинкой. Вы часто видели дизайнера показывающего анимацию и мобильную версию? Я тоже. Обычно, их возможности ограничиваются выбором из библиотечных анимаций (подобранных программистом!). Во-вторых (но по той же причине), настоящему специалисту часто оказывается проще сделать дизайн сразу в виде вёрстки. Зачем делать работу X + Y, если можно обойтись Y?

    На нашем рынке, ввиду технологического отставания, дизайнеры и верстальщики – разные люди.

    Interface Developer / UI-UX Designer

    Похоже на предыдущий вариант, но с упором на дизайн интеракций. Специалисты на этой должности, обычно, много общаются с программистами, с клиентами, с менеджерами, потом опять с программистами... По этой причине, желательно знание основ разработки ПО и коммуникативные навыки. Очень часто, вакансия также требует знания специфики мобильной разработки, т.к. двух UI/UX экспертов нанимают довольно редко. Имейте в виду, что по этому направлению сложно найти материал для самообучения, что может идти как в плюс (меньше конкуренция) так и в минус (сложнее освоить). Если же вы способны учиться на примерах – проблем быть не должно.

    Mobile / Tablet FrontEnd Developer

    Должность для разработчика, специализирующегося на мобильных устройствах. Требуется знание специфики платформ IOS и Android. React Native – современный вариант этой специализации, позволяющий использовать веб-технологии для создания нативных приложений. Хинт: веб-приложения, гибридные приложения, нативные приложения и нативные приложения на веб-технологиях – это всё разные вещи.

    FrontEnd Developer / Engineer

    Синонимы: фронтендщик, фронтенд-разработчик

    Обобщённое название должности для разработчика, владеющего HTML / JS / CSS. Обычно встречается в небольших компаниях, где на одного человека возлагается широкий спектр задач. Знание дизайна, вероятно, не требуется, но будет идти как бонус. В современных условиях, всё чаще заменяется на титул конкретной технологии: jQuery Developer, Backbone Developer, React Developer, Angular Developer... Умения программировать и верстать входят в пакет требований.

    JS Developer / FrontEnd Programmer

    Синонимы: JS разработчик* / JS программист

    То же, что и предыдущее, с большим упором на программирование и меньшим на вёрстку и дизайн. Вообще, термин Developer (Engineer в меньшей степени) вместо Programmer, может означать что программирования будет меньше, а «всякой всячины» – больше. Кроме случаев, когда язык программирования указан явно (JS developer ~= JS programmer).

    JS Developer может означать и FullStack (см. ниже). В этом случае, компания, вероятно, планирует определиться с вашей специализацией позже – когда будут ясны ваши сильные и слабые стороны. Или же когда иные рабочие места распределятся. Поэтому, JS Developer почти всегда идёт в паре с Junior или Senior / Middle.

    FrontEnd SEO expert

    Редкая должность, на которой требуется оптимизировать HTML код согласно требованиям и пожеланиям поисковых систем (Google / Yandex). Специфические знания: микро-форматы, микро-разметка. Учитывая, что SEO вымирает и заменяется классическим маркетингом – рекомендую избегать всего, что содержит данный акроним. Если поиск работы не ваше хобби, конечно.

    FrontEnd Accessibility expert

    Упор на оптимизацию сайта под специальные ридеры (например, для людей с ограниченным зрением). Исключительно редкая должность. Занесена в Красную книгу. Встречается только на крупных проектах.

    FrontEnd Dev. Ops

    Должность для специалиста по вопросам сборки, автоматизации, интеграции фронт-енд приложений. Встречается, преимущественно, в крупных компаниях, т.к. подразумевает довольно узкий спектр задач. Актуальные знания: Webpack / Gulp / Grunt. Со временем, у вас начнут спрашивать чем вы, собственно, занимаетесь...

    FrontEnd Testing / QA

    Должность для специалиста по тестированию / контролю качества фронтенд приложений. Встречается в крупных и средних компаниях. Актуальные знания: юнит-тесты, функциональные тесты, A/B тесты, ручное тестирование и автоматизация. Коммуникативные способности входят в список требований.

    Многие люди ошибочно полагают, что «тестировщик» – более простая работа, чем «программист». Да, иногда встречаются вакансии где можно «кликать по ссылкам» и «составлять отчёты». Но это исключения.

    Заставить Selenium NightmareJS гулять по приложению, создавая скриншоты и выполняя регресионные тесты не так уж и просто. Ведь это, по сути, фуллстек разработка. Работа ведётся сразу в нескольких средах (Electron + Chromium) и требует хороших фундаментальных знаний.

    FullStack Developer / Engineer / Programmer

    Должность для эксперта по полному стеку веб-технологий. Подразумевает понимание клиент-серверного взаимодействия, опыт работы с базами данных, знание асинхронного программирования и др. Выбор серьёзно настроенных людей.

    FullStack делится на две категории: FullStack-JS и всё остальное. В первом случае, как несложно догадаться, на сервере и на клиенте используется JS. Во втором случае – на сервере используется Ruby / Python / PHP.

    Для начинающих, чтобы не распыляться между разными языками и платформами, настоятельно рекомендую отдавать предпочтение первому варианту (по возможности). Учить сразу несколько языков – работа на износ.

    FullStack JS предполагает использование феб-фреймворков на базе NodeJS. Это может быть монолитный фуллстек фреймворк (типа MeteorJS), реактивный бекенд с минималистичным клиентом (типа HorizonIO) или сборка из независимых библиотек (типа KoaJS + ReactJS). Все они имеют свои преимущества и недостатки.

    FullStack JS часто используется в приложениях реального времени: чаты (а-ля Slack / Gitter), финансовые приложения (масштабируемость, PayPal...), игровые сервера. Возможность пушить информацию на клиент (создавая риал-тайм) практически «из коробки» – основной двигатель роста этой технологии.
    Ответ написан
    Комментировать
  • Как сделать чтобы высота родителя равнялась высоте содержащегося в нем блока?

    Hyubert
    @Hyubert
    JS
    Нужно прописать padding родителю

    Вот так

    .parent{
      padding-top: 20px;
    }
    .child{
      background: #C94D4D;
    }
    Ответ написан
    Комментировать
  • Как задать ширину блока относительно высоты окна браузера?

    Hyubert
    @Hyubert
    JS
    Рассчитайте соотношения по примеру

    width: 50vw
    height: calc(50vw/3)

    codepen.io/anon/pen/mPdvpz
    Ответ написан
    Комментировать
  • Как сделать карту Яндекса по высоте на весь экран?

    Hyubert
    @Hyubert
    JS
    решаеться исправление height вместо 720 на 100vh

    <script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=5hW_Qj8jdQ10uR7hst_-99dAn1HKal7p&width=100%&height=100vh&lang=ru_UA&sourceType=constructor"></script>


    codepen.io/anon/pen/QyXRwN
    Ответ написан
  • Существует ли слайдер/галерея для сайта, metro-стиль, раскрытие по клику?

    Hyubert
    @Hyubert
    JS
    может такой вариант подойдет?

    в принципе реализуется через Flex и JS

    codepen.io/anon/pen/PZvJBp
    Ответ написан
    3 комментария
  • Что делает этот класс, #middle:after { clear: both; display: block; content: '';?

    Hyubert
    @Hyubert
    JS
    Ето так званая псевдо-разпорка , обично используют класс clearfix - ето метод отмены действия float без изменения структуры HTML-документа.

    подробней можете прочитать здесь
    Ответ написан
    4 комментария
  • Как плавно перемещать блоки?

    Hyubert
    @Hyubert
    JS
    одно з возможных решений
    Ответ написан
    Комментировать
  • Не работает шрифт в h2 h3?

    Hyubert
    @Hyubert
    JS
    Проблема в отсуствии запятых

    .day h1, 
    .day h2,
    .day h3 {
       font-family: "Cuprum";
     }
    Ответ написан
    Комментировать
  • Почему не работают ссылки при просмотре на iPad и iPhone?

    Hyubert
    @Hyubert
    JS
    это косяк в коде , у тебя блок сайтбара там висит и перекривает , если его убрать все работает

    457b3574994d4eff805c39d11eac1aa4.jpg7db17b6b7df94ffa964701e594a0f126.png
    Ответ написан
  • Как сделать изменение цвета через время?

    Hyubert
    @Hyubert
    JS
    так тег вопроса CSS решил реализовать через него ,получилось вроде неплохо

    codepen.io/anon/pen/RrLvgq

    но если нужен JS тогда используй setTimeout
    Ответ написан
    Комментировать
  • Возможно ли уместить целый сайт в один фрейм?

    Hyubert
    @Hyubert
    JS
    Попробуй вот так

    <iframe class="frames" src="http://site.com" frameborder="0" width="100%" height="100%"></iframe>
    Ответ написан
    Комментировать