Esprimere IT

Un altro tut veloce. Ecco qualcosa di semplice e piacevole utilizzando il potere del CSS ... ma era concieve difficile (e sicuramente non ero io) per cominciare. Aggiunta Dropshadow, potrebbe essere un pezzo del dolce per molti di noi, utilizzando alcuni strumenti di editing di immagini come Photoshop ANF Fireworks, ecc
Il motivo per cui, ho optato per ombra con i CSS è che, di solito durante la creazione di una struttura di pagina / html di una domanda, i requisiti di mantenere l'iterazione. Quello che voglio dire è, in un sito web esistente con molte immagini, come quelle che mostrano lista freinds o una galleria di immagini, sarà difficile per rielaborare l'intero carico di immagini che erano già stati scaricati per aggiungere o rimuovere le ombre, per quel materia.
Quindi, se avete fatto un po 'il pensiero in avanti, mentre i file HTML per la creazione di aggiungere queste divisioni extra o in genere la situazione è che hai un loop Logic generare queste icone / miniature in XSL, PHP. JAVA o di qualsiasi altro di programmazione / scripting language, è possibile aggiungere in qualsiasi momento, è quindi solo questione di spettacolo e hai tenuto nascoste queste ombre utilizzando la proprietà CSS display, come per i clienti mutevoli esigenze ... I Havn't fatto questo genere di trasmettere il pensiero prima di questo ... ma ahev Inizia ora!

Nell'esempio riportato di seguito, l'immagine originale è l'ombra di libero e le dropshadows vengono applicate come richiesto! Inoltre, ho fatto un piccolo extra, utilizzando i trucchi della mia precedente Tut (Well! questi sono probabilmente più breve serie di Tutorials, quindi è giustificato solo chiamandoli "Tut" 's) su CSS utilizzando la proprietà clip per mostrare solo

Immagine originale

CSS DropShadow Risultati

Visualizza Demo | Scarica SourceFiles

Mettete i fogli di stile Top

Se si desidera che una pagina da caricare progressivamente; che è, vogliamo che il browser per visualizzare qualsiasi contenuto che ha il più presto possibile, mettere il CSS nella parte superiore della pagina all'interno del documento. Questo rende pagine sembrano essere caricamento più rapido, in quanto questo facilita la resa progressiva della pagina. Questo è particolarmente importante per le pagine con un sacco di contenuti e per gli utenti di connessioni Internet lente.

È un fatto documentato che per migliorare l'esperienza complessiva dell'utente, è importante fornire indicatori di avanzamento e feedback visivi. Per evitare di dover ridisegnare gli elementi della pagina, nel caso in cui il loro cambiamento degli stili, alcuni browser, tra cui IE, rendering blocchi della pagina fino a che il CSS è stato caricato completamente. A causa di questo, l'utente è riesce a vedere una pagina bianca vuota.

I W3 Specifiche HTML dei afferma inoltre che il CSS mi deve includere nella sezione HEAD della pagina HTML. at the bottom of the page, so it's best not to use it. Si noti inoltre che, in IE @import comporta allo stesso modo utilizzando <link> in fondo alla pagina, quindi è meglio non usarlo.

Evitare l'utilizzo di specifiche funzioni del browser

Filtri: uso del filtro aumenta il consumo di memoria e viene applicato per ogni elemento, non per immagine, per cui il problema è moltiplicato. Inoltre, i filtri vengono IE proprietario, quindi non funziona come previsto in altri browser. Se si desidera che lo sfondo trasparente o sfumato, utilizzare 1Pixel con le immagini.
Espressioni: espressioni CSS sono una bella caratteristica di avere in CSS, ma è ancora IE funzionalità specifica. Inoltre, è importante notare che, queste espressioni sono valutata quando la pagina viene visualizzata e ridimensionato, volute e anche quando l'utente sposta il mouse sulla pagina. Inutile dire che questo potrebbe influire sulle prestazioni della tua pagina. Quindi, in parole semplici, evitare di utilizzare le espressioni CSS, a meno che non si sente i suoi pro 'pesa di più rispetto ai suoi cons'

Esternalizzare si CSS

Utilizzo di CSS esterni si tradurrà in caricamento più veloce di pagine perché i file JavaScript e CSS sono memorizzati nella cache dal browser. Inline CSS nei documenti HTML vengono scaricati ogni volta che viene richiesto il documento HTML. Questo potrebbe effettivamente ridurre il numero di richieste HTTP effettuate successivamente ma aumenta la dimensione del documento HTML. CSS esterna vengono memorizzati nella cache dal browser, la dimensione del documento HTML viene ridotto senza aumentare il numero di richieste HTTP.

Si prega di notare che, se gli utenti sul tuo sito hanno viste di più pagine per sessione e molte delle tue pagine riutilizzare gli stessi script e fogli di stile, vi è un maggiore beneficio potenziale cache file esterni.

Confezione File CSS

Imballaggio o sgranocchiare il CSS è la pratica di rimuovere i caratteri non necessari dal codice per ridurne le dimensioni migliorando in tal modo i tempi di caricamento.

Il CSS può mi scricchiolava rimuovendo tutti i commenti e gli eventuali caratteri indesiderati come spazi bianchi, a capo ecc

Un reset CSS è / sono i CSS per impostare una serie di stili di elementi in una linea di base specifica che crea coerenza tra i vari browser.

Tutti siamo stati passante gli incubi di scrittura cross-browser CSS. Così, quando abbiamo iniziato a scrivere il nostro CSS, E 'una pratica per reimpostarla prima di rimuovere / ripristinare eventuali incoerenze cross browser. Ripristina CSS, sono semplici poche righe di CSS che iniziano con il CSS, fornendo una base pulita per iniziare a costruire il vostro momento.

Il reset CSS che normalmente tendono a utilizzare il seguente aspetto

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ol, ul {
list-style: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}

Ripristina la dimensione del carattere del browser
Da notare anche il reset che è stato applicato alla dimensione del font del browser nella riga seguente ...

html {font-size: 76%;}

Quanto sopra CSS azzera la dimensione del carattere del browser a 10 pixel, e questo rende possibile lavorare con dimensioni relative per i font (che è ogni importante dal punto di conformità WAI prespective)
Per esempio, nella seguente definizione, font-size in un arco è impostata a 10 pixel e che nel paragarph è impostato a 14 pixel ...

span {font-size: 1em;}
p {font-size: 1.4em;}

Eg.
Specificando una proprietà CSS come questo,

margin: 5px 0;

significa in realtà,

margin: 5px 5px 0px 0px;

Che la proprietà primo margine si intende:

margine superiore e inferiore = 5px | | margine sinistro e destro = 0px

così la 'scorciatoia più' sarebbe

margin: 5px 5px 0px 0px; (T, R, B, L)

si potrebbe anche usare 3 valori

margin: 5px 5px 0;

che significa

top = 5px | | destra e sinistra = 0px | | bottom = 5px

Internet Explorer aggiunge automaticamente padding ai pulsanti nei moduli HTML.
Questo spazio estende in base alla lunghezza del testo del pulsante.

La soluzione è aggiungere overflow per il suo stile .... vale a dire

. Button {
overflow: visible;
padding-left: 10px importante;
padding-right: 10px importante;
Qualsiasi altro stile ... per questo pulsante ...
}

O

< input type="submit" value="Internet explorer respects my padding" style="overflow:visible; padding-left:10px !important; padding-right:10px !important;" >;