Articles of css3

È ansible utilizzare il raggio del bordo insieme a un’immagine del bordo con una sfumatura?

Sto disegnando un campo di input che ha un bordo arrotondato (raggio-bordo) e sta tentando di aggiungere un gradiente a detto bordo. Posso creare con successo il gradiente e il bordo arrotondato, ma nessuno dei due lavora insieme. È arrotondato senza gradiente o con un bordo con una sfumatura, ma senza angoli arrotondati. -webkit-border-radius: 5px; […]

SOLO CSS Animazione Disegna il cerchio con il raggio di bordo e lo sfondo trasparente

Sto provando a disegnare un cerchio con il raggio del bordo e ad animarlo. Posso farlo, ma ciò che non posso fare è sovrapporre gli elementi e impostare lo sfondo dei cerchi in modo trasparente, senza hide la maschera. Non sono in grado di renderlo trasparente sugli elementi perché è necessario applicare la maschera per […]

Posso applicare più colors di sfondo con CSS3?

So come specificare più immagini di sfondo usando CSS3 e modificare il modo in cui vengono visualizzate utilizzando diverse opzioni. Attualmente ho un , che deve avere un colore diverso per circa il 30% della larghezza sul lato sinistro: div#content {background: url(“./gray.png”) repeat-y, white; background-size: 30%;} Invece di caricare l’immagine che è completamente grigia, come […]

Stili in linea vs Classi

Nella mia testa, ho sempre saputo usare le classi su stili in linea per qualsiasi progetto. Ma ci sono articoli / postings / blog che definiscono i pro / contro di ciascuno? Sono in un dibattito su questo, e non riesco a trovare il post del blog che ho letto molto tempo fa su questo.

Come aggiungere un bordo nel percorso della clip: poligono (); Stile CSS

Voglio sapere se è ansible aggiungere un border nel mio clip-path:polygon(); stile o un altro modo per aggiungere un bordo? come: border:5px solid red; CSS .poligon { display: inline-block; position:relative; width:150px; height:150px; background: black; box-sizing:border-box; padding:55px; } .poligon img { display: inline-block; border:5px solid red; width:150px; height:150px; -webkit-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% […]

Problema di Webkit CSS Animation – persistente stato finale dell’animazione?

Data la seguente animazione CSS3 …. .drop_box { -webkit-animation-name: drop; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; } @-webkit-keyframes drop { from { -webkit-transform: translateY(0px); } to { -webkit-transform: translateY(100px); } } Hello world Il testo di Hello World si anima come previsto, diminuendo di 100 px. Tuttavia, alla fine dell’animazione, torna alla sua posizione originale. Chiaramente questo […]

Utilizzo dell’attributo dati HTML per impostare l’URL di background-image CSS

Ho in programma di build una galleria fotografica personalizzata per un amico e so esattamente come sto andando a produrre l’HTML, tuttavia sto correndo un piccolo problema con il CSS. (Preferirei che lo stile della pagina non si basasse su jQuery se ansible) La mia domanda riguarda: Data-Attribute in HTML Background-image nei CSS Sto usando […]

Espandi div dal centro invece che solo in alto e a sinistra usando CSS

Non sono sicuro che sia ansible, ma ho pensato che sarebbe stato bello usare le trasformazioni CSS per creare un effetto in cui un div si espande dal suo centro a un’altezza e una larghezza predeterminate, piuttosto che solo dall’angolo in alto a sinistra. Ad esempio, se ho ( demo ) e (prefissi dei produttori […]

Come mettere in pausa e riprendere l’animazione CSS3 utilizzando JavaScript?

Ho provato a cercare su Google e da questo forum una soluzione per il mio problema, ma finora non ho avuto fortuna. Vorrei mettere in pausa la mia animazione CSS3 (slide show di immagini) facendo clic su un’immagine e anche riprendere la stessa animazione facendo clic su un’immagine. So come mettere in pausa la presentazione […]

Come avere più transizioni CSS su un elemento?

È una domanda piuttosto semplice, ma non riesco a trovare una documentazione molto buona sulle proprietà di transizione CSS. Ecco lo snippet CSS: .nav a { text-transform:uppercase; text-decoration:none; color:#d3d3d3; line-height:1.5 em; font-size:.8em; display:block; text-align:center; text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15); -webkit-transition: color .2s linear; -moz-transition: color .2s linear; -o-transition: color .2s linear; transition: […]