[CSS] Immagine, creare una striscia nell'angolo superiore della foto

[felino]

Buongiorno a tutti,
non so come definirla infatti non sono riuscito neanche a trovarla....

Ho delle immagini sulle quali vorrei porre una striscetta colorata nell'angolo superiore destro, contenente del testo.

La striscetta deve essere in posizione obliqua e dare un effetto avvolgente alla foto...

In giro mi è capitato di vederne molte soprattutto negli ecommerce per indicare quando il prodotto è nuovo o in offerta, ma adesso non sto trovando neanche un esempio...

Grazie.

 

[otto9due]

Buongiorno a tutti,
non so come definirla infatti non sono riuscito neanche a trovarla....

Ho delle immagini sulle quali vorrei porre una striscetta colorata nell'angolo superiore destro, contenente del testo.

La striscetta deve essere in posizione obliqua e dare un effetto avvolgente alla foto...

In giro mi è capitato di vederne molte soprattutto negli ecommerce per indicare quando il prodotto è nuovo o in offerta, ma adesso non sto trovando neanche un esempio...

Grazie.

Guarda io nel mio sito ho utilizzato i posizionamenti assoluti e gli z-index, per creare queste.. i dati che vedi dentro, si aggiornano dinamicamente..

E l'immagine va sotto il 'corner';

 

[felino]

Ho trovato questa simpatica soluzione: link.

 

[otto9due]

Esattamente.. Corner css

 

[felino]

Ma il Corner CSS non è l'angolo di un DIV?

 

[otto9due]

si, magari nel div ci piazzi l'immagine.. e la posizione in modo assoluto sul corner destro del div.

 

[Max 1]

Posizionamnti assoluti sono pericolosi! Se si cambia larghezza della finestra o risoluzione si scompone tutto
Questa è una soluzione e da li si può anche scaricare un'archivio con esempi in 3D
http://www.hackerstribe.com/2014/ht...cia-cliccabile-agli-angoli-di-una-pagina-web/

 

[felino]

Grazie Max1,
grazie dell'ottima segnalazione.

Ho scaricato l'archivio, vedo di applicarlo ed aggiornavi.

Grazie.

 

[otto9due]

No se li fai in percentuale sono innocui.. Io ho un sito web fatto quasi interamente con posizionamenti assoluti.. e va che è una bomba su tutti i dispositivi..

 

[Darkbox]

Buongiorno a tutti,ho trovato qua e la i codici per generare la striscia a lato di una foto,(come da immagine) ma non so come fare esattamente ad inserirli nella pagina. Supponiamo di dover inserire inserire un'immagine chiamata "casa1": Sono alle primissime armi. Chi può aiutarmi?
Grazie a tutti

Questi codici trovati:
HTML

<div class="wrapper">
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>
</div>

CSS

.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}

.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}

.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}

.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}

 

[Max 1]

@Darkbox

1. Non accodarti con la tua richiesta a una discussione di 5 anni fa aprine una tua nuova nella sezione giusta!
2. Quando posti del codice usa io tag appropriati non lo scrivere così come testo come hai fatto qui
3. Leggi attentamente il regolamento del forum e quello di sezione prima di continuare sul forum

Mi raxxomando qui chiudo