sushiandbox.ru Maîtriser PC - Internet. Skype. Réseaux sociaux. Cours Windows.
Il existe de nombreuses façons d’agrandir une image sur un site Web. Nous examinerons plusieurs façons d'agrandir des images sans utiliser de scripts supplémentaires, en utilisant simplement du HTML et du CSS.
De telles méthodes vous permettent de visualiser rapidement l'original, car il n'y a pas de chargement supplémentaire de scripts, cependant, si vous souhaitez ouvrir des images originales à l'aide de scripts avec de beaux effets, ou créer une galerie, je vous recommande de prêter attention aux articles suivants :
J'ai fait une digression lyrique, commençons.
Agrandir l'image sur le site WebL'avantage est que vous n'avez pas besoin de créer une vignette distincte pour l'image originale. Il n'y a qu'une seule image impliquée ici
Agrandit l'image sur le site au survol du curseurLa première et la plus simple manière agrandir l'image sur le site, consiste à ajouter le code suivant à la propriété image entre les balises img :
onmouseover="this.style.width="largeur de l'image originale en px (ou auto)"" onmouseout="this.style.width="largeur de l'image réduite en px""
Autrement dit, lorsque vous passez le curseur une fois, l'image deviendra plus grande.
Code complet :
img.bg ( curseur : pointeur ; largeur maximale : 100 px ; // largeur de la vignette ; ) img.bg:hover ( largeur maximale : aucune ; )
Et la dernière est la plus belle façon de zoomer en survol en utilisant . Ici, nous ajouterons un cadre et une description à la grande image.
Code:
La méthode d'image cliquer pour agrandir est similaire à la toute première méthode de survol pour zoomer, mais au lieu de onmouseover, nous utiliserons onclick
Résultat:
Comme vous pouvez le voir, ici, pour agrandir l'image, il faut cliquer dessus, et si vous retirez le curseur, elle sera automatiquement réduite.
Dans la prochaine version agrandir l'image sur le site au clic nous utiliserons :
.click (largeur : largeur de l'image miniature en px ; curseur : pointeur ; affichage : en ligne ; ).click : focus (largeur : largeur de l'image originale en px (ou auto) ; z-index : 100 ;)
Ici, afin de réduire l'image, c'est-à-dire de la ramener à sa taille d'origine, vous devrez cliquer n'importe où sur la page Web.
Résultat:
Une autre option à utiliser consiste à agrandir l’image en cliquant en haut du texte. Ici nous utilisons le code suivant :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | .blokimg (position : relative ;) .overlay( affichage : aucun ; hauteur : auto ; position : absolue ; largeur : auto ; z-index : 999 ; ) .overlay .overlay_container ( affichage : cellule de table ; alignement vertical : milieu ; ) .overlay_container img (couleur d'arrière-plan : vert ; remplissage : 5 px ; -webkit-border-radius : 5 px ; -moz-border-radius : 5px ; ) .overlay:target ( affichage : table ; ) 
|
.blokimg (position : relative ;).overlay( affichage : aucun ; hauteur : auto ; position : absolue ; largeur : auto ; z-index : 999 ;).overlay .overlay_container( affichage : cellule de table ; alignement vertical : milieu ;).overlay_container img( couleur d'arrière-plan : vert ; remplissage : 5 px ; -webkit-border-radius : 5 px ; -moz-border-radius : 5 px ; ).overlay:target ( affichage : table ;)
Nous avons examiné plusieurs options agrandir l'image sur le site: du plus simple au plus complexe en utilisant html et . Utilisez n’importe lequel d’entre eux sur vos sites Web sans scripts supplémentaires.
Salut tout le monde! Pendant longtemps, je cherchais un moyen simple d'agrandir une image en douceur lorsque vous la survolez. La plupart des méthodes décrites sur Internet suggèrent d'utiliser jQuery, etc., ce qui à mon avis est un peu inutile. Il existe une solution assez élégante utilisant CSS3.
HTMLVous devez d’abord préparer le balisage HTML :
Préparation des images
Nous avons enveloppé chaque image dans un div qui a la classe zoom_img
CSSPassons aux styles, d'abord la classe zoom_img :
Zoom_img (débordement:caché; largeur:390px; hauteur:244px; )
La taille du bloc doit être égale à la taille de l’image et overflow:hidden; doit être ajouté. afin que rien ne dépasse la taille du bloc, nous en reparlerons ci-dessous.
Zoom_img img ( -moz-transition : sortie facile de tous les 1 ; -o-transition : sortie facile de tous les 1 ; -webkit-transition : sortie facile de tous les 1 ; ) .zoom_img img:hover( -webkit-transform: scale( 1.1); -moz-transform : scale(1.1); -o-transform : scale(1.1); )
L'animation se produit à l'aide des paramètres de transition et de transformation dans CSS3. La durée de l'animation est de 1 seconde. scale(1.1) – indique que l’image doit être agrandie de 1,1 fois ; s’il est nécessaire de l’agrandir deux fois, vous devez la définir sur 2.
Et ici, vous devez revenir au paramètre overflow:hidden;. dans classe.zoom_img. Du fait que rien ne dépasse le div, l'effet est créé que l'image se rapproche si overflow: caché; retirez-le, vous verrez que l’image grossit.
C'est tout pour aujourd'hui.
Bien entendu, il existe de nombreuses façons d’agrandir des images. Et principalement l'utilisation de scripts et de plugins est utilisée. À mon avis, de telles méthodes sont justifiées dans le cas de ressources contenant un grand nombre de photographies ou d'images. Mon blog n'est pas comme ça. Et, comme d'habitude, je suis le chemin de la moindre dépense de temps, de connaissances et de ressources sur mon site.
Je vous propose un moyen d'agrandir les images d'un site Web sans utiliser de scripts, mais exclusivement en utilisant du HTML.
Cette méthode d'agrandissement d'une image sur un site Web permettra au lecteur de voir rapidement l'image, car votre site Web n'aura pas besoin de charger de scripts supplémentaires.
Agrandir l'image sur le site Web Méthode 1 – agrandir l’image sur le site au survol du curseurUne manière très simple, enfin, la manière la plus simple, honnêtement. Vous devez ajouter le code suivant aux propriétés de l'image :
Onmouseover="this.style.width="Grande largeur d'image px"" onmouseout="this.style.width="Petite largeur d'image px""
Lorsque vous passez le curseur de la souris, l'image s'agrandit.
J'espère que vous comprenez que tout cela se fait dans un éditeur de texte.
La méthode est similaire, il vous suffit de remplacer onmouseover par onclick. Le code suivant est ajouté aux propriétés de l'image :
Style="width : "valeur de largeur de la petite image px ; border:2px noir uni;" onclick="this.style.width=grande largeur d'image px"" onmouseout="this.style.width="petite largeur d'image px""
Cela ressemblera complètement à ceci
Voici le résultat et le code pour la photo de chatte.
Lorsque vous cliquez sur la souris, l'image est agrandie à la taille de l'image originale ou à la taille que vous spécifiez. Pour réduire la taille, c'est-à-dire ramener l'image à sa taille d'origine, cliquez simplement n'importe où sur la page.
J'espère que vous n'avez pas eu de difficulté à utiliser de telles méthodes - en utilisant HTML - pour agrandir les images sur le site.
En général, je pense que de nombreux webmasters ne se limitent pas à utiliser n'importe quel moteur et utilisent des codes HTML sur leurs sites.
Lire aussi :
2015-10-27T16:07:59+00:00 Nadezhda Scripts et codes agrandissant les images sur le site, agrandissant les images sur le siteBien entendu, il existe de nombreuses façons d’agrandir des images. Et principalement l'utilisation de scripts et de plugins est utilisée. À mon avis, de telles méthodes sont justifiées dans le cas de ressources contenant un grand nombre de photographies ou d'images. Mon blog n'est pas comme ça. Et, comme d'habitude, je suis le chemin de la moindre dépense de temps, de connaissances et de ressources sur mon site. Je vous propose un moyen d'augmenter...
Nadejda Trofimova [email protégé] Site du blog de l'administrateur Vous pourriez également être intéressé par :
Nous supprimons les entrées de catégorie de la page principale et du RSS
Nous continuons d'améliorer la fonctionnalité et l'apparence du site. Nous supprimons les publications inutiles de la page principale et du RSS.
Fil d'Ariane sur un site WordPress
Fil d'Ariane sur le site Web - qu'est-ce que c'est et comment le faire ?
Comment créer une ombre de texte en 5 minutes
Bonjour, cher lecteur de mon blog. Dans cet article, vous apprendrez comment créer une ombre de texte à l'aide de styles CSS et de code HTML en 5 minutes.
Comment créer un bouton de téléchargement en utilisant du code CSS
Bonjour, cher lecteur de mon blog. Je continue le sujet des boutons. Cet article explique comment créer un bouton de téléchargement en utilisant du code CSS.
Comment créer des boutons vers le bas pour un site Web
Les images sur les sites Web se trouvent assez souvent et sont de grande taille, mais la conception des sites Web ne permet pas toujours de les placer au format complet. Nous devons donc trouver un moyen de les augmenter.
Commençons par les méthodes primitives et terminons par la meilleure façon d'agrandir une image.
1. Agrandissez l'image via un lienExplication par exemple :
- - pour que le lien ne transfère pas de poids à l'image ;
- target="_blank" - l'image s'ouvrira dans un nouvel onglet.
Le dernier paramètre est assez important, car souvent en raison de l'inexpérience de l'utilisateur, la situation suivante peut survenir : après avoir ouvert une page avec une image, il ne sait pas comment revenir et ferme donc simplement l'onglet, ce qui signifie qu'il quitte complètement le site. . En précisant le dernier paramètre, on le protège d'un tel cas, car il aura toujours la page initiale ouverte.
Exemple de travail :
Malgré la facilité d'utilisation, cette méthode est loin d'être la meilleure, puisqu'il faut ouvrir une nouvelle page pour agrandir l'image, mais avec cette méthode, vous pouvez visualiser des images de n'importe quelle taille. Nous concluons donc : si vous avez besoin d'agrandir de très grandes images, alors c'est le seul moyen sûr de le faire.
2. Agrandissez automatiquement l'image lorsque vous passez le curseurLe nom de la méthode reflète clairement son essence : lorsque vous passez le curseur de la souris sur l'image, celle-ci est automatiquement zoomée. La mise en œuvre de la méthode est élémentaire, mais encore une fois je n'aime pas cette méthode car il est impossible de simplement déplacer le curseur dans l'image. Après tout, cela augmentera toujours - cela peut commencer à ennuyer l'utilisateur.
Le code suivant implémente la possibilité de zoomer automatiquement au survol :
img.zoom ( curseur : pointeur ; largeur maximale : 150px ; ) img.zoom:hover ( largeur maximale : aucune ; )Explications par exemple :
- img.zoom (max-width: 150px ) - définit la largeur de l'image avant le zoom ;
- img.zoom:hover (max-width: none ) - définit la largeur de l'image après le zoom (le paramètre none signifie qu'il n'y a pas de limite sur la taille maximale) ;
Il s’agit de la méthode la plus courante et la plus pratique pour agrandir des images. De plus, il existe de nombreuses méthodes et options de mise en œuvre. Examinons quelques-unes des options les plus populaires :
3.1. Zoom pendant que la mise au point est activeAprès avoir cliqué sur l'image, elle s'agrandit, mais de ce fait le texte descend, cette méthode est donc loin d'être la meilleure. Voici un exemple de code :
.foc ( largeur : 150px ; curseur : pointeur ; affichage : en ligne ; ) .foc:focus ( largeur : auto ; z-index : 100 ; )À quoi cela ressemble sur la page :
3.2. Agrandir l'image en haut de la pageCi-dessous le code pour implémenter cette méthode
.blokimg ( position : relative ; ) .overlay ( affichage : aucun ; hauteur : auto ; gauche : -15% ; position : absolue ; haut : -50% ; largeur : auto ; z-index : 999 ; ) .overlay .overlay_container ( affichage : cellule de tableau ; alignement vertical : milieu ; ) .overlay_container img ( couleur de fond : #AB5 ; remplissage : 10px ; -webkit-border-radius : 5px ; -moz-border-radius : 5px ; ) .overlay :target ( affichage : tableau ; )À quoi cela ressemble sur la page :
Les options 3.1 et 3.2 sont entièrement basées sur les capacités CSS, ce qui signifie qu'il s'agit de méthodes « légères », car ne chargez pas la page avec des scripts inutiles. Il existe d'autres options également basées sur CSS, mais elles sont plus exotiques. Je ne les aborderai pas dans cet article car certains navigateurs ne prennent pas en charge de telles choses.
3.3. Beau grossissementCette méthode est à mon avis la plus belle et la plus pratique. Pour le connecter, vous devrez bricoler un peu en ajoutant divers scripts, donc pour l'implémenter, envisageons une installation étape par étape :
L'archive contiendra un dossier contenant l'image, deux fichiers .js et un .css.
2) Ajoutez ces fichiers à votre site tels qu'ils sont dans l'archive (c'est-à-dire que le dossier imgs doit être dans le répertoire où seront les fichiers .js et .css).
3) Sur chaque page du site où l'agrandissement d'image sera utilisé, vous devez connecter la méthode et le style simplebox :
(function())( var boxes=,els,i,l; if(document.querySelectorAll)( els=document.querySelectorAll("a"); Box.getStyles("simplebox_css","simplebox.css"); Boîte . getScripts("simplebox_js","simplebox.js",function())( simplebox.init(); for(i=0,l=els.length;iNote
Au lieu de l'adresse d'une copie plus petite de l'image, vous pouvez saisir l'adresse de l'image principale, mais en même temps appliquer l'attribut width, dans lequel vous spécifiez une petite largeur (en savoir plus).
À quoi ça ressemble sur la page.
| 18.02.2016
CSS3 ouvre des possibilités illimitées aux concepteurs d'interface utilisateur, et le principal avantage est que presque toutes les idées peuvent être facilement mises en œuvre et concrétisées sans recourir à JavaScript.
Il est étonnant de constater à quel point des choses simples peuvent animer une page Web ordinaire et la rendre plus accessible aux utilisateurs. Nous parlons de transitions CSS3, avec lesquelles vous pouvez permettre à un élément de se transformer et de changer de style, par exemple au survol. Les neuf exemples d'animation CSS3 disponibles ci-dessous vous aideront à créer une ambiance réactive sur votre site, ainsi qu'à améliorer l'apparence générale de la page avec des transitions belles et fluides.
Pour des informations plus détaillées, vous pouvez télécharger l'archive avec les fichiers.
Tous les effets fonctionnent en utilisant la propriété de transition. transition- « transition », « transformation ») et la pseudo-classe:hover, qui détermine le style de l'élément lorsque le curseur de la souris le survole (dans notre tutoriel). Pour nos exemples, nous avons utilisé un div de 500 x 309 px, une couleur d'arrière-plan initiale de #6d6d6d et une durée de transition de 0,3 seconde.
Corps > div (largeur : 500 px ; hauteur : 309 px ; arrière-plan : #6d6d6d ; -webkit-transition : toutes les facilités de 0,3 s ;; -moz-transition : toutes les facilités de 0,3 s ;; -o-transition : toutes les facilités de 0,3 s ;; transition : toutes les 0,3 s sont faciles ; )
1. Changer la couleur en survolAutrefois, la mise en œuvre d'un tel effet était un travail assez minutieux, avec des calculs mathématiques de certaines valeurs RVB. Il suffit maintenant d'écrire un style CSS dans lequel vous devez ajouter une pseudo-classe : survolez le sélecteur et définissez une couleur d'arrière-plan qui remplacera en douceur (en 0,3 seconde) la couleur d'arrière-plan d'origine lorsque vous survolez le bloc :
Couleur : survol (arrière-plan : #53ea93 ; )
2. Aspect du cadreUne transformation intéressante et frappante est le cadre intérieur qui apparaît en douceur lorsque vous passez la souris. Bien adapté pour décorer divers boutons. Pour obtenir cet effet, nous utilisons la pseudo-class:hover et la propriété box-shadow avec le paramètre inset (définit l'ombre à l'intérieur de l'élément). De plus, vous devrez définir l'étirement de l'ombre (dans notre cas, il est de 23 pixels) et sa couleur :
Bordure: survol ( box-shadow: encart 0 0 0 23px #53ea93; )
3. BalançoireCette animation CSS est une exception, car la propriété transition n'est pas utilisée ici. Au lieu de cela, nous avons utilisé :
- @keyframes est une directive de base pour créer une animation CSS image par image, qui vous permet de faire ce qu'on appelle. storyboarder et décrire l'animation sous forme d'une liste de points clés ;
- animation et animation-iteration-count - propriétés permettant de définir les paramètres d'animation (durée et vitesse) et le nombre de cycles (répétitions). Dans notre cas, répétez 1.
L'effet de fondu est essentiellement un simple changement dans la transparence d'un élément. L'animation est créée en deux étapes : vous devez d'abord définir l'état de transparence initial sur 1 - c'est-à-dire une opacité complète, puis spécifier sa valeur au survol de la souris - 0,6 :
Fondu ( opacité : 1 ; ) .fade:hover ( opacité : 0,6 ; )
Pour le résultat inverse, échangez les valeurs :
5. GrossissementPour agrandir le bloc lors du survol, nous utiliserons la propriété transform et la définirons sur scale(1.2) . Dans ce cas, le bloc augmentera de 20 pour cent tout en conservant ses proportions :
Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )
6. RéductionRéduire la taille d'un élément est aussi simple que l'agrandir. Si au cinquième point, pour augmenter l'échelle, nous devions spécifier une valeur supérieure à 1, alors pour réduire le bloc, nous spécifierons simplement une valeur qui sera inférieure à un, par exemple, scale(0.7) . Désormais, lorsque vous survolez la souris, le bloc rétrécira proportionnellement de 30 % par rapport à sa taille d'origine :
Rétrécir: survol ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )
7. Transformation en cercleL'une des animations couramment utilisées est un élément rectangulaire qui se transforme en cercle lorsqu'on le survole. En utilisant la propriété CSS border-radius, utilisée conjointement avec :hover et transition , cela peut être réalisé sans problème :
Cercle : survol (border-rayon : 70 % ; )
8. RotationUne option d'animation amusante consiste à faire pivoter un élément d'un certain nombre de degrés. Pour ce faire, nous aurons à nouveau besoin de la propriété transform, mais avec une valeur différente - rotateZ(20deg) . Avec ces paramètres, le bloc pivotera de 20 degrés dans le sens des aiguilles d'une montre par rapport à l'axe Z :
Rotation: survol ( -webkit-transform : rotationZ(20deg); -ms-transform : rotationZ(20deg); transformation : rotationZ(20deg); )
9. Ombre 3DLes avis des concepteurs diffèrent quant à savoir si cet effet est approprié dans le design plat. Cependant, cette animation CSS3 est assez originale et est également utilisée sur les pages web. Nous obtiendrons un effet tridimensionnel en utilisant les propriétés déjà familières de box-shadow (créera une ombre multicouche) et transformerons avec le paramètre translateX(-7px) (assurera un décalage horizontal du bloc vers la gauche de 7 pixels ) :
Threed: survol ( box-shadow : 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: translateX( -7px); transformation : traduireX(-7px); )
Prise en charge du navigateurLes navigateurs suivants prennent actuellement en charge la propriété de transition :
| Internet Explorer | Pris en charge par IE 10 et supérieur |
| Chrome | Pris en charge à partir de la version 26 (jusqu'à la version 25 fonctionne avec le préfixe -webkit-) |
| Firefox | Pris en charge à partir de la version 16 (dans les versions 4-15, il fonctionne avec le préfixe -moz-) |
| Opéra | Pris en charge à partir de la version 12.1 |
| Safari | Pris en charge à partir de la version 6.1 (dans les versions 3.1 à 6, il fonctionne avec le préfixe -webkit-) |
Les autres propriétés utilisées dans ces exemples, telles que transform , box-shadow , etc., sont également prises en charge par presque tous les navigateurs modernes. Cependant, si vous envisagez d'utiliser ces idées pour vos projets, nous vous recommandons fortement de vérifier la compatibilité entre navigateurs.
Nous espérons que vous avez trouvé ces exemples d’animation CSS3 utiles. Nous vous souhaitons du succès créatif!
