Partage
  • Partager sur Facebook
  • Partager sur Twitter

Transparence et ombre portée ?

en css sur <div> et <h1>

    11 janvier 2006 à 19:06:47

    bonjour

    Deux questions en fait :


    1) est-il possible de jouer sur les transparences des blocs div avec le css ?


    Je m'explique. J'ai une image de fond dans mon body (page css, pas (x)html) et je voudrais mettre une couleur sur mes blocs div, mais je voudrais que celles-ci soient légèrement transparente pour laisser apparaitre ma background-image. Est-ce possible ?


    2) existe-t-il une propriété en css qui permette d'ajouter une ombre portée à un texte (un titre par exemple) ?


    Le luxe serait qu'on puisse la flouter (soften shadow) pour donner plus de classe.
    • Partager sur Facebook
    • Partager sur Twitter
      11 janvier 2006 à 19:17:02

      Je voudrais que celles-ci soient légèrement transparente pour laisser apparaitre ma background-image. Est-ce possible ?

      ==>Ca doit pas être possible, essaie plutôt de créer une image avec l'opacité qui te convient et mets la en background.

      Existe-t-il une propriété en css qui permette d'ajouter une ombre portée à un texte (un titre par exemple) ?

      ==>Non, après peut-être que certaines polices le font mais il faudra demander aux visiteurs de la télécharger et c'est galère.
      • Partager sur Facebook
      • Partager sur Twitter
        11 janvier 2006 à 19:22:17

        C'est clair et net. En tout cas pour les polices. Mais pour la transparence tu sembles moins sur. Or j'ai vu des sites qui semblaient utiliser la transparence dans leur div (je dit bien "semblent" car ce n'est qu'une supposition).

        http://www.rapid-ideas.com/themes/pro/usine.html

        Habiller directement l'image fond me semble une solution mais le problème est que la taille de la page doit être fixe. Or je souhaiterais jouer sur quelque chose de beaucoup plus souple.

        Merci pour l'info

        P.S

        je viens de trouver ça sur SELFHTML.org :

        http://fr.selfhtml.org/css/proprietes/police.htm#text_shadow
        • Partager sur Facebook
        • Partager sur Twitter
          11 janvier 2006 à 23:37:18

          bonjour,

          Citation : pascal3d

          1) est-il possible de jouer sur les transparences des blocs div avec le css ?

          Je m'explique. J'ai une image de fond dans mon body (page css, pas (x)html) et je voudrais mettre une couleur sur mes blocs div, mais je voudrais que celles-ci soient légèrement transparente pour laisser apparaitre ma background-image. Est-ce possible ?


          oui, en css tu as une fonction d'opacité, qui te permet de regle la transparence de 0 a 100%:
          Cette fonction n'est pas supporte par tout les navigateurs, et quelques un ont leur propre attributs css,
          ce qui rend l'effet adaptable a la majorité des navigateurs actuelles.

          en cherchant sur le forum tu aurais pu trouver ceci: http://www.siteduzero.com/forum-83-5755-rendre-une-image-transparente.html

          a plus


          <edit>
          et pour l'ombrage des polices, il te faut superposer 2 ou 3 textes identiques avec un leger decallage a l'aide de position:absolute et des z-index, c'est un peu du bricolage et les moteurs de recherche ou les navigateurs sans css voient (ou lisent) plusieurs fois le même texte.</edit>
          • Partager sur Facebook
          • Partager sur Twitter
          | Mes bout de codes HTML/CSS sur Codepen : /gcyrillus | /gc-nomade | Un_tuto:1 menu HTML/CSS3 et variantes |
            14 janvier 2006 à 2:01:25

            @ gcyrillus

            magnifique ça fonctione !!! merci beaucoup.
            Le problème conciste maintenant à superposer un texte sur le div qui ne soit pas sujet à la transparence (si j'intègre le texte dans le div il devient transparent et si je l'écrit en dehors du div, il s'affiche... à coté du div. Or je souhaiterais qu'il soit dans le bloc).
            Il doit y avoir une solution avec les z-index. Je vais essayer de chercher dans cette direction. Mais je suis toujours preneur d'une solution si quelqu'un en a une rapide.

            Merci et amitié

            p.s

            concernant les ombres portées sous les textes, j'ai bien la confirmation que la fonction existe... mais ne fonctionne pas encore.
            Il s'agit effectivement de {text-shadow: ;}
            Un des thèmes de Rapidwaever l'utilise (thème blog) et la fonction est rédigée comme suit quand on jète un oeil sur le fichier css associé :

            #pageHeader h1 {text-shadow: 2px 2px 2px #07326d;}
            • Partager sur Facebook
            • Partager sur Twitter
              14 janvier 2006 à 6:38:54

              salut ,pour l'ombre portée tu as une propriété qui fonctionne sous IE uniquement si ca peut faire ton bonheur
              filter: Shadow(Color=#000, Direction=-20);
              pour recuperer l'opacité du texte il faut faire un bloc de la largeur et hauteur du texte position:absolute qui vienne se superposer a celui qui est transparent
              • Partager sur Facebook
              • Partager sur Twitter

              Transparence et ombre portée ?

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
              • Editeur
              • Markdown