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

Алексей

Я в этом шарю
Ответы пользователя по тегу CSS

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

    algreenzer
    @algreenzer
    Я в этом шарю
    Добавляем обертку для меню
    <div class="menu__wrapper">
  <div class="menu">
  ...
  </div>
</div><!--/.menu__wrapper (отмечаем конец обертки, дабы не путать с другими закрывающими тегами) -->

    Обертку раcтягиваем, а содержимое меню центрируем внутри относительно нее:
    .menu__wrapper {
  width: 100%;
  margin: 0 auto;
}
.menu {
  width: auto;
  margin: 0;
  text-align: center;
}

    Вот что получилось codepen

    Таким образом меню центрируется при любой ширине экрана, и при изменении ширины из-за добавления пунктов меню, будет оставаться центрированной. Если по какой-то причине такое центрирование мешает. Можно подобрать ширину div.menu, при которой margin: 0 auto; будет продолжать выравнивать блок по центру. Но тогда возникнет проблема с расширением меню при добавлении пунктов.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать полуовал на css?

    algreenzer
    @algreenzer
    Я в этом шарю
    HTML
    <div id="nedooval"></div>
    CSS3
    #nedooval {
    width: 250px;
    height: 30px;
    background: red;
    border-top-left-radius: 100px 30px;  /* значение по ширине и по высоте */
    border-top-right-radius: 100px 30px;
}

    Кросбраузерность
    Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius-topright
    Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-top-right-radius

    Зарисовка codepen

    Альтернативное написание
    border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

    border-radius: 100px 100px 0 0;

    Синтаксис border-radius

    Можно использовать любые доступные величины (px, cm, in, em и др.)

    Еще примеры простой геометрии на CSS3:
    - на хабре
    - треугольники
    - пара дополнительных примеров, которых нет на хабре
    - border-top-right-radius
    Ответ написан
    Комментировать
    Комментировать

  • Как задать отступы изображения?

    algreenzer
    @algreenzer
    Я в этом шарю
    Можно задать отступы для изображений всех материалов опубликованных пользователями, а возможность выставлять пользовательские отступы выпилить.

    В противном случае будет работать иерархия, где css-класс перекрывает любой стиль прописанный в самом теге:

    .class1
    #block1
    style=" " - всегда главнее

    А в большинстве, если не во всех визуальных редакторах все стили пишутся в теги именно с помощью style=" "
    И не думаю что !important как-то спасет.

    UPD: обычно все картинки в визуальных редакторах включаются внутрь тегов <p></p>в таком случае вряд ли можно легко решить эту задачу. Думаю если суметь избежать попадания изображений внутрь тегов абзацов, то отступы можно сделать за счет отступов самих абзацов.
    Ответ написан
    Комментировать
    Комментировать

  • Как задать text-decoration-color для input?

    algreenzer
    @algreenzer
    Я в этом шарю
    Даже если это будет не input, все равно перечеркивание не будет другого цвета. Думаю только по средством чистого css это не возможно. Когда-нибудь может реализуют простой выбор цвета text-decoration: line-through red;
    На htmlbook.ru (htmlbook.ru/css/text-decoration-color) есть описание подобного значения, но даже там сказано, что нигде оно не поддерживается, разве что -moz-text-decoration-color в мозиле. Я ради интереса даже проверил - в версии 28.0 не работает.

    Такой прием работает в случае a:hover, но не с input
    Ответ написан
    Комментировать
    Комментировать

  • Как осуществить выравнивание div по одной линии?

    algreenzer
    @algreenzer
    Я в этом шарю
    Согласен с @dsadasdad, лучше всего при таком выводе контента обрезать текст по количеству символов, иначе будет каша. Или только остается использовать masonry (habrahabr.ru/sandbox/37498).
    Ответ написан
    Комментировать
    Комментировать

  • Модальное окно на css3 лучше или js ?

    algreenzer
    @algreenzer
    Я в этом шарю
    Я считаю, если можно написать на CSS не прибегая к js ухищрениям, то почему нет.

    Вот есть красивый способ реализации, ничего лишнего: habrahabr.ru/post/136351
    Ответ написан
    2 комментария
    2 комментария

  • Как растянуть фон по ширине экрана background-size: cover?

    algreenzer
    @algreenzer
    Я в этом шарю
    Стили позиционирования убрали, но на разрешении 1920x1080 как-то слишком все увеличивается, что не влазит в экран. При в принципе таком скромном количестве отображаемого материала, хорошо бы уместить все в один экран, без прокрутки.

    Советую вообще не использовать background-size: cover;
    А сделать бэкграунд таким образом, чтобы на широкоформатных экранах он центрировался, а остальное поле заполнял фоновый цвет. Для этого нужно сделать, чтобы фоновое изображение по краям соответствовало фоновому цвету, тогда не будет заметно границ.

    То есть просто прописать:
    background: url(images/bg2.jpg) 50% 0 no-repeat #цвет; //По центру вверху
/* или */
background: url(images/bg2.jpg) 50% 100px no-repeat #цвет; //По центру с отступом сверху 100px

    А для остального задать центрирование и разумное увеличение, через @media
    Ответ написан
    Комментировать
    Комментировать