Dégradés de couleurs dans Kompozer

Nathalie44 · Message par **Nathalie44** » 18 mai 2012, 20:38

Bonsoir!

J'ai trouvé un bon générateur de couleurs dégradées qui produit un code html et je me demande comment intégrer un arrière plan dégradé avec Kompozer. Pourriez-vous s'il-vous-plaît m'indiquer la méthode?

Voici l'allure du code:

<html>
<head>
<style type="text/css">
body { background-image:url(FOh1t3.png);background-repeat:repeat-x; }
</style>
</head>
<body>
<p>a text example</p>
</body>
</html>

Merci d'avance!
Nathalie

Nathalie44 · Message par **Nathalie44** » 18 mai 2012, 22:15

Pour préciser, ce n'est pas le fond de la page que je veux en dégradé, mais le fond d'un des encadrés. Merci!

infomamy · Message par **infomamy** » 18 mai 2012, 22:32

Bonjour
Une réponse ICI

L'image dégradée de 1 ou 2 pixels (de largeur ou de hauteur) est créée dans un logiciel de retouches d'images comme PhotoFiltre et enregistrée au format png pour conserver la transparence

Bonne soirée

Nathalie44 · Message par **Nathalie44** » 18 mai 2012, 23:16

Merci beaucoup, mais dans ce cas, comment insérer du texte ou une autre image dessus? Est-ce possible?

Message par **Ymai** » 19 mai 2012, 08:50

Bonjour
Plutôt que de jouer avec des images de fond, j'irais plutôt voir du côté de techniques comme celles de CSS3
Attention, sans doute incompatibles avec l'éditeur CSS de KompoZer. Penser à mettre les directives de style dans un fichier externe qui ne sera jamais ouvert avec KpZ.
Voir, par exemple:
http://www.html5-css3.fr/css3/degrades- ... 3-gradient

Nathalie44 · Message par **Nathalie44** » 19 mai 2012, 09:49

Merci beaucoup, c'est ce que je recherche exactement.

Penser à mettre les directives de style dans un fichier externe qui ne sera jamais ouvert avec KpZ.

Pourriez-vous m'indiquer comment faire cela, s'il-vous-plait?

Nathalie44 · Message par **Nathalie44** » 19 mai 2012, 10:21

J'ai mes directives de style (voir ci-dessous). Quelle méthode suivre a partir d'ici?

background: rgb(207,231,250); /* Old browsers */
background: -moz-linear-gradient(top, rgba(207,231,250,1) 0%, rgba(99,147,193,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,231,250,1)), color-stop(100%,rgba(99,147,193,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=0 ); /* IE6-9 */

Message par **Ymai** » 19 mai 2012, 10:27

Bonjour
Il faut créer une feuille de styles externe (celle qui existe déjà ou une nouvelle dédiée)
voir http://info.sio2.be/kpz/2/12.php
puis ouvrir cette feuille de styles avec un éditeur externe (sous Windows, Notepad++ est le meilleur choix). Ensuite, y coller les directives.
Cette deuxième feuille de styles ne doit plus jamais être ouverte sous KompoZer qui, je pense, la massacrerait pour cause de directives inconnues de sa part. À vérifier, mais prudemment.

Nathalie44 · Message par **Nathalie44** » 19 mai 2012, 11:20

Excellent! Merci mille fois!

Nathalie44 · Message par **Nathalie44** » 19 mai 2012, 15:14

Rebonjour!

Eh bien je crois que la meilleure solution sera la première (l'image), car je n'arrive pas à faire fonctionner la seconde (le CSS).

J'arrive à insérer une image en dégradé sans problème, mais ensuite je n'arrive pas à mettre quelque chose dessus. J'ai lu et vu beaucoup de tutorials qui indiquent comment créer un fond de cette façon, mais aucun n'explique que faire après pour installer des éléments sur le fond.

Merci bien!

meadowfive · Message par **meadowfive** » 19 mai 2012, 15:37

Voilà, je me suis connectée pour pouvoir mettre en attachement ce que je cherche à faire: au lieu d'avoir un bloc bleu solide derrière mon calendrier, je le voudrais en bleu dégradé...

(Sauf que les attachements ne marchent plus.

)

Message par **Ymai** » 19 mai 2012, 16:38

Dans le feuille de style externe, on doit avoir:

Code : Tout sélectionner

body {
background: rgb(207,231,250); /* Old browsers */
background: -moz-linear-gradient(top, rgba(207,231,250,1) 0%, rgba(99,147,193,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,231,250,1)), color-stop(100%,rgba(99,147,193,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=0 ); /* IE6-9 */
}

Ce qui donne

Nathalie44 · Message par **Nathalie44** » 19 mai 2012, 19:28

Voila, j'y suis arrivée, je ne sais pas trop comment, mais c'est superbe!

Merci pour tout!

Message par **Ymai** » 19 mai 2012, 19:43

Nathalie44 a écrit :Voila, j'y suis arrivée, je ne sais pas trop comment, mais c'est superbe!

On va le croire sur parole

meadowfive · Message par **meadowfive** » 19 mai 2012, 22:51

Je l'aurais bien mis en attachement mais: "Sorry, the board attachment quota has been reached." Comment faire?

Geckozone

Dégradés de couleurs dans Kompozer

Dégradés de couleurs dans Kompozer

Re: Dégradés de couleurs dans Kompozer

Re: Dégradés de couleurs dans Kompozer

Re: Dégradés de couleurs dans Kompozer

Re: Dégradés de couleurs dans Kompozer

Re: Dégradés de couleurs dans Kompozer

Re: Dégradés de couleurs dans Kompozer

Re: Dégradés de couleurs dans Kompozer

Re: Dégradés de couleurs dans Kompozer

Re: Dégradés de couleurs dans Kompozer

Re: Dégradés de couleurs dans Kompozer

Re: Dégradés de couleurs dans Kompozer

Re: Dégradés de couleurs dans Kompozer

Re: Dégradés de couleurs dans Kompozer

Re: Dégradés de couleurs dans Kompozer

Qui est en ligne ?