Utiliser l'extension chrome "Visual CSS Editor"

Extension Chrome

Télécharger l'extension Chrome dès maintenant

Cliquez sur le bouton pour accéder à la page d'extension

Installer l'extension Chrome

Ajouter une superposition de dégradé

html/css

Utiliser ce code CSS

  • Trouvez le dégradé parfait ici de CSS Gradient

  • Ajouter un élément HTML/CSS sur la page et ajouter le code suivant

<style>

#SECTIONID {

background-image:

linear-gradient(GRADIENTHERE),

url('URLHERE');

width: 100%;

text-align: center;

}

</style>

  • Remplacer les textes en ROUGE par les éléments requis

#SECTIONID: La section à laquelle vous souhaitez ajouter la superposition.

GRADIENTHERE: Le code de dégradé que vous avez copier sur CSSGradient.io

URLHERE: L'image que vous souhaitez utiliser comme background

Accéder au document des codes

Fond dégradé d'une section ou rangée

html/css

Exemple avec la couleur Doré

<style>

#section-ID {background-image: linear-gradient(to right, #AC8E40, #C1AC73, #ddc890, #C1AC73, #AC8E40)!important;}

</style>

Accéder au document des codes

Ajouter du gradient sur ses boutons

Accéder au document des codes

Ajouter des Ombres aux éléments

html/css

Suivre ces étapes

  • Ajouter un élément HTML/CSS à la page

  • Veillez à inclure les balises <style></style>..

  • Ajoutez tout le code à l'intérieur de ces balises.

  • Sélectionnez l'ID de l'élément et ajoutez-le dans l'élément HTML/CSS. (#element-id) et les crochets ouverts {}.

  • Allez sur CSSmatic et ajustez les ombres.

  • Copiez le code CSSmatic dans les crochets du bouton.

  • Cliquez sur Enregistrer et sauvegardez la page.

Note : Parfois, on ne peut pas voir les ombres dans l'éditeur, mais on peut les voir sur la page en direct. Si vous souhaitez personnaliser tous les boutons de la page avec la même ombre, utilisez le sélecteur [id^="button-"] ou [id^="video-"] au lieu de #button-id ou #video-id.

Go To CSSmatic.com

Ajouter une animation image au scroll

html/css

Étapes à suivre

  • Pour ce faire, nous utiliserons la configuration suivante de GitHub

https://github.com/michalsnik/aos

  • Ajouter le code suivant dans l'en-tête des paramètres de la page dans le suivi

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

  • Ajoutez le code suivant dans la zone du pied de page.

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

<script>

AOS.init({

// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:

offset: 120, // offset (in px) from the original trigger point delay: 0, // values from 0 to 3000, with step 50ms duration: 400, // values from 0 to 3000, with step 50ms easing: 'ease', // default easing for AOS animations anchorPlacement: 'top-bottom', });

</script>

  • Ajoutez l'élément HTML/CSS Systeme.io à l'endroit où vous souhaitez utiliser l'animation.

<img data-aos="ANIMATION" width="100%" src="ImageLinkHere">

Fade Animations

  • fade

  • fade-up

  • fade-down

  • fade-left

  • fade-right

  • fade-up-right

  • fade-up-left

  • fade-down-right

  • fade-down-left

Flip Animations

  • flip-up

  • flip-down

  • flip-left

  • flip-right

Slide Animations:

  • slide-up

  • slide-down

  • slide-left

  • slide-right

Zoom Animations:

  • zoom-in

  • zoom-in-up

  • zoom-in-down

  • zoom-in-left

  • zoom-in-right

  • zoom-out

  • zoom-out-up

  • zoom-out-down

  • zoom-out-left

  • zoom-out-right

Anchor Placements:

  • top-bottom

  • top-center

  • top-top

  • center-bottom

  • center-center

  • center-top

  • bottom-bottom

  • bottom-center

  • bottom-top

Flip Animations

  • linear

  • ease

  • ease-in

  • ease-out

  • ease-in-out

  • ease-in-back

  • ease-out-back

  • ease-in-out-back

  • ease-in-sine

  • ease-out-sine

Zoom Animations:

  • ease-in-out-sine

  • ease-in-quad

  • ease-out-quad

  • ease-in-out-quad

  • ease-in-cubic

  • ease-out-cubic

  • ease-in-out-cubic

  • ease-in-quart

  • ease-out-quart

  • ease-in-out-quart

Accéder au document des codes

Ajouter un Widget WhatsApp sur une page

html/css

Étapes à suivre

  • Ajouter le code suivant dans les paramètres d'en-tête

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  • Coller le code ci-dessous dans un bloc HTML/CSS sur la page

<a href="https://wa.me/15551234567?text=Je%20suis%20intérressé%20par%20votre%offre%20Jean" target="_blank" style = "position:fixed;width:60px; height:60px;bottom:40px;right:40px;background-color:#25d366;color:#FFF; border-radius:50%;text-align:center;font-size:40px;box-shadow: 2px 2px 3px #999;z-index:100; display:flex;flex-direction;column;align-items:center;justify-content:center">

<i class="fa fa-whatsapp"></i>

</a>

  • Remplacer les textes en ROUGE par les éléments requis

15551234567: Numero de téléphone avec l'indicatif sans le plus.

%20suis%20: Ajouter les mots un à un entre les %20.

Accéder au document des codes

Ajouter des animations aux éléments

html/css

Comment ajouter des animations aux éléments

  • Copier <head></head> tag sur Animate.Style

  • Ajouter un élément code HTML/CSS sur la page

  • Ajouter les tags <style></style>.

  • Copier l'exemple de code de Animate.Style

  • Remplacer .element-id par l'attribut ID de l'élément.

  • Choisir le code d'animation et l'ajouter (ex:bounce).

  • Changer les paramètres du code pour obtenir le rendu que vous désirez.

  • Cliquez sur sauvegarder la page

Ps : Dans le code, mettre "rubberBand" simplement au lieu de "animate__rubberBand" que j'ai mis dans la vidéo.

Aller sur animate.style