• Accueil
  • Info
  • Publicité
  • Privacy & Policy
  • Nous Contacter
No Result
View All Result
Technique de pointe
  • Actualité
  • Technologies
  • Jeu vidéo
  • Mobile
  • Astuces
  • HTML5 / CSS
  • Java Script
  • PHP
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Nous Contacter
MYCAMER
  • Actualité
  • Mobile
  • Jeu vidéo
    Le sketch Mario SNL de Pedro Pascal est l’adaptation du jeu vidéo dont nous avons plus que jamais besoin

    Le sketch Mario SNL de Pedro Pascal est l’adaptation du jeu vidéo dont nous avons plus que jamais besoin

    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Quelle est la durée idéale d’un jeu vidéo ?  –

    Quelle est la durée idéale d’un jeu vidéo ? –

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    10 tropes de jeux vidéo qui n’ont aucun sens

    10 tropes de jeux vidéo qui n’ont aucun sens

    Dead Space Remake – Dans le vide (Chapitre 7)

    Dead Space Remake – Dans le vide (Chapitre 7)

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

  • Developpement web
    • All
    • Java Script
    • Language HTML5
    L’industrie écossaise du jeu vidéo renforce le potentiel des jeux

    Rencontrez les régulateurs : les normes de sécurité pour les enfants auront de nouveaux régulateurs à partir de 2023

    Wesfarmers supprime 100 emplois chez Catch

    Wesfarmers supprime 100 emplois chez Catch

    Arrêtez d’appeler les langages de programmation HTML et CSS |  de Christophe Lam |  L’Albatros FOSS |  février 2023

    Arrêtez d’appeler les langages de programmation HTML et CSS | de Christophe Lam | L’Albatros FOSS | février 2023

    Vous voulez devenir UI/UX Designer ?  Consulter la liste des stages

    Vous voulez devenir UI/UX Designer ? Consulter la liste des stages

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière |  Nouvelles de Bombay

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière | Nouvelles de Bombay

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

  • Astuces
    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    4 villes en plein essor en 2023 à considérer pour une vie abordable

    4 villes en plein essor en 2023 à considérer pour une vie abordable

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    6 Best WordPress SEO Plugins for 2023

    6 Best WordPress SEO Plugins for 2023

    Amorcer un document Quarto {ojs} avec un bloc-notes observable

    WordPress Password Protection – A Complete Guide

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Comment déployer facilement une application full-stack dans Portainer avec des templates

  • Nous contacter
No Result
View All Result
MYCAMER
No Result
View All Result
Home Developpement web Language HTML5

Premiers pas avec les effets d’image CSS

Caleb by Caleb
mars 15, 2021
in Language HTML5
0
0
Premiers pas avec les effets d’image CSS
336
SHARES
2k
VIEWS
Share on FacebookShare on TwitterRedditLinkedinWhatsappTelegram


Les feuilles de style en cascade (CSS) sont un langage de script qui permet aux développeurs Web de spécifier la mise en page et la conception des éléments du site Web. Il est couramment utilisé en combinaison avec HTML, XHTML et JavaScript.

Dans cet article, je vais montrer comment le CSS peut être utilisé pour manipuler et styliser des images. Je couvrirai quelques effets d’image CSS simples qui peuvent vous aider à présenter des images de manière attrayante sur une page Web, ainsi que des effets dynamiques comme un fondu avant, un zoom avant et arrière et l’application d’une bordure 3D.

Comment appliquez-vous les niveaux de gris dans CSS?

Voici un exemple montrant comment appliquer des niveaux de gris à une image en CSS:

img {

largeur: 150px;

}

.grayscale {

filtre: niveaux de gris (0,5)

Le filtre le plus couramment ajouté à une image est l’échelle de gris. Vous pouvez l’utiliser pour créer des photos en noir et blanc à partir de photos couleur originales. La fonction CSS en niveaux de gris peut prendre un pourcentage ou un paramètre numérique. 0 (ou 0%) signifie aucun changement et 1 (ou 100%) signifie que l’image est entièrement en niveaux de gris. Laisser la valeur vide définira le paramètre sur 1.

Comment flouez-vous dans CSS?

Voici un exemple montrant comment appliquer un flou à une image en CSS:

img {

largeur: 150px;

}

.se brouiller {

filtre: flou (5px);

}

L’effet de flou rend la photo floue en appliquant un effet de flou gaussien. Il peut être utilisé, par exemple, pour une image d’arrière-plan qui n’a pas besoin d’être nette, pour la censure, ou pour un effet graphique dans une image avec plusieurs couches visuelles.

La méthode CSS blur () prend un argument, qui spécifie une certaine quantité de pixels. Plus la valeur est élevée, plus le flou sera important. Par défaut, la valeur est 0.

Comment appliquez-vous la rotation de teinte dans CSS?

Voici un exemple d’application de la rotation Hue dans CSS:

img {largeur: 150px; }

.huerotate {

filtre: rotation de la teinte (180 degrés);

}

La rotation de teinte est une fonction qui spécifie un angle autour du cercle de couleur CMJN et applique une teinte avec cette couleur à l’image. Par exemple, une valeur de 90 degrés donnera un vert clair, tandis que 180 degrés comme dans l’exemple ci-dessus ombreront l’image en cyan.

Comment fonctionnent les effets de survol d’image dans CSS?

Vous pouvez utiliser CSS pour définir des styles de texte, mais vous pouvez également ajouter des calques de style au texte et aux images. C’est ce qu’on appelle un effet de survol. En d’autres termes, quelque chose se produit, défini par le code CSS, lorsque vous passez la souris sur un ensemble spécifique de texte ou d’images.

Changer la couleur d’arrière-plan

Un moyen simple d’ajouter un effet de survol consiste à changer la couleur d’arrière-plan. Si vous ajoutez la directive: hover à une classe CSS et spécifiez une couleur d’arrière-plan différente, elle passera à cette couleur lorsque l’utilisateur passera la souris dessus.

a: hover {

couleur de fond: rouge;

}

Modification de la mise en forme du texte

Un autre effet de survol consiste à ajouter du texte souligné ou en gras. L’exemple ci-dessous montre comment ajouter du soulignement et du gras à une chaîne de texte au survol.

a: hover {

poids de la police: gras;

texte-décoration: souligné;

}

Modification de la police et de la taille

Vous pouvez changer la police du texte sur la page ou un lien au survol. Une autre option consiste à augmenter ou réduire la taille de la police avec un modificateur de taille de police.

a: hover {

famille de polices: Georgia;

taille de la police: 200%;

}

Fondu entrant

Le fondu entrant et sortant est un excellent moyen de se concentrer sur une partie d’une page qui met l’accent sur une fonction utilisateur ou des appels à l’action. Vous créez un effet de fondu en CSS en deux étapes. Tout d’abord, définissez l’état initial, puis définissez la modification à effectuer en survol.

.disparaître

{

opacité: 0,2;

}

.fade: survoler

{

opacité: 1;

}

Rotation d’un élément

Une autre option consiste à faire pivoter un élément lorsque l’utilisateur passe la souris dessus. Pour ce faire, attribuez à votre div une classe «rotation» comme suit. Il existe plusieurs options pour prendre en charge différents navigateurs.

.rotate: survoler

{

-webkit-transform: rotateZ (-20deg);

-ms-transform: rotateZ (-20deg);

transformer: rotateZ (-20deg);

}

Faire croître ou réduire un élément

Si vous souhaitez agrandir ou réduire un élément lorsque l’utilisateur le survole, utilisez CSS3 pour définir la classe de div pour qu’elle s’agrandisse et ajoutez le code suivant au bloc de style. Vous pouvez faire la même chose avec une valeur inférieure à 1 pour réduire l’élément.

.grow: survoler

{

-webkit-transform: échelle (1.5);

-ms-transform: échelle (1,5);

transformée: échelle (1,5);

}

Ombre 3D

Vous pouvez obtenir un effet d’ombre 3D sympa en créant une ombre colorée et en appliquant une transformation qui la déplace horizontalement à l’aide de la propriété translate.

.threed: survoler

{

boîte ombre:

1px 1px # 53a7ea,

2px 2px # 53a7ea,

-webkit-transform: translateX (-4px);

transformer: translateX (-4px);

}

Conclusion

Dans cet article, j’ai montré à quel point il est facile de styliser et de manipuler des images à l’aide de CSS. Avec seulement quelques lignes de code, vous pouvez appliquer des effets sympas tels que:

  • Application de niveaux de gris pour les images couleur
  • Flouter une image
  • Effectuer une rotation de teinte (sélection d’une teinte dans la roue chromatique)
  • Application d’un effet lorsque l’utilisateur passe la souris sur une image:
    • Couleur de l’arrière plan
    • Mise en forme du texte
    • Police et taille
    • Disparaître
    • Zoom avant / arrière
    • Ombre 3D

J’espère que cela vous aidera à créer de meilleures conceptions Web visuellement captivantes.

— to collegian.csufresno.edu

Get real time update about this post categories directly on your device, subscribe now.

Unsubscribe
Caleb

Caleb

Stay Connected

  • 87k Followers
  • 172k Subscribers

Articles populaires

  • 10 problèmes courants de l’iPhone 13 et comment les résoudre

    10 problèmes courants de l’iPhone 13 et comment les résoudre

    5605 shares
    Share 2242 Tweet 1401
  • Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

    1705 shares
    Share 682 Tweet 426
  • GOLDEN FARM BIZ: earn unlimited money online

    347 shares
    Share 139 Tweet 87
  • Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

    514 shares
    Share 206 Tweet 129
  • Comment réparer le décalage d’Instagram sur iPhone et Android

    712 shares
    Share 285 Tweet 178

Follow Our Page

Follow Us

    Go to the Customizer > JNews : Social, Like & View > Instagram Feed Setting, to connect your Instagram account.
Facebook Twitter Youtube Vimeo Instagram

Informer et distraire les internautes en toute indépendance avec un grand souci de la qualité et de contenu.

Category

  • Actualité
  • Article Sponsorisé
  • Astuces
  • Developpement web
  • Featured
  • Java Script
  • Jeu vidéo
  • Language HTML5
  • Mobile
  • portrait
  • Technologies
  • Uncategorized

Recent News

Exposition I Dream a World de la National Portrait Gallery

février 6, 2023
L’industrie écossaise du jeu vidéo renforce le potentiel des jeux

Rencontrez les régulateurs : les normes de sécurité pour les enfants auront de nouveaux régulateurs à partir de 2023

février 6, 2023

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

No Result
View All Result
  • Actualité
  • Mobile
  • Jeu vidéo
  • Developpement web
  • Astuces
  • Nous contacter

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

Welcome Back!

Sign In with Facebook
Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
fr French
ar Arabiczh-CN Chinese (Simplified)en Englishfr Frenchde Germanit Italianru Russianes Spanish

Add New Playlist

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.