FOPENP

CSS: Scrolling verticale con dosso

In questo esempio ho implementato con il CSS una pagina web suddivisa in due sezioni. Le due sezioni sono separate da un dosso.

C'è poi un menu che inizialmente ha il testo di colore nero. Poi, grazie all'attributo mix-blend-mode: difference il testo diventa di colore bianco quando viene a contatto con il background nero.

Clicca qui per vedere la pagina di esempio.

    1 <!DOCTYPE html>
    2 <html>
    3     <head>
    4         <meta charset="utf-8">
    5         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6         <title>Scroll Verticale</title>
    7         <style>
    8             body {
    9                 margin: 0;
   10                 background-color: white;
   11             }
   12             .opzioni {
   13                 position: fixed;
   14                 font-size: 3em;
   15                 font-family: sans-serif;
   16                 width: 100%;
   17                 text-align: center;
   18                 color: white;
   19                 mix-blend-mode: difference;
   20                 top: 0;
   21             }
   22             .opzioni > a {
   23                 text-decoration: none;
   24                 color: white;
   25             }
   26             .dosso {
   27                 margin: -5px;
   28             }
   29             .dossosvg {
   30                 width: 100%;
   31                 height: 100%;
   32                 background-size: cover;
   33             }
   34             .sez1 {
   35                 margin-top: 25vh;
   36                 height: 100vh;
   37             }
   38             .sez2 {
   39                 background-color: black;
   40                 color: white;
   41                 height: 100vh;
   42             }
   43         </style>
   44     </head>
   45     <body>
   46         <div class="opzioni">
   47             <a href="#">HOME</a> · <a href="#">ABOUT</a> · <a href="#">BLOG</a>
   48         </div>
   49         <div class="sez1">
   50             Questa &egrave; la sezione n.1
   51         </div>
   52         <div class="dosso">
   53             <svg
   54                 width="1920"
   55                 height="200"
   56                 class="dossosvg"
   57                 viewBox="0 0 507.99999 52.916666"
   58                 version="1.1"
   59                 id="svg5"
   60                 xmlns="http://www.w3.org/2000/svg"
   61                 xmlns:svg="http://www.w3.org/2000/svg">
   62                 <defs
   63                     id="defs2" />
   64                 <g
   65                     id="layer1">
   66                     <path
   67                     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.545999"
   68                     d="m -0.49781301,35.577036 c 0,0 130.79241301,-19.116019 232.21351301,-19.116019 101.42109,0 276.65127,19.647019 276.65127,19.647019 l 0.18774,17.129831 -508.81986484,0.0945 z"
   69                     id="path283" />
   70                 </g>
   71             </svg>
   72         </div>
   73         <div class="sez2">
   74             Questa &egrave; la sezione n.2
   75         </div>
   76     </body>
   77 </html>

Come si può vedere dal codice, il dosso è un SVG che è stato embeddato nella pagina.

2024
14 gen