samedi 23 juin 2012

carrousel manuel 100% css3

Catégorie : CSS:Transitions

Variante du carrousel précédent avec une navigation pas à pas. (pas de js)

.

un

1

deux

2

trois

3

quatre

4

cinq

5

six

6

1

samedi 23 juin 2012

Onglet et carrousel ,100% CSS3

Catégorie : CSS:Transitions

Pour cet démo, 5 liens, 1 boite , :target et transition pour faire un carroussel qui va de gauche a droite.Pas de position:absolute; ici.


un

deux

trois

quatre

cinq

vendredi 11 mai 2012

Rideau coulissant en CSS (ouverture/fermeture)

Catégorie : CSS:Transitions

Pour cette démo, petite reproduction simpliste d'une scéne de théatre avec le rideau qui s'ouvre et se ferme.

Démo

Passez la souris au dessus du rideau pour l'ouvrir.

Animation complète dans Firefox où l'on voit le tissu du rideau se rétracter sur lui même et s'ouvrir légèrement en biais.

Au théatre

Ce soir !

Propriétés utilisées :
:before,:after,box-shadow, transition:, linear-gradient, background-size, transform:rotate();, ...

Visualisez le code source pour retrouvé les propriétés et valeurs CSS utilisées.

mardi 08 mai 2012

afficher cacher en alternance une boite

Catégorie : CSS:Transitions

Votre navigateur gère les animation CSS

un coup tu me vois , un coup tu me vois pas.

Votre navigateur ne gère pas les animation CSS,
essayez dans un autre navigateur.

Selon votre navigateur, une boite ci-dessus sera statique ou visible toutes les 10 secondes pendant 5 secondes

Il n'y a que Opéra qui a comportement étrange, La version 12 promet d’implémenter correctement ces règles.

mardi 08 mai 2012

message couvrant la page quelques secondes a l'ouverure

Catégorie : CSS:Transitions

test splash css3

Ce message va disparaitre dans quelques secondes, merci.

Pas de splash sans les animations CSS implementées

Cette Demo transparente se base sur : animation et @keyframe , pour maintenir l'affichage d'un conteneur avant de réduire sa taille a zéro.

Compatible uniquement avec les navigateurs supportant les animation , @keyframe .

L'animation ne provoquera aucun problème si votre navigateur n'est pas compatible, vous ne verrez rien de plus à l'ouverture de cette page

Pour réafficher ce message, il faut rafraichir la page.

samedi 05 mai 2012

Menu slide classique en image et transition

Catégorie : CSS:Transitions

demo simple avec les images de la précedentes démo .

Lien en DATA URI : Menu slide en image et CSS3 . ou la demo en ligne .

Structure:
conteneur + liens avec title et balise image.
effets:
au passage de la souris, deploiement de l'image.
Memoire du lien ayant le focus en quittant le menu.
(à remplacer par une classe .active ou à garder tel quel selon votre usage.)
CSS 2.1/3 :
:hover, transition:, :before, :focus, tabindex, transform:rotate(), transform-origin:, ....

tabindex est utilisé pour activer le focus au clique dans Chrome/Safari.

Demo

Cedits images images : lorempixum.com

vendredi 04 mai 2012

slide CSS3 minimaliste

Catégorie : CSS:Transitions

Voici une série d'images contenues dans des paragraphes qui peuvent recevoir le focus.

On ne montre que la premiere, ensuite pour visualisé les suivantes, il suffit de cliquer dessus ou de se servir de la touche de tabulation.

tabindex va permettre d'activer le focus et de boucler visuellement sur la premiere image.

sport 1

sport 2

sport 3

sport 4

sport 5

sport 6

sport 7

sport 8

sport 9

sport 10

images : lorempixum.com

minimaliste , dites vous ?

Oui, aucun lien , checbox ou radio button ne sont malmenés ici ;) !

Tutoriel pour réaliser la base et un peu plus.

vendredi 04 mai 2012

menu horizontal à 2 niveau centré (variante)

Catégorie : CSS:Transitions

Voici un second menu avec les effets réalisées en CSS sans javascript

démonstration

effet experimental

Une tentative de simulation du clic/focus pour ouvrir fermé un menu n'est pas convaincante en finale, quelque cafouillage ou incomprehension de ce qu'il se passe pour le visiteur. Effet basé sur tabindex, :focus , :hover et le selecteur adjacent +

Lire la suite de : menu horizontal à 2 niveau centré (variante)

jeudi 03 mai 2012

Slide avec target et transition

Catégorie : CSS:Transitions

démonstration

Demo


slide 1


slide 2


slide 3


slide 4


slide 5

limite et compatibilités

...

Lire la suite de : Slide avec target et transition

jeudi 03 mai 2012

menu accordéon ,horizontal centré et deroulant

Catégorie : CSS:Transitions

Voici un menu avec les effets réalisées en CSS sans javascript

démonstration

Lire la suite de : menu accordéon ,horizontal centré et deroulant

page 1 sur 2 | suivante >