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

Дмитрий Маринин

Senior Fullstack Software Engineer
Ответы пользователя по тегу CSS

  • Как сделать такие кнопки?

    Creamov
    @Creamov
    Senior Fullstack Software Engineer
    Нет, SVG тут не нужен. Там используется обычный элемент с белым фоном и нулевой высотой (height), который находится внутри ссылки с overflow: hidden. Он повернут на 45 градусов и имеет opacity: 0. При наведении, opacity становится равным 1, и его высота (height) увеличивается на значение, равное ширине (width) ссылки, внутри которой он лежит (засчет чего и создается эффект заполнения).

    4db7731524fc4efbad6bc81c267f5662.png
    Ответ написан
    Комментировать
    Комментировать

  • Можно ли вставить svg используя :after?

    Creamov
    @Creamov
    Senior Fullstack Software Engineer
    Конечно. Используйте для этого свойство content.

    .some-element::after {
    content: url('data:image/svg+xml; base64, <тут_закодированный_svg>');
    /* или */
    content: url("data:image/svg+xml; utf8, <тут_код_svg>");
}

    P.S. в CSS3 для псевдо-элементов необходимо использовать два двоеточия ::before, ::after, вместо одного.
    Ответ написан
    11 комментариев
    11 комментариев

  • Изменение li при наведении на ниже стоящий?

    Creamov
    @Creamov
    Senior Fullstack Software Engineer
    Демо: codepen.io/anon/pen/gpyjZO
    .menu li {
  padding: 5px;  /* отступы просто для примера */
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

/* Для эффекта использования border от предыдущего li  */
.menu li:last-child {
  position: relative;
  top: -1px;        
  padding-top: 6px; /* значение на 1 больше, чем у остальных li */
}

.menu li:hover {
  background-color: #83C85A;
  border-bottom-color: #AE1D8E;
}

.menu li:last-child:hover {
  border-top-color: #AE1D8E;
  border-bottom-color: transparent;
}

    Подобного эффекта можно также добиться через псевдо-элемент ::before.
    Ответ написан
    2 комментария
    2 комментария

  • Почему я не могу на верстке кликать на ссылки?

    Creamov
    @Creamov
    Senior Fullstack Software Engineer
    Если вы установите #content свойство z-index равное -1, то это решит вашу проблему, поскольку #content переместится на задний план.

    Верстка — без комментариев. Поищите и почитайте материалы про позиционирование элементов.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать отступ автоматически?

    Creamov
    @Creamov
    Senior Fullstack Software Engineer
    Элементы с абсолютным позиционированием не зависят от общего потока, поэтому добавлять автоматический отступ относительно другого элемента, средствами CSS, не получится.

    Уберите position: absolute; у параграфов (даты, заголовка, описания). Оберните их в <div class="wrap">...</div> и позиционируйте этот «div» так, как вам нужно.


    Дополнительно (на будущее):

    Строчные элементы не должны содержать внутри себя блочные элементы. Если вы все же хотите это сделать, то делайте из строчного элемента — блочный.

    <a href="#"> <!-- строчный элемент -->
    <p>Some paragraph</p> <!-- блочный элемент -->
</a>

    Элементу «a», в данном случае, необходимо задать display: block; или display: inline-block; в CSS.

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