CSS полосатая тень

0

Я пытаюсь реализовать проект, который требует полосатой теневой коробки (см. Рисунок ниже). Очевидно, box-shadow не поддерживает это, поэтому мне интересно, есть ли у кого-нибудь предложения по другому способу этого.

Я не вижу никакого способа сделать это точно так же, как это было разработано (хотя я могу придумать несколько компромиссов, которые сделают это проще), но я хотел дважды проверить, прежде чем я попрошу провести редизайн.

Изображение 174551

Изменение: Вот код с тем, что у меня есть до сих пор: http://codepen.io/anon/pen/rCkto
Если у кого-то есть идеи по улучшению этого, я по-прежнему открыт для предложений по улучшению или даже для совершенно разных способов сделать это.

  • 0
    Похоже, что это было бы хорошим вариантом использования изображения в сочетании с маской CSS ( thenittygritty.co/css-masking )
  • 0
    Я, наверное, должен был упомянуть, что это заголовок страницы, поэтому текст не имеет фиксированной длины. Так что я не вижу, как будет работать маска. Что-то вроде mask-image: linear-gradient(); Похоже, это может быть многообещающим, так что я посмотрю, куда это меня приведет.
Показать ещё 3 комментария
Теги:

6 ответов

1
Лучший ответ

Вот что я в итоге сделал: http://codepen.io/anon/pen/rCkto

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

Это не идеально - кажется, некоторые незначительные артефакты, связанные с граничным радиусом элемента title, например, но он гибкий, чистый CSS, и он не требует никакой посторонней, не смысловой разметки.

1

Я сделал пример.

ПРИМЕР

Это можно сделать только с помощью 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);
}
  • 1
    Благодарю. Я, конечно, не против использования фоновых изображений, я не хотел создавать такое впечатление, но я действительно хотел избежать добавления ненужных изображений в мою разметку. Также было несколько потенциальных проблем, которые я видел с фоновыми изображениями, а именно вопрос выравнивания полос и выцветания краев (особенно вокруг радиуса границы).
0

Я пытался воспроизвести его без изображений и реагировать. Кроме того, без добавления дополнительных элементов в 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 для кривых слева, другое для прямой) и еще один фон для тени.

демонстрация

0

У меня есть ответ, используя изображения здесь:

http://jsfiddle.net/QCFpz/

Вы можете поиграть с текстом, и дизайн будет настраиваться. Изображения также выровнены. Конечно, вам все равно нужно применить стили к названию.

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;
}
0

Изображения были бы вашим лучшим вариантом, как сказал penweb, но я старался изо всех сил в то время, когда мне приходилось это делать.

Не совсем то, что вы хотели, но это было весело, как минимум.

<div class="shadowMain">
<header>
    <div class="shadowTitle">
        <div class="rounded">
            <span>News & Events</span>
        </div>
    </div>
</header>

CSS немного для публикации, но он в скрипке.

Если вы потратите время на настройку этого примера, вы можете получить качество этого изображения, но я не уверен, будет ли это затрачено на это.

Удачи!

JSFIDDLE

ЛУЧШИЙ FIDDLE

Градиенты CSS3

0

Использование изображения, вероятно, будет вашим лучшим вариантом, а не css..

  • 0
    Я упомянул в комментарии выше, что это заголовок страницы, и он повторяется на любом количестве страниц с заголовками различной длины. Я не понимаю, как будет работать изображение, но я открыт для предложений.
  • 0
    это возможно с изображением и без него, если вы хотите, чтобы оно выглядело так же хорошо, как это изображение, вам понадобится изображение. Вы можете сделать это с помощью CSS3 , но она не будет поддерживать прежний кашель IE кашля и будет иметь более плоский вид.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню