Visualizzazione dei risultati da 1 a 8 su 8

Hybrid View

  1. #1
    Utente di HTML.it
    Registrato dal
    Jul 2017
    Messaggi
    18

    Div con border-image per border top

    Buonasera, ho necessità di creare un div con uno "shape" come border-top, nello specifico ho sin'ora provato con quanto segue, utilizzando sia svg che png ma senza alcun risultato.

    codice:
    #homefilter {	border-image: url(/images/svg/treeprova.png) 30% repeat;
    	border-bottom: 0;
    	border-right: 0;
    	border-left: 0;
    }
    Al seguente url (non sono riuscito ad allegare alcun file, nonostante fosse in estensione supportata -png- e al di sotto della soglia di 620px) troverete un mockup di ciò che voglio realizzare:
    https://imgur.com/a/PA1rLGR

    Grazie per il supporto!

  2. #2
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    99
    questo è un piccolo esempio ma si può realizzare in altri modi.

    codice:
    <!DOCTYPEhtml>
    <htmllang="en">
    
    <head>
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
    * {
    border: 0;
    margin: 0;
    padding: 0;
    
            }
    
    #contenitore {
    background-image: url('forest.jpg');
    background-size: cover;
    width: 100%;
    height: 100vh
            }
    
    #footer {
    background-image: url('tree.png');
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px
            }
    </style>
    </head>
    
    <body>
    <divid="contenitore">
    </div>
    
    <divid="footer">
    </div>
    </body>
    
    </html>
    
    

  3. #3
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,748
    [mod]
    @ninja72 ciao, ti chiedo se puoi cortesemente ripostare il codice in maniera "pulita". Vedi mio PVT. Grazie
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    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
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    99
    Ciao KillerWorm, scusate non sapevo di questo piccolo inconveniente / bug. Grazie per la dritta.

    codice HTML:
    <!DOCTYPEhtml>
    <htmllang="en">
    
    <head>
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
    * {
    border: 0;
    margin: 0;
    padding: 0;
    
            }
    
    #contenitore {
    background-image: url('forest.jpg');
    background-size: cover;
    width: 100%;
    height: 100vh
            }
    
    #footer {
    background-image: url('tree.png');
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px
            }
    </style>
    </head>
    
    <body>
    <divid="contenitore">
    </div>
    
    <divid="footer">
    </div>
    </body>
    
    </html>

  5. #5
    Utente di HTML.it
    Registrato dal
    Jul 2017
    Messaggi
    18
    Ciao, grazie per la risposta! Mi chiedevo: questa soluzione comporta però una creazione di un svg "a schermo intero" come larghezza vero? La soluzione con border image (che però appunto non sono riuscito a far funzionare) era interessante per la possibilità del repeat, avrei quindi creato una specie di seamless pattern che potesse venir ripetuto senza problemi.
    Inoltre, la hero image è parte di un'altra sezione (sto provando ad utilizzare sppb e mi ci sto trovando bene), ed inoltre l'ho pensata per essere 80vh. Mi servirebbe una soluzione "stand-alone" per il div con la foresta sopra

  6. #6
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    99
    Ciao, in riferimento al tuo mockup penso che la mia sia la soluzione più sensata anchè se si potrebbe fare in altri modi. Ma "border-image" nasce per tutt'altro scopo, ovvero quello di creare un bordo su tutta la forma di un contenitore che puo' essere un div per esempio.Il discorso svg è relativo, per il footer basta un png trasparente di dimensioni didotte (es. 50x50pixel).

  7. #7
    Utente di HTML.it
    Registrato dal
    Jul 2017
    Messaggi
    18
    Ciao, grazie ancora per la risposta.
    Il mio dubbio è: non avendo impostato un background repeat, se io utilizzassi un png mettiamo 50x50 come da te suggerito, questo verrebbe comunque ripetuto o "stretchato"?
    Non mi è molto chiara l'applicazione che hai suggerito :/ lol

  8. #8
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    99
    Figurati, in questo caso verrebbe ripetuto, ma potresti gestire la ripetizione con "background-repeat: none" e il size con "background-size: 100% 100%" o configurarlo a seconda delle tue esigenze.

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