Faire de l'ombre aux CSS
Guy
Existe-t il un moyen d'obtenir des effets d'ombre avec les CSS sans
avoir à passer par des images de fond ?
Merci.
Guy
Olivier Miakinen
Le 27/07/2010 20:47, Guy a écrit :
>
> Existe-t il un moyen d'obtenir des effets d'ombre avec les CSS sans
> avoir à passer par des images de fond ?
Oui, avec CSS3. Ce n'est pas encore standard, mais il y a moyen de
l'obtenir dans quelques navigateurs.
Voir par exemple :
<http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-shadow.html>
Plus généralement :
<http://www.google.fr/search?q=css+shadow>
Cordialement,
--
Olivier Miakinen
Guy
> Bonjour,
>
> Le 27/07/2010 20:47, Guy a écrit :
>
>
>
> > Existe-t il un moyen d'obtenir des effets d'ombre avec les CSS sans
> > avoir à passer par des images de fond ?
>
> Oui, avec CSS3. Ce n'est pas encore standard, mais il y a moyen de
> l'obtenir dans quelques navigateurs.
>
> Voir par exemple :
>
> Plus généralement :
> <http://www.google.fr/search?q=css+shadow>
>
> Cordialement,
> --
> Olivier Miakinen
Merci ! Je vais regarder ça. Quant est-il de la validation de la page
dans ce cas ?
Guy
Olivier Miakinen
>
>> Bonjour,
>>
>> [...]
>>
>> Cordialement,
>> --
>> Olivier Miakinen
Tu saurais me dire l'intérêt de conserver ça dans ta réponse ?
> Merci ! Je vais regarder ça. [Qu'en] est-il de la validation de la page
> dans ce cas ?
Tu as 0 % de chance de pouvoir valider les CSS actuellement si tu
utilises des propriétés CSS3 (avec ou sans les préfixes propres aux
navigateurs). Si tu tiens au tampon « valide CSS 2.1 », tu ne peux pas
utiliser d'ombrage.
--
Olivier Miakinen
Guy
Oui, c'est bien ce qui me semblait. Mais bon pourquoi se priver d'une
amélioration qui deviendra standard quand le CSS3 sera validé. Merci
pour le "quant", j'ai envoyé trop vite sans me relire ;-)
Je vais regarder aussi les dégradés de couleurs.
Guy
Guy
réponse...
SAM
> Bonjour,
>
> Existe-t il un moyen d'obtenir des effets d'ombre avec les CSS sans
> avoir à passer par des images de fond ?
avec IE qui sait faire ça beaucoup mieux que n'importe quel navigateur
et depuis longtemps (IE4? IE5?)
Non, en effet, ce n'est pas W3C-iste
et alors ?
à quoi servent les "commentaires conditionnels" ?
Pour du texte, il suffit de le répéter, le second dans son prorpre
conteneur en absolute et légèrement décalé.
<h2 class="ombre">
Hello ! <span>Hello !</span>
</h2>
.ombre { color: #999; position: relative }
.ombre span { color: #000; position: absolute; top: -2px; left: -2px; }
Hein ?
Ha! Oui, ça fait radoti radotage :-(
--
sm
Guy
Ah j'ai eu peur je pensais que c'était l'âge ;-)
Très simple en effet. Tu n'aurais pas un truc aussi pour obtenir des
dégradés de couleur pendant qu'on est là ?
Merci.
Guy
Pascale
news:4c4f3346$1...@meta.neottia.net:
> Voir par exemple :
> <http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-c
> ss-box-shadow-text-shadow.html>
Bizarre, il est dit dans le texte que ça ne fonctionne pas avec Opera,
pourtant, ça a bien l'air de.
--
Pascale
Guy
http://www.grenault.net/couples.htm
Fonctionne avec Firefox, Google Chrome et Safari.
Il y a juste un coin qui me chiffone : je ne sais comment faire un
angle arrondi à l'intérieur de la jonction du bandeau vertical et du
bandeau horizontal ?
On dirait du web2, enfin, une pâle imitation bien modeste...
Guy
Olivier Miakinen
>
>> Voir par exemple :
>> <http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-c
>> ss-box-shadow-text-shadow.html>
Ton nouvelleur coupe les liens. Et le texte cité. Je le remets :
<http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-shadow.html>
> Bizarre, il est dit dans le texte que ça ne fonctionne pas avec Opera,
> pourtant, ça a bien l'air de.
Peut-être que ça ne fonctionnait pas au moment de la rédaction de
l'article ? Ou bien son auteur n'a simplement pas testé avec Opéra.
--
Olivier Miakinen
docanski
Guy ecrit ce qui suit en ce 27/07/2010 20:47 :
> Bonjour,
Salut !
> Existe-t il un moyen d'obtenir des effets d'ombre avec les CSS sans
> avoir à passer par des images de fond ?
Oui, en passant par les positions absolues de CSS2.
J'ai commis, il y a une dizaine d'années déjà, un petit exposé à ce
sujet, là :
http://docanski.free.fr/valastuc/fds20a.htm
Rassure-toi : les positions absolues peuvent être enfermées dans des
calques aux positions relatives.
Cordialement,
--
docanski
Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Pascale
news:4c4ff5bf$1...@meta.neottia.net:
> Peut-être que ça ne fonctionnait pas au moment de la rédaction de
> l'article ? Ou bien son auteur n'a simplement pas testé avec Opéra.
Ou c'est moi qui dis une bêtise : avec Opera, les coins ne sont pas
arrondis.
--
Pascale
Tr@nquille
moi je trouve que tout fonctionne nickel avec opera!
ombres, coins arrondis etc, nickel chrome (si j'ose dire)
--
Réfléchissons un peu: ça n'est pas donné à tout le monde de rire de
soi. (Caricatures...)
tranqui...@gmail.com
Guy
> moi je trouve que tout fonctionne nickel avec opera!
> ombres, coins arrondis etc, nickel chrome (si j'ose dire)
>
Cela ne marche pas avec ma page mais j'ai sans doute oublié des
instructions spécifiques à Opera ?
J'ai utilisé -moz- et -gemkit- Il y a peut être -opera- ?
Tr@nquille
> http://www.grenault.net/couples.htm
il faut rajouter ceci dans ton css:
border-radius: 10px;
au même endroit que les autres (dans .cadre je crois avoir vu) et avec
le même px de 10 il me semble...
j'ai testé avec cette page (opera permet de tester une modif directe
dans la page, j'ai donc enlevé cette ligne et j'ai eu les coins carrés
à la place des coins arrondis)
<
http://www.alsacreations.com/xmedia/tuto/exemples/arrondis/arrondi.html>
--
Nul n'est infaillible! (Vécu)
tranqui...@gmail.com
Guy
> il faut rajouter ceci dans ton css:
> border-radius: 10px;
> --
> Nul n'est infaillible! (Vécu)
Bonjour,
Je viens de le faire et je confirme, les arrondis sont bien reconnus
par Opera et pas besoin d'ajouter un préfixe !
Par contre je n'ai pas trouvé pour les dégradés.
Merci.
Olivier Masson
> Je viens de le faire et je confirme, les arrondis sont bien reconnus
> par Opera et pas besoin d'ajouter un préfixe !
>
> Par contre je n'ai pas trouvé pour les dégradés.
>
En effet, arrondis, ombres et transitions (-o-transition) fonctionnent
sous Op, mais pas les dégradés.
Tu pourras toutefois trouver une astuce basée sur background-size ici :
http://chetzit.com/blog/css/19.html
rm
Le jeudi 29 juillet 2010 à 11:04, Olivier Masson a écrit :
> Le 29/07/2010 09:55, Guy a écrit :
>
>> Je viens de le faire et je confirme, les arrondis sont bien reconnus
>> par Opera et pas besoin d'ajouter un préfixe !
>>
>> Par contre je n'ai pas trouvé pour les dégradés.
>>
>
> En effet, arrondis, ombres et transitions (-o-transition) fonctionnent
> sous Op, mais pas les dégradés.
Pour le moment, j'ai l'impression qu'aucun navigateur n'implémente les
dégradés de la même manière.
> Tu pourras toutefois trouver une astuce basée sur background-size ici :
> http://chetzit.com/blog/css/19.html
Il est aussi possible en attendant d'utiliser du svg en image de fond,
style : {background-image:url(gradient.svg);}
comme indiqué en
http://my.opera.com/ODIN/blog/2010/06/25/o-vendor-prefixed-css-supported-in-opera-10-50#comment32483432
@+
--
rm
rm
> On 28 juil, 19:00, Tr@nquille <tranquille....@gmail.com> wrote:
>
>> il faut rajouter ceci dans ton css:
>> border-radius: 10px;
>> --
>> Nul n'est infaillible! (Vécu)
>> tranquille....@gmail.com
>
> Bonjour,
Salut,
> Je viens de le faire et je confirme, les arrondis sont bien reconnus
> par Opera et pas besoin d'ajouter un préfixe !
>
> Par contre je n'ai pas trouvé pour les dégradés.
Opera documente de manière assez détaillée les niveaux de Standard
supportés par les différentes versions de ses moteurs de rendu, voir
http://www.opera.com/docs/specs/
Les dégradés CSS3 n'y figurent pas encore.
@+
--
rm
Guy
> Le jeudi 29 juillet 2010 à 09:55, Guy a écrit :
>
> > On 28 juil, 19:00, Tr@nquille <tranquille....@gmail.com> wrote:
>
> >> il faut rajouter ceci dans ton css:
> >> border-radius: 10px;
> >> --
> >> Nul n'est infaillible! (Vécu)
> >> tranquille....@gmail.com
>
> > Bonjour,
>
> Salut,
>
> > Je viens de le faire et je confirme, les arrondis sont bien reconnus
> > par Opera et pas besoin d'ajouter un préfixe !
>
> > Par contre je n'ai pas trouvé pour les dégradés.
>
> Opera documente de manière assez détaillée les niveaux de Standard
>
> Les dégradés CSS3 n'y figurent pas encore.
>
> @+
> --
> rm
Merci à tous. On attendra...
Guy