Expresando TI

Otro tut rápida. Aquí hay algo sencillo y agradable usar el poder del CSS ... pero era concibian difícil (y seguramente no era yo), para empezar. Adición de Sombra, podría ser un pedazo de pastel para muchos de nosotros, usando algunas herramientas de edición de imágenes como Photoshop ANF fuegos artificiales, etc
La razón por la cual, he optado por el uso de CSS sombra es que, por lo general, mientras que la creación de un diseño de página / HTML de una aplicación, los requisitos de mantener la iteración. Lo que quiero decir es, en un sitio web existente con muchas imágenes, como las que muestran la lista freinds o una galería de imágenes, que será difícil volver a procesar toda la carga de las imágenes que ya habían sido descargadas para agregar o quitar las sombras, para que materia.
Así que si usted ha hecho un poco de visión de futuro al crear los htmls para añadir estas divisiones adicionales o por lo general la situación es que usted tiene una lógica de bucle generación de estos iconos o imágenes en miniatura en XSL, PHP. Java o cualquier otro lenguaje de programación / scripting, se puede añadir en cualquier momento, entonces es sólo la cuestión de mostrar y ocultar las sombras mediante la propiedad CSS Display, de acuerdo con las cambiantes necesidades de los clientes cada vez ... yo no te has hecho este tipo de visión de futuro antes de esto ... pero ahev empieza ya!

En el siguiente ejemplo, la imagen original es libre de sombras y los dropshadows se aplican según sea necesario! Además, he ido un poco más, mediante el uso de los trucos de mi anterior Tut (bien! estos probablemente son las más cortas variedad de tutoriales, por lo que sólo se justifica que califica de "Tut" 's) sobre uso de la propiedad CSS clip para mostrar sólo

Imagen original

CSS Resultados DropShadow

Ver demo | Descargar SourceFiles

Coloque hojas de estilo en la parte superior

Si quieres una página se cargue progresivamente, es decir, queremos que el navegador muestre el contenido de lo que tiene, tan pronto como sea posible, poner el CSS en la parte superior de la página dentro de la cabecera del documento. Esto hace que las páginas parecen estar de carga más rápido, ya que esto facilita la representación progresiva de la página. Esto es especialmente importante para las páginas con mucho contenido y para los usuarios de conexiones a Internet más lentas.

Es un hecho documentado de que para mejorar la experiencia general del usuario, es importante proporcionar a los indicadores de progreso y la retroalimentación visual. Para evitar tener que volver a dibujar los elementos de la página, en caso de que si cambian sus estilos, algunos navegadores, como Internet Explorer, los bloques de la representación de la página hasta que el CSS se carga totalmente. Debido a esto, el usuario es llega a ver una página en blanco.

Las especificaciones HTML de W3 también establece que la CSS debe incluirme en la sección HEAD de la página HTML. at the bottom of the page, so it's best not to use it. También tenga en cuenta que, en la IE @import se comporta de la misma como el uso de <link> en la parte inferior de la página, así que es mejor no usarlo.

Evitar el uso de las características específicas del navegador

Filtros: El uso de filtros aumenta el consumo de memoria y se aplica por cada elemento, no por imagen, por lo que el problema se multiplica. Además, los filtros son de propiedad exclusiva de IE, por lo tanto no va a funcionar como está previsto en otros navegadores. Si quieres un fondo transparente o gradiente, use 1pixel con imágenes.
Las expresiones: expresiones CSS son una buena característica a tener en CSS, pero todavía es una característica específica de IE. Además, es importante señalar que, estas expresiones son evalúa cuando se procesa la página y cambiar de tamaño, desplazarse e incluso cuando el usuario mueve el puntero del ratón sobre la página. Huelga decir que esto podría afectar el rendimiento de su página. Por eso, en palabras simples, Evite el uso de expresiones CSS, a menos que sienta sus pros 'pesa más que sus contras "

Externalizar a CSS

El uso de CSS externa se traducirá en una carga más rápida de la páginas debido a que los archivos JavaScript y CSS son cacheadas por el navegador. CSS en línea en los documentos HTML se descargan cada vez que se solicita el documento HTML. En realidad, esto podría reducir el número de peticiones HTTP realizadas pero posteriormente aumenta el tamaño del documento HTML. CSS externa se almacenan en caché por el navegador, el tamaño del documento HTML se reduce sin aumentar el número de peticiones HTTP.

Tenga en cuenta que, si los usuarios de su sitio con vistas de varias páginas por sesión y muchas de sus páginas de volver a utilizar los mismos scripts y hojas de estilo, hay un mayor beneficio potencial de la caché de archivos externos.

Empaca tus archivos CSS

Embalaje o crujido de su CSS es la práctica de la eliminación de caracteres innecesarios del código para reducir su tamaño con objeto de optimizar los tiempos de carga.

La CSS puede que me crujía mediante la eliminación de todas las observaciones y los personajes no deseados, como los espacios en blanco, saltos de línea, etc

Un reajuste CSS / CSS son para establecer una serie de estilos de los elementos de una línea de base específica que crea consistencia a través de diferentes navegadores.

Todos hemos sido a través de las pesadillas de la escritura de cross-browser CSS. Así que cuando comenzamos a escribir el código CSS, es una práctica para restablecer en primer lugar, para eliminar / restaurar las incoherencias en cualquier navegador. Restablece CSS, son simples líneas de CSS que usted comienza su CSS, dándole una base limpia para empezar a construir su sobre.

Los reajustes de CSS que normalmente tienden a utilizar este aspecto

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 el tamaño de fuente del navegador
También tenga en cuenta el reajuste que se ha aplicado al tamaño del navegador de fuente en la siguiente línea ...

html {font-size: 76%;}

Lo anterior se restablece el código CSS del tamaño de la fuente del navegador de 10 píxeles, y esto hace que sea posible trabajar con tamaños de fuente relativos (que es todo importante desde el cumplimiento de prespectiva WAI)
Por ejemplo, en la siguiente definición, tamaño de fuente en un lapso es de 10 píxeles, y que en el paragarph se establece en 14 píxeles ...

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

Por ejemplo.
Especificación de una propiedad CSS de esta manera,

margin: 5px 0;

significa en realidad,

margin: 0px 5px 5px 0px;

Que la propiedad margen de los primeros medios:

márgenes superior e inferior = 5px | | Margen izquierda y derecha = 0px

por lo que el 'taquigrafía ya' sería

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

incluso se podría utilizar 3 valores

margin: 5px 0 5px;

lo que significa

top = 5px | | izquierda y derecha = 0px | | = abajo 5px

Internet Explorer agrega automáticamente a los botones en el relleno de formularios HTML.
Este espacio se extiende según la longitud del texto del botón.

La solución es añadir desbordamiento a su estilo .... es decir,

. Botón {
overflow: visible;
padding-left: 10px importante;
padding-right: 10px importante;
... Cualquier otro estilo de este botón ...
}

O

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