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:

https://css-tricks.com/aspect-ratio-boxes/

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.

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

https://css-tricks.com/aspect-ratio-boxes/

Для img:
https://developer.mozilla.org/ru/docs/Learn/HTML/M...

Для CSS:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .some-image {
    background: url(http://via.placeholder.com/200x200) 100px 100px;
  }
}

Учтите, что современные смартфоны в своём большинстве имеют степень масштаба x3. Масштаб x2 уже только у весьма бюджетных или старых устройств.

В данном случае так будет проще:



В целом, можно ещё сделать SVG-картинкой, либо же градиент на текст в качестве заливки + text-stroke:



Однако, в данном случае проще всего именно первый вариант из-за параллакса.

/* Либо вообще удалить 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/. Настройка этого плагина занимает минуту. У него всё есть, включая адаптивность.

На body вешайте класс .no-pseudo со следующим правилом:

.no-pseudo:before,
.no-pseudo:after,
.no-pseudo *:before,
.no-pseudo *:after {
   content: none !important;
   display: none !important;
}

JS с псевдоэлементами работать не умеет напрямую и полноценно, т. к. это не элементы DOM, поэтому только так.

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

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

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

Это можно обойти, но только так и только для fill корневого SVG. В данном случае это будет работать как надо:


В Firefox работает нормально стилизация всей структуры SVG через use. Но только в Firefox.

Почему-то все забывают, что 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;
}