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

Stato
Chiusa ad ulteriori risposte.

felino

Utente Attivo
12 Dic 2013
919
10
18
Aci Catena (Catania)
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

Utente Attivo
22 Feb 2014
529
21
28
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';
 

Allegati

  • imm.jpg
    imm.jpg
    69,8 KB · Visite: 276
  • imm2.jpg
    imm2.jpg
    45 KB · Visite: 282

otto9due

Utente Attivo
22 Feb 2014
529
21
28
si, magari nel div ci piazzi l'immagine.. e la posizione in modo assoluto sul corner destro del div.
 

otto9due

Utente Attivo
22 Feb 2014
529
21
28
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

Utente Attivo
6 Apr 2020
20
0
1
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
Cattura.JPG


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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.369
338
83
@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
 
Stato
Chiusa ad ulteriori risposte.
Discussioni simili
Autore Titolo Forum Risposte Data
L CSS, cambiare i colori della barra e ingrandire una immagine WordPress 1
Shyson Mettere alt e title in immagine nel css HTML e CSS 2
M CSS...dinamico? Altezza div variabile, ma con immagine come bordo HTML e CSS 4
M Crop immagine con i CSS HTML e CSS 3
voldemort Immagine di sfondo fissa con CSS HTML e CSS 1
Artemisia Disperata: immagine da ritagliare con css HTML e CSS 2
M [Firefox/CSS] Problema immagine di sfondo centrata HTML e CSS 1
Angel0 Rotazione immagine di sfondo con css HTML e CSS 3
A impostare un immagine con css HTML e CSS 17
MattiaBergomi [DIV e CSS] Far contenere ad un Div un immagine senza che esca dai margini HTML e CSS 9
N Aiuto CSS, come posizionare un'immagine centralmente HTML e CSS 4
S problema con css bootstrap3 HTML e CSS 4
L Sovrascrivere CSS iframe su dominio diverso WordPress 0
E CSS non riconosciuto PHP 1
Shyson [CSS] Posizionare casella di ricerca HTML e CSS 3
Shyson Centrare box css HTML e CSS 2
R Primo script in PHP / CSS PHP 4
S non funzionano alcuni effetti (bottone futuristico creato con css) HTML e CSS 1
V [CSS] Uso degli id HTML e CSS 2
I creazione stile css HTML e CSS 3
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
P [WordPress] Messaggio di errore in file style.css WordPress 0
D Aggiungere file .css esterno su Android HTML e CSS 4
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
StephenSoftware Flexbox: definizione nel CSS HTML e CSS 4
Tommy03 Variabile PHP per impostare una proprietà CSS PHP 2
R javascript lettura css cross-browser Javascript 1
U [WordPress] [CSS] Come faccio a spostare più in basso lo slider WordPress 0
L [Javascript]Alternativa al position:sticky nel CSS Javascript 0
A Strumenti per filtrare il css HTML e CSS 1
S Il Css non si aggiorna, svuotata cache HTML e CSS 6
N [css] :active HTML e CSS 1
Shyson [WordPress] [CSS] Formattare casella WordPress 0
Shyson [CSS] Titolo del sito cambia dimensione HTML e CSS 2
A icone css in selectmenu jQuery 2
M Problematica CSS (tag html,body) HTML e CSS 4
W [C#] Il componente "WebBrowser" non mi esegue css e javascript .NET Framework 0
W inclusioni css in eccesso, cosa fare? HTML e CSS 1
M [WordPress] Modifiche CSS su lightbox WordPress 2
T countdown da sistemare con i CSS... HTML e CSS 4
Y Finestra dialogo CSS Modal HTML e CSS 6
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
D How to learn HTML and CSS? HTML e CSS 2
M CSS posizionamento stile HTML e CSS 2
I [HTML/CSS] Consigli sul mio primo sito HTML e CSS 9
V Galleria con CSS e Javascript Javascript 2
C CSS pagina a schermo intero HTML e CSS 3
V Menù CSS da file in cartella esterna HTML e CSS 4

Discussioni simili