coins arrondies

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 19 mai 2010, 18:51

Tu ajoutes ces lignes dans chaque défintion CSS des éléments pour lesquels tu désires une ombre.

Par exemple, si tu veux mettre une ombre à tous les titres de niveau , tu ajoutes dans tes définitions css

Code : Tout sélectionner

.h1 {
.... ton code existant;
-webkit-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888; 
}

Un exemple complet:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Unexemple</title>
  <style type="text/css">
*#menu {
  border: 1px solid #3333ff;
-webkit-box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888; 
}</style>
</head>
<body>

<ul id="menu">
  <li>Choix1 </li>
  <li>Choix 2 </li>
  <li>Choix 3</li>
</ul>

</body>
</html>

loubiankas · Message par **loubiankas** » 19 mai 2010, 19:32

Bien vu pour les "coins arrondis". Cela donne bien sûr plus de douceur dans ce monde de...
Cela marche bien sur Firefox mais pas sur IE. Pourquoi ?

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 19 mai 2010, 20:19

loubiankas a écrit :Bien vu pour les "coins arrondis". Cela donne bien sûr plus de douceur dans ce monde de...
Cela marche bien sur Firefox mais pas sur IE. Pourquoi ?

Parce que micro soft, avec GenialSoft, VraiSoft, HonnestSoft, ou BienEcritSoft ou JeSuisLesRecommendationsetNormesSoft, cela marche sans kack !

gilles.d2 · Message par **gilles.d2** » 23 mai 2010, 23:46

Bon je doit être nul....mais impossible de mettre l'ombre en css....peu t-on avoir plus d'explication plus imagés SVP....arrêter de parler en pro...penser au débutant SVP...merci

Message par **chinon37** » 24 mai 2010, 19:05

Petite question de base:
As tu compris ce qu'est une feuille de style css, quel est sa structure, ce que sont les règles?

gilles.d2 · Message par **gilles.d2** » 27 mai 2010, 13:07

Oui tout cela je l'ai bien compris....quand je passe sur un éditeur, l'ombre se fait bien, mais c'est dans Kompozer que je bloc, il ne restitue pas toujours ce qu'il devait faire au niveau de certain effet ( entre autre les ombres !) pour le reste je me débrouille...

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 27 mai 2010, 13:34

Kompozer n'affiche pour le moment que les styles ccs2, les effets configurables dans lesonglets de CasCadeS. Les ombres font parties des css3 donc ne sont pas visibles.
Il faut juste enregistrer et regarder l'effet sous Firefox ou Safari...

malamok · Message par **malamok** » 08 juil. 2010, 11:23

chinon37 a écrit :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

bonjour,

j'ai le même souci avec les propriétés webkit-border-radius et border-radius qui ne sont pas prises en compte par Kompozer ( 0.7.10).Je les ai éditées avec Top Style lite et tout a fonctionné un moment puis quand je suis retourné dans CasCadeS pour modifier d'autres paramètres certaines balises ont disparues avec leurs propriétés. En revanche, les ombres sont bien affichées sur les navigateurs malgré que la propriété box-shadow n'apparaisse pas dans CasCadeS ni dans la feuille de style!!!!
Est-ce un problème de compatibilité avec la version de Kompozer? dois-je passer à la version 0.8b?
je vois que sur le site de Fabrice les arrondis sont visibles sur Safari, Opéra... comment y arriver sans perturber les feuilles de styles

Merci

Message par **Ymai** » 08 juil. 2010, 11:44

Bonjour
Je crains que le seul qui pourra donner une réponse définitive, car il connaît les arcanes du code sous-jacent, est Kazé.
Mais il ne m'étonne que fort peu que toutes les règles CSS qui ne font pas partie d'une norme CSS2 bien établie soient nettoyées. C'est l'un des objectifs de KpZ que de produire du code propre, correspondant à une grammaire précise.
Le moteur de KpZ 0.7 étant Gecko 1.7 et celui de KpZ 0.8 étant Gecko 1.8 , on devrait trouver les informations de compatibilité là:
https://developer.mozilla.org/en/Mozill ... port_chart

Message par **chinon37** » 08 juil. 2010, 13:50

Bonjour,
Pour compléter l'éminent Ymai, je confirme que les propriétés Css3 entrées dans une feuille de style par un éditeur de texte de type Notepad++ (ou autre) ou un éditeur css sont irrémédiablement nettoyées dès que cette feuille de style est ouverte par l'éditeur css de KompoZer.
Cela provient probablement du fait que cet éditeur a été prévu pour les règles Css2 (comme l'a doctement dit Ymai) et qu'il faudra une mise à jour de cet éditeur pour que ce règles soient sauvegardées.
Mais il faut bien noter que le Css3 est toujours une norme à l'état de brouillon (brouillon très propre mais brouillon tout de même). il suffit pour s'en convaincre de constater que pour la règle concernée, il est nécessaire de mettre un -moz- ou -webkit- devant pour que cela fonctionne.
A noter que cela fait plus de 10 ans que le W3c travaille sur le css3 (publication d'une ébauche des selecteurs Css3 par D. Glazman au W3c en août 1999!)

malamok · Message par **malamok** » 08 juil. 2010, 14:52

chinon37 a écrit : Mais il faut bien noter que le Css3 est toujours une norme à l'état de brouillon (brouillon très propre mais brouillon tout de même). il suffit pour s'en convaincre de constater que pour la règle concernée, il est nécessaire de mettre un -moz- ou -webkit- devant pour que cela fonctionne.

bonjour,
ce que je ne comprend pas, c'est que le préfixe -moz- reste visible mais pas -webkit- qui est nécessaire pour opéra, Safari et Chrome. Autre mystère, la propriété shadow n'apparait plus nul part mais continue à fonctionner sur tous les navigateurs même IE

En rentrant les propriétés webkit directement dans la feuille de style via l'éditeur de css les arrondis sont appliqués dans les navigateurs cités plus haut mais après d'autres modification soit par CasCadeS ou l'editeur, ça me met une belle pagaille, balises disparues, propriétés qui changent...
Comme je l'ai dit ce matin, Fabrice sur son site de parapente y arrive, du moins pour les arrondis, certaines propriétés ne s'appliquent pas ailleurs que sur Firefox

.
Ce serait sympa qu'il nous indique la marche à suivre

merci

Message par **Ymai** » 08 juil. 2010, 15:59

malamok a écrit :
chinon37 a écrit : Mais il faut bien noter que le Css3 est toujours une norme à l'état de brouillon (brouillon très propre mais brouillon tout de même). il suffit pour s'en convaincre de constater que pour la règle concernée, il est nécessaire de mettre un -moz- ou -webkit- devant pour que cela fonctionne.
bonjour,
ce que je ne comprend pas, c'est que le préfixe -moz- reste visible mais pas -webkit-

Normal: -webkit n'est pas une expression connue du moteur Gecko - Mozilla

Je crains que la seule façon de s'en sortir sera d'utiliser une feuille de style externe séparée contenant les expressions litigieuses et de ne *jamais* l'éditer en utilisant KompoZer. Il me semble que c'était la solution préconisée par l'Homme qui tutoie les nuages (et qui doit certainement pomper à 4 m/s sous un beau cumulus bien dodu à l'heure qu'il est).

malamok · Message par **malamok** » 15 juil. 2010, 15:16

bonjour,
en suivant les conseils d'Ymai, les propriétés s'appliquent à Opéra, Chrome, Safari. Reste plus qu'à s'attaquer à IE;
Merci pour les astuces

voir le résultat: http://lebars.richard.perso.sfr.fr/

Geckozone

coins arrondies

Re: coins arrondies

Re: coins arrondies

Re: coins arrondies

Re: coins arrondies ombré

Re: coins arrondies

Re: coins arrondies

Re: coins arrondies

Re: coins arrondies

Re: coins arrondies

Re: coins arrondies

Re: coins arrondies

Re: coins arrondies

Re: coins arrondies

Qui est en ligne ?