web-dev-qa-db-fra.com

CSS3 Gradient linéaire Box-Shadow?

Existe-t-il un moyen dans CSS3 de créer une ombre de boîte d'encart multi-navigateur (c'est-à-dire Mozilla, Webkit et Opera) qui passera du noir en haut au blanc en bas? La façon la plus proche que j'ai trouvée de le faire ne permet qu'à l'extérieur de l'ombre d'être d'une couleur, puis de passer à une autre couleur à l'intérieur, sur cette page: http://www.css3.info/preview/box-shadow /

cross-browsercsslinear-gradients
22
Oliver Spryn

Malheureusement, ce n'est pas possible. Je suggère simplement d'utiliser un div avec une image d'arrière-plan que vous créez sur Photoshop ou similaire.

3
jacktheripper

Jetez un oeil à cette vidéo de Lea Vero . La section que j'ai liée à parle de quelque chose de très similaire, où vous utilisez des dégradés d'image d'arrière-plan pour créer quelque chose comme une ombre de boîte. Si je peux trouver un bon exemple de travail, je posterai une réponse, mais cela devrait vous donner un bon point de départ. Vous pouvez également faire des trucs vraiment cool, comme un box shadow curl avec le :after pseudo-classe pour faire apparaître une ombre.

Voici quelques exemples simples en haut et en bas d'une boîte, et soulignant du texte. Vous devrez jouer avec (beaucoup, probablement) pour qu'il ressemble à ce que vous voulez, mais CSS a des fonctionnalités vraiment géniales (et il y en aura de plus en plus).

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
}

.container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  
  background:
    radial-gradient(at 50% 0, black, transparent 70%),
    linear-gradient(0deg, black, transparent 50%) bottom;
  background-size: 100% 15px;
  background-repeat: no-repeat;
}

.underline {
    width: 6em;
    text-align:center;
    font-size:30px;
}

.underline:after {
    content: '\00a0';
    background-image:
      radial-gradient(at 50% 0, blue 0%, red 50%, transparent 75%);
    background-size: 100% 2px;
    background-repeat: no-repeat;
    float:left;
    width:100%;
}
<div class="container">
  <div class="underline">Hello, world!</div>
</div>
16
redbmk

Tard dans la soirée, mais peut-être que quelqu'un le trouvera utile! Vous pouvez réellement le faire avec plusieurs ombres sur l'ombre de la boîte:

box-shadow: inset 0px 33px 25px 0 #000, 
            inset 0 66px 15px 0px #ccc,
            inset 0 99px 5px 0px #fff;

exemple de codepen: https://codepen.io/InFecT3D/pen/JQdmeL

Note latérale: cela peut être une approche un peu "hacky", mais dans certains cas, cela aide.

7
Niv'O

Essayez d'utiliser un élément: before pour définir une "ombre".

  .classname {
    &:before {
      content: '';
      position: absolute;
      display: none;
      top: -20px;
      left: -20px;
      right: -20px;
      bottom: -20px;
      z-index: -1;
      background: linear-gradient(to bottom, red, blue);


    }

    &:hover {
      &:before {
        display: inline-block;
      }
    }
  }

Ce code ci-dessus est un exemple sur la façon de configurer un tel effet de survol.

3
ink

Deux divs sont nécessaires:

1: avec le dégradé linéaire + flou:

.gr{/* Permalink - use to edit and share this gradient:         http://colorzilla.com/gradient-editor/#f2305a+0,fca832+100 */
background: #f2305a; /* Old browsers */
background: -moz-linear-gradient(left, #f2305a 0%, #fca832 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #f2305a 0%,#fca832 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #f2305a 0%,#fca832 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2305a', endColorstr='#fca832',GradientType=1 );  

filter:blur(10px);

height:200px;
}

2: sur l'autre, le contenu.

.zz {background:#fff;  position: relative; top:-200px;
height:200px;
}

Ensuite:

<div class='gr'></div>
<div class='zz'>BOX</div>

[~ # ~] démo [~ # ~]

2
Ignacio Ramos

Si l'intention est de créer une superposition semi-transparente sur une image d'arrière-plan, cela peut être réalisé avec la règle de style suivante sans box-shadow.

background-image: linear-gradient(rgba(0, 0, 0, 0.5),
                                  rgba(255, 255, 255, 0.5)),
                  url("background.png");

Voir background-image sur MDN .

0
Alex Yursha