dimanche 28 novembre 2010

galerie avec shadow transitions et images

Catégorie : CSS : Ombrage

test a effectuer dans vos navigateurs

version 4
okay!

toutes versions
Nop!

ça fait un moment
Yo !

transition
okay!

V 10
YES!

bien sur
que NON!

dimanche 28 novembre 2010

TV en CSS et effet de transitions

Catégorie : CSS : Ombrage

Si votre navigateur n'est pas Internet Explorer vous ne verrez pas la TV générée par la feuille de style, reste les copie d'écran ci-dessous.

Aperçu dans Firefox : miniature : aperçu dans firefox , différences de rendus miniature : aperçu dans 4 navigateurs .

t.v. virtuel Model css 3.

Écran virtuel dans un écran réel pour un contenu éphémère

°°° [|||||]

tests

passer la souris ou cliquer sur le bouton marche/arret pour allumer l’écran

Les effets de transitions de base ne se comportent pas de manière identique d'un navigateur à l'autre. Chrome étant le plus fluide et Opéra restant le plus confus en général

Pour les fond gradient en CSS incompatible avec Opéra , un fichier image svg se charge en arrière plan.

L'aspect TV est construit avec les effets d'ombrage que CSS3 nous permet d'appliquer, Les navigateurs récents permettrons d'en apprécier les résultats

vendredi 26 novembre 2010

bordures en degradé

Catégorie : CSS : Ombrage

-Dessines moi une télévision. Demande t-il à son Navigateur préféré.

Voici ce que Firefox a pu lui dessiner :miniature : une T.V. de style.

box-shadow, background:gradient, background-size, text-shadow et transform:scalex,x), :before, :after, display:table; et vertical-align pour transformé un élément en simulacre d'écran tv

Le principe de faire ds bordures en dégradé est possible dans Firefox 3.5 a l'aide d'une règle propriétaire. L'idée qui n'est pas reprise par les autres navigateurs.Voir -moz-border-top-colors.

Une fois de plus, je vais détourné l'utilisation de base de box-shadow pour créer une bordure avec un dégradé de couleur et simulé une T.V. , un reflet sur l'écran avec un fond radiant oblique

Je profite de l'occasion pour faire un clin d'oeil a Internet Explorer en utilisant une icone en fond sur les texte apparaissant dans la simili T.V.

Notez, que cette icône est étiré avec background-size;et opacifiez à l'aide d'une ombre interne dans certain navigateur, box-shadow:inset x x x;.

Not made by

La TV numerique

CSS3 passe à la TV

* * * * * * *

Ecran Plasma, chip !

* * * * * * *

Pour la suite, Passons en 16:9 avec transform:scale(1.16,0.9); ...

Lire la suite de : bordures en degradé

samedi 20 novembre 2010

box-shadow multiple - inset et outset

Catégorie : CSS : Ombrage

une ardoise 70's

Pour navigateurs moderne !

tests box-shadow

Pas d'alternative pour I.E.

tests box-shadow

pluch petite

samedi 23 octobre 2010

menu CSS3, sans images (box & text-shadow).

Catégorie : CSS : Ombrage

Suites a ces quelques exemples (voir articles precedents dont ombre multiples), box-shadow avec des boites générées ou non , semble plus facile a utilisé dans certains cas que les fond radiant (background-image:radial-gradient();), en tout cas cela offre des possibilités supplementaires.

Le chevauchement et les effets d'opacité sont plus precis et la syntaxe plus simple sans avoir a se soucié de taille. La fluidité est au rendez-vous.

Enfin, css n'est pas la pour remplacé d'autres techniques qui existent déja.

vendredi 15 octobre 2010

box-shadow multiple et rgba()

Catégorie : CSS : Ombrage

Tout comme text-shadow, box-shadow permet de generer plus d'une ombre sur un element.

Comme par exemple ce paragraphe suivant:(effets C.S.S.3 toujours incompatible avec Interner Explorer).

Made in France

Aperçu en image (Firefox 3.6):rendu visuel dans Firefox 3.6

voir infos complementaire pour webkit(safari/chrome) et internet Explorer dans les commentaires

Lire la suite de : box-shadow multiple et rgba()

jeudi 14 octobre 2010

text-shadow et rgba()

Catégorie : CSS : Ombrage

text-shadow ne permet pas seulement un simple effet d'ombre , mais peut en creer presqu'autant qu'on le souhaite .

text-shadow et le poisson epineux

demonstration incompatible avec I.E.?.

)0^0(

Lisez la suite de cette article pour voir ce que l'on peut faire dans IE, et ne pas faire.

Aperçu en image dans Firefox: Aperçu en image dans firefox des effets d'ombrages multiple sur les caracteres : )0^0(

Aperçu en image du titre dans Internet Explorer:aperçu dans Internet Explorer

Lire la suite de : text-shadow et rgba()

lundi 20 septembre 2010

C S(ecret) S(tory) 3

Catégorie : CSS : Ombrage

Dans C.S.S.3 , il y a SECRET STORY ...

Ceci n'est pas une image

SECRET STORY

Les styles sont dans le code source de cette page . Les valeurs :taille de police , line-height et top sont a adaptées selon vos pages , Cet exemple test ne fonctionne pas dans Internet Explorer : aucun activex n'a étè malmené !

Lire la suite de : C S(ecret) S(tory) 3

< précédente | page 2 sur 2