È possibile utilizzare CSS3 per applicare la dissolvenza in entrata e in uscita su uno sfondo bianco solido di uno <div>? il contenuto dovrebbe rimanere visibile in modo che solo lo sfondo dovrebbe svanire.Crea dissolvenze in background/in
Qualsiasi idea che usi transizioni/trasformazioni css3?
grazie per il vostro aiuto.
Certo, è possibile utilizzare il transition property direttamente sul background-color:
div {
background-color: white;
/* transition the background-color over 1s with a linear animation */
transition: background-color 1s linear;
}
/* the :hover that causes the background-color to change */
div:hover {
background-color: transparent;
}
Ecco an example di uno sfondo rosso dissolvenza su :hover.
Potete trovare questo utile per gli esempi di immagine e di colore di sfondo sfuma: - http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html
Tuttavia usando i CSS 3 per fare la transizione limiterà l'effetto per i browser che non lo supportano.
approccio molto bello, +1 per una buona guida – doniyor
Si possono avere due divs in un contenitore div. Il primo div contiene lo sfondo bianco, il secondo ottiene il contenuto.
Quindi, utilizzare una trasformazione CSS3 per animare l'opacità del primo div a zero.
Grazie per il suggerimento. Alla fine ho impostato il primo colore in linea sul div e il secondo colore (ad esempio bianco) esterno come sfondo-colore: bianco! Importante; così come la proprietà di transizione. – Frank
Non sapevo che si potesse effettivamente animare il colore di sfondo. Penso che sia molto meglio della mia soluzione :) – Husky
@Husky Le transizioni sono piuttosto eccellenti, ma non vedo l'ora che possiamo rilasciare tutti i prefissi specifici del browser. – Pat
potresti usare LESS/SASS e usare i mixin lì. Almeno lo rende sopportabile se usi molte proprietà CSS3. – Husky