Visualizzazione dei risultati da 1 a 1 su 1
  1. #1
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675

    [pillola] Scheda libro con immagine copertina 3D (CSS3)

    Discussione inserita tra le pillole dei link utili CSS

    Codicillo html con un po' di css per ottenere eleganti anteprime di libri con cover 3d.

    In seguito a questa discussione, ho voluto provare ad elaborare una qualche soluzione riutilizzabile e personalizzabile.

    Alcune risorse da cui ho preso qualche spunto:
    http://tympanus.net/Development/BookPreview/
    https://codepen.io/jasondavis/pen/szbDf
    https://codepen.io/fivera/pen/rHigj

    Di seguito, lo snippet con un esempio pronto da copiaincollare, testare e customizzare per le proprie esigenze.

    Per i neofiti:

    Il codice d'esempio è pronto all'uso. E' possibile copiarlo in un nuovo file .html e lanciare il file per vederne subito il risultato.

    Nell'esempio ho usato delle immagini attualmente online. Se non dovessero essere più presenti sarà comunque possibile provare il codice ridefinendo opportunamente l'attributo src sui relativi tag <img> specificando, ad esempio, dei propri file immagine in locale.

    Da notare che il css nell'esempio è definito sull'head del documento. Volendo, è chiaramente possibile spostare quel codice su un file esterno per poi includerlo opportunamente sul documento (vedi qui per maggiori informazioni su come includere file css).

    codice:
    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Book Preview</title>
        <meta charset="utf-8">
        <style type="text/css">
          
          body {
            background: #eaeaea;
          }
          
          /* -- Contenitore principale -- */
          
          .scheda-opera {
            width: 550px;
            margin: 10px auto;
            padding: 0 0 10px;
            box-sizing: border-box;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 3px;
            font: 1rem/1 Candara,Arial,sans-serif;
            color: #64696a;
            text-align: justify;
            perspective: 1000px;
            perspective-origin: 150px 150px;
          }
          
          /* -- Intestazione -- */
          
          .titolo-opera {
            margin: 0;
            padding: 1rem .1rem;
            color: #2a2c9a;
            font: bold 1.5em/1 "Book Antiqua",Georgia,serif;
            text-align: center;
          }
          .titolo-opera>span{
            display: block;
            margin: 0;
            padding: .2rem .1rem;
            font: .8rem/1 Candara,Arial,sans-serif;
            text-transform: uppercase;
            text-align: center;
          }
          
          /* -- Descrizione (paragrafi) -- */
          
          .scheda-opera>p {
            margin: 12px;
          }
          
          /* -- Linee separatrici -- */
          
          .titolo-opera>span:before,
          .scheda-opera:after {
            content: "";
            display: block;
            width: 10%;
            height: .6rem;
            margin: .6rem auto 0;
            border-top: 1px dotted #64697a;
            clear: both;
          }
          
          /* -- Copertina con effetto 3D -- */
          
            /* - Retro - */
          .copertina {
            display: inline-block;
            float: left;
            position: relative;
            margin: 12px 18px 15px 15px;
            box-shadow: inset -4px 0px 15px -8px #000, 0px 8px 15px -4px #333, 20px 20px 20px -20px rgba(0,0,0,.1);
            transition: transform .5s ease;
            
            perspective: 10000px;
            transform-origin: 40% 0 20px;
            transform-style: preserve-3d;
            transform: rotateY(-25deg);
          }
          
            /* - Fronte (immagine) - */
          .copertina>img {
            width: auto;
            max-width: 200px;
            max-height: 200px;
            vertical-align: middle;
            outline: 1px solid transparent; /* Aiuta a smussare i bordi frastagliati in Firefox */
            
            transform: translateZ(20px);
            
            /* Fix IE. Non supporta il preserve-3d che applica il 3D su elementi annidati, quindi bisogna prenderlo in giro in qualche modo per simulare l'effetto */
            -ms-transform: translateX(-9px) scaleY(1.02);
            transition: -ms-transform .5s ease;
          }
          
            /* - Inizializzazione pseudo-elementi per "Effetto satinato sull'immagine" e "Taglio davanti" - */
          .copertina:before,
          .copertina:after {
            content: '';
            position: absolute;
            outline: 1px solid transparent; /* Aiuta a smussare i bordi frastagliati in Firefox */
          }
          
            /* - Effetto satinato sull'immagine - */
          .copertina:before {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid;
            border-color: #fff transparent #000 #fff;
            opacity: .12;
            background: linear-gradient(to top right, #fff, transparent, #555);
            z-index: 1;
            transition: opacity .5s ease, -ms-transform .5s ease;
            
            transform-origin: 0 .5;
            transform: translateZ(20px);
            
            -ms-transform: translateX(-10px) scaleY(1.02); /* Fix IE */
          }
          
            /* - Taglio davanti - */
          .copertina:after {
            width: 20px;
            height: calc(100% - 4px);
            right: 2px;
            top: 2px;
            z-index: -1;
            background: #eee;
            background: linear-gradient(to top left, #ccc, #f5f5f5);
            box-shadow: inset 10px 0 15px -12px #000, 0px 0px 4px -2px #555;
            
            transform-origin: 20px 0 0;
            transform: rotateY(90deg);
            
            -ms-transform: perspective(1500px) rotateY(55deg); /* Fix IE */
          }
          
          /* -- Animazione copertina all'hover -- */
          
          .copertina:hover {
            transform: rotateY(0deg);
           }
          .copertina:hover:before {
            opacity: 0;
            -ms-transform: translateX(0px) scaleY(1); /* Fix IE */
          }
          .copertina:hover>img { /* Fix IE */
            -ms-transform: rotateY(0deg);
          }
          
          /* Colori copertina (applicabili aggiungendo una delle seguenti classi sull'elemento .copertina) */
          
          .rosso.copertina,  .rosso.copertina>img   { background: #f43; } /* .rosso    */
          .arancio.copertina,.arancio.copertina>img { background: #f70; } /* .arancio  */
          .giallo.copertina, .giallo.copertina>img  { background: #fd0; } /* .giallo   */
          .verde.copertina,  .verde.copertina>img   { background: #4f4; } /* .verde    */
          .blu.copertina,    .blu.copertina>img     { background: #45e; } /* .blu      */
          .viola.copertina,  .viola.copertina>img   { background: #a5f; } /* .viola    */
          .copertina,        .copertina>img         { background: #def; } /* nessuna classe (default) */
          
        </style>
      </head>
      <body>
     
        <h1>Scheda libro con immagine copertina 3D (CSS3)</h1>
        <small>
          Semplice box per presentare l'anteprima di libri con un'elegante copertina 3D animata e possibilità di definirne il colore.
          <br>Funziona in browsers che supportano le trasformazioni CSS 3D.
        </small>
        
        <div class="scheda-opera">
          <h2 class="titolo-opera">HTML, XHTML & CSS per Negati
            <span>Ed Tittel, Jeff Noble</span>
          </h2>
          <div class="copertina">
            <img src="http://static.lafeltrinelli.it/static/frontside/xxl/979/3687979_241165.jpg" alt="HTML, XHTML & CSS per Negati" >
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</p>
        </div>
        
        <div class="scheda-opera">
          <h2 class="titolo-opera">Responsive Web Design
            <span>Ethan Marcotte</span>
          </h2>
          <div class="copertina giallo">
            <img src="http://craigmod.com/images/journal/coccyx/aba-04.png" alt="Responsive Web Design" >
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
        
        <div class="scheda-opera">
          <h2 class="titolo-opera">Head First HTML and CSS
            <span>Eric Freeman, Elisabeth Freeman</span>
          </h2>
          <div class="copertina blu">
            <img src="http://ecx.images-amazon.com/images/P/0596159900.01._SX450_SY635_SCLZZZZZZZ_.jpg" alt="Head First HTML and CSS" >
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        
        <div class="scheda-opera">
          <h2 class="titolo-opera">Foundations of Web Design
            <span>Thomas Michaud</span>
          </h2>
          <div class="copertina rosso">
            <img src="http://www.foundationsofwebdesign.com/wp-content/uploads/2014/08/FOWD_cover-820x510.jpg" alt="Foundations of Web Design" >
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </body>
    </html>
    Testato su:
    [Windows 10] IE 11, Edge 20, CH 54, FF 46
    [Android 5.1.1] browser integrato, CH 50

    La struttura HTML è relativamente semplice:

    - Un div (.scheda-opera) che definisce il contenitore principale.

    - Un elemento di intestazione <h2> (.titolo-opera) in cui inserire il titolo. A seconda delle esigenze, è possibile utilizzare un tag <h1> anziché <h2> . Questo è da definire in base al contesto in cui utilizzare lo snippet, cioè alla struttura della pagina, e può influire sull'indicizzazione in termini di SEO.

    - Un elemento <span> inserito dentro l'elemento di intestazione, in cui è possibile specificare l'autore dell'opera o altre eventuali informazioni che saranno visualizzate come titoletto sotto il titolo.

    - Un div (.copertina) che farà da contenitore dell'immagine. Su questo elemento è possibile specificare una classe che determina il colore da attribuire alla copertina stessa (il colore sarà quindi visibile sul bordo nella parte posteriore della copertina).

    - Un elemento <img> dentro l'elemento copertina in cui definire ovviamente l'immagine della copertina. Tale immagine può avere qualsiasi dimensione; questa sarà comunque limitata, via css, all'interno di un ingombro massimo di 200 x 200 px, mantenendo comunque le proporzioni originali. Ovviamente è possibile ridefinire a proprio piacimento i valori limite, specificandoli per le proprietà max-width e max-height, nel css, sotto il selettore .copertina>img.

    - Dei paragrafi <p> in cui inserire il testo descrittivo. E' possibile inserire qualsiasi numero di paragrafi dopo l'elemento .copertina e, in linea di massima, qualsiasi altro elemento dentro e fuori dai paragrafi. Ho preferito non inserire il testo descrittivo dentro un particolare contenitore per mantenere la struttura il più semplice possibile.
    Ultima modifica di KillerWorm; 30-03-2019 a 06:09
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.