coins arrondies

[gilles.d2]

Bonjour a tous,

je trouve Kompozer super...mais il y a un truc que je n'arrive pas a faire, c'est un cadre coins arrondies que je peux étirer comme je veux sans le déformer, j'essaye de me servir des CCS avec le images aux coins arrondies...mais je coince !!!
aider moi SVP

merci

[chinon37]

Bonjour,

peut-on savoir ce que tu as déjà fait ?

[gilles.d2]

je suis allé sur un tuto à ce sujet et j'ai essayé de suivre leur conseils : http://www.roundedcornr.com/
mais pour l'intégrer sur Kompozer....je bloque !!

[Fabrice.Tres.Net]

C'est dépassé... et contre la sémantique, mieux vaut utiliser le css... et tant pis pour IE !
L'avantage c'est qu'on peut changer les coins rapidement, quand on veut...
On peut même faire des boutons dissymétriques, et moi j'en abuse.

Code : Tout sélectionner

-moz-border-radius: 1em;
-webkit-border-radius: 1em;

[FF_Olivier]

Pour appuyer Fabrice.Tres.Net, il y aussi ce site, qui permet de voir tout de suite le résultat et de copier-coller quand on est content (autoriser javascript et cookies) :
http://css3please.com/#

[gilles.d2]

ok merci c'est bien tout cela....mais moi ce que je demande c'est comment le mettre en appli sur kompozer...je suis débutant !!!
je le rentre directement sur "source" ? de quel façon intégrer le CSS....voila ce qui me manque.

merci !!!

[Fabrice.Tres.Net]

Avec CasCadeS (la palette de peintre) de Kompozer, tu peux te contenter de taper/recopier les lignes de codes dans l'onglet général, sachant que les actions dans les autres onglets remplissent l'onglet général aussi.

[chinon37]

Je me permets de contredire Fabrice sur le dernier point:
un test avec l'éditeur css m'a nettoyé les balises de toutes les règles css3.
Je m'explique: avec un éditeur de texte (notepad++), je crée un fichier css avec les règles :

Code : Tout sélectionner

.box_shadow {
     -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
  -webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */
          box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */
}
  
.box_gradient {
  background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */
}

J'enregistre le fichier en "style.css"
J'ouvre l'éditeur css de KpZ > feuille lièe > je vais chercher style.css
Accessoirement, j'ajoute un p'tit quelque chose à une des classes > Toutes les propriétés ci-dessus sont bel et bien nettoyées!

Quelqu'un pour confirmer?
Si cela se confirme, Il faudrait donc créer un fichier css spécifique "css3" à ne pas toucher avec l'éditeur css de KpZ

[Ymai]

Quelqu'un pour confirmer

Pas moi.
L'éditeur CSS ne montre aucune des règles dans l'onglet "Général" (ni même dans les autres), mais il en est respectueux. Ce qui ne va pas sans m'étonner, d'ailleurs

[Fabrice.Tres.Net]

Je n'ai pas vérifié si cela est bien sauvegardé car je veux conserver mes divers commentaires, mais voilà ce que j'obtiens si je rajoute des coins arrondis!

Ajout:
Si je rentre dans l'onglet

Code : Tout sélectionner

border-radius: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;

j'obtiens comme code

Code : Tout sélectionner

  <style type="text/css">
p {
  border: 1px solid blue;
  -moz-border-radius-bottomleft: 1em;
  -moz-border-radius-bottomright: 1em;
  -moz-border-radius-topright: 1em;
  -moz-border-radius-topleft: 1em;
}

  </style>

[gilles.d2]

désolé....avec moi cela ne marche pas....faut il répéter que je suis débutant et la démarche ne me parait pas très claire !!

[gilles.d2]

il n'y a pas de tuto qui l'explique clairement comment faire ????

[chinon37]

je persiste et signe: sur une feuille css liée, impossible d'appliquer ces propriétés css3:
J'ouvre l'éditeur css feuille liée > je rentre l'adresse d'une feuille de style css quasi vierge > je la sélectionnes
> je crée les classes et je colle dans l'onglet général pour chaque classe les propriétés souhaitées
> je clique sur ok
Rien ne se passe sur le div concerné, auquel j'ai appliqué les classes (les classes apparaissent bien dans la barre de tâches à la suite du div)
Je retourne dans ma feuille de style. Pour les classes concernées, l'onglet général est vide!

Quelqu'un pour me contredire? Si oui, comment s'y prend-il ?

Edit: Je vais me contredire moi-même:
pour les coins arrondis, c'est ok et l'éditeur css le conserve bien en décomposant chaque coin comme expliqué par Fabrice. par contre, des propriétés comme l'ombre portée ou la couleur de fond en dégradé disparaissent et ne s'appliquent pas.

[Ymai]

Bonjour

il n'y a pas de tuto qui l'explique clairement comment faire ????

Il suffit de suivre le premier tuto venu qui explique comment utiliser les feuilles de styles.
Ensuite, pour un sélecteur donné (h1, par exemple), il faut écrire *à la main* les directives non-standard dans l'onglet "Général". Voir à ce sujet la copie d''écran proposée, juste un peu plus haut, par l'homme qui tutoie les nuages (principalement dans les Vosges).

[gilles.d2]

j'y comprend rien quand je tape a la main ...ensuite tout disparait !!!
pas très claire quand même pour un novice !!!