Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Background masquant les shadow


Sujet :

CSS

  1. #1
    Membre actif
    Background masquant les shadow
    Bonjour,

    J'ai un problème de background qui me masque mes shadow.
    Pour comprendre ce qu'il se passe : Enlever le background dans article et là, les shadows apparaissent

    Comment puis je faire pour garder mes background tout en ayant les shadows ?

    Merci d'avance à ceux qui prendront du temps pour m'aider.....

    PS : je mets le code source (et je joins le fichier) :
    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    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
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
     
    <head>
        <title>sans titre</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
     
    <style>
    body {
        padding:0;
        margin:0;
        background:#ccc;
    }
     
    article {
        width:825px;
        margin:auto;
        background:#fff;
        padding:4rem;
    }
     
    header, footer {
        height:200px;
    }
     
    header {
        background:#fff;
        margin-bottom:2rem;
    }
     
    footer {
        background:#000;
        margin-top:2rem;
    }    
     
     
     
    .clearfix::after,
    .u-clearfix::after {
      content: "";
      display: table;
      clear: both;
      border-collapse: collapse;
    }    
    </style>
     
     
     
    <style>
    .box_shadow_container {
        position:relative;
    }
     
    .box_shadow {
        float:left;
        margin-right:15px;
        position: relative;
        width: 310px;
        background: #ddd;
        border-radius: 4px;
        padding: 1.8em;
        text-shadow: 0 1px 0 #fff;
        margin-bottom:20px;
    }    
     
    .box_shadow:last-child {
        margin-right:0;
    }
     
    .box_shadow .titre    {
        font-weight: 400;
        font-size: 16px;
        text-transform: uppercase;
        color: #3b81be;
        text-shadow: 0 1px 0 #ccc;
        margin-top: 15px;
        text-align:center;
    }
     
    .box_shadow:before, .box_shadow:after {
        z-index: -2; 
        position: absolute; 
        content: '';
        bottom: 15px;
        left: 10px;
        width: 50%; 
        top: 80%;
        max-width:300px;
        background: rgba(0, 0, 0, 0.7); 
        box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
        transform: rotate(-3deg);
    }
     
    .box_shadow:after {
        transform: rotate(3deg);
        right: 10px;
        left: auto;
    }
    </style> 
    </head>
     
    <body>
    <header>
     
    </header>    
     
                        <article>
     
                            <div class="box_shadow_container clearfix">
     
     
                                <div class="box_shadow"><a href="anasazi.php"><img src="https://picsum.photos/310/174" alt="Anasazis" width="310" height="174" /><div class="titre">Titre</div></a></div>
     
                                <div class="box_shadow"><a href="anasazi.php"><img src="https://picsum.photos/310/174" alt="Anasazis" width="310" height="174" /><div class="titre">Titre</div></a></div>
     
     
                            </div>
     
                        </article>
     
     
    <footer>
     
    </footer>                
     
    </body>
     
    </html>


    Ecoute, sinon ta langue te perdra
    Guide de voyage Usa

  2. #2
    Membre expert
    Code css :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .box_shadow_container {
        position:relative;
        z-index: 1;
    }
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  3. #3
    Membre actif
    Bon sang mais c'est bien sur ! La superposition des calques !
    Un coup de fatigue sans doute
    Merci Doksuri d'avoir pris le temps de me répondre
    Ecoute, sinon ta langue te perdra
    Guide de voyage Usa

###raw>template_hook.ano_emploi###