Visualizzazione dei risultati da 1 a 4 su 4

Discussione: Responsive triangle border

  1. #1

    Responsive triangle border

    Nell'immagine allegata si nota il bordo celeste "triangolare" di un'area più scura, azzurra.
    Vorrei riprodurre lo stesso effetto, adattandolo al cross-browsing e il comportamento responsive.
    Potete darmi una mano? Grazie.
    Immagini allegate Immagini allegate

  2. #2

    Background gradient

    Guardando all'allegato, vorrei riprodurre quell'effetto "freccia" che si sovrappone alla foto di sfondo.
    Naturalmente vorrei cercare di farlo senza utilizzare un'immagine preconfezionata; ho provato con il linear-gradient ma ancora non ho la soluzione.
    Qualcuno in grado di aiutarmi? Grazie.
    Immagini allegate Immagini allegate

  3. #3
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    3,919
    [Mod]
    @freetecno qualche mese fa avevi già aperto una discussione con un argomento molto simile, se non uguale. Anche se non hai ricevuto risposte è opportuno continuare sulla stessa discussione già aperta ed evitare di aprire discussioni multiple che trattano lo stesso argomento. In questi casi è possibile riportare la propria discussione in cima rispondendo tu stesso con un semplice "up" (vedi indicazioni nel regolamento di sezione). Per il momento ho unito le due discussioni dato che in quest'ultima hai aggiunto qualche altro dettaglio. Fai attenzione in futuro. Grazie.
    [/Mod]


    Riguardo la tua richiesta non ci sono soluzioni troppo semplici. Il background gradient potrebbe essere utile ma c'è da sbatterci un po' la testa prima di riuscire ad elaborare qualcosa di ottimale e crossbrowser. Bisogna infatti valutare quanto incide questo fattore nel tuo caso.

    Io ho provato ad elaborare qualcosa ma, da quel che ho potuto constatare, mi funziona bene solo su FF, mentre su CH noto qualche taglio creato dal disallineamento delle due parti di background, invece su IE/Edge non appare proprio l'effetto.

    Qui il Pen https://codepen.io/OpenDec/pen/zWporZ

    Qui il codice:
    codice:
    <!DOCTYPE HTML>
    <html>
       <head>
          <title>Covered Image Effect</title>
          <meta charset="utf-8">
          <style>
             body{
                 background: #C0D1CE;
                 font-size: 14px;
             }
    
             .covered-image-effect {
               position: relative;
               float: left;
               margin: 10px;
               padding-bottom: 100px;
               background: #fff5;
               overflow: hidden;
               font: 1em/1 Tahoma, Geneva, sans-serif;
             }
    
             .covered-image-effect>img {
               float: left;
             }
    
             .covered-image-effect>.caption {
               position: absolute;
               z-index: 10;
               bottom: -55%;
               left: 30px;
               right: 10px;
               height: 100%;
               margin-bottom: -50px;
               color: white;
             }
             
             .covered-image-effect>.caption:before {
               content: '“';
               display: inline-block;
               position: absolute;
               top: 0;
               font: 6em/0 Georgia, serif;
               opacity: .8;
             }
    
             .covered-image-effect:after {
               content:'';
               display: block;
               position: absolute;
               z-index: 0;
               bottom: -55%;
               right: -62%;
               width: 200%;
               height: 200%;
               box-sizing: border-box;
               background:
                 linear-gradient(
                   -30deg,
                   #0061ab,
                   #0061ab 50%,
                   #06a8dd 50%,
                   #06a8dd calc(50% + 14px),
                   #0003 calc(50% + 14px),
                   transparent calc(50% + 20px),
                   transparent
                 ),
                 linear-gradient(
                   30deg,
                   #0061ab,
                   #0061ab 50%,
                   #06a8dd 50%,
                   #06a8dd calc(50% + 14px),
                   #0003 calc(50% + 14px),
                   transparent calc(50% + 20px),
                   transparent
                 ) right;
               background-size: 50% 100%;
               background-repeat: no-repeat;
             }
    
             /* -- ANIMATED HOVER EFFECT -- */
             .covered-image-effect:after,
             .covered-image-effect>.caption {
               transition: bottom .35s ease-in-out;
             }
             .covered-image-effect:hover:after,
             .covered-image-effect:hover>.caption {
               bottom: -100%;
             }
    
          </style>
       </head>
       <body>
          <figure class="covered-image-effect"><img alt="" src="http://lorempixel.com/400/300"><figcaption class="caption">Lorem ipsum<br><br>Consectetur adipiscing elit nullam suscipit metus id sem eleifend, ut molestie eros dictum</figcaption></figure>
          <figure class="covered-image-effect"><img alt="" src="http://lorempixel.com/200/300"><figcaption class="caption">Consectetur adipiscing elit</figcaption></figure>
          <figure class="covered-image-effect"><img alt="" src="http://lorempixel.com/100/300"><figcaption class="caption">Morbi venenatis</figcaption></figure>
          <figure class="covered-image-effect"><img alt="" src="http://lorempixel.com/150/150"><figcaption class="caption">Suspendisse malesuada massa lorem</figcaption></figure>
          <figure class="covered-image-effect"><img alt="" src="http://lorempixel.com/300/150"><figcaption class="caption">Nunc eget lacus at arcu scelerisque gravida ut non lectus, ut molestie eros dictum</figcaption></figure>
       </body>
    </html>

    Se ti va di provare ad aggiustarlo per renderlo crossbrowser...

    In alternativa, un'altra soluzione più pratica può essere l'uso di un'immagine SVG. Magari può essere incorporata anche direttamente sul codice. Però anche in questo caso non so quanto possa essere crossbrowser. Con i browser moderni non dovrebbero comunque esserci problemi.

    Vedi tu.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  4. #4
    GRAZIE!
    Finalmente una risposta!!

    Per prima cosa mi scuso. In effetti sono stato precipitoso e non mi sono reso conto di aver aperto di nuovo una vecchia discussione.
    Riguardo la soluzione (che, appunto, non mi era proprio semplice) mi metterò subito al lavoro per provare il tuo suggerimento.
    Grazie ancora.

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 © 2018 vBulletin Solutions, Inc. All rights reserved.