[HTML] 'bucare ' un div

zorro · 23 Dic 2016

Salve a tutti,
ero un utilizzatore di Flash e sto cercando di ricreare (per quanto possibile, non sono molto esperto in questo) effetti Flash con i CSS. E' possibile creare all'interno di un div una sorta di 'buco', come avveniva appunto con i livelli (maschera e mascherato) di Flash, attraverso il quale visualizzare il contenuto sottostante ?
Grazie a tutti per l'aiuto e buon Natale

Zorro

Max 1 · 23 Dic 2016

Puoi utilizzare un'immagine gif o png con il buco trasparente messa sopra ad altri contenuti

Kobalt · 23 Dic 2016

Puoi provare ad usare canvas.
Il risultato che vuoi ottenere è qualcosa del genere? http://codepo8.github.io/canvas-masking/

zorro · 23 Dic 2016

Ciao a tutti e due e grazie per le risposte.
Si, Kobalt, è esattamente l'effetto che volevo ottenere. Grazie!!

Max 1 · 23 Dic 2016

stesso effetto anche con immagine

Codice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style type="text/css">
.d01 {
    width: 300px;
    height: 300px;
    position: relative;
}
.im01, .om02 {
    position: absolute;
    top: 0;
    left: 0;
}
.im01 {
    z-index: 0;
}
.im02 {
    z-index: 999;
}
</style>
</head>

<body>
<div class="d01">
    <img class="im01" src="red-panda.jpg" width="300" height="300" alt=""/>
    <img class="om02" src="centerblur.png" width="300" height="300" alt=""/>
</div>
<div class="d01">
    <img class="im01" src="red-panda.jpg" width="300" height="300" alt=""/>
    <img class="om02" src="star.png" width="300" height="300" alt=""/>
</div>
</body>
</html>

Max 1 · 24 Dic 2016

zorro · 26 Dic 2016

Grazie per la risposta Max 1, sto facendo delle prove con delle immagini mie ma non capisco come creare il 'buco'.
Ho fatto varil tentatlivi ma.......niente. Probabilmente sbaglio qualcosa

Max 1 · 26 Dic 2016

Oggi vi do un esempio

zorro · 26 Dic 2016

Grazie dell''aiuto

Max 1 · 26 Dic 2016

Qui trovi la DEMO
Qui scarichi il CODICE E IMMAGINI

zorro · 27 Dic 2016

Grazie dell'aiuto, Max 1. Grazie al materiale che mi hai inviato sono riuscito nel mio intento:
sbagliavo nella creazione del 'buco' ma ora è tutrto OK!! Grazie ancora

Zorro

Cerca

Cerca

[HTML] 'bucare ' un div

zorro

Utente Attivo

Max 1

Super Moderatore

Kobalt

Nuovo Utente

zorro

Utente Attivo

Max 1

Super Moderatore

Max 1

Super Moderatore

zorro

Utente Attivo

Max 1

Super Moderatore

zorro

Utente Attivo

Max 1

Super Moderatore

zorro

Utente Attivo

Discussioni simili