CSS3 Drop Shadows Generator - Application. Les bordures en CSS3. Nous verrons ici comment créer des bordures aux coins arrondis (border-radius), des bordures à partir d'image (border-image), des bordures aux couleurs dégradées (border-color) et enfin, des ombres portées aux boîtes (box-shadow).
Et un petit bonus que je vous laisse découvrir par vous-même ! II-A. Généralités▲ Jusqu'à présent pour réaliser des boîtes aux coins arrondis, nous devions utiliser une ou plusieurs images à appliquer en arrière-plan dans des <div> imbriqués ou des tableaux à neuf cellules. Nous passions plus de temps à découper nos éléments en un coin en haut à gauche, puis à droite, recoller les morceaux parce qu'on a donné un coup de ciseau de travers… Eh bien tout ceci est terminé ! Avec le CSS3, il nous est possible de faire un angle arrondi via la propriété border-radius.
Voici sa syntaxe : <valeur>{1,4} / <valeur>{1,4} Sa compatibilité : IE9+, Firefox 4+, Chrome, Safari 5+ et Opera 10.50+. Vous voyez, rien de plus simple. Heu...m'sieur l'arbitre ! Créer des effets étonnants avec la propriété CSS3 box-shadow. La propriété box-shadow permet d'ajouter différentes ombres (interne ou externe) sur les éléments de type bloc.
Pour cela, vous devez préciser certaines valeurs : color, size, blur et offset. <shadow> = inset? && [ <length>{2,4} && <color>? ] De la science occulte ? Pas du tout, voici un exemple de base : 3D Text. Creating A Rocking CSS3 Search Box. CSS3 is the next generation style sheet language.
It introduces a lot of new and exciting features like shadows, animations, transitions, border-radius etc. Although the specifications have not been finalized yet, many browser manufacturers have already started supporting many of the new features. In this tutorial, we will explore some of these features like text-shadow, border-radius, box-shadows and transitions to create a rocking search field. The image below shows how the search filed looks like, or check out a working demo.
The photoshop version of this search field was created by Alvin Thong and can be downloaded from here. Ready? 1. We’ll start with the HTML markup. This is followed by a <div> with an ID called #main. Here’s how the code looks like: <! <! 2. To create the big box around the form, we will add styles to the <div> with the ID of #main. The important piece of code here is the border-radius declaration and the box-shadow declaration.
(Preview) 3. 4. The Complete (CSS) Code. 39 Box Shadows. Du flou gaussien en CSS3. J'adore CSS3.
Chaque jour, j'en découvre un peu plus, et chaque jour, je suis surpris par de nouvelles utilisations intelligentes et un peu détournées des propriétés. Je suis retombé récemment sur cet article expliquant comment simuler un effet de flou gaussien sur du texte. Avant de passer aux explications, regardez un peu ce que ça donne appliqué sur cette page.
Je suis sympa, vous pouvez recliquer sur le même lien pour désactiver le flou. Maintenant, pour arriver à ça, il vous suffit tout simplement dans votre CSS de mettre la couleur de vos textes en transparent, et d'appliquer une ombre sur le texte à l'aide de la propriété text-shadow. Vous pouvez régler les 4 valeurs de la propriété text-shadow selon vos besoins. Comme d'habitude, cette propriété n'est supportée par aucune version d'Internet Explorer (même pas IE9, non non). Filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)"; TA-DAM !