Expresa-la

Outra tut rápido. Aquí é algo sinxelo e agradable usando o poder do CSS ... pero foi concieve difícil (e por suposto non era eu), para comezar. Engadido Dropshadow, pode ser unha peza de bolo para moitos de nós, usando algunhas ferramentas de edición de imaxe como Photoshop ANF fogos de artificio, etc
A razón pola que, optei por sombra usando CSS é que, xeralmente durante a creación dun deseño de páxina / html dunha aplicación, os requisitos de manter a iteração. O que quero dicir é, en un sitio xa existente, con moitas imaxes, como as que exhiben freinds lista ou unha galería de imaxes, será difícil para o reprocesando de toda a carga de imaxes que xa foran descargadas para engadir ou eliminar as sombras, para que materia.
Entón, se fixo un pouco de pensamento fronte ao crear os htmls para engadir esas divisións extras ou xeralmente a situación é que ten unha lóxica de loop xerando eses iconos / Miniaturas en XSL, PHP. Java ou calquera linguaxe de programación / script outro, pode engadir-la en calquera momento, é só a cuestión de mostrar e ocultar esas sombras usando a propiedade Mostrar CSS, por clientes en constante cambio requisitos ... Eu havn't feito este tipo de visión de futuro antes diso ... pero ahev comezou xa!

No seguinte exemplo, a imaxe orixinal é a sombra libre e as dropshadows son aplicados polo que sexa! Ademais, eu ir un pouco máis, a usar os trucos da miña Tut anteriores (Well! estes son, probabelmente, menor variedade de tutoriais, por iso só se xustifica chamalos de "Tut" 's) sobre Usando CSS propiedade do clip para mostrar só

Imaxe orixinal

Dropshadow Resultados CSS

Vexa o Demo | Descargar SourceFiles

Pon Stylesheets na parte superior

Se queres unha páxina para subir progresivamente, é dicir, queremos que o navegador para amosar calquera contido ten o máis breve posible, engada o CSS do principio da páxina dentro da cabeceira do documento. Isto fai que as páxinas parecen ser máis rápido carga, como esta facilita procesamento progresiva da páxina. Isto é especialmente importante para as páxinas con moito contido e para os usuarios en conexións máis lentas.

É un feito documentado que para mellorar a experiencia xeral do usuario, é importante para proporcionar indicadores de progreso e feedbacks visuais. Para evitar ter que redeseñar os elementos da páxina, no seu caso, a súa mudanza de estilo, algúns navegadores, incluíndo o IE, bloques de renderización da páxina ata a CSS está totalmente cargada. Debido a iso, o usuario é pode ver unha páxina en branco.

Os W3 especificacións de HTML dos tamén afirma que a CSS que me incluír na sección HEAD da páxina HTML. at the bottom of the page, so it's best not to use it. Teña en conta que, no IE @import se comporta o mesmo que usar <link> na parte inferior da páxina, polo que é mellor non usalo.

Evite utilizar características específicas do navegador

Filtros: uso do filtro aumenta o consumo de memoria e é aplicado por elemento, non por imaxe, entón o problema é multiplicado. Ademais, os filtros son IE Propietario, así que non vai funcionar conforme o esperado en outros navegadores. Se queres fondos transparentes ou gradiente, usa 1pixel con imaxes.
Expressions: expresións de CSS son un bo recurso para ter en CSS, senón que é característica específica do IE. Ademais, é importante ter en conta que, estas expresións son valorada cando a páxina é procesada e redimensionadas, rodado e mesmo cando o usuario move o rato sobre a páxina. Nin que dicir ten que isto podería afectar o desempeño da súa páxina. Así, en palabras simples, evite utilizar expresións CSS, a menos que sente os seus pros "pesa máis do que os seus contras '

Externalizar vostede CSS

Usando CSS externo ha producir unha subida máis rápido de páxinas porque os arquivos Javascript e CSS se almacenan en cache polo navegador. CSS liña en documentos HTML son baixadas sempre que o documento HTML é solicitada. Isto pode efectivamente reducir o número de solicitudes HTTP feitas pero posteriormente aumenta o tamaño do documento HTML. CSS externo se almacenan en cache polo navegador, o tamaño do documento HTML é reducido sen aumentar o número de solicitudes HTTP.

Teña en conta que, se os usuarios do seu sitio web ten varias exhibicións de páxina por sesión e moitas das súas páxinas reutilizar os mesmos guións e follas de estilo, hai un beneficio maior potencial de caché de ficheiros externos.

Abale seu arquivo CSS

Embalaxe ou esmaga CSS é a práctica de retirar caracteres innecesarios do código para reducir o seu tamaño, así, mellorar os tempos de carga.

O CSS me pode esmagar, eliminando todos os comentarios e ningún carácter non desexados, como espazos en branco, novas liñas etc

A redefinición CSS é / son CSS para definir un número de estilos de elementos para unha liña de base específica que crea consistencia entre varios navegadores.

Todos nós fomos a través dos pesadelos de escribir CSS cross-browser do. Entón, cando comezamos a escribir o noso CSS, é unha práctica para redefini-la primeiro para eliminar / redefinir as inconsistencia cross navegador. Redefine CSS, son simples liñas de CSS que comeza o seu CSS con, dándolle unha base limpa para empezar a construír o seu enriba.

O redefine CSS normalmente tenden a usar esta aparencia

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;
}

ul, ol {
list-style: none;
}

h1, h2, h3, h4, H5, H6 {
font-size: 100%;
font-Weight: normal;
}

Restablecer o tamaño da fonte navegador
Ademais, conta a reposición que foi aplicado ao tamaño do navegador de fonte na liña seguinte ...

html {font-size: 76%;}

O CSS enriba redefine o tamaño da fonte navegador a 10 píxeles, o que fai posible traballar con tamaños de fontes relativos (que é todo importante a partir dun acordo WAI prespective)
Por exemplo, na seguinte definición, tamaño da fonte nun período defínese como 10 píxeles e que na do n ° defínese por 14 píxeles ...

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

Por exemplo.
Especificando unha propiedade CSS coma este,

Margin: 5px 0;

realmente significa,

Margin: 5px 0px 5px 0px;

Esta propiedade primeira marxe significa:

marxes superior e inferior = 5px | | marxe esquerda e dereita = 0px

de xeito que o "acceso máis 'sería

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

podería ata usar 3 valores

Margin: 5px 0 5px;

o que significa

top = 5px | | dereito e esquerdo = 0px | | fondo = 5px

Internet Explorer engade automaticamente o recheo de botóns en formularios HTML.
Este espazo esténdese segundo a lonxitude do texto do botón.

A solución é engadir estourido do seu estilo .... é dicir

. Botón {
overflow: visible;
padding-left: 10px importante;
padding-right: 10px importante;
... Calquera outro estilo para este botón ...
}

OR

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