Как сделать новый тренд длинной тени с помощью CSS?
Вместе с Flat UI появился новый тренд под названием "длинная тень".
Это пример изображения:
Мне действительно это нравится, и теперь я хочу, чтобы такой эффект был на моем сайте. Но я не буду делать изображение, я хочу сделать это в CSS! (Или HTML5, JQuery и т. Д.).
Я уже нашел генератор для этого ( Long Shadow Generator от Juani Ruiz Echazú), но сгенерированный CSS выглядит действительно очень неловко.
Пример:
.shape {
text-shadow: rgb(20, 144, 120) 1px 1px,
rgb(20, 144, 120) 2px 2px,
rgb(20, 144, 120) 3px 3px,
rgb(20, 144, 120) 4px 4px,
rgb(20, 144, 120) 5px 5px,
rgb(20, 144, 120) 6px 6px,
rgb(20, 144, 120) 7px 7px,
rgb(20, 144, 120) 8px 8px,
rgb(20, 144, 120) 9px 9px,
rgb(20, 144, 120) 10px 10px,
rgb(20, 144, 120) 11px 11px,
rgb(20, 144, 120) 12px 12px,
rgb(20, 145, 121) 13px 13px,
rgb(20, 146, 122) 14px 14px,
rgb(20, 147, 123) 15px 15px,
rgb(20, 148, 123) 16px 16px,
rgb(20, 149, 124) 17px 17px,
rgb(20, 150, 125) 18px 18px,
rgb(20, 151, 126) 19px 19px,
rgb(21, 152, 126) 20px 20px,
rgb(21, 153, 127) 21px 21px,
rgb(21, 154, 128) 22px 22px,
rgb(21, 155, 129) 23px 23px,
rgb(21, 156, 129) 24px 24px,
rgb(21, 157, 130) 25px 25px,
rgb(21, 158, 131) 26px 26px,
rgb(21, 159, 132) 27px 27px,
rgb(22, 160, 133) 28px 28px;
box-shadow: rgb(28, 37, 48) 1px 1px,
rgb(28, 37, 48) 2px 2px,
rgb(28, 37, 48) 3px 3px,
rgb(28, 37, 48) 4px 4px,
rgb(28, 37, 48) 5px 5px,
rgb(28, 37, 49) 6px 6px,
rgb(28, 37, 49) 7px 7px,
rgb(28, 38, 49) 8px 8px,
rgb(28, 38, 49) 9px 9px,
rgb(29, 38, 49) 10px 10px,
rgb(29, 38, 49) 11px 11px,
rgb(29, 38, 50) 12px 12px,
rgb(29, 38, 50) 13px 13px,
rgb(29, 38, 50) 14px 14px,
rgb(29, 39, 50) 15px 15px,
rgb(29, 39, 50) 16px 16px,
rgb(29, 39, 50) 17px 17px,
rgb(29, 39, 51) 18px 18px,
rgb(29, 39, 51) 19px 19px,
rgb(30, 39, 51) 20px 20px,
rgb(30, 39, 51) 21px 21px,
rgb(30, 39, 51) 22px 22px,
rgb(30, 40, 51) 23px 23px,
rgb(30, 40, 52) 24px 24px,
rgb(30, 40, 52) 25px 25px,
rgb(30, 40, 52) 26px 26px,
rgb(30, 40, 52) 27px 27px,
rgb(30, 40, 52) 28px 28px,
rgb(30, 40, 52) 29px 29px,
rgb(31, 41, 53) 30px 30px,
rgb(31, 41, 53) 31px 31px,
rgb(31, 41, 53) 32px 32px,
rgb(31, 41, 53) 33px 33px,
rgb(31, 41, 53) 34px 34px,
rgb(31, 41, 53) 35px 35px,
rgb(31, 41, 54) 36px 36px,
rgb(31, 41, 54) 37px 37px,
rgb(31, 42, 54) 38px 38px,
rgb(31, 42, 54) 39px 39px,
rgb(32, 42, 54) 40px 40px,
rgb(32, 42, 54) 41px 41px,
rgb(32, 42, 55) 42px 42px,
rgb(32, 42, 55) 43px 43px,
rgb(32, 42, 55) 44px 44px,
rgb(32, 43, 55) 45px 45px,
rgb(32, 43, 55) 46px 46px,
rgb(32, 43, 55) 47px 47px,
rgb(32, 43, 56) 48px 48px,
rgb(32, 43, 56) 49px 49px,
rgb(33, 43, 56) 50px 50px,
rgb(33, 43, 56) 51px 51px,
rgb(33, 43, 56) 52px 52px,
rgb(33, 44, 56) 53px 53px,
rgb(33, 44, 57) 54px 54px,
rgb(33, 44, 57) 55px 55px,
rgb(33, 44, 57) 56px 56px,
rgb(33, 44, 57) 57px 57px,
rgb(33, 44, 57) 58px 58px,
rgb(33, 44, 57) 59px 59px,
rgb(34, 45, 58) 60px 60px;
background-color: rgb(22, 160, 133);
height: 150px;
width: 150px;
font-size: 75px;
line-height: 150px;
text-align: center;
}
Так есть ли более простой, понятный и лучший способ сделать это без необходимости в графике?
Объяснение, почему я не буду использовать графику
Я люблю творческие, необычные и выдающиеся анимации. Поэтому я думаю, что с такими длинными тенями возможны действительно красивые вещи.
У меня в голове есть анимация, которую я действительно хочу реализовать:
У меня есть текст, как "Stackru". Я добавляю этот текст CSS-transition, Когда я наведу этот текст, он должен отображать text-shadow,
Мысль в демо
Легко. Но как же эта длинная тень появится? Было бы здорово. Но это будет огромный CSS только для этой анимации. Необоснованное.
Поэтому я прошу вас, умные головы там. Вы знаете какой-нибудь простой CSS-трюк, или есть ли способ реализовать это с помощью JavaScript или других библиотек? Тогда я думаю, что возможны более потрясающие эффекты, чем моя маленькая мысль...
11 ответов
Посмотрите этот урок о том, как это сделать с помощью Sass: http://css-tricks.com/metafizzy-effect-with-sass/
и посмотрите на этот CodePen с полным результатом: http://codepen.io/hugo/pen/nwivF
Вышеприведенный пример - практически единственный способ сделать это с помощью чистого CSS, и, хотя он выглядит довольно сумасшедшим, он позволит вам настроить эти тени для текста с помощью переходов и тому подобного.
Теперь, спустя ~1 неделю, я вижу, что на данный момент не существует ни скудного, ни оживляемого решения.
Но когда я игнорирую свои самые важные требования, существуют разные возможности.
Поэтому я хочу сделать небольшой обзор по всем этим возможностям, которые я нашел.
CSS-только
Громоздкое текстово-теневое решение
Первое решение - мой пример кода, который я разместил. Это очень громоздко, но результат выглядит очень похоже на образец изображения. Но если я хочу оживить этот код, например, с transition Это будет чрезвычайно большой CSS-код.
Заключение
+ Very similar to the original effect on pictures
+ An only CSS way
+ Possible to generate CSS only animations
- Generate big bunch of CSS code
- Hard to create animations
Инструменты и примеры
Одним из лучших инструментов для создания единственного способа CSS является генератор длинных теней Хуани Руис Эчасу.
Громоздкое текстово-теневое решение с помощью rgba
В ответе itsmikem он предлагает использовать rgba добавить opacity создать довольно эффект затухания. Он может получить меньший набор CSS, который также может быть проще анимировать. Но это не создает такой же эффект, как на графике.
Заключение
+ An only CSS way
+ Possible to generate CSS only animations
+ Could be a slimmer CSS code than without rgba
+ Could be easier to generate animations
- Not similar to the original effect
- For a longer shadow, it will be again a lot of CSS
Инструменты и примеры
Просто прочитайте ответ Майкла Мендельсона. Не нашел ни одного примера / инструмента в интернете и не успел его создать, потому что это не приемлемое решение для моего случая.
Громоздкое текстово-теневое решение с SCSS
Чтобы уменьшить LoC (Lines of Code) для первого решения, Lost Left Stack предлагает использовать SCSS. Код будет тоньше, но выглядит неудобно и его сложнее понять. Но также этот более тонкий кодекс есть и останется очень большим. Заключение
+ Very similar to the original effect
+ An only CSS way
+ Possible to generate CSS only animation
+ Slimmer CSS than without SCSS...
- ... but it will be remain a bulky CSS
- Not everybody is familiar with SCSS so the code is going to be incomprehensible
- Hard to create animations
Инструменты и примеры
Существует пример Codepen, в котором показано, как создать эффект длинной тени с помощью SCSS для различных объектов (значков, шрифтов и т. Д.).
JavaScript-только
Генерация CSS только с помощью JavaScript
Victor.Palyvoda описан способ генерации CSS с помощью JavaScript. В фоновом режиме он снова создает большую связку кода, но код JavaScript намного тоньше, чем "жестко закодированный" CSS. Анимация также возможна таким же образом (посмотрите на ответ пользователя 1724911).
Заключение
+ Very similar to the original effect
+ To develop code is a lot slimmer
+ Animations are easy and lean to create
- In the background, there is this big bulky CSS code
- performance
Инструменты и примеры
Посмотрите ответ пользователя 1724911, чтобы увидеть также код для анимации. Я создал маленький пример. Просто с 1 HTML-тегом и небольшими строками JavaScript. Пример Codepen
Плагин jQuery
Я также нашел небольшой плагин jQuery для Long-Shadow. Он чрезвычайно прост в использовании, но создает (на мой взгляд) ужасный теневой эффект.
Заключение
+ Extreme easy-to-use
- Very ugly effect
Инструменты и пример
Я нашел этот плагин здесь.
Графика и JavaScript
Выпуск для гиков
Есть сайт, который обладает действительно потрясающим и замечательным эффектом Long-Shadow. Сайт под названием We Are Impero. Поэтому я спросил команду Impero, как они производят этот замечательный эффект. Если используется библиотека или что-то. Это был их ответ:
Это все специально спроектировано и построено. Нет основы для работы, это была очень сложная миссия!
Так что это самодельный с графикой и JavaScript.
Заключение
+ Most wonderful long-shadow effect i've ever seen
- Self made. And it was a hard work.
- Graphic, CSS & JavaScript are required
Инструменты и примеры
Просто наслаждайтесь веб-сайтом We Impero.
Графический только
Фотошоп работа
Таким образом, есть также способ создать этот эффект как изображение. Это самый простой способ, и это "оригинал". Но, к сожалению, не анимация... Или, может быть, когда я наведу курсор на картинку, я создаю GIF с анимацией и покажу его? На самом деле, нет:-)
Заключение
+ The "original" effect
+ most adaptable
- Not animatable
Инструменты и примеры
В Интернете есть множество примеров длинных теней. Просто погугли это. Awwwards сделал классную статью о том, как создать эффект длинной тени в Photoshop.
Так что спасибо всем за ваши ответы, идеи, вдохновение и аргументы. Я дам им, которых я связал в своем ответе, голосование против, потому что без вас у меня был бы только один выход.
Возможно, в будущем там будет легче создавать такие вещи.
Приветствия dTDesign
Это мой код, я использую его на своих сайтах:
.longShadow{
color:#fff;
text-shadow:1px 1px rgba(0,0,0,0.01),
2px 2px rgba(0,0,0,0.03),
3px 3px rgba(0,0,0,0.025),
4px 4px rgba(0,0,0,0.02),
5px 5px rgba(0,0,0,0.015),
6px 6px rgba(0,0,0,0.01),
7px 6px rgba(0,0,0,0.01),
8px 8px rgba(0,0,0,0.01),
9px 8px rgba(0,0,0,0.01),
10px 10px rgba(0,0,0,0.01),
11px 11px rgba(0,0,0,0.01),
12px 12px rgba(0,0,0,0.01),
13px 13px rgba(0,0,0,0.01),
14px 14px rgba(0,0,0,0.01),
15px 15px rgba(0,0,0,0.01),
16px 16px rgba(0,0,0,0.01),
17px 17px rgba(0,0,0,0.01),
18px 18px rgba(0,0,0,0.01),
19px 19px rgba(0,0,0,0.01),
20px 20px rgba(0,0,0,0.01),
21px 21px rgba(0,0,0,0.01),
22px 22px rgba(0,0,0,0.01),
23px 23px rgba(0,0,0,0.01);
}
Вы можете создавать теневые плоскости вашего текста с помощью JavaScript. Просто взгляните на это:
<html>
<head>
<style>
body { // in this example I used 'body' as animated content
font-weight: bold;
font-size: 65px;
color:rgb(155,155,155);
transition: text-shadow 0.5s linear;
-moz-transition: text-shadow 0.5s linear;
-webkit-transition: text-shadow 0.5s linear;
-o-transition: text-shadow 0.5s linear;
text-shadow: 1px 1px 0px rgba(0,0,0,1);
}
</style>
<script> // here we can add some styles, generated by js.
var text_shadow = '';
for(var p = 0; p < 100; p++)
{
text_shadow += (text_shadow? ', ' : '') + 2*p + 'px '+ 2*p +'px 1px rgba(0,0,0,' + 1/(p+1) + ')';
}
document.head.innerHTML += "<style> body:hover { text-shadow: " + text_shadow + "; } </style>";
</script>
</head>
<body>Stackru</body>
</html>
Но код, подобный этому, труден для медленных процессоров (100 плоскостей для некоторого текста)... Просто помните об этом.
Я бы предложил другой подход. Вы не будете обходиться без нескольких текстовых теней, но попробуйте вместо этого использовать rgba(0,0,0,val), где val - это число между скажем.5 и 0. Тогда вам может не понадобиться так много итераций,
Попробуй это:
text-shadow: 1px 1px 1px rgba(0,0,0,.5),2px 2px 1px rgba(0,0,0,.4),3px 3px 1px rgba(0,0,0,.3),4px 4px 1px rgba(0,0,0,.2),5px 5px 1px rgba(0,0,0,0.1)
Вы можете использовать любое расстояние и сколько угодно итераций. Просто предложение.
Я даю вам свои попытки, первая с использованием только CSS, другая с использованием CSS и пользовательское фоновое изображение PNG.
- 1. Только CSS (не очень хорошо)
Я попытался использовать:before и:after с прозрачным фоном вместо этого изображения, но пока это не очень хорошо.
Вы можете убедиться здесь, у меня есть небольшая ошибка с правой частью тени
http://codepen.io/gfra/pen/KtoDB
Я все еще работаю над этим, но если у кого-то здесь есть время, вы можете помочь.
- 2 CSS и PNG изображения (выглядит хорошо)
Я знаю, что использование изображения - не самое эффективное решение, оно добавляет один http-запрос к загрузке страницы, но у меня есть CDN для доставки изображений, так что это не проблема производительности на моем веб-сайте.
Я нахожу результат далеко не идеальным, но довольно хорошим, если вы заботитесь о проблеме производительности. Я использовал этот метод, потому что у меня есть много длинных теней для добавления на мою страницу, и я не хочу, чтобы jquery слишком много работал при загрузке страницы.
Я все еще пытаюсь понять, как сделать его автоматически настраиваемым в соответствии с содержимым div / a. На данный момент есть несколько магических чисел, чтобы соответствовать требуемым размерам.
Если вы используете LESSCSS, этот миксин будет делать плоские длинные тени, используя миксин.
https://github.com/zensimilia/less-long-shadow
Я использую его на своем сайте, и он отлично работает
Я думаю, что альтернативный способ использовать длинную тень - создать прямоугольник с цветом (используйте палитру цветов для теней, Google). Затем выровняйте его по изображению. Это должно решить вашу проблему. увидеть это для алмаза
#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px;
}
#diamond:after {
content: '';
position: absolute;
left: -50px;
top: 50px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red;
}
Лучший способ - использовать jquery flat shadow.
https://github.com/peachananr/flat-shadow
использование
Чтобы использовать это на своем веб-сайте, просто включите последнюю библиотеку jQuery, найденную здесь, вместе с jquery.flatshadow.js в ваш документ, затем используйте разметку html и вызов функции следующим образом:
<div class="flat-icon"> FLAT </div>
<div class="flat-icon"> UI </div>
...
$(".flat-icon").flatshadow({
color: "#2ecc71", // Background color of elements inside. (Color will be random if left unassigned)
angle: "SE", // Shadows direction. Available options: N, NE, E, SE, S, SW, W and NW. (Angle will be random if left unassigned)
fade: true, // Gradient shadow effect
boxShadow: "#d7cfb9" // Color of the Container's shadow
});
Дальнейшая настройка
С jquery.flatshadow.js вы можете применять каждый отдельный элемент с разным эффектом, просто добавив цвет данных и угол данных к разметке следующим образом:
<div data-color="#2ecc71" data-angle="NE" class="flat-icon"> FLAT </div>
<div data-color="#1ABC9C" data-angle="NW" class="flat-icon"> UI </div>
и удалите глобальные параметры цвета и угла, как показано здесь:
$(".flat-icon").flatshadow({
fade: true,
boxShadow: "#d7cfb9"
});
Теперь каждый отдельный элемент будет иметь свой собственный эффект без необходимости многократного вызова функции.
Если вы посмотрите на свое кредитное изображение, оно будет много CSS: http://cssdeck.com/labs/google-fonts-css-longshade-icon
/* Google Font flat longshade Icon in pure css
Create with love by @LukyVj
Inspired by so much people an works over the internet.
*/
@import url(http://fonts.googleapis.com/css?family=Marck+Script);
body {
-webkit-font-smoothing: antialiased;
background: #333;
overflow: hidden;
}
.container {
width: 245px;
margin: 180px auto;
}
div.icon {
/*transform*/
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
float: left;
width: 245px;
height: 245px;
margin: 5px;
display: block;
background: rgb(150, 150, 150);
font-family: "Marck Script", sans-serif;
text-align:center;
font-size: 13em;
font-weight: 500;
line-height:.75;
border-radius:15px;
overflow:hidden;
}
div.icon:after {
top: 0px;
color: rgba(255, 255, 255, 0.9);
width: 100%;
height: 100%;
display: block;
overflow: hidden;
position: relative;
text-align: center;
padding-top: 54.05px;
box-sizing: border-box;
/*box-shadow*/
-webkit-box-shadow: 1px 1px 0px #000 ;
-moz-box-shadow:1px 1px 0px #000 ;
box-shadow:1px 1px 0px #000 ;
}
/*The shadow of the squares */
.icon:before {
content: '';
display: block;
float: left;
width: 136%;
height: 136%;
position: absolute;
margin: 29%;
/*transform*/
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
/*linear-gradient*/
background: -webkit-gradient(linear,60.06% 107.04%,39.94% -7.04%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,0)));
background: -webkit-linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
background: -moz-linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
background: -o-linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
background: linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
}
.gf:after {
-webkit-font-smoothing: antialiased;
content: "F";
background: #dd473d;
text-shadow: 1px 1px 0 rgba(0,0,0,.15),138px 138px 0px #a83027, 137px 137px 0px #a83027, 136px 136px 0px #a83027,135px 135px 0px #a83027, 134px 134px 0px #a83027, 133px 133px 0px #a83027,132px 132px 0px #a83027, 131px 131px 0px #a83027, 130px 130px 0px #a83027, 129px 129px 0px #a83027, 128px 127px 0px #a83027, 126px 126px 0px #a83027,125px 125px 0px #a83027, 124px 124px 0px #a83027, 123px 123px 0px #a83027,122px 122px 0px #a83027, 121px 121px 0px #a83027, 120px 120px 0px #a83027, 119px 118px 0px #a83027, 117px 116px 0px #a83027, 115px 114px 0px #a83027,113px 113px 0px #a83027, 112px 112px 0px #a83027, 111px 111px 0px #a83027, 110px 110px 0px #a83027, 109px 109px 0px #a83027, 108px 108px 0px #a83027, 107px 107px 0px #a83027, 106px 106px 0px #a83027, 105px 105px 0px #a83027, 104px 104px 0px #a83027, 103px 103px 0px #a83027, 102px 102px 0px #a83027, 101px 101px 0px #a83027, 100px 100px 0px #a83027, 99px 99px 0px #a83027, 98px 98px 0px #a83027, 97px 97px 0px #a83027, 96px 96px 0px #a83027, 95px 95px 0px #a83027, 94px 94px 0px #a83027, 93px 93px 0px #a83027, 92px 92px 0px #a83027, 91px 91px 0px #a83027, 90px 90px 0px #a83027, 80px 80px 0px #a83027, 79px 79px 0px #a83027, 78px 78px 0px #a83027, 77px 77px 0px #a83027, 76px 76px 0px #a83027, 75px 75px 0px #a83027, 74px 74px 0px #a83027, 73px 73px 0px #a83027, 72px 72px 0px #a83027, 71px 71px 0px #a83027, 70px 70px 0px #a83027, 69px 69px 0px #a83027, 68px 68px 0px #a83027, 67px 67px 0px #a83027, 66px 66px 0px #a83027, 65px 65px 0px #a83027,64px 64px 0px #a83027, 63px 63px 0px #a83027, 62px 62px 0px #a83027, 61px 61px 0px #a83027, 60px 60px 0px #a83027, 59px 59px 0px #a83027, 58px 58px 0px #a83027, 57px 57px 0px #a83027, 56px 56px 0px #a83027, 55px 55px 0px #a83027, 54px 54px 0px #a83027, 53px 53px 0px #a83027, 52px 52px 0px #a83027, 51px 51px 0px #a83027, 50px 50px 0px #a83027, 49px 49px 0px #a83027, 48px 48px 0px #a83027, 47px 47px 0px #a83027, 46px 46px 0px #a83027, 45px 45px 0px #a83027, 44px 44px 0px #a83027, 43px 43px 0px #a83027, 42px 42px 0px #a83027, 41px 41px 0px #a83027, 40px 40px 0px #a83027, 39px 39px 0px #a83027, 38px 38px 0px #a83027, 37px 37px 0px #a83027, 36px 36px 0px #a83027, 35px 35px 0px #a83027, 34px 34px 0px #a83027, 33px 33px 0px #a83027,32px 32px 0px #a83027, 31px 31px 0px #a83027, 30px 30px 0px #a83027, 29px 29px 0px #a83027, 28px 28px 0px #a83027, 27px 27px 0px #a83027, 26px 26px 0px #a83027, 25px 25px 0px #a83027, 24px 24px 0px #a83027, 23px 23px 0px #a83027, 22px 22px 0px #a83027, 21px 21px 0px #a83027, 20px 20px 0px #a83027, 19px 19px 0px #a83027, 18px 18px 0px #a83027, 17px 17px 0px #a83027, 16px 16px 0px #a83027, 15px 15px 0px #a83027, 14px 14px 0px #a83027, 13px 13px 0px #a83027, 12px 12px 0px #a83027, 11px 11px 0px #a83027, 10px 10px 0px #a83027, 9px 9px 0px #a83027, 8px 8px 0px #a83027, 7px 7px 0px #a83027, 6px 6px 0px #a83027, 5px 5px 0px #a83027, 4px 4px 0px #a83027, 3px 3px 0px #a83027, 2px 2px 0px #a83027, 1px 1px 0px #a83027, 15px 1px 0px #a83027,16px 2px 0px #a83027,17px 3px 0px #a83027,18px 4px 0px #a83027,19px 5px 0px #a83027,20px 6px 0px #a83027,21px 7px 0px #a83027,22px 8px 0px #a83027,
23px 9px 0px #a83027,
24px 10px 0px #a83027,
25px 11px 0px #a83027,
26px 12px 0px #a83027,
27px 13px 0px #a83027,
28px 14px 0px #a83027,
29px 15px 0px #a83027,
30px 16px 0px #a83027 ,
31px 17px 0px #a83027,
32px 18px 0px #a83027,
33px 19px 0px #a83027,
34px 20px 0px #a83027,
35px 21px 0px #a83027,
36px 22px 0px #a83027,
37px 23px 0px #a83027,
38px 24px 0px #a83027,
39px 25px 0px #a83027,
40px 26px 0px #a83027,
41px 27px 0px #a83027,
42px 28px 0px #a83027,
43px 29px 0px #a83027,
44px 30px 0px #a83027,
45px 31px 0px #a83027,
46px 32px 0px #a83027;
}
Старая ветка, но все еще привлекающая внимание тем, что она занимает первое место в индексе по запросу «как сделать длинную тень в css».
Мой обходной путь с двумя строками кода для элемента long-shadow с более современным CSS (clip path), чтобы избежать беспорядка из 50+ строк, который я использовал здесь, я обнаружил, что это замедляет работу моего браузера.
Вы можете пропорционально настроить размеры тени/элемента, и это все равно должно сработать, но для квадратного элемента div размером 300 пикселей и с использованием тени блока размером 31 пиксель:
-webkit-box-shadow: 31px 31px 0px 31px rgb(38,64,100);
box-shadow: 31px 31px 0px 31px rgb(38,64,100);
-webkit-clip-path: polygon(300px 0, 331px 31px, 331px 331px, 31px 331px, 0 300px, 0 0);
clip-path: polygon(300px 0, 331px 31px, 331px 331px, 31px 331px, 0 300px, 0 0);
Мой рабочий пример здесь
Хороший генератор пути отсечения (имея в виду, что вам нужно сделать элемент меньше, чем 6-точечный путь отсечения, поскольку тень блока не учитывается в размерах элемента)