Тень снизу css: css — Как сделать тень только с одной стороны?

CSS3 Меню. CSS3 Тень

Тень CSS3

Свойство CSS3 box-shadow — это новый способ добавления эффекта тени путем редактирования стилей. Нет необходимости использовать Photoshop!
Свойство box-shadow имеет несколько атрибутов/значений, как и любое другое свойство CSS, и они расположены в следующем порядке: box-shadow: Apx Bpx Cpx #XXX:
      * Apx — смещение тени по горизонтали: используйте положительное значение, чтобы получить тень справа; и отрицательное значение, чтобы получить тень слева;
      * Bpx — смещение по вертикали: используйте положительное значение, чтобы получить тень снизу; и отрицательное значение, чтобы получить тень сверху;
      * Cpx — радиус размытия: значение 0 делает тень резкой, большее значение — более размытой;
      * #XXX — цвет.

CSS3Menu генерирует следующий код для box-shadow:
-moz-box-shadow:0.

7px 1px 1px #777777;
-webkit-box-shadow:0.7px 1px 1px #777777;
box-shadow:0.7px 1px 1px #777777;

Ниже скриншот из Firefox, демонстрирующий эффект box-shadow:

Свойство box-shadow поддерживается следующими браузерами: Webkit (в Safari 3+, Chrome), Opera 10.5, Firefox 3.5.

Свойство text-shadow записывается следующим образом:
text-shadow:2px 2px 2px #000;

Тени CSS имеют три значения для размера и цвет. Значения для размера — это смещение по горизонтали, смещение по вертикали и радиус размытия. Смещения могут иметь положительное и отрицательное значения.

Свойство text-shadow поддерживается следующими браузерами: Webkit (с Safari 3+, Chrome), Opera 9.5, Firefox 3.1 (pre-Alpha), Konqueror.

Смотри также:
CSS3 закругленные углы
CSS3 градиент

Скачать

Помощь

Как создать стильное анимированное CSS3 меню без JavaScript

1) Откройте приложение CSS3 Menu, нажмите кнопки «Добавить элемент» и «Добавить подменю» , расположенные на панели инструментов CSS3 Menu, чтобы создать меню. Также Вы можете использовать кнопку «Удалить элемент» , чтобы удалить некоторые кнопки.

2) Используйте готовые шаблоны. Чтобы это сделать, выберите понравившуюся тему в списке «Шаблоны». Дважды щелкните по теме чтобы применить ее.

3) Настройка внешнего вида меню.
 3.1. Кликом выберите элемент и измените настройки внешнего вида кнопки для нормального и наведенного состояний, установите ссылку и значение атрибута Target на вкладке «Главное меню».
 3.2. Кликом выберите элемент и измените внешний вид подменю для нормального и наведенного состояний, установите ссылку и значение атрибута Target на вкладке «Подменю».

4) Сохранение меню.
 4.1. Сохранение файла проекта. Чтобы сохранить проект, просто нажмите кнопку «Сохранить» , расположенную на панели инструментов или выберите пункты «Сохранить» или «Сохранить…» в главном меню.

 4.2. Публикация меню в формате HTML. Чтобы сделать это, нажмите кнопку «Опубликовать» на панели инструментов.

Связаться с нами

CSS3 Menu
При обнаружении ошибок в работе программы, возникновении вопросов и пожеланий свяжитесь с технической поддержкой . Убедитесь, что в письмо включена информация о браузере, ОС, версии CSS3Menu, а также ссылка на вашу страницу. В большинстве случаев Вы получите ответ в течение одного рабочего дня. Пожалуйста, сначала ознакомьтесь с FAQ. Возможно, на ваш вопрос уже ответили.

E-mail:

Последние демо

Связаться с нами

CSS3 Menu
При обнаружении ошибок в работе программы, возникновении вопросов и пожеланий свяжитесь с технической поддержкой . Убедитесь, что в письмо включена информация о браузере, ОС, версии CSS3Menu, а также ссылка на вашу страницу. В большинстве случаев Вы получите ответ в течение одного рабочего дня. Пожалуйста, сначала ознакомьтесь с FAQ. Возможно, на ваш вопрос уже ответили.

E-mail:

Хитрая тень: 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?

html

5 месяцев назад

от Anees Asghar

Для придания стиля и оформления тексту и элементам используется эффект тени. Его можно добавить к элементу с помощью CSS-свойства « box-shadow ». С помощью запятых можно задать сразу несколько эффектов, т. е. горизонтальную тень, вертикальную тень, радиус размытия и т. д. Это свойство обеспечивает различные характеристики изображения с использованием цветовых компонентов.

В данном руководстве описан метод настройки « box-shadow ”только внизу элемента.

box-shadow Свойство CSS

CSS предлагает свойство с именем « box-shadow », которое позволяет нам установить тень для любого элемента или изображения. Это свойство имеет следующие аспекты:

• • offset-x: Используется для добавления горизонтальной тени.
  • offset-y: Используется для добавления вертикальной тени.
  • color: Используется для установки цвета тени.

Синтаксис

Чтобы прояснить эти моменты, давайте перейдем к синтаксису drop-shadow:

box-shadow: смещение-x смещение-y цвет-радиуса размытия;

 

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

Для лучшего понимания давайте реализуем практический пример свойства « box-shadow ».

Пример: Как установить тень блока только внизу в CSS?

Мы применим эффект тени к изображению. Для этого сначала мы добавим изображение в HTML, а затем применим свойство CSS «9».0007 box-shadow ” к нему:

 

 
Это даст следующий вывод:

Давайте двигаться чтобы добавить эффект тени внизу изображения:

img {
    box-shadow: 0px 15px 5px  оранжевый;
  }

 
Приведенные выше значения представляют следующие точки:

• • offset-x равно « 0px », потому что мы не хотим отображать тень по горизонтали.
  • offset-y — это « 15px », чтобы установить ширину тени. Оно должно быть положительным, потому что оно отображает тень в нижней части изображения.
  • радиус размытия равен « 5px ». Делает тень светлее.
  • Цвет тени « оранжевый ».

На этом изображении мы видим тень внизу.

Заключение

Чтобы отобразить тень в нижней части изображения, « box-shadow ”используется свойство. Для этого смещение-x устанавливается как « 0 », смещение-y — любое положительное значение, а также устанавливается цвет, который вы хотите отобразить. С помощью примера в этой статье объясняется, как отображать тени только в нижней части изображения.

Об авторе

Anees Asghar

Я целеустремленный ИТ-специалист, имею более одного года опыта написания технических текстов в отрасли. Мне нравится писать на темы, связанные с веб-разработкой.

Посмотреть все сообщения

Использование box-shadow для создания границы

Вы когда-нибудь задавались вопросом, почему так много разработчиков, даже разработчиков внешнего интерфейса, стараются избегать использования CSS. Разработчики очень часто проявляют энтузиазм, когда им приходится делать что-то новое с такими фреймворками, как Angular, React, Vue.js… или когда изучают новую технологию или язык, но гораздо меньше энтузиазма, когда мы говорим о CSS. И кажется, я знаю почему! В CSS нет стандартов. Часто есть много способов сделать одно и то же, и я должен признать, что это может расстраивать, потому что вы даже не знаете, хорошо это или плохо то, что вы делаете. И моя сегодняшняя статья представляет вам одну из самых простых вещей, которые вы можете сделать в CSS: добавление рамки к блоку . Очевидно, это просто, но я представлю вам (надеюсь) новый способ сделать это…

Использование свойства границы

Таким образом, добавить границу к блоку довольно просто, если вы используете граница собственности. Давайте начнем с первого простого примера, нарисовав маленький квадрат и добавив к нему красную рамку. Я добровольно добавляю некоторый контент в div с небольшим отступом, он понадобится для следующей статьи:

 

  Граница

 

 раздел {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  отступ: 5px;
  нижняя граница: 10px;
}
.граница{
  граница: 1px сплошной красный;
}
 

Теперь предположим, что вам нужно добавить стиль, когда ваша мышь проходит над квадратом, например, усиление границы. Давайте сделаем наше первое решение со свойством границы:

 div {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  отступ: 5px;
}
.граница{
  граница: 1px сплошной красный;
  
  &: наведите {
  граница: 3 пикселя сплошного красного цвета;
  }
}
 

Вы видите, что происходит, когда ваша мышь наводит на коробку? Ваш контент движется вперед, а рендеринг не очень красивый.

Box-shadow

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

Но знаете ли вы, что это свойство можно использовать только для рисования границ? Это сложнее, чем просто использовать свойство border , но вы сможете решить некоторые странные проблемы, подобные той, которую мы видели ранее. Итак, вот спецификация box-shadow собственность:

box-shadow: вставка | смещение-х | смещение-y | радиус размытия | радиус распространения | цвет

• вставка: указывает, будет ли тень находиться внутри или снаружи кадра. Вы можете опустить это свойство.
• offset-x: вы можете установить длину эффекта тени. Вы можете указать отрицательные значения для отображения тени слева.
• offset-y: Вы можете установить длину эффекта тени. Вы можете указать отрицательные значения, чтобы отобразить тень вверху.
• радиус размытия: определяет длину размытия, чтобы тень становилась больше и светлее. Это не то, что мы будем использовать в нашем примере.
• spread-radius: используйте это свойство, чтобы расширить (с положительными значениями) или уменьшить (с отрицательными значениями) ваши тени.
• цвет: Установите цвет тени!

Итак, вот небольшой обзор рисования границ со свойством box-shadow :

 box-shadow: 0 1px 0 0 red; /* Нижняя граница */
box-shadow: 0 -1px 0 0 красный; /* Верхняя граница */
box-shadow: -1px 0 0 0 красный; /* Граница слева */
box-shadow: 1px 0 0 0 красный; /* Граница справа */
box-shadow: 0 0 0 1px красный; /* Все границы, используя свойства распространения */
 

Имея это в виду, теперь мы можем использовать box-shadow для решения нашей предыдущей проблемы.