Rustam Bainazarov

Можно задвоить картинку, нижнюю при этом размыть с помощью blur, а также поднять ей яркость и контраст, чтобы яркие участки были более выраженными и не теряли своей цветности. Это самый эффективный и простой способ создания таких теней:


Если лень включать VPN для JSFiddle, то результат такой:


Либо можно сделать примерно то же самое, но с абсолютно позиционированными элементами, расположенными под картинкой.

Либо можно геморроится с множественными box-shadow.

Кросс-браузерно это сделать нельзя нормально (без усложнений) — только с помощью хака на обёртке:

1px толщины границы + transform + искажение. При соотношении 1:1 реального разрешения и viewport это безусловно будет вызывать проблемы. Плюс, внутренние особенности рендеринга разных движков.

Есть хак, который позволит активировать сглаживание. С ним станет полегче. Грани не станут визуально пропадать при субпиксельной ситуации (Firefox). Кроме того, уйдёт и этот баг с «выпадением» куска грани (Chrome).

.side{
	width: inherit;
	height: inherit;
	border: 1px solid white;
	position: absolute;
	color: yellow;
	font-size: 40px; 
  outline: 1px solid transparent; /* Вот это */
}

Ну, можно так, например, быстро наколхозить, LOL. Работает с классами и ID. Если нет ни того, ни другого, делаем случайный класс, чтобы к чему-то прицепить стили:





Если нужно объединять все стили в один тег style:

CSS-детекция ненадёжна:
https://developer.mozilla.org/en-US/docs/Web/CSS/@...
https://developer.mozilla.org/en-US/docs/Web/CSS/@...

В Android Chrome срабатывает какого-то дьявола первое:


Лучше использовать любой JS-скрипт, определяющий сенсорный экран, ставить класс на body, после чего писать стили отдельно для этого случая. Стили для сенсора нужно ставить для :active вместо :hover.

Я использую этот простой скрипт:

/* Либо вообще удалить flex у этого блока */ 
.s_publications .row a {
    display: flex; /* я про это */
}

/* Либо, если всё же нужен flex, задать выравнивание контента */ 
.s_publications .row a {
    display: flex; 
    align-items: flex-start; /* например, такое */
}

И будет работать:


Кроме того, такой глобальный стиль делать исключительно не рекомендуется:

img {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -moz-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   max-width: 100%;
   max-height: 100%;
   -o-object-fit: contain;
    object-fit: contain;
    /* да и к тому же не совсем ясен смысл этого правила в целом */
}

Типичный максимум глобального стиля img:

img {
    height: auto;
    vertical-align: middle; /* или baseline, если подавляющее кол-во использований будет для вёрстки текстовых блоков */
    /* можно ещё вот это добавить, но это обычно уже в рамках любого CSS Reset для img идёт:
    margin: 0;
    border: 0;
    font-size: 100%;
    font: inherit; */
}

Если счётчики простые, то можно с минимальной разметкой вот так, например:

То, что вы хотите, называется Masonry Grid. На текущий момент нормально на чистом CSS это сделать невозможно.

Inline-block или column-count — полурешения со своими недостатками. На grid это тоже не сделать. Это все будут псевдо-реализации Masonry с ограничениями по высоте отдельных блоков или с непонятным порядком элементов, ограничениями по высоте сетки и т. д.

Для этого есть JS-плагины, самый популярный из которых — https://masonry.desandro.com/. Настройка этого плагина занимает минуту. У него всё есть, включая адаптивность.

По классу же очевидно, что это блок тени модального окна. По структуре классов похоже на Bootstrap'вское. Прокрутка исчезает, т. к. скрипт активирует показ модального окна и вешает класс с overflow: hidden на body. Блок тени генерирует автоматически JS Bootstrap'a.

Вы явно неправильно закрываете модальное окно. Скорее всего просто с помощью display: none или fadeIn(). Засим, контент отдельного окна исчезает с экранов, но все служебные классы и элемент тени остаются активными.

Закрытие модального окна в Bootstrap происходит так (ссылка на документацию):
$('#IDмодального').modal('hide');

Почему-то все забывают, что clip-path поддерживает координаты через calc(), что нивелирует все проблемы с адаптивностью и соединением блоков вне зависимости от количества контента, ширины блока.

clip-path: polygon(0% 0%, 100% calc(0% + 60px), 100% calc(100% - 60px), 0% 100%);
/* calc(100% - 60px) -- вот тут задал четкую ширину скоса */

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

Да, именно так и работает nth-of-type. То есть и иными словами, на CSS эту задачу в чистом виде выполнить нельзя.

Но можно хаком:

button[value="selected"] {
  background: green;
  /* Все элементы с этим атрибутом */
}

button[value="selected"] ~ button[value="selected"] {
  background: red;
  /* Элемент, который идет после предыдущего с этим атрибутом и содержащий его же */
}

С учётом того, что у вас их всего два, то это будет работать нормально. Более того, с учётом этого же аспекта можно даже выбрать элементы по середине (так же хаком):

Field — это атрибут, и он тоже может быть CSS-селектором.

/* Все input'ы */
input {
  color: black;
}

/* Все с input'ы атрибутом field и любым его значением */
input[field] {
  color: green;
}

/* Если пустое значение атрибута field */
input[field=""] {
  color: red;
}

/* Если конкретное значение атрибута field */
input[field="конкретный"] {
  color: blue;
}

От легких обрывов анимации при быстром наведении/отведении никуда не деться, ибо мы меняем значение свойства transform-origin, чтобы сделать ваш эффект. Его (transform-origin) в данном случае анимировать не стоит вовсе, иначе вообще вся анимация ломается.

Можно сделать на CSS (IE11+).

Как все изображения товаров сделать квадратными? — подробное описание.

На iPhone сразу запустилось:

Это баг рендеринга в Safari из-за overflow, opacity и т. п.

Я решал так, например:

/* Добавляем к этому правилу следующее */
.checkout .checkout-form .info-container.visible {
    transform: translateZ(0);
}

Попробуйте.

Так, например:



Не зависит от высоты изображения.