Я пытаюсь реализовать проект, который требует полосатой теневой коробки (см. Рисунок ниже). Очевидно, box-shadow не поддерживает это, поэтому мне интересно, есть ли у кого-нибудь предложения по другому способу этого.
Я не вижу никакого способа сделать это точно так же, как это было разработано (хотя я могу придумать несколько компромиссов, которые сделают это проще), но я хотел дважды проверить, прежде чем я попрошу провести редизайн.
Изменение: Вот код с тем, что у меня есть до сих пор: http://codepen.io/anon/pen/rCkto
Если у кого-то есть идеи по улучшению этого, я по-прежнему открыт для предложений по улучшению или даже для совершенно разных способов сделать это.
Вот что я в итоге сделал: http://codepen.io/anon/pen/rCkto
В принципе, у меня есть заголовок страницы и обертка для заголовка страницы, каждая из которых имеет: после псевдоэлемента, который сдвинут вниз. Псевдоэлементы: после псевдоэлементов имеют черепичное фоновое изображение для полос и вставную белую коробочную тень для приближения к затуханию по краям.
Это не идеально - кажется, некоторые незначительные артефакты, связанные с граничным радиусом элемента title, например, но он гибкий, чистый CSS, и он не требует никакой посторонней, не смысловой разметки.
Я сделал пример.
Это можно сделать только с помощью CSS (3), но использование изображений (изображений) может быть лучше и проще. Пример, хотя все еще нуждается в небольшом редактировании, например, непрозрачность/градиент, тени и т.д., Но там есть пример, который можно сделать без использования изображений.
HTML:
<div class="textBlock">
<h1>News & Events</h1>
</div>
<div class="whiteBox"></div>
<div class="angled-135 stripes"></div>
CSS:
.textBlock {
position: absolute;
background-color: #FFFFFF;
width: 308px;
margin-left: -30px;
padding-left: 54px;
border-radius: 46px;
margin-top: -31px;
height: 86px;
padding-top: 46px;
}
.whiteBox {
position: absolute;
width: 247px;
height: 53px;
margin-left: 332px;
background-color: #FFF;
}
.stripes {
height: 128px;
width: 552px;
float: left;
margin: 10px;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px; /* Controls the size of the stripes */
}
.angled-135 {
background-color: #E1E6EC;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
}
Я пытался воспроизвести его без изображений и реагировать. Кроме того, без добавления дополнительных элементов в HTML.
Для этого HTML
<h1>small</h1>
<br>
<h1>medium text</h1>
<br>
<h1>really the longest text</h1>
<br>
<h1 style="font-size: 60px">and bigger font</h1>
Я установил этот стиль
h1 {
display: inline-block;
position: relative;
background-color: white;
border-radius: 0px 0.5em 0.5em 0px;
padding-right: 1em;
}
h1:before {
content: '';
position: absolute;
top: 50%;
right: -1500px;
bottom: -50%;
left: calc(100% - 0.5em);
background-image: radial-gradient(1em 1em ellipse
at 100% 100%, white 0em, transparent 0.7em),
linear-gradient(0deg, white, transparent 0.7em),
linear-gradient(-188deg, black, transparent 0.7em);
background-size: 0.5em 0.7em,100% 0.7em, 4em 1em;
background-position: 2em bottom, 2.5em bottom, 0em 0em;
background-repeat: no-repeat;
z-index: -1;
}
h1:after {
content: '';
position: absolute;
top: 50%;
right: -1500px;
bottom: -50%;
left: 0%;
background-image: repeating-linear-gradient(-45deg,white 0px, gray 20px, white 40px);
z-index: -2;
}
Базовый элемент имеет радиус границы, установленный вправо.
Существует псевдоэлемент, который отображает разделенный шаблон.
И есть еще один элемент pseduo, который отображает белое обрезание (мне нужно было создать 2 фонов, 1 для кривых слева, другое для прямой) и еще один фон для тени.
У меня есть ответ, используя изображения здесь:
Вы можете поиграть с текстом, и дизайн будет настраиваться. Изображения также выровнены. Конечно, вам все равно нужно применить стили к названию.
HTML:
<div id="containerTitle">
<div id="mainTitle">
Main Title here
</div>
<div id="curveTitle">
<img src="http://i42.tinypic.com/dzvxfm.png" border="0" />
</div>
</div>
CSS:
#mainTitle {
background: url('http://i43.tinypic.com/1z15u7r.png') repeat-x; height:101px;
float:left;
}
#curveTitle {
float:left;
height:101px;
width:60px;
}
#containerTitle {
height:101px;
background: url('http://i41.tinypic.com/dc5z6v.png') repeat-x;
}
Изображения были бы вашим лучшим вариантом, как сказал penweb, но я старался изо всех сил в то время, когда мне приходилось это делать.
Не совсем то, что вы хотели, но это было весело, как минимум.
<div class="shadowMain">
<header>
<div class="shadowTitle">
<div class="rounded">
<span>News & Events</span>
</div>
</div>
</header>
CSS немного для публикации, но он в скрипке.
Если вы потратите время на настройку этого примера, вы можете получить качество этого изображения, но я не уверен, будет ли это затрачено на это.
Удачи!
Использование изображения, вероятно, будет вашим лучшим вариантом, а не css..
mask-image: linear-gradient();
Похоже, это может быть многообещающим, так что я посмотрю, куда это меня приведет.