michael-drehlich.name

simple-css.com

Des coins arrondis avec border-radius - CSS en toute simplicité - Simple CSS

http://www.simple-css.com/article-de-test

Des coins arrondis avec border-radius. Il est loin le temps des découpages photoshop pour faire des conteneurs aux coins arrondis. Amusez vous avec cette syntaxe toute simple de border-radius:. Border-radius: haut-gauche haut-droit bas-droit bas-gauche. Pour plus de plaisir variez les unités: px, %, em …. Petit conseil, concentrez vous sur le contenu. Div class=arrondi Un cadre aux coins arrondis /div. Arrondi{ border-radius:5px 5px 15px 5px; border:1px solid #222 }. Un cadre aux coins arrondis.

simple-css.com

Du relief pour vos textes - CSS en toute simplicité - Simple CSS

http://www.simple-css.com/du-relief-pour-vos-textes

Du relief pour vos textes. L’ombre sur un texte peut avoir une valeur décorative, mais plus important elle peut aider à la lisibilité! Voici la syntaxe de base de text-shadow:. Text-shadow: décalage-horizontal décalage-vertical étendu. Les ombres peuvent se combiner, le séparateur est la virgule. L’astuce pour avoir un texte bien lisible c’est de combiner trois couleurs: la couleur du texte, la couleur de fond et la couleur de l’ombre. P class=ombre Un texte clair sur fond gris, avec une ombre noire /p.

simple-css.com

Un mélange de transitions et de transformations - CSS en toute simplicité - Simple CSS

http://www.simple-css.com/un-melange-de-transitions-et-de-transformation-css3

Un mélange de transitions et de transformations. Préparez vos div (ou tout autre élément) à tourner, grandir, rapetisser, se déformer ou glisser! La transition doit être appliquée sur l’élément de base. La syntaxe est:. Transition: [propriété-css] [durée] [type]. Combinez-la à une transformation, placée sur la pseudo classe :hover du même élément. Puis laissez parler votre imagination! Div class=tournis Sans dessus dessous /div. Ca ne fonctionne pas? Laquo; La vidéo et HTML5 font-ils bon ménage?

simple-css.com

La réflection - CSS en toute simplicité - Simple CSS

http://www.simple-css.com/la-reflection-css3

Miroir, mon beau miroir… Est-ce que tu peux refléter mes éléments HTML avec une simple propriété CSS? Oui, avec box-reflect mais à utliser avec précaution. En effet cette propriété n’est supportée que par le moteur webkit (et doit donc être préfixée) et est applicable sur les éléments de type block! Son intérêt est presque exclusivement décoratif, donc pourquoi ne pas l’utliser! Webkit-reflect: [right left below above] [distance] [dégradé];. Ca ne fonctionne pas? Des rayures grâce aux dégradés.

simple-css.com

La vidéo et HTML5 font-ils bon ménage? - CSS en toute simplicité - Simple CSS

http://www.simple-css.com/la-video-et-html5-font-ils-bon-menage

La vidéo et HTML5 font-ils bon ménage? Avec l’arrivée du tag video dans HTML5, on aurait pu penser qu’il n’y aurait plus eu aucun problème pour inclure n’importe quelle vidéo dans n’importe quelle page web! Mais c’est sans compter sur le bon vouloir des navigateurs et de leurs comptabilités, non pas du tag video , mais des codecs utilisés lors de l’encodage de la vidéo. Je n’évoquerai pas ici le format flash video généralement sous l’extension FLV. En cours d'encodage ;). Ca ne fonctionne pas?

simple-css.com

Des rayures grâce aux dégradés - CSS en toute simplicité - Simple CSS

http://www.simple-css.com/degrades-css3-repeating-linear-gradient

Des rayures grâce aux dégradés. Les dégradés CSS3 offrent un large choix de style pour vos sites: dégradé linéaire, angulaire, radial…. Intéressons-nous ici aux dégradés répétés:. Background: [prefix]-repeating-linear-gradient(début, couleur taille, couleur taille, .). Background: [prefix]-repeating-radial-gradient(couleur taille, couleur taille, .). Il devient alors très simple de faire des rayures ou hachures! Div class=zebra img src=pochoir.png/ /div. Ca ne fonctionne pas? Laquo; La réflection.

simple-css.com

Du noir et blanc pour mieux dévoiler les couleurs - CSS en toute simplicité - Simple CSS

http://www.simple-css.com/css3-grayscale-filter

Du noir et blanc pour mieux dévoiler les couleurs. Voici une des possibilités très intéressante de CSS3: la manipulation des caractéristiques d’une images comme sa couleur, son contraste, sa netteté…. Le type « grayscale. Raquo; va permettre d’afficher des images en noir et blanc! Il suffit ensuite de changer la valeur de ce filtre au survol pour retrouver l’image colorée. Img src=ma-photo.jpg class=nb/. Imgnb{ filter:grayscale(1); } img.nb:hover{ filter:grayscale(0); }. Ca ne fonctionne pas?