web-dev-qa-db-fra.com

Décoloration du texte au bas d'une section avec un div transparent, mais la hauteur reste sous la section après la superposition de div

J'essaie d'obtenir un effet de fondu sympa au bas d'une section de texte en tant qu'indicateur "En savoir plus". 

J'ai suivi un peu this et d'autres tutoriels, et mon code est actuellement le suivant:

html

<section>
    <p>malesuada fames ac turpis egestas...leo.</p>                                                                  
    <p>malesuada fames ac turpis egestas...leo.</p>
    <div class="fadeout"></div>
</section>
<p>Stuff after</p>

css

.fadeout {
    position: relative; 
    bottom: 4em;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
}

jsFiddle

Le problème est que, même lorsque je positionne la division transparente sur le corps du texte, les éléments de l'espace existent toujours entre et «Autres éléments».

Des idées?

csshtml5fadefadeoutfadein
29
whunut

Un élément de position relative n'est pas supprimé du flux html normal. Par conséquent, si vous le déplacez dans l'espace initial qui lui est réservé, il reste toujours. Cependant, avec le positionnement absolu, ce n'est pas le cas.

.fadeout {
    position: absolute; 
    bottom: 0em;
    width:100%;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
    background-image: -moz-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -o-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -ms-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
} 
section {position:relative}

D&EACUTE;MO

47
Musa

Je suis arrivé trop tard à la fête, mais cela peut aussi être fait sans le .fadeout div, en utilisant un pseudo-élément ::before ou ::after:

        section {
            position: relative;
        }

        section::after {
            content: '';
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 15px;
            background: -webkit-linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
            background-image: -moz-linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
            background-image: -o-linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
            background-image: linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
            background-image: -ms-linear-gradient(
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 1) 100%
            );
        }
8
cale_b

Ajoutez simplement .fade-out sur l'élément que vous souhaitez "fondre en fondu":

.fade-out {
  position: relative;
  max-height: 350px; // change the height
}
.fade-out:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient( rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100% );
}
5
Jeremy Lynch

Il suffit de remplacer bottom: 4em par margin-top: -4em. Fonctionne parfaitement pour moi.

0
Mintytail