28172 sujets

CSS et mise en forme, CSS3

[Résolu] Cadre aux bords arrondis et transparence

Salut,

Le site que je crée utilise une très large image de fond (2000 px).

Je souhaite réaliser un cadre aux bords arrondis, fluide en largeur et transparent (afin de voir l'image de fond dont je parle en début de message) sans utiliser les nouvelles propriétés (radius).

J'ai lu de nombreux messages à ce sujet ai fait quelques essais mais ça ne donne pas de bons résultats. J'ai pensé utilisé la propriété <table> avec les images mais ce n'est pas adapté.

Merci par avance
Auriez vous un lien explicatif ou sinon le script permettant d'exécuter cette fonction en JavaScript?
Merci rodolpheb mais malheureusement, cela n'affiche pas les coins arrondis de curvyweb avec mon navigateur qui est mozilla FF 17.0.1

@Florian_R : je refuse d'utiliser cette nouvelle fonctionnalité car elle pose des problèmes de compatibilité sur certains navigateurs.

Ne serait ce pas faisable via des image même si cela ressemble à du bricolage?
K3p' a écrit :
je refuse d'utiliser cette nouvelle fonctionnalité car elle pose des problèmes de compatibilité sur certains navigateurs.

Avez-vous déjà entendu parler de PIE.htc ?
K3p' a écrit :
@Florian_R : je refuse d'utiliser cette nouvelle fonctionnalité car elle pose des problèmes de compatibilité sur certains navigateurs. Ne serait ce pas faisable via des image même si cela ressemble à du bricolage?
Compatibilité de border-radius environ 80%, pour une feature qui ne vas pas "casser" le site.
Il y a des solutions à bases de background et de divs imbriqués, ou en JS (la plus connue étant Pie.htc proposé par Olivier C) mais c'est beaucoup dégrader la propreté du code et les performances pour pas grand chose.
Florian_R a écrit :
mais c'est beaucoup dégrader la propreté du code et les performances pour pas grand chose.

C'est vrai. Mais j'appelle la propriété css (behavior...) et le script js par détection du user agent quand je m'en sers. Ce qui permet de servir le code seulement aux navigateurs ciblés.
Modifié par Olivier C (12 Dec 2012 - 07:11)
a écrit :
C'est vrai. Mais j'appelle la propriété css (behavior...) et le script js par détection du user agent quand je m'en sers. Ce qui permet de servir le code seulement aux navigateurs ciblés.


Est ce bien un commentaire spécial du type [if IE]> ? Si autre chose pourriez vous m'expliquer la façon de procéder svp
Dans un fichier d'entête php de la page (ciblant IE 6 et 7) :
<?php if( strstr($_SERVER['HTTP_USER_AGENT'],'MSIE 8.0') || strstr($_SERVER['HTTP_USER_AGENT'],'MSIE 7.0')){ ?>
<link rel="stylesheet" href="votreCheminDeFichier/css/ie.css"/>
<?php } ?>

Et pour le fichier css appelé par cette méthode :
.toutesLesDivConcernee, .toutesLesClassConcernee { behavior: url(/PIE.htc);}

Quand au fichier PIE.htc, il est à mettre à la racine du site. Et ne vous inquiétez pas de la manière étrange dont il est appelé dans la feuille de style : c'est une spécificité Microsoft.
Modifié par Olivier C (12 Dec 2012 - 17:36)
C'est parfait! De quoi utiliser radius en étant sur que le site affichera des bords arrondis sur à peu près tous les écrans. Merci Rodolpheb, Florian_R et Olivier C
Modifié par K3p' (13 Dec 2012 - 08:10)
Sujet clos
Aller à