SVG/CSS: Masked Header Logo

Alors j'essaie de faire un Logo masqué où la pièce avec l'ombre est en fait une fenêtre transparente au contenu derrière elle.SVG/CSS: Masked Header Logo

La conception est comme ceci:

Je pense que je dois aborder cela avec SVG et Masking, mais mes tentatives ne sont pas allés vraiment bien comme on le voit ici:

@charset "utf-8"; 
 
*{margin:0;padding:0} 
 
body{ 
 
\t width:100%; 
 
\t min-height:100%; 
 
\t background-color:#eee; 
 
\t color:#eee; 
 
} 
 
/*Header 
 
-------------*/ 
 
header{ 
 
\t position:fixed; 
 
\t top:0; 
 
\t width:100%; 
 
\t height:20%; 
 
\t height:auto; 
 
\t z-index:999; 
 
} 
 
#logo:before{ 
 
\t width:10%; 
 
\t height:15vw; 
 
\t display:block; 
 
\t content:""; 
 
\t background:#fff; 
 
\t float:left; 
 
} 
 
#logo:after{ 
 
\t width:80%; 
 
\t height:15vw; 
 
\t display:inline-block; 
 
\t content:""; 
 
\t background:#fff; 
 
} 
 
#logo img{ 
 
\t float:left; 
 
\t width:10%; 
 
} 
 
/*Content 
 
-------------*/ 
 
main{ 
 
\t position:relative; 
 
\t margin:auto; 
 
\t width:100%; 
 
\t height:200%; 
 
\t background:#2d917f 
 
} 
 
/*Links 
 
-------------*/ 
 
a,a:visited{ 
 
\t color:#eee; 
 
\t text-decoration:none; 
 
\t -webkit-transition:all .2s ease; 
 
\t -moz-transition:all .2s ease; 
 
\t -o-transition:all .2s ease; 
 
\t transition:all .2s ease; 
 
} 
 
a:active, a:hover{ 
 
\t color:#fff; 
 
\t border-bottom:1px solid #fff 
 
} 
 
/*Scrollbar 
 
-------------*/ 
 
::-webkit-scrollbar{width:12px;height:12px;background-color:#1A1A1A} 
 
::-webkit-scrollbar-corner{background-color:#0e0e0e} 
 
::-webkit-scrollbar-track{background-color:#121212} 
 
::-webkit-scrollbar-thumb{background:#2d917f} 
 
::-webkit-scrollbar:horizontal{height:12px} 
 
/*Selection 
 
-------------*/ 
 
::selection{color:#fff;background-color:#2d917f} 
 
::-moz-selection{color:#fff;background-color:#2d917f}

<header> 
 
\t <div id="logo"> 
 
\t \t <img src="https://ap-images.ga/up/2017/05/11151821-Logo2.svg" title="11145933-Logo.svg" alt="11145933-Logo.svg"/> 
 
\t </div> 
 
</header> 
 
<main> 
 
</main>

Sur Codepen: https://codepen.io/RafaelDeJongh/pen/PmROPW

Quelqu'un a-t-il une idée de la façon dont je ferais mieux de résoudre ce problème, et en général comment masquer une certaine partie d'un élément (dans ce cas l'en-tête)?

Merci d'avance!

Source

2017-05-11 Rafaël De Jongh

Utiliser la position absolue –

@ LuisP.A. Cela n'a pas vraiment de sens pour être honnête, cela ne changerait pas le fait que l'élément sous-jacent serait couvert par une couleur d'arrière-plan. –

La solution la plus simple serait juste de faire un SVG:

Un rectangle formant l'arrière-plan de la bannière blanche
Un masque appliqué à cette formation de l'ensemble
Enfin un filtre d'ombre portée appliquée à le résultat

Ensuite, soit embed qui SVG dans votre page et superposer le texte de votre bannière, ou d'enregistrer le SVG dans un fichier séparé et l'utiliser comme background-imaage pour la <header>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1860 256"> 
 
    <defs> 
 
    <mask id="hole"> 
 
     <rect width="100%" height="100%" fill="white"/> 
 
     <g transform="translate(200,35)"> 
 
     <rect x="1" y="1" width="118" height="178" fill="#000"/> 
 
     <path fill="white" d="M0.1,0h119.8v180H0.1V0 M3.2,33.2c0,13.8,0,27.7,0,41.5C18.6,75.1,33.9,80.4,46,90c-0.1-5.1,0-10.2-0.1-15.3 
 
\t \t \t \t c16.3-0.2,32.7,5,45.6,15c12.2,9.5,22,22.9,25.4,38.1c-0.4-31.5,0-63-0.2-94.5C78.9,33.2,41.1,33.2,3.2,33.2 M3.6,77.9 
 
\t \t \t \t c0,23,0,45.9,0,68.9c14.1,0,28.3,0,42.4,0c0-17.6,0-35.1,0-52.7C34.2,84,18.9,78.4,3.6,77.9 M49,78c0.1,4.8,0,9.5,0,14.2 
 
\t \t \t \t c15.5,13.6,25.1,33.8,25,54.5c14.1,0,28.3,0,42.4,0c0.5-17.7-7.1-35.2-19.3-47.8C84.7,86.1,67,78.2,49,78 M49.1,96.6 
 
\t \t \t \t c0.1,16.7,0,33.4,0,50.2c7.3,0,14.6,0,21.8,0C70.9,128,62.6,109.6,49.1,96.6z"/> 
 
     </g> 
 
    </mask> 
 
    <filter id="shadow"> 
 
     <feOffset in="SourceAlpha" dx="10" dy="10" result="offset" /> 
 
     <feColorMatrix in="offset" type="matrix" values="0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0" result="greyoff" /> 
 
     <feGaussianBlur in="greyoff" stdDeviation="7" result="blur" /> 
 
     <feBlend in="SourceGraphic" in2="blur" mode="normal" /> 
 
    </filter> 
 
    </defs> 
 

 
    <g filter="url(#shadow)"> 
 
    <rect x="15" y="15" width="1800" height="220" fill="white" mask="url(#hole)"/> 
 
    </g> 
 
</svg>

Source

2017-05-11 16:40:52

Excellente idée de faire comme ça, je vais prendre cela comme la réponse acceptée car je pense que cela fonctionnerait mieux que la façon dont je l'ai fait avec: avant et après. Le rendre réactif est une autre chose, mais je vais jeter un coup d'oeil comment cela fonctionne moi-même! De toute façon merci! –

SVG/CSS: Masked Header Logo

Répondre

Questions connexes