Aller au contenu
Support de Zwii et Yocto
ericemer

Premier site réaliser avec Zwii

Messages recommandés

Salut !

Très beau site, je pense m'en inspirer très fortement pour une commande d'une amie !

Comment as-tu réalisé le dégradé d'image en fond ?

A bientôt

Partager ce message


Lien à poster
Partager sur d’autres sites

salut @dji

le dégradé est réaliser en utilisant la pseudo class "::after"

pour expliquer simplement (enfin j'espère) : ::after permet d'ajouter du contenu dans la balise concernée.

ainsi dans mon cas, ça donne :

header::after {
    content: ""; // idiot mais obligatoire : en fait j'ajoute rien
    display: block; // comportement block (comme une div)
    position: absolute; //positionnement absolu sous reserve que header soit en positionnement relatif ou absolu
    bottom: 0; // je positionne en pied de block
    z-index: 1; // je le positionne devant dans mon cas (empilage des calques)
    background-image: linear-gradient(to top, rgb(40, 40, 40) 0%, rgba(40,40,40,0) 100%); // un dégradé du bas vers le haut de ma couleur du plein vers le transparent
    height: 250px; // la hauteur de mon dégradé
    width: 100%; // la largeur doit être précisée avec un positionnement absolu ... encore un truc idiot
}

 

  • J'aime 1
  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

J'aime bien la Menuiserie Roger !

C'est vraiment chiadé, et ça fait un peu mentir le slogan de Zwiicms :

"Un CMS pour créer et gérer facilement son site web sans aucune connaissance en programmation."

Car on voit bien qu'il y a du boulot pro en design !

Partager ce message


Lien à poster
Partager sur d’autres sites

Il est superbe…. mais comment as-tu fais pour avoir le menu en haut du site??? J'ai beau essayer je n'y arrive pas!!

Partager ce message


Lien à poster
Partager sur d’autres sites

@schoune

bonjour et merci.

dans les fonctions de personnalisation de thème :

  • pour la bannière, position au dessus du site.
  • pour le menu, position avant la bannière.

Ensuite, dans mon cas, j'ai ajouté (avec jquery) une boite "#spaceur" avant #site pour générer un espace minimun car j'ai positionné le header en "position: absolute".

 

la dimension verticale (height) de aside#spaceur est calculée avec des unité vh (viewport height) et une dimension minimale est renseignée (min-height: 100px;)

Partager ce message


Lien à poster
Partager sur d’autres sites

@schoune

Si.

Je l'intègre dans ma page comme tout a chacun. Puis, je le déplace dans le header avec du jquery.

$( "#swiper" ).prependTo("header" ).parent().addClass("diapos");

et dans mon cas, j'ajoute la class "diapos" au header

Partager ce message


Lien à poster
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.


×
×
  • Créer...