Articles of css3

Perché window.width è più piccola della larghezza della viewport impostata nelle media query

Sono abbastanza perplesso e ancora incerto su come spiegarlo in parole appropriate. Finora ho usato e impostato le mie query multimediali con Breakpoint. Una variabile Breakpoint utilizzata assomiglia ad esempio: $menustatictofixed: min-width 900px; $ breakpoint-to-ems è impostato su true. Ho disposto la pagina con tutte le sue variabili Breakpoint in base ai valori dei pixel […]

Altezza CSS3: calc (100%) non funziona

Ho un div che voglio riempire l’intera altezza del corpo meno un numero impostato in pixel. Ma non posso ottenere altezza: calc (100% – 50px) per funzionare. (La ragione per cui voglio farlo è che ho degli elementi che hanno altezze dinamiche basate su alcuni criteri variabili, ad esempio l’altezza delle modifiche dell’intestazione in base […]

Modo pulito per utilizzare a livello di programmazione le transizioni CSS da JS?

Come suggerisce il titolo, c’è un modo corretto per impostare alcune proprietà CSS iniziali (o class) e dire al browser di trasferirle ad un altro valore? Ad esempio ( violino ): var el = document.querySelector(‘div’), st = el.style; st.opacity = 0; st.transition = ‘opacity 2s’; st.opacity = 1; Questo non animerà l’opacità dell’elemento in Chrome […]

Animazione di jquery / Javascript Opacity con scroll

Sto cercando di cambiare l’opacità su un object (e di avere la transizione da animare) in base allo scroll di un utente. Esempio (http://davegamache.com/) Ho cercato ovunque come qui, ma finisce per indicarmi il plugin waypoint (http://stackoverflow.com/questions/6316757/opacity-based-on-scroll-position) Ho implementato il plugin [waypoint] [1] e ho lo sbiadimento dell’object una volta che è superiore a 100px. […]

L’ordine di trasformazione di CSS3 è importante: prima l’operazione più a destra

Quando usiamo la transform: operation1(…) operation2(…) CSS3 transform: operation1(…) operation2(…) , quale viene eseguito per primo? La prima operazione eseguita sembra essere la più a destra. , cioè qui l’ operation2 viene eseguita prima operation1 . Solo per essere sicuro, è vero? Nota: ho letto una cosa e il suo contrario in alcuni punti (risposte, […]

Rileva la modalità a schermo intero

La versione desktop moderna di IE 10 è sempre a schermo intero. C’è una specifica vivente per :fullscreen pseudo-class :fullscreen su W3 Ma quando ho provato a rilevare a schermo intero con jQuery versione 1.9.xe 2.x: $(document).is(“:fullscreen”) ha generato questo errore: Errore di syntax, espressione non riconosciuta: fullscreen Domande: È perché jQuery non riconosce ancora […]

Weird gradient border effect

Quando si applica un bordo trasparente su un elemento con una linear-gradient come sfondo, ottengo un effetto strano. Si noti che i lati sinistro e destro dell’elemento non hanno i colors corretti (sono in qualche modo commutati) e sono stranamente piatti . HTML CSS .colors { width: 100px; border: 10px solid rgba(0,0,0,0.2); height: 50px; background: […]

Come creare un triangolo arrotondato a 3 angoli nei CSS

Mi piacerebbe ottenere una forma colorata come questa senza Javascript: Attualmente sto sovrapponendo un’immagine del ‘frame’ su un div rettangular arancione, ma questo è piuttosto hacky. Suppongo che potrei usare un elemento canvas generato dynamicmente, ma che non solo richiede JS, ma il supporto canvas HTML5. Qualche idea?

Text Shadow in Internet Explorer?

Sto codificando una pagina web ed ecco come appare in Firefox, Safari, Opera e Chrome. rimosso link di ImageShack morto ed ecco come appare in Internet Explorer (preparatevi) rimosso link di ImageShack morto Dov’è il Text-shadow per Internet Explorer? Questo mi sta facendo impazzire! Come puoi vedere, questa pagina si basa su di esso per […]

Linee curve che utilizzano solo HTML e / o CSS

Ho bisogno di aggiungere linee curve che collegano i nodes di un diagramma in HTML. Voglio crearli usando solo HTML e / o CSS . Sto bene con CSS3 anche se non tutti i browser supportano la funzione di cui ho bisogno (in particolare non mi interessa molto di IE8 e di seguito). Qui ci […]