Box shadow с одной стороны: Box-Shadow только с одной стороны

Leave a Comment / Разное / By /

Хитрая тень: olmokhov — LiveJournal

?
Category:
  • IT
  • Cancel
Давно мучаюсь задачкой реализации хитрой тени. Дизайнеры научились рисовать очень красивые макеты с тенюшками, но проблема того, что тень в таких макетах может идти довольно непредсказумым образом, например вот так:

Отбрасывая реализацию в умирающих и в принципе тормозных браузерах типа IE сосредоточимся на реализации в нормальных браузерах. Кому хочется, есть статья как сделать тень кроссбраузерной.

Итак, у нас есть замечательное CSS-свойство box-shadow, но с ним существует как минимум две проблемы: во-первых тень нельзя задать с одной стороны, во-вторых два блока, имеющие тень и находящиеся рядом неизменно будут одной из теней наползать друг на друга, что хорошо видно в примере.

Сначала я думал что как-то можно заюзать clip и :after, потом казалось что вообще не существует никакого варианта сказать блоку, чтобы тень у него была с одной стороны, т.к для :after нужно было сказать height: 100%, к примеру, а сказать на 2 пикселя меньше сверху и снизу тут никак. И внезапно я вспомнил одну особенность блоков, которой мы не часто пользуемся из-за отсутствия ее реализации в ИЕ: если указать блоку одновременно top и bottom, то он растянется до нужных размеров.

Сказано, сделано:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
    <title>Тень с выбранных сторон</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

    <style type=»text/css»>

        .box
        {
            position: relative;
           
            width: 100px;
            height: 100px;
            margin-right: 10px;

            float: left;

            background: yellow;
        }

        . box:before
        {
            content: «»;

            position: absolute;
            z-index: -1;

            box-shadow: 0 0 4px #999;
            -webkit-box-shadow: 0 0 4px #999; /* Safari (не понимает spread-radius — 4я цифра), Chrome */
            -moz-box-shadow: 0 0 4px #999; /* Firefox */
        }
       
        .one-side:before
        {
            top: 2px;
            bottom: 2px;

            width: 3px;
        }

        .two-side:before
        {
            top: 0;
            bottom: 2px;
            right: 2px;

            left: 0;
        }

        .three-side:before
        {
            top: 0;
            bottom: 2px;
            right: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>   
Пример. Кажется, что реализация тени с двух сторон избыточна т.к всегда есть возможность сдвигать тень, но это не так, если нужно иметь тень с точно заданными характеристиками, и не хочется мучаться с подбором значений. Применимость такой тени понятна, например реализация таких вещей.

Вернемся к примеру выше и подумаем над ним? Кажется что реализация тени вверху такая: тень с трех сторон у первого блока, и с четырех у второго. Но тогда тень от второго налезет на первый! Ещё немного подумав я написал очень просто:


.four-side:before
{
    width: 100%;
    height: 100%;
}

Имея для блока с :before z-index: -1 мы гарантируем что любой блок накроет его сверху и не нужно будет играться с z-index’ами рядом идущих блоков или создавать всякого рода перекрывашки эти теней. А самое главное и для блока сверху можно также сказать что тень у него с четырех сторон. Теперь мы можем делать гораздо более сложную тень, чем нам позволяет спецификация. Например

Subscribe

  • 34-й трамвай

    Любое движение надо начинать с малого. Нельзя пару раз сходить в спортзал, потренироваться на убой и получить рельеф и бицепсы. Нужно планомерно…

  • Про платные парковки-2

    Удивительное рядом! Совсем недавно я описал в посте о платных парковках в Екатеринбурге свои изыскания на их счёт. Не особо рассчитывал на обратную…

  • Про воду из-под крана

    Когда мы только-только купили квартиру (а я писал об этом), то у нас была проблема с горячей водой. (Далее я пишу ту версию, которую мне озвучивали…

Photo

Hint http://pics.livejournal.com/igrick/pic/000r1edq

Двойная рамка с использованием CSS

Одним из занятных приложений свойства CSS3 box-shadow является создание двойной рамки вокруг элемента. Очень интересный эффект для оформления страниц, Но работать он будет только в новых версиях браузеров, которые поддерживают box-shadow.

Однако существует еще несколько методов для создания такого эффекта. Причем очевидное использование фонового изображения является весьма далеким от идеала.

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

Метод 1:

border и outline

Данный метод работает только в тех браузерах, которые поддерживают свойство outline (все, кроме IE6/7). Вы добавляете элементу  оба свойства  border и outline.

.one {
	border: solid 6px #fff;
	outline: solid 6px #888;
}

Причина по которой данный метод работает заключается в том, что рамка outline всегда выводится с внешней стороны прямоугольника. Проблема свойства 

outline проявляется при использовании плавающих элементов, так как рамка перекрывается с соседними элементами.

 

Метод 2: псевдо элемент

Данный метод требует абсолютного позиционирования рамки:

.two {
	border: solid 6px #fff;
	position: relative;
	z-index: 1;
}

.two:before {
	content: "";
	display: block;
	position: absolute;
	top: -12px;
	left: -12px;
	border: solid 6px #888;
	width: 312px;
	padding-bottom: 12px;
	min-height: 100%;
	z-index: 10;
}

Ключевыми моментами являются установка свойства z-index (чтобы псевдо элемент  перекрывал содержание), позиционирование и значение min-height. Последнее свойство сохраняет эластичность рамки.

 

Метод 3: тень

Самый лучший метод, так как требуется только одна строчка кода с установками свойства box-shadow.

.three {
	box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;
}

 

Для появления двойной рамки используются две тени. Они определяются через запятую. Размытие устанавливается в 0. Так как вторая тень перекрывается первой, то она имеет вдвое большую ширину. Ключевой момент — использование непрозрачных цветов, что создает четкую границу между рамками.

Как и свойство outline, box-shadow не влияет на соседние элементы и может перекрывать их. Поэтому надо установить поле для формирования внешнего вида композиции.

Естественно, поддержка свойства box-shadow ограничена новыми браузерами.

 

Метод 4: Дополнительный элемент div

В данном методе используется внешний элемент <div> для вывода двойной рамки. Единственный метод, который работает везде:

.four {
	border: solid 6px #888;
	background: #fff;
	width: 312px;
	min-height: 312px;
}

.four div {
	width: 300px;
	min-height: 300px;
	background: #222;
	margin: 6px auto;
	overflow: hidden;
}

Внешний элемент имеет немного больший размер, что создает иллюзию двойной рамки.

 

Метод 5: свойство

border-image

Еще одним новым методом является часто забываемое свойство CSS3 border-image:

.five {
	border-width: 12px;
	-webkit-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;
	-moz-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;
	border-image: url(multiple-borders) 12 12 12 12 repeat; /* for Opera */
}

 

Знаете другой метод?

Конечно, здесь собраны давно известные и широко используемые методы. Но может быть вам известен какой-нибудь трюк. Поделитесь с читателями в комментариях.

Как добавить тень на одну сторону элемента с помощью CSS?

Улучшить статью

Сохранить статью

  • Последнее обновление: 19 фев, 2019

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Свойство box-shadow используется для установки тени блока на одной стороне элемента.

    Синтаксис: 

     box-shadow: h-смещение v-смещение цвет размытия;

    значения box-shadow:

    • h-offset: Требуется и используется для установки положения тени по горизонтали. Положительное значение используется для установки тени на правой стороне поля, а отрицательное значение используется для установки тени на левой стороне поля.
    • v-offset: Требуется и используется для установки положения тени по вертикали. Положительное значение используется для установки тени ниже поля, а отрицательное значение используется для установки тени над полем.
    • размытие: Это необязательный атрибут, работа этого атрибута заключается в размытии тени коробки.
    • разворот: Используется для установки размера тени. Размер спреда зависит от величины спреда.
    • цвет: Это необязательный атрибут, используемый для установки цвета тени.

    Пример 1: В этом примере устанавливается тень блока в нижней части блока.

     

    < html > 

       

    < head > 

         < title > 

             Box-shadow Property

    Название >

    < стиль >

             h2 {

                 center: align: center: text-900;

                 фон: зеленый;

                 padding-top: 60px;

                 цвет: белый;

                 ширина: 500 пикселей;

                 высота: 130 пикселей;

                 box-shadow: 0 10px 10px синий;

             }

         style >

    head >

       

    < body > 

         < h2 >GeeksForGeeks h2 > 

    body > 

       

    html >                    

    Output:

    Example 2: В этом примере тень блока устанавливается в левой части блока.

     

    < html > 

       

    < head > 

         < title > 

             Box-shadow Property

         название > 

           

        

         < 90 стиль0063 >

             h2 {

                 text-align: center;

                 фон: зеленый;

                 padding-top: 60px;

                 цвет: белый;

                 ширина: 500 пикселей;

                 высота: 130 пикселей;

                 box-shadow: -10px 0px 10px синий;

             }

         style >

    head >

       

    < body > 

         < h2 >GeeksForGeeks h2 > 

    body > 

       

    html >                    

    Output:

    inset: By default the shadow генерируется за пределами поля, но значение вставки можно использовать для создания тени внутри поля.

    Пример 3: В этом примере создается тень внутри коробки.

     

    < html > 

       

    < head > 

         < title > 

             Box-shadow Property

         title >  9 0  63 9 0 0 23 9 0 0003

    < Стиль >

    H2 {

    ;

                 фон: зеленый;

                 padding-top: 60px;

                 цвет: белый;

                 ширина: 500 пикселей;

                 высота: 130 пикселей;

                 box-shadow: 0px 10px 20px синяя вставка;

             }

         style >

    head >

       

    < body > 

         < h2 >GeeksForGeeks h2 > 

    body > 

       

    html >                    

    Вывод:


    Односторонняя или двусторонняя тень блока в CSS

    Категории HTML - CSS

    Автор Амит Сонхия Обновлено: Комментарии LinkBe first to comment

    РАСКРЫТИЕ : Эта статья может содержать партнерские ссылки, и любые продажи, совершенные по таким ссылкам, принесут нам небольшую комиссию. без дополнительных затрат для вас. Узнайте больше о раскрытии партнерской информации здесь.

    Сегодня мы узнаем, как применять тени только к блоку или к одному или двум краям. Прежде всего, мы узнаем, что такое тень блока, а затем рассмотрим различные примеры, чтобы применить их к блоку с одной или двух сторон. Также помните, что в IE8 и предыдущей версии нет поддержки.

    Понимание box shadow

    CSS Box Shadow Syntex

    box-shadow: цвет распространения размытия по горизонтали и вертикали;

     

    box-shadow: цвет распространения размытия со смещением по горизонтали и вертикали;

     

    1. Горизонтальное смещение тени. Положительное значение означает, что тень будет отрисована справа от поля, отрицательное смещение поместит тень слева от поля.
    2. Вертикальное смещение тени по вертикали , положительное значение означает, что тень будет ниже блока, отрицательное значение означает, что тень блока будет выше блока.
    3. Радиус размытия является необязательным и определяет, насколько велика и насколько размыта тень. Если установлено значение 0, тень будет резкой, чем выше число, тем более размытой она будет. Это не может быть отрицательным.
    4. Радиус распространения также является необязательным, положительные значения увеличивают размер тени, отрицательные значения уменьшают размер. По умолчанию 0 (тень имеет тот же размер, что и размытие).
    5. Цвет тени, может быть определен как значения цвета rgba или hsla.

    Пример:

    Пример тени

    .коробка { ширина: 150 пикселей; высота: 150 пикселей; цвет фона: #eee; поле: 50 пикселей; плыть налево; } . box h5 { высота: 150 пикселей; маржа: 0; заполнение: 0; высота строки: 150 пикселей; выравнивание текста: по центру; } .тень { -webkit-box-shadow: 0 0 10px 0 #000000; -moz-box-shadow: 0 0 10px 0 #000000; box-shadow: 0 0 10px 0 #000000; } //html

    Тень

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    .box {

    Width: 150px;

    высота: 150 пикселей;

    цвет фона: #eee;

    поля: 50px;

    поплавок: левый;

    }

     

    .box h5 {

    высота: 150 пикселей;

    поля: 0;

    заполнение: 0;

    высота строки: 150 пикселей;

    выравнивание текста: по центру;

    }

     

    .shadow {

    -webkit-box-shadow: 0 0 10px 0 #000000;

    -moz-box-shadow: 0 0 10px 0 #000000;

    box-shadow: 0 0 10px 0 #000000;

    }

     

    //html

    Тень

    При создании элемента с нулевым смещением ко всем краям контейнера применяется тень блока.

    Попробуйте сами

     

    Тень коробки с одной стороны

    Односторонняя тень коробки

    .shadow-верх { -webkit-box-shadow: 0 -8px 10px -6px #000000; -moz-box-shadow: 0 -8px 10px -6px #000000; box-shadow: 0-8px 10px-6px #000000; } .shadow-дно { -webkit-box-shadow: 0 8px 10px -6px #000000; -moz-box-shadow: 0 8px 10px -6px #000000; box-shadow: 0 8px 10px -6px #000000; } .shadow-левый { -webkit-box-shadow: -8px 0 10px -6px #000000; -moz-box-shadow: -8px 0 10px -6px #000000; box-shadow: -8px 0 10px -6px #000000; } .shadow-право { -webkit-box-shadow: 8px 0 10px -6px #000000; -moz-box-shadow: 8px 0 10px -6px #000000; box-shadow: 8px 0 10px -6px #000000; } //html

    Тень сверху
    Тень внизу
    Тень слева
    Тень справа

    28

    29

    9001

    29

    28

    29

    28

    29

    9008

    27

    29

    9000

    27

    29

    9000

    27

    0003

    . shadow-top {

    -webkit-box-shadow: 0 -8px 10px -6px #000000;

    -moz-box-shadow: 0 -8px 10px -6px #000000;

    box-shadow: 0-8px 10px-6px #000000;

    }

     

    .shadow-bottom {

    -webkit-box-shadow: 0 8px 10px -6px #000000;

    -moz-box-shadow: 0 8px 10px -6px #000000;

    box-shadow: 0 8px 10px -6px #000000;

    }

     

    .shadow-left {

    -webkit-box-shadow: -8px 0 10px -6px #000000;

    -moz-box-shadow: -8px 0 10px -6px #000000;

    box-shadow: -8px 0 10px -6px #000000;

    }

     

    .shadow-right {

    -webkit-box-shadow: 8px 0 10px -6px #000000;

    -moz-box-shadow: 8px 0 10px -6px #000000;

    box-shadow: 8px 0 10px -6px #000000;

    }

     

    //html

    Тень сверху

    Тень снизу

    Тень слева

    Тень справа

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    Как и в классах выше, мы имеем определил радиус размытия до 10 пикселей и значение распространения до отрицательного значения 6 пикселей, чтобы скрыть эффект размытия на других краях контейнеров.

    Для достижения эффекта мы установили горизонтальное и вертикальное смещения, как показано ниже.

    1. Top Shadow — нулевое смещение по горизонтали, т.к. нам не нужны левая и правая тени блока. Отрицательное смещение по вертикали в 8 пикселей, чтобы над полем была тень.
    2. Нижняя тень — Просто удалите знак минус перед вертикальным смещением в верхней тени, чтобы сместить тень вниз.
    3. Левая тень  – поскольку отрицательное смещение по горизонтали помещает тень влево, мы определили CSS таким образом вместе с нулевым смещением по вертикали.
    4. Правая тень — Удаление знака (-) из левой тени CSS сдвинет тень вправо.

     Тень с двух сторон

    Установка смещения как по горизонтали, так и по вертикали создаст тень коробки с двух сторон.

    Двусторонняя тень

    .shadow-левый-верх { -webkit-box-shadow: -8px -8px 10px -6px #000000; -moz-box-shadow: -8px -8px 10px -6px #000000; box-shadow: -8px -8px 10px -6px #000000; } . shadow-вверху справа { -webkit-box-shadow: 8px -8px 10px -6px #000000; -moz-box-shadow: 8px -8px 10px -6px #000000; box-shadow: 8px -8px 10px -6px #000000; } .shadow-справа-снизу { -webkit-box-shadow: 8px 8px 10px -6px #000000; -moz-box-shadow: 8px 8px 10px -6px #000000; box-shadow: 8px 8px 10px -6px #000000; } .shadow-нижний-левый { -webkit-box-shadow: -8px 8px 10px -6px #000000; -moz-box-shadow: -8px 8px 10px -6px #000000; box-shadow: -8px 8px 10px -6px #000000; } //html

    Тень слева вверху
    Тень вверху справа
    Тень справа внизу
    Тень внизу слева

    28

    29

    9001

    29

    28

    29

    28

    29

    9008

    27

    29

    9000

    27

    29

    9000

    27

    0003

    . shadow-left-top {

    -webkit-box-shadow: -8px -8px 10px -6px #000000;

    -moz-box-shadow: -8px -8px 10px -6px #000000;

    box-shadow: -8px -8px 10px -6px #000000;

    }

     

    .shadow-top-right {

    -webkit-box-shadow: 8px -8px 10px -6px #000000;

    -moz-box-shadow: 8px -8px 10px -6px #000000;

    box-shadow: 8px -8px 10px -6px #000000;

    }

     

    .shadow-right-bottom {

    -webkit-box-shadow: 8px 8px 10px -6px #000000;

    -moz-box-shadow: 8px 8px 10px -6px #000000;

    box-shadow: 8px 8px 10px -6px #000000;

    }

     

    .shadow-bottom-left {

    -webkit-box-shadow: -8px 8px 10px -6px #000000;

    -moz-box-shadow: -8px 8px 10px -6px #000000;

    box-shadow: -8px 8px 10px -6px #000000;

    }

     

    //html

    Тень слева вверху

    Тень вверху справа

    Тень справа внизу

    Тень внизу слева
    < /h5>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

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

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *