Задать вопрос
PretorDH

Pretor DH

HTML5, CSS3, PHP, JS - люблю в чистом виде.
Ответы пользователя по тегу CSS

  • Как отцентрировать fixed/absolute элемент не используя хак top/transform?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Используй полно экранную обертку с display flex, или table, или inline-block c vertical-align center ...

    Пример FLEX на JSfiddle
    Пример TABLE на JSfiddle
    Пример INLINE-BLOCK на JSfiddle
    Ответ написан
    Комментировать
    Комментировать

  • В чем может быть проблема?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Класс "clearfix" нужно добавить.

    <section class="mild clearfix">
    Ответ написан
    1 комментарий
    1 комментарий

  • Как задать между этими картинками отступ?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Убрать у елементов float:left; и сделать их display:inline-block;.
    Для верстки блоков не используйте float, это изначально не эфективная и устаревшая технология.
    Есть флекс блоки. Искорените из себя "псевдо табличную" верстку - это зло.

    Решение на jsfiddle.net...
    Ответ написан
    4 комментария
    4 комментария

  • Слайдер на css - как задать стиль активной кнопке?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Решение

    Основные тезы:
    1. Перемещаем указатели на inner-content-# внаружу самого content;
    2. Стилизируем кнопки
    #content-inner-1:target #nav #button1,
#content-inner-2:target #nav #button2,
#content-inner-3:target #nav #button3,
#content-inner-4:target #nav #button4,
#content-inner-5:target #nav #button5,
#content-inner-6:target #nav #button6 { background:red; }

    3. Перемещяем их внутрь последнего #inner-content-6 но не в #content
    Ответ написан
    Комментировать
    Комментировать

  • Серверная часть под Bootstrap?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Обьясню популярно.
    Вашу ситуациию можно стравнить с рабочим строителем - он никогда не поймет архитектора.

    1-10 левел. HTML5 + CSS5 вообще не програмирование, это пасивные сущности. BOOTSTRAP это даже не сущность, это набор патернов - не более. Если вы выучили набор патернов, но не понимаете как работает HTML и CSS, вы помощник дизайнера/верстальщика. Фактически Вы чернорабочий - научились держать лопату, рыть канавы и перекидать мешки с места на место, без вреда для здоровья.

    10-30 левел. Изучив HTML и CSS на таком уровне, что понимаете как изменяя CSS придать правильный вид любой разметке. Учится здесь довольно быстро 1 годик, и 1 год опыта.
    Теперь: Вы фактически научились забивать гвозди, и выставлять доски по уровню.

    30-70 левел. JS, PHP, Node.js - уже програмирование. Там совсем другая парадигма. И начинать нужно с парадигмы програмирования. Понять что такое переменные, циклы, условия. Изучить алгоритмы, Обьектную модель, наследование, чэйнинг..., изучить серверные фреймворки Yii, Simphony, WP и т.д. Здесь быстрых результатов не ждать!!!, учится лет 5 и года 3 опыта в програмировании.
    Теперь ваш уровень соответствует специалисту по прокладке инженерных сетей - сантехнику, электрику.

    70-80 левел. Изучив сетевые протоколы, структуру серверов, архитектуру програмного обеспечения, серверные языки програмированя, взаимодействие инфраструктур и много чего ещё, вы только тогда станете Фулстак разработчиком (и в итоге архитектором програмного обеспечения 80 уровня). Но учится на рахитектора минимум 10 лет и еще 5 лет опыта в проектировании ПО.

    P.S. На вашем уровне, Вам подойдет например делать контен на готовых конструкторах WIX или CMS Wordpress. Сдесь много знаний не надо, надо научится регить домен, покупать хостинг, устанавливать в панели хостинга нужную CMS. И самое малое изучить саму CMS.
    Ответ написан
    5 комментариев
    5 комментариев

  • Cssnext VS Scss/sasss/stylus. Стоит ли переходить?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Препроцесоры только для удобства написаня кода. Никаких преймуществ для браузера они не предоставляют.

    А будущий CSS4 даёт преимущества именно для браузера. Например:
    - возможны существенные оптимизации рендеринга на стороне клиента;
    - по сети будет передаваться меньший по размеру код...
    Ответ написан
    4 комментария
    4 комментария

  • Как сделать чтоб пункты меню не "прыгали" из за border?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде. 
    .nav a:hover,
.liActive{
  border: 5px solid #000;
  margin:-5px;
}


    или 

    .nav a:hover,
.liActive{
  outline: 5px solid #000;
}


    И вообще пора использовать тег <nav>.
    А <ul><li> должны применяються только для списков в контенте:
    <nav class="nav navbar-nav headMnu">
  <a class="liActive" href="#">Главная</a>
  <a href="#">пункт2</a>
  <a href="#">пункт3</a>
  <a href="#">пункт4</a>
  <a href="#">пункт5</a>
  <a href="#">пункт6</a>
</nav>
    Ответ написан
    Комментировать
    Комментировать

  • Предложите, пожалуйста, идею, как можно сделать палочки?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Делай две сначала и после элемента
    .item:before,
.item:after {
content: '';
width: 33px;
height: 5px;
background-color: #777777;
}


    Нарисуй одну линию на всю ширину, а иконкам задай размер и фоновый цвет бекграунда.
    .container { position: relative; }
.container:before, {
content: '';
position:absolute;
top: 20px;
width: 100%;
height: 5px;
background-color: #777777;
}
.item {
text-align: center;
}
.item i {
display:block;
width:30px;
height:30px;
line-height:30px;
background: #fff;
}
    Ответ написан
    1 комментарий
    1 комментарий

  • Что лучше — общий всё-в-одном style.css или несколько файлов .css?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    С переходом на протокол HTTP2 держать файлы раздельно даже на сервере будет лучше. Не будет разницы, ибо пакетироваться они будут на уровне протокола.

    Но даже сейчас лучше разделить стили блочной разметки от украшательств и грузить их раздельно. Подключать media queries CSS, не в CSS а в HTML отдельными файлами, указанием атрибута media:
    <link rel="stylesheet" media="all and (min-color-index: 256)" href="..." />


    А ещё лучше, подключать с каждой страницей только те стили, которые на ней используются :)

    Чтобы это можно было сделать, верстальщик должен сделать раздельные сборки:
    • Стартовую таблицу стилей которая грузится на всех страницах. Сюда входят: сброс браузеров, хеадер, футер (если он fixed внизу видимого), стили видимого при загрузке домашней страницы. ТОЛЬКО то, что видно на самом большом экране без элементов которые появляются во время прокрутки.
    • Основную таблицу стилей для разметки страниц контента. То что входит во все страницы контента, без специфичности. Ну и не фиксированный футер тот, что после контента. Эти стили должны быть загружены уже после загрузки основного контента.
    • Специфичные стили для отдельных страниц. Эти грузятся отдельно на каждой странице свои стили и по надобности объединяются с Основной разметкой контента.
    • Таблица стилей форм. Все формы на сайте должны грузится с одной таблицы. А не быть специфичными для разных страниц. Формы это не контент!!! У форм ОБЯЗАТЕЛЬНО должна быть отдельная таблица стилей. Она подключается при включении формы генератором форм на бекенде. Даже строка поиска в хедере. Все элементы input, textarea, option должны быть описаны в отдельной таблице стилей. Эти стили объединяются с основной или стартовой таблицей как будет надо.


    P.S. Уточню по Основной таблице стилей фактически сборок должно быть минимум 6 (мобильная, планшетная, малая, средняя, ретина, печатная).
    Верстка ВСЕГДА должна быть мобайлфёрст. И сновная таблица должна быть на мобильной версии сайта. А потом ёё расширять и естественно подключать атрибутом media по надобности. Сборка в порядке возрастания сначала узкоспециализированная таблица для мобильников. Для планшетников подключается только отдельный файл с планшетной и мобильной таблицами стилей собранные в кучу. И так далее...

    P.P.S. Cборщики (gulp) собирающие в один файл, это посредственное решение в лоб грубой силой, дабы не заморачиваться.
    Ответ написан
    4 комментария
    4 комментария

  • Как скрыть элемент?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде. 
    $('.bar').on('change', function () { /* биндим событие на изменение ползунка */
    $('.clouds').each( function() { /* выбираем все тучки и для каждой выполняем следующее */
      this.top = $('.bar').value() * this.top;  /* здесь изменяем координату как вам удбно */
    });
  } );
    Ответ написан
    Комментировать
    Комментировать

  • Нарезка и вёрстка нестандартного шаблона?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Самый простой метод это CSS трансформации блока.

    .container {
  transform: skewY( 5deg);
  padding: 0;                  
}
.container > .content {
  transform: skewY(-5deg);
  margin: -2em;                       /* подбираеш чтобы покрыть искаженный блок */
  padding: 3em;                       /* подбираеш чтобы влазил внутренний текст */
  background-image: url(http://s45.radikal.ru/i110/1610/c3/9837344ef991t.jpg);
}
    Ответ написан
    8 комментариев
    8 комментариев

  • Как можно корректно обрезать текст, чтоб несколько строк оставалось?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Вот посмотрите пример виджета с многострочной обрезкой.
    JSfiddle

    Самое главное правильно посчитать высоту строк. Это удобно делать в em.

    Например: У вас есть стандартный шрифт в пикселях в документе установленый ТОЛЬКО один раз в теге html. Блоки разметки header, footer, aside, колонок и секций его не меняют. Шрифт меняется только внутренними элентами разметочных блоков.

    Высоту блоков выставляете в em кратно line-height.

    Меняете его только в единицах em/rem. И коректируете высоту line-height по формуле:
    FSn / LHo = LHn,
    где
    FSn - новый font-size;
    LHо - старый line-height;
    LHn - новый line-height;

    Кроме этого, если хотите чтобы верстка выглядела типографически верно (строки колонок совпадали на всей странице), нужно аккуратно соблюдать кратность отступов margin и padding к высоте строки.
    Ответ написан
    Комментировать
    Комментировать

  • Можно ли закруглить средствами css?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Можно вот jsfiddle.net!

    По пунктам:
    - вкладываеш блок с картинкой в релативный контейнер с overflow:hidden;
    - выставляеш внутреннему блоку margin: 0 -10% и ширину 120%;
    - Зкругливаеш внутренние углы ублока не пропорционально, указывая для каждого угла два значения 50% 100%. Регулируя эти значения добивашеся нужного. Если не получается увеличиваеш маргины и ширину во втором пункте, и делаеш значения закрегления угла ближе к 100% 100%.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать изображения PNG все одного цвета и тона?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    JSfiddle

    .contrast {
  -webkit-filter: grayscale(100%) brightness(60%) contrast(2000%) opacity(50%);
  filter: grayscale(100%) brightness(60%) contrast(2000%) opacity(50%);
}


    Теряется сглаживание, но по другому не меняя картинки никак.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать ссылку в ссылке?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    codepen.io
    Ответ написан
    Комментировать
    Комментировать

  • Какой лучше использовать стартовый шаблон для Front-end?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    initializr.com

    Я пользуюсь Responsive.
    Ответ написан
    Комментировать
    Комментировать

  • Можно ли привести к нормальному виду восстановленный файл css?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    По сути это уже не CSS...
    Piriform Recava не вернула старый файл.

    Попробуйте R-Studio
    Ответ написан
    Комментировать
    Комментировать

  • Как сверстать горизонтальное меню с иконками?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Посмотри в меню тостера - сделай также и не парься.
    Ответ написан
    Комментировать
    Комментировать

  • Почему дизайнеры используют сетку в 12 колонок ( 12 column grid )?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Смысл в том, что создатели сеточных фреймворков отталкивались от старой табличной верстки. И за ними хвостом тянется куча багов, такого решения - обёртки, клирфиксы... Блочная верстка задуманная в стандарте HTML4 имеет мало общего с тем "высером", что получился в css-фреймворках.

    А статья :@yarkov очень полезная, с точки зрения изучения основ верстки. А ещё лучше возьмите каккую нибудь старую книгу по верстке газет, журналов. Там основы верстки описаны исходя из базиса.

    P.S. Всегда удивляет HTML, CSS который пишут на фреймворках. Кроме фреймворка получается еще дополнительный файл стилей который длиннее в 2-3 раза за сам фреймворк!! Когда переделываеш эту кашу получается один файл стилей в половину короче только одного фреймворка.

    P.S.S. Артем Лебедев очень хорошо выразился по этому поводу.
    Ответ написан
    2 комментария
    2 комментария

  • Как реализовать вертикальный скролл?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Мож этот подойдет...

    Там просто: подключчи скрипт на страничку тегом скрипт и поставь клас dragon на блоке в котором лежат блоки со скролом. Все блоки которые внутри будут скролиться.
    Ответ написан
    Комментировать
    Комментировать