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

alexalexes

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

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

    @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 комментарий

  • Как в CSS сделать так, чтобы всегда была видна полоса прокрутки?

    @alexalexes
    Веб разработчик крайне ограничен в стилизации скроллбара.
    Повлиять можно только на 3 параметра:
    1) Ширина скроллбара;
    2) Цвет бегунка (+ hover);
    3) Цвет подложки бегунка.
    Все остальное поведение зависит от браузера и пользовательских настроек вне контекста песочницы веб-страницы (и даже доступные стилизации могут быть перебиты внешними настройками просто потому что потому).
    Ответ написан
    Комментировать
    Комментировать

  • Как расположить панель внизу через стили css?

    @alexalexes 
    .ch_list
{
  position: absolute;
  width: 100vw;
  ...
}
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать круг на фоне числа?

    @alexalexes
    Нужно квадратному желтому элементу скруглить углы на не менее 50% радиуса его размера.
    Ответ написан
    Комментировать
    Комментировать

  • Как реализовать переход по ссылке силами CSS?

    @alexalexes
    Нужно помнить, что у тега a и button по умолчанию поведение display: inline - строчные элементы.
    Если хотите, чтобы они служили там, где используются блочные элементы (display: block) и блочно-строчные (display: inline-block), как div в вашем примере. Так обеспечьте их этим свойством - указав его явно.
    Зная это, можно спокойно заменить div на a и решить вашу проблему.
    Ответ написан
    Комментировать
    Комментировать

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

    @alexalexes
    table подразумевает работу со строковыми данными, но с помощью псевдо-селекторов nth-child, можно сделать некоторый трюк, выделив колонку:
    /*7 - текущая колонка, 6 - предыдущая - можно номер выделенной колонки вынести в css переменную и манипулировать только ей*/
tr:first-child td:nth-child(6),
tr td:nth-child(6),
tr td:nth-child(7)
{
  border-right: 2px solid red;
}
tr td:nth-child(7) /*страховка для вырожденного случая, когда выделена первая колонка */ 
{
  border-left: 2px solid red;
}
tr:first-child td:nth-child(7)
{
  border-top: 2px solid red;
}
tr:last-child td:nth-child(7)
{
  border-bottom: 2px solid red;
}
    Ответ написан
    3 комментария
    3 комментария

  • Как сделать боксы подряд?

    @alexalexes
    Либо по старинке - всем элементам, которые хотите сделать в ряд, даете свойство display: inline-block; либо по молодежному - делаете контейнер с display: flex и добавляете необходимые flex-свойства элементам, чтобы обеспечить выравнивание и пропорции заполнения блоков.
    Еще древнее способ и самый правильный с точки зрения семантики HTML - элемент .button используете как input, а не div, чтобы все элементы в ряду были строчного типа - тогда мучиться с выравниванием не придется.
    Ответ написан
    5 комментариев
    5 комментариев

  • Если полю input[type="text"] задавать любую высоту, то текст будет всегда по центру. За счёт какого свойства это происходит?

    @alexalexes
    Потому, что вы используете не тот элемент управления, чтобы создать многострочное поле ввода.
    Для этого есть textarea.
    input[type="text"] используется только для однострочного ввода.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать такой border-radius нестандартный?

    @alexalexes
    Если дизайнер не имеет представления об ограничениях современного CSS и не собирается вникать в их суть, то clip-path и svg ваше все.
    Ответ написан
    10 комментариев
    10 комментариев