Articles of css3

Capovolgi una carta 3D con CSS

Sto provando a fare un effetto di capovolgimento della carta 3D con CSS come questo. La differenza è che voglio usare solo i CSS per implementarlo. Ecco il codice che ho provato: /*** LESS: ***/ .card-container { position: relative; height: 12rem; width: 9rem; perspective: 30rem; .card { position: absolute; width: 100%; height: 100%; div { […]

Combina: ultimo-bambino con: selettore non (. Class) in CSS

È ansible scegliere l’ultimo figlio che NON ha una attr? Come tale: … … … … Voglio selezionare la terza riga, in questo caso. Ho provato quanto segue, che non ha funzionato: tr:not(.table_vert_controls):last-child Grazie in anticipo.

L’animazione CSS3 non funziona in safari

Ho un po ‘di animazione CSS3 che funziona perfettamente in tutti i browser che supportano CSS3 tranne Safari. Strano non è vero? Ok ecco il mio codice: HTML CSS .landing .board .right { width: 291px; height: 279px; background: url(‘../images/landing/key-pnl.png’); bottom: 16px; right: 250px; position: absolute; } .landing .board .right .key-arm { position: absolute; left: 44px; […]

Il mio Footer Floats

Ho provato varie soluzioni “appiccicose” a piè di pagina per la parte migliore di tre giorni senza successo. Cerco di posizionare il piè di pagina nella parte inferiore della finestra del browser nei casi in cui non è presente abbastanza contenuto per coprire l’intera altezza della finestra. Per favore. Aiuto. Ecco la struttura di base […]

Mantenere il rapporto di aspetto div in base all’altezza

Devo mantenere la larghezza di un elemento come percentuale della sua altezza . Così come l’altezza cambia, la larghezza viene aggiornata. È ansible ottenere il contrario utilizzando un valore% per padding-top, ma padding-left come percentuale sarà una percentuale della larghezza di un object, non la sua altezza. Quindi con markup come questo: Mi piacerebbe usare […]

Scorrimento inverso

Ho difficoltà a trovare una soluzione a ciò che sto cercando di realizzare. Sto cercando di utilizzare JS (o librerie aggiuntive) per fare in modo che quando l’utente scorre verso il basso sulla rotellina del mouse la pagina scorre in senso opposto rispetto a quello che normalmente farebbe. Fondamentalmente, voglio che venga visualizzato prima il […]

Impostare una lunghezza (altezza o larghezza) per un elemento meno la lunghezza variabile di un altro, cioè calc (x – y), dove y è sconosciuto

So che possiamo usare calc quando le lunghezze sono definite: flex-basis: calc(33.33% – 60px); left: calc(50% – 25px); height: calc(100em/5); Ma cosa succede se una lunghezza è variabile? height: calc(100% – <>); O width: calc(100% – 50px – <>); C’è un modo standard per farlo in CSS? So che il compito generale è ansible con […]

Angoli arrotondati trasparenti su Google Map

Devo fare del mio google map V3 un giro completo. Uso il raggio del bordo CSS3 su di esso, ma funziona correttamente solo in Firfox, altri lo lasciano semplicemente rettangular. Ecco i codici: … e CSS: .map.mapCircle { width: 476px; height: 476px; } .mapCircle>div>div:first-child { -moz-border-radius: 238px; -webkit-border-radius: 238px; border-radius: 238px; } Sì, lo so, […]

Animazione CSS3 con sfumature

Non c’è davvero alcun modo per animare uno sfondo sfumato con i CSS? qualcosa di simile a: @-webkit-keyframes pulse { 0% { background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(196,222,242)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240))); } 50% { background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(222,252,255)), color-stop(0.5, rgb(242,242,242)), color-stop(1, rgb(240,240,240))); } 100% { background: -webkit-gradient(linear, left […]

Usando le animazioni CSS3 in IE9 +

Ho cercato di far funzionare queste animazioni CSS3 in IE9 per alcune ore oggi e sono perplesso! Ho provato a implementare alcuni fallback JavaScript, ma la mia conoscenza è molto limitata, quindi hanno fallito. Non sono sicuro se si è verificato un errore a causa di errori o errori di codice dell’utente. Ecco un jsFiddle […]