mercredi 18 avril 2012

faire d'un lien un bouton

Catégorie : CSS : Ombrage

À l'aide du positionement et des pseudo :before ou :after il est aisée de caché le texte d'un lien sous une couleur de fond, , de degradé ou d'une image via content et de même de changer le texte affiché.

demo

Pour exemple ce simple lien en retour vers l'accueil Page d'accueil .

Lire la suite de : faire d'un lien un bouton

mercredi 09 mars 2011

menu horizontal fluide centré, effet incrusté.

Catégorie : CSS : Ombrage

Un menu centré et fluide dans tout les navigateurs

les règles de style pour le centrage se limite à deux lignes de bases ...

Lire la suite de : menu horizontal fluide centré, effet incrusté.

jeudi 20 janvier 2011

bordures et fonds originaux sans image.

Catégorie : CSS : Ombrage

Cette démonstration CSS3 n'est pas compatible avec IE8 et inf

Les nouvelles possibilités de style offertes , permettent de modifier l'aspect de nos boites H.T.M.L. en se passant des fonctions de bases d'un logiciel de graphisme.

Pour ceux qui n'en sont pas convaincu voici une serie de boites aux bordures et effet de fond réalisé sans images.Votre navigateur doit être récent et implémenter les regles de style suivantes:

  1. box-shadow
  2. text-shadow
  3. border-radius
  4. background radient
  5. background-size
  6. ombrages avec text-shadow et box-shadow multiples
  7. .

Comme les exemples des pages précédentes, la superposition et décalage d'ombres multiples permettent des effets de fondu, transition et contrastes.

Ces exemples ont étè dessiner avec le navigateur Firefox comme reference, Les resultats peuvent différer d'un navigateur à l'autre. Ces possibilité sont encore a l'état de brouillon, fin 2010, début 2011.Les résultats ne sont donc pas garantis :)

Couvercle plastique

box-shadow

Gradient

border-radius

Cadre

box-shadow

Cadre 2

box-shadow

Cadre 3

box-shadow

border-radius

box-shadow et gradient

franchouillard
pile
ou
face ?
white
blue
green
yellow
red,
purple
pink
white
blue
green
yellow
red,
purple
pink
box-shadow
batterie
case
Oh ! demo
18

samedi 18 décembre 2010

CSS3 SnowMan

Catégorie : CSS : Ombrage

I

SnowMan

I Do

SnowMan

Lire la suite de : CSS3 SnowMan

samedi 04 décembre 2010

une pile CSS , jaugez donc !

Catégorie : CSS : Ombrage

un autre exemple : une pile à 70% de charge

Aperçu de ce que votre navigateur est supposé afficher: Rendu css 3 dans Firefox avec box-shadow multiple

samedi 04 décembre 2010

ipod nano css

Catégorie : CSS : Ombrage

toujours sans image, une autre demonstration des possibilité de box-shadow

Démo et téléchargement de l'interface avec dewplayer intégré.

L'interface de base épurée au minimum (html,css de base, javascript et player mp3 flash (dewplayer) ou Cette interface elargie avec le css, javascript et player mp3 flash (dewplayer).

Demo visuel css ci-dessous

Et toujours l'aperçu du rendu si votre navigateur n'est pas capable de mettre en application les règles CSS utilisée :miniature : Aperçu dans Firefox

Renaud-mon HLM

  1. Let it Be
  2. Lady Gaga
  3. Celine Dion
  4. Paul MC Cartney
  5. Revolution w't b tvised
  6. Renaud-mon HLM
  7. Michael Jakson
  8. Purple Rain
  9. Rock the casba
  10. tout doucement
  11. les garçons

: Un autre test effectué avec gradient par adminxweb : Experiment: Realistic Ipod with CSS3

Voici un autre test Ipod jQuery et CSS . Celui ci est fonctionnel et trés complet ... a voir et tester donc. Mode d'emploi de l'ipod en anglais, si vous savez vous servir de l'original, le mode d'emploi est inutile :)

samedi 04 décembre 2010

etiquette

Catégorie : CSS : Ombrage

Ombre multiple pour text et box-shadow

Cette autre exemple CSS se base toujours sur :text-shadow et box-shadow.

Voici l'aperçu dans un navigateur récent et implementant ces deux regle de style :miniature : aperçu dans Firefox

sticker ou étiquette

vendredi 03 décembre 2010

boite a onglet: Photoshop ou CSS3

Catégorie : CSS : Ombrage

Photoshop ou feuille de style CSS 3 ?

Deux regle CSS 3 : box-shadow et border-radius sont pleine de possibilité pour stylé des boites, et leur textes aussi avec text-shadow

transformons un lien en un beau bouton bien flashy façon onglet avec effet :hover: photoshop gratuit

En partant de ce test, on peut, en principe, facilement imaginer une boite a onglet: sauf que les style ne sont pas totalement adapté a ce genre de manipulation du contenu si l'on veut aussi la boite interactive ...

Boite a onglet

Boite A
plus haut
plus haut
plus haut
plus haut
plus haut
plus haut
plus haut
Boite B
court
Boite C
Firefox okay
operatrés moyen (defaut outline sur focus et dans les style selon l'url avec ancre ou non )
chrome okay

Lire la suite de : boite a onglet: Photoshop ou CSS3

vendredi 03 décembre 2010

Box-shadow et text-gradient

Catégorie : CSS : Ombrage

text-gradient simple superieur

Resultat obtenu avec une ombre interne ton sur ton recouvrant en partie le texte, a l'aide de box-shadow et :before pour generer une boite CSS se superposant au texte.

text-gradient simple inferieur

Même technique, l'ombrage est deplacé dans la zone inferieur de la boite.

(dans la suite de ces textes, testons un gradient double et du multiligne)

Lire la suite de : Box-shadow et text-gradient

dimanche 28 novembre 2010

fonds assombris, masque css

Catégorie : CSS : Ombrage

techniques pour assombrir ou opacifié un image ou couleurs de fond sur les bords.

Couleurs de fonds et fond radiant avec background-image

Couleurs:
fond jaune, bords assombris

Images et fond jaune,
bords assombris par un masque décallé en démo.

supplement avec fichier svg pour opera (double emploi dans Chrome et Safari))

Images et fond jaune,
bords assombris par un masque décallé en démo.

image et fond jaune , ombre interne

en arrondis

Couleurs:
fond jaune, bords assombris

Images et fond jaune,
bords assombris par un masque décallé en démo.

Couleurs de fonds et fond radiant avec box-shadow:inset x x x

fond jaune et ombre interne

image et fond jaune , ombre interne

en arrondi

fond jaune et ombre interne

image et fond jaune , ombre interne

page 1 sur 2 | suivante > | >>