L'exprimer

Un autre tut rapide. Voici quelque chose de simple et agréable en utilisant la puissance des CSS ... mais il était d'enfant au difficile (et il n'était sûrement pas moi) pour commencer. Ajout DropShadow, peut-être un peice de gâteau pour beaucoup d'entre nous, en utilisant certains outils d'édition d'image comme Photoshop anf Fireworks etc
La raison pour laquelle, j'ai opté pour une ombre portée en utilisant le CSS, c'est que, généralement, tout en créant un modèle de page / html d'une demande, les exigences garder itération. Ce que je veux dire, c'est, dans un site Web existant avec beaucoup d'images, comme celles Affichage de la liste freinds ou une galerie d'images, il sera difficile de retraiter l'ensemble du chargement des images qui avaient déjà été déchargés d'ajouter ou de supprimer les ombres, pour que question.
Donc, si vous avez fait un peu de réflexion avant tout en créant les HTMLS d'ajouter ces divisions supplémentaires ou plus souvent la situation, c'est que vous avez une logique de boucle générer ces icônes ou vignettes dans XSL, PHP. JAVA ou de toute autre programmation / langage de script, vous pouvez l'ajouter à tout moment, est alors seulement la question de spectacle et de cacher ces ombres en utilisant la propriété CSS display, comme par les clients en constante évolution des exigences ... je havn't fait ce genre de réflexion prospective avant cette ... mais ahev dès maintenant!

Dans l'exemple ci-dessous, l'image originale est libre et l'ombre des dropshadows sont appliquées selon les besoins! AUSSI, je suis allé un peu plus, en utilisant les tours de mon Tut plus tôt (Well! ces sont probablement plus courte variété de tutoriels, de sorte qu'il ne se justifie que les qualifiant de «Tut» 's) au sujet de l'aide de la propriété CSS clip pour montrer que

Image de l'original

Résultats Ombre CSS

Voir la démo | Télécharger SourceFiles

Mettez les feuilles de style au sommet

Si vous voulez une page à charger progressivement; qui est, nous voulons que le navigateur pour afficher n'importe quel contenu elle a le plus tôt possible, mettre le CSS dans le haut de la page à l'intérieur du HEAD du document. Cela rend les pages semblent être plus rapide le chargement, ce qui facilite le rendu progressif de la page. Ceci est particulièrement important pour les pages avec beaucoup de contenu et pour les utilisateurs sur les connexions Internet lentes.

Il est un fait documenté que pour améliorer l'expérience utilisateur globale, il est important de fournir des indicateurs de progrès et de rétroactions visuelles. Pour éviter d'avoir à redessiner les éléments de la page, dans le cas si leur changement styles, certains navigateurs, y compris IE, rendu blocs de la page jusqu'à ce que le CSS est complètement chargée. Pour cette raison, l'utilisateur est arrive à voir une page vierge.

Les spécifications HTML W3 », déclare également que le CSS doit m'inclure dans la section HEAD de la page HTML. at the bottom of the page, so it's best not to use it. A noter également que, dans IE @import se comporte de la même que l'utilisation <link> au bas de la page, il est donc préférable de ne pas l'utiliser.

Évitez d'utiliser les caractéristiques spécifiques du navigateur

Filtres: utilisation du filtre augmente la consommation de mémoire et est appliquée par élément, et non par l'image, de sorte que le problème est multiplié. En outre, les filtres sont IE propriétaire, par conséquent, ne fonctionnera pas comme prévu dans d'autres navigateurs. Si vous voulez un fond transparent ou dégradé, utilisez 1Pixel avec des images.
Expressions: expressions CSS sont une caractéristique agréable d'avoir en CSS, mais il est encore IE fonctionnalité spécifique. En outre, il est important de noter que, ces expressions sont évaluée lorsque la page est rendue et redimensionnée, défile et même lorsque l'utilisateur déplace la souris sur la page. Inutile de dire que cela pourrait affecter les performances de votre page. Par conséquent, dans des mots simples, éviter d'utiliser des expressions CSS, à moins que vous vous sentez ses avantages »pèse plus que ses inconvénients»

Externaliser vous CSS

L'utilisation de CSS externe se traduira par un chargement plus rapide des pages, car les fichiers JavaScript et CSS sont mis en cache par le navigateur. Inline CSS dans les documents HTML se téléchargées à chaque fois le document HTML est demandée. Cela pourrait effectivement réduire le nombre de requêtes HTTP faites, mais il augmente par la suite la taille du document HTML. CSS externe sont mises en cache par le navigateur, la taille du document HTML est réduite sans pour autant augmenter le nombre de requêtes HTTP.

S'il vous plaît noter que, si les utilisateurs sur votre site ont une vue de plusieurs pages par session et nombre de vos pages réutiliser les mêmes scripts et feuilles de style, il ya un plus grand bénéfice potentiel de mise en cache des fichiers externes.

Emballez votre fichier CSS

D'emballage ou de croquer votre CSS est la pratique de la suppression des caractères inutiles à partir du code pour réduire sa taille ce qui améliore les temps de chargement.

Le CSS peut me croquer en supprimant tous les commentaires et les caractères indésirables tels que des espaces blancs, sauts de ligne, etc

Un Reset CSS est / sont les CSS pour définir un certain nombre de styles d'élément à un niveau de référence spécifique qui crée la cohérence entre les différents navigateurs.

Nous avons tous été à travers les cauchemars de l'écriture cross-browser CSS. Ainsi, lorsque nous commencer à écrire notre CSS, Il s'agit d'une pratique pour réinitialiser d'abord de supprimer / réinitialiser toutes les incohérences Croix-navigateur. Réinitialise CSS, sont de simples quelques lignes de CSS que vous commencez votre CSS avec, en vous donnant une base propre pour commencer à construire votre sur.

Le CSS que je réinitialise normalement ont tendance à utiliser ressemble à ceci

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

Réinitialiser la taille de police navigateur
A noter également la remise à zéro qui a été appliquée à la taille de police du navigateur dans la ligne suivante ...

html {font-size: 76%;}

Le réinitialise ci-dessus la taille de police CSS navigateur à 10 pixels, ce qui rend possible de travailler avec les tailles de police relatives (qui est tout à partir d'une importante respect WAI prespective)
Pour exemple, dans la définition suivante, font-size dans une travée est fixée à 10 pixels et que dans le paragarph est fixé à 14 pixels ...

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

Par exemple.
Spécification d'une propriété CSS comme ceci,

margin: 5px 0;

signifie en fait,

margin: 0px 5px 5px 0px;

Cette propriété margin premier moyen:

marge supérieure et bas = 5px | Marge de gauche et droite = 0px

de sorte que le «raccourci plus» serait

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

vous pourriez même utiliser 3 valeurs

margin: 5px 0 5px;

ce qui signifie

haut = 5px | | Droite et gauche = 0px | | bas = 5px

Internet Explorer ajoute automatiquement un remplissage à boutons dans les formulaires HTML.
Cet espace s'étend selon la longueur du texte du bouton.

La solution est d'ajouter de débordement à son style .... c.-à-

. Bouton {
overflow: visible;
padding-left: 10px importante;
padding-right: 10px importante;
Tout autre style ... pour ce bouton ...
}

OU

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