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

alexalexes

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

  • Как поменять свет линии при нажатии?

    @alexalexes
    Смотрите свойства background селекторов .border-top, .border-bottom, .border-left, .border-right.
    Ответ написан
    5 комментариев
    5 комментариев

  • Продвинутые пользовательские стили сайтов, не ограниченные одним css?

    @alexalexes
    Все что не умеет CSS в чистом виде, умеет JS, но с некоторыми нюансами в плане инициализации эффектов и производительности.
    Скажем выделить цвет красным, если Красный.

    Да, это для JS задачка на 3 строчки.
    Но если серьезно, то если таких изменений много и нет четких правил что на что менять, то сайт нужно полностью парсить на своем сервере (или использовать чисто его API без верстки) и уже выводить интерфейс в своих шаблонах, ничего не имеющих общего с исходной структурой.
    PS: Но в реальной жизни никто не перелицовывает кардинально чужой сайт. Основной контингент пользователей Stylus, максимум, правят пару стилей, чтобы верстка не сыпалась или не раздражал какой-то блок, либо выпиливают рекламу.
    Ответ написан
    1 комментарий
    1 комментарий

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

    @alexalexes
    До наведения на блок стили выглядят так:
    #GFCatalog .categories-item__card-wrapper {
    overflow: hidden;
    box-shadow: 0 2px 6px 0 rgba(188, 191, 185, 0.5);
    border-radius: 10px;
    max-height: 260px;
    padding: 10px 15px;
    position: absolute;
    width: 100%;
    background-color: white;
    transition: max-height 0.2s ease;
}

    А когда hover, то корректируются эти свойства:
    #GFCatalog .categories-item__card-wrapper:hover {
    max-height: 1000px;
    z-index: 10;
    transition: max-height 1s linear, box-shadow .3s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15), 0 3px 5px rgba(0, 0, 0, 0.1);
}

    Чтобы работал эффект, вам нужно изменить max-height и z-index (чтобы блок не заехал под другой соседний блок). Изменение transition, box-shadow - декоративные примочки.
    PS: Используйте инструмент :hov на вкладке Стили в панели разработчика F12, чтобы выяснять такие подробности.
    Ответ написан
    Комментировать
    Комментировать

  • Есть пк версия сайта и телефонная. Как настроить так чтобы при входе на сайт с телефона открывалась версия для телефона?

    @alexalexes
    Сделайте дизайн сайта адаптивным, привязанный к некоторым реперным точкам ширины экрана.
    https://bootstrap-4.ru/docs/4.0/layout/grid/
    PS: Не обязательно использовать bootstap - можно использовать голые media-запросы, просто подсмотреть, какие ширины использовать в условиях media-запросов.
    PPS: Если есть особые элементы дизайна, которые не привязаны к 12-и колоночной сетке, то можно использовать другие реперные точки ширины, чтобы для вашего случая был свой сценарий изменения ширины элементов при переходе от одной ширины экрана к другой.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как убрать дробь в размере картинки?

    @alexalexes
    Это вычисленные значения свойства. Если свойство задано не в пиксельных значениях, то браузер не обязан ставить вычисленные значения в целых единицах.
    Есть ли какое-то решение?

    Ограничивать по min-width и max-width свойству.
    Ответ написан
    Комментировать
    Комментировать

  • Как решить проблему с прокруткой в инпуте?

    @alexalexes
    Сделайте подложку с клетками под input-ом, сам input - прозрачный. Так вы сможете задать отдельно ширину подложки и отдельно ширину input-а.
    Из-за того, что letter-spacing делает отступ строго справа от символа, вы никогда не сможете приладить к ним центрированные элементы фона для каждого символа в том же теге.
    Ответ написан
    2 комментария
    2 комментария

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

    @alexalexes 
    let group_list = document.querySelectorAll('.option__group');
group_list.forEach(function(g_e)
{
 if(g_e.querySelector('label').innerHTML == ' Цвет:' )
 {
  g_e.classList.add("displayblock");
 }
 else
 {
   g_e.classList.remove("displayblock");
 }
});
    Ответ написан
    2 комментария
    2 комментария

  • Как изменить CSS в карточке товара?

    @alexalexes
    У вас проблема A/B - вы не понимаете, что у вас проблема в архитектуре хранения данных:
    У вас не три строчки должно быть в названии для одной карточки товара, а четыре различных атрибута:
    1. Название товара.
    2. Категория товара.
    3. Количество товара.
    4. Единица измерения количества товара.
    Собственно, эти атрибуты должны правиться и сохраняться различными полями как в форме редактирования, так и в базе.
    На вывод карточки товара тоже нужно правильно считывать из базы атрибуты и править шаблон вывода этих атрибутов.

    Реализуется перепроектировкой структуры базы данных и всех скриптов и шаблонов, кто использует атрибуты карточки товара.
    Ответ написан
    Комментировать
    Комментировать

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

    @alexalexes
    Как минимум, контейнер, который должен прилипать, должен иметь следующие свойства:
    .footer-container
{
  position: sticky;
  bottom: 0;
}

    И этот контейнер должен изначально находится в нижней части страницы.
    Ответ написан
    Комментировать
    Комментировать

  • Как не обрезать тень элемента, используя "overflow: hidden"?

    @alexalexes
    669f3ac55a2de517816393.png
    Банальная геометрия.
    Горизонтальная ширина тени выбирается как значение a, при котором градиент тени полностью уходит от насыщенного цвета в цвет фона.
    Теперь нужно соблюсти условия:
    1) Два горизонтальных отступа между слайдами не должно быть меньше значения 2a - чтобы тени соседних слайдов не накладывались.
    2) Горизонтальный отступ контейнера слайдов должен быть равен ровно значению a, тогда по краям граница контейнера не будет затрагивать ни одну тень крайних и скрытых слайдов. Если сделать больше горизонтальный отступ, то предусмотрите, чтобы скрытые элементы убирали свою тень когда они выходят за пределы контейнера.

    Если соблюсти эти условия, то проблем с обрезкой тени не будет.
    Ответ написан
    Комментировать
    Комментировать

  • Как добавить индивидуальный фон для каждого изображения?

    @alexalexes
    Добавить какой-нибудь специфичности в селекторы, которые определяют фоновую картинку.
    Например, по порядку следования тегов post_thumbnail (это точно тег, вы с классом не перепутали?):
    .alignleft post_thumbnail:nth-child(1) > a:before {
	background-image: url('icon_1.png');
}
.alignleft post_thumbnail:nth-child(2) > a:before {
	background-image: url('icon_2.png');
}
.alignleft post_thumbnail:nth-child(3) > a:before {
	background-image: url('icon_3.png');
}

    Или добавить индивидуальные классы тегам, добавляющие специфичность тега post_thumbnail:
    .alignleft post_thumbnail.icon_1 > a:before {
	background-image: url('icon_1.png');
}
.alignleft post_thumbnail.icon_2 > a:before {
	background-image: url('icon_2.png');
}
.alignleft post_thumbnail.icon_3 > a:before {
	background-image: url('icon_3.png');
}
    Ответ написан
    4 комментария
    4 комментария

  • Можно ли создать такое элементами CSS html?

    @alexalexes
    Если это чисто декоративный элемент, и в нем внутри не будут другие элементы, то можно разрезать текстуру на составные текстуры и какие-то из этих частей повторять, чтобы получить бесконечно удлиняемый эффект.
    Если у этого элемента будет еще какая-та нагрузка, то смотрите как это реализовать в svg.
    Ответ написан
    Комментировать
    Комментировать

  • Какую книгу выбрать?

    @alexalexes
    Читай все, но книжек мало.
    Чем меньше технологий в названии, тем меньше будет галопом по Европам в содержании.
    Ищите книжки отдельно по PHP (второй уровень прокачки - фреймворки: Laravel, Yii, Symphony и т.д.), отдельно JS (второй уровень прокачки: VueJS, React и т.д.), отдельно CSS (второй уровень - препроцессоры), MySQL (второй уровень Postgres, СУБД из кровавого интерпрайза). В дополнение всякие Memcached, Redis, Rest, TreeQL. Книги по шаблонам проектированиям, MVC модели и т.д., системы управления версиями, типа Git, контейнеризация, типа Docker и т.д., администрирование Linux/MS.
    https://roadmap.sh/full-stack
    https://roadmap.sh/frontend
    Ответ написан
    9 комментариев
    9 комментариев

  • Как сделать, чтобы блоки занимали половину доступной ширины, а последний нечётный - всю?

    @alexalexes

    Используйте flex и nth-child на кастомизацию по порядку идущих элементов.
    Ответ написан
    6 комментариев
    6 комментариев

  • Как сделать чтобы было по 2 блока на строке, а не сразу все 4?

    @alexalexes
    Используйте display: grid вместо flex. В гридах есть возможность задать табличную сетку для контейнера с элементами.
    Ответ написан
    Комментировать
    Комментировать

  • В firefox не работает transition opacity?

    @alexalexes
    Я думаю, с порядком свойств transition лучше не испытывать судьбу, и ставить их в том порядке, как вы видите это в справочнике:
    transition: all 0.6s;
    По содержанию можно распарсить, какой тип свойства разработчик имел ввиду, но думаю, это не обязывает интерпретатор CSS обладать этим в функционалом. Может вы и словили этот момент в конкретном браузере.
    Ответ написан
    Комментировать
    Комментировать

  • Как задать высоту скроллбару?

    @alexalexes
    Никак.
    В css у скроллбара можно отрегулировать только следующие параметры, и то, любой браузер этим может пренебречь:
    - ширина видимой области скроллбара;
    - цвет подложки скроллбара;
    - цвет ползунка скроллбара.
    Вертикальный скроллбар по высоте всегда занимает всю высоту видимой области прокручиваемого блока. Высота ползунка определяется особенностями браузера, со стороны контента сайта она не регулируемая.
    Ответ написан
    Комментировать
    Комментировать

  • Как лаконичнее всего выбрать селекторы?

    @alexalexes
    Если они лежат на одном уровне, и у их родителя есть определенный id/class, то этим дивам вообще не нужно никак обозначаться, чтобы на них навешать стили:
    контейнер_div_ов > div
{
  /* стили элементов абвгдейки */
}

    Можно уточнить, что все div_ы с id атрибутом использовать:
    контейнер_div_ов > div[id]
{
  /* стили элементов абвгдейки */
}

    PS: Если все по науке называть, то вопрос, вообще, не возникнет, как навешивать стили:
    <div class="alphabet">
  <div id="A" class="alphabet__item"></div>
  <div id="B" class="alphabet__item"></div>
  <div id="C" class="alphabet__item"></div>
  ...
</div>
    Ответ написан
    Комментировать
    Комментировать

  • Сайт не показывает задний анимированный фон, что делать?

    @alexalexes
    Добавь на body какой-нибудь класс:
    <body class="body__with-background">
</body>

    и повесь на него селектор с фоном:
    body.body__with-background {
  background: url(background.gif) no-repeat; /* Задаём фон GIF-картинкой */
}

    тогда перебьет bootstrap-стиль фона.
    Ответ написан
    Комментировать
    Комментировать

  • Как можно сверстать такую рамку на сайте?

    @alexalexes
    Примерно так можно сверстать:
    Ответ написан
    1 комментарий
    1 комментарий