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

PolarOne

Ответы пользователя по тегу CSS

  • Какие стили нужно добавить в card, чтобы каждый элемент в card занимал столько высоты сколько есть в содержимом?

    PolarOneBear
    @PolarOneBear
    Можно еще таким способом
    653a7003341bf451675322.png
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно сделать дым на этом макете?

    PolarOneBear
    @PolarOneBear
    Я бы это постарался сделать это через background image в png в нужных местах. Тоесть картинку дыма на прозрачном фоне использовал бы. И можно без свечения, зависит от самой картинки и её яркости.

    А чтобы светился не контур фона, а содержимое вот тема
    Ответ написан
    Комментировать
    Комментировать

  • Тег < p > и < span >. Есть разница?

    PolarOneBear
    @PolarOneBear
    Собственно все написали....
    Пример
    <p>Советую <span style="color: red;">погуглить про семантику</span>, тэги отличаются не просто так, есть main, header, footer - так же с текстом, все нужно использовать по мере необходимости, сайт конечно же можно на div-ах написать но это будет "неправильно" для поисковых роботов</p>
<p>Разница в том, что <strong>span</strong> не несёт никакого семантического смысла, а <strong>p</strong> несёт и является параграфом.</p>


    Если захотите сделать какой-то элемент внутри "строки" (параграфа), выделить текст, сделать иконку - то еще один "строковый" элемент не лучшая идея.
    Дополнение: p - блочный элемент, занимает 100% ширины страницы или родительского блока. Может быть переопределен свойством display.

    Разница между p и span такая - на примере одного слова "визуально". Рамки - это "место" занимаемое тегом
    643f879fe0161577052657.jpeg
    Ответ написан
    4 комментария
    4 комментария

  • Как сделать такую полоску над картинкой?

    PolarOneBear
    @PolarOneBear
    Сделал "на коленке" не обессудьте, но принцип возможно понять
    https://jsfiddle.net/PolarOne/qsn9pzer/
    643ef07c3743c447617009.jpeg

    Тоесть по сути я сделал псевдоэлемент (:after) и назначил ему фон и рамку и перекрыл им верх картинки.
    Так же можно этому псевдоэлементу задать свой фон в виде картинки....
    Но как по мне - слишком большие "жертвы" ради этого эффекта, может быть возможно через css transform... надо подумать
    Ответ написан
    1 комментарий
    1 комментарий

  • Почему не работает медиа запрос?

    PolarOneBear
    @PolarOneBear
    Извините, не заметил, что у вас SASS в тегах стоит. Тогда ответ ниже не актуален немного.
    Рекомендую статью с разбором по media sasshttps://habr.com/ru/articles/513626/

    Вы делаете медиа со скобками и помещаете туда обычные стили, посмотрите на примере ниже.

    @media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}


    В вашем примере должно быть приблизительно так. Вы же не добавили закрывающую скобку, пропустили @, и стили в медиа вовсе не правильно указали. Попробуйте css ниже

    @media (max-width: 1200px) {
.elips
{
width: 546px;
height: 318.5px;
border-radius: 273px /159.25px;
}
}


    Вынес скобочки чтоб видно было
    Ответ написан
    2 комментария
    2 комментария

  • Как стилизовать тег в css?

    PolarOneBear
    @PolarOneBear 
    <br>
<br/>

    Это тег переноса строки, больше он ничего, по сути не несет.
    Если вы хотите стилизовать текст, то он должен быть внутри тега

    <span>текст</span> - строковый контейнер
<div>текст</div> - блочный контейнер
<p>текст</p> - разметка параграфов


    <span class="text">текст</span>

    Тексту выше вы можете задать цвет несколькими способами, через тег в котором текст находится или через класс этого тега. Есть и другие способы в зависимости от ситуаций, но это основа чтоли
    span {
color: red;
}

или

.text{
color: red;
}
    Ответ написан
    1 комментарий
    1 комментарий

  • Как убрать зазор между button и border?

    PolarOneBear
    @PolarOneBear
    Немного по другому сделайте.
    .fastSearch input {
    width: 600px;
    padding: 10px;
    font-size: 20px;
    /* border: none; */
    border: 3px solid #0073C6;
    border-radius: 20px 0px 0px 20px;
}

button.fastSearchButtonReset {
    border-radius: 0px 20px 20px 0px;
}

.fastSearch {
    display: flex;
    width: 750px;
    height: 60px;
    margin: 0 auto;
    margin-top: 10px;
    /* border: 3px solid #0073C6; */
    /* border-radius: 20px; */
    overflow: hidden;
}


    Замените \ добавьте стили. У формы убрать бордер вообще. Добавить его инпуту, но убрать с правой стороны. А кнопке ресет, на оборот, добавить с правой стороны.

    643dbd2caf837027217305.jpeg
    Ответ написан
    2 комментария
    2 комментария

  • Больше время ttfb. Как уменьшить?

    PolarOneBear
    @PolarOneBear
    Проблем вызывающих это - много, сам решаю.
    - снижение количества плагинов (даже просто установленных) - уменьшает время отклика.
    - количество обрабатываемых текстов, шорткодов и тд.

    Сильный прирост в скорости дало отключение CF7, но так как он удобен в общем и нужен - либо через ajax грузить (но там могут быть другие проблемы) так и просто пересылать на одну страницу на которой, только на которой! и будут грузится стили и скрипты формы (по умолчанию на каждой странице подгружаются).

    - дебажить как писали выше. научится пользоваться консолью на минимальном уровне и смотреть что вызывает ошибки, какие ошибки.

    - плагины кеширования. многие не рекомендуют, но как минимум посоветовал бы из "ускорялок" Autoptimize. там не много настроек и сломать что-то тяжело, а если что-то перестанет работать - отключить по порядочку.

    - тяжелая артиллерия и отдельный разговор) - это оптимизация сервера, вообще это изначально должно быть и лучше нанять кого-то или обратиться в поддержку, хотя поддерживать, наращивать функционал через плагины, станет тяжелее (дороже). Обычно рекомендуют nginx + PHP-FPM + MariaDB
    Ответ написан
    Комментировать
    Комментировать