Lorsqu'il s'agit d'améliorer les images, nous pouvons choisir de le faire avec Photoshop puis de le monter sur la page Web ou nous pouvons également choisir l'option B: faites-le avec les techniques HTML, CSS et Javascript disponibles.
Après le saut, il existe de nombreuses techniques pour améliorer les images, presque toutes réalisées avec jQuery comme base principale ou avec CSS3 en profitant des dernières normes Web, même si je vous rappelle que dans ce cas, nous perdons la compatibilité avec certains navigateurs.
Ils sont en anglais mais ils sont pris à la volée, promis :)
Source | 1èreWD
Image arrondie CSS3 avec jQuery
Apprenez à enrouler une balise span autour de l'élément d'image pour obtenir des images arrondies qui seront affichées directement dans tous les navigateurs modernes.
2.
Arrière-plans et bordures multiples avec CSS 2.1
Apprenez à utiliser les pseudo-éléments CSS 2.1 pour fournir jusqu'à 3 toiles d'arrière-plan, 2 images de présentation de taille fixe et plusieurs bordures complexes pour un seul élément HTML.
3.
Astuce rapide: plusieurs bordures avec CSS simple
Screencast rapide vous montrant comment réaliser plusieurs bordures avec un CSS simple de cette façon, ajoutant plus de profondeur à vos conceptions. Version beaucoup plus simple du tutoriel précédent.
4.
Bordures multiples sur des éléments dimensionnés dynamiquement avec CSS2
Troisième version de Nicolas Gallagher vous montre quoi faire si vous n'avez pas la taille de l'élément.
5.
Amusez-vous avec les bordures - biseautées, pressées et plus encore!
Apprenez à obtenir un effet pressé avec CSS et quelques astuces simples de style de bordure pour obtenir divers effets.
6.
Polaroids avec CSS3
Apprenez à utiliser de superbes CSS2 et CSS3 pour transformer une liste d'images autrement sans prétention en un ensemble complet d'images Polaroid.
7.
Image d'arrière-plan pleine page parfaite
Apprenez à ajouter une image d'arrière-plan avec CSS qui remplit toute la page avec une image, sans espace blanc, met l'image à l'échelle selon les besoins, ne provoque pas de barres de défilement et bien plus encore.
8.
Effets d'ombre de boîte CSS3 et de survol d'image
Découvrez une nouvelle façon d'ajouter des effets d'ombre portée simplement en modifiant une feuille de style.
9.
Effet de survol de vignette fantaisie avec jQuery
Obtenez un effet de style flash soigné avec CSS et jQuery.
10.
Comment créer un effet de survol d'image CSS simple
Dans ce didacticiel, vous allez apprendre à créer un effet de survol d'image CSS simple avec un style HTML et CSS de base.
11.
Tutoriel flottant
Floatutorial vous présente les bases des éléments flottants tels que les images, les lettrines, les boutons suivant et précédent, les galeries d'images, les listes en ligne et les mises en page à plusieurs colonnes. Découvrez 4 tutoriels dédiés au flottement d'image.
12.
Effets de survol Snazzy à l'aide de CSS
Dans ce tutoriel, vous allez créer des techniques de survol avancées flexibles à l'aide des propriétés CSS2.1.
13.
Rollovers rapides sans
pré-charge
Lors de l'utilisation de survols d'images CSS, deux, trois images ou plus doivent être chargées (et souvent préchargées pour de meilleurs résultats). Apprenez à mettre tous les états dans une seule image pour accélérer les changements dynamiques et ne nécessite aucune précharge.
14.
Coins arrondis jQuery
Beaucoup d'effets jQuery pour les coins arrondis et bien plus de motifs.
15.
Info-bulle et aperçu d'image les plus faciles à l'aide de jQuery
Voir 3 exemples d'utilisation du script d'aperçu de survol jQuery. Ce script simple peut être appliqué à diverses fins.
16.
Supersized - Arrière-plan plein écran /
Powerpoint
Plugin jQuery
Superzided est un plugin jQuery qui redimensionne les images pour remplir le navigateur tout en conservant le rapport de dimension de l'image et les cycles Images / arrière-plans via un diaporama avec transitions et préchargement.
17.
Superposition PNG
Avez-vous déjà rencontré le problème de créer un site avec des images fournies par le client, pour découvrir plus tard après avoir mis à jour sa photographie que l'aspect et la convivialité d'origine ne sont pas conservés? Cette solution consiste à créer une superposition PNG transparente qui peut être utilisée comme masque / cadre autour du JPEG ou du GIF normal. De cette façon, une installation CMS typique peut être configurée afin que les utilisateurs puissent télécharger des photos sans avoir à se soucier d'utiliser un programme graphique pour appliquer des filtres.
18.
BeZoom
Poids léger
JQuery
Plugin Zoom
BeZoom est une alternative simple et légère pour JQZoomComment. Il est plus léger et plus facile à utiliser.
19.
Utilisation de jQuery pour les animations d'image d'arrière-plan
Jouez avec jQuery et changez la position de l'image d'arrière-plan pour créer le type d'effet que vous recherchez. Un nouvel article répond à la question "Comment gérer les états actifs?" - Gestion de l'état actif pour les arrière-plans animés jQuery.
20.
5 façons de pimenter vos images avec CSS
Voici quelques astuces simples pour ajouter de la saveur à vos images fades typiques. Utiliser Photoshop pour styliser chaque image peut être fastidieux et difficile à maintenir à long terme. Ces techniques CSS suivantes vous aideront à soulager cette douleur.
21.
Comment:
Redimensionnable
Image de fond
Apprenez à configurer une image d'arrière-plan redimensionnable avec CSS. Vous avez le choix entre 3 options.
22.
Style de vos liens d'image
Faire savoir aux utilisateurs qu'une section particulière de notre site Web est destinée à être cliquée est mieux réalisé par un effet de survol de la souris. Ces sections «cliquables» incluent certainement des images de contenu. Image Link est un script qui vous permet d'appliquer un style supplémentaire à vos liens d'image.
23.
Plusieurs images d'arrière-plan avec CSS
Parfois, il est plus judicieux d'utiliser des images d'arrière-plan que de les insérer directement dans la page. Et bien que chaque élément - comme votre balise body - ne puisse contenir qu'une seule image d'arrière-plan, ils peuvent être appliqués à plusieurs éléments.
24.
Bordures d'image avec CSS
Tutoriel vraiment facile vous montrant comment ajouter une bordure solide aux images en utilisant CSS.
25.
Sprites CSS sans utiliser d'images d'arrière-plan
Apprenez à appliquer un effet de survol sans beaucoup de connaissances sur les sprites CSS.
