CSS - effets hover (french)

[PolHenri]

Suite à nos échanges sur G+ je suis allé sur http://ianlunn.co.uk/articles/hover-css-tutorial-introduction/

J'ai téléchargé le pack CSS dans l'un des documents - hover.css - on retrouve les éléments montré dans la démo http://ianlunn.github.io/Hover/

Peux tu nous indiquer si cela est utilisable dans Silex et à quelles conditions (le hover par exemple ci-dessous)

Merci

Exemple de hover .grow { display: inline-block; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: transform; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); }

@lexoyo

[lexoyo]

Il te suffit d'aller en mode apollo puis dans les classes css (le champs de texte sur une seule ligne), ajoutes "grow" (sans les guillemets)

[lexoyo]

et aussi... mets le fichier hover-min.css dans un dossier "css" au même niveau que ta page html, et colle ce code dans l'editeur js (ca permet d'inclure hover-min.css dans ta page)

////////////////////////////////////
// hover.js
document.write('<link href="./css/hover-min.css" rel="stylesheet">');
////////////////////////////////////

[PolHenri]

:)

pour être sur

1. j'ouvre silex
2. j'ouvre le CSS editor dans lequel je colle l'exemple ci-dessus (dans ma question).
3. dans le js editor je colle la ligne indiquée ci-dessus
4. dans un répertoire css au même niveau que mon html je colle hover-min
5. je créé un container, et dans le style du container, en appolo mode, dans CSS classes je met grow ? @lexoyo

[lexoyo]

Pas besoin de ton bout de CSS que tu as mis dans ta question, donc :

1. j'ouvre silex
2. dans le js editor je colle la ligne indiquée ci-dessus
3. dans un répertoire css au même niveau que mon html je colle hover-min
4. je créé un container, et dans le style du container, en appolo mode, dans CSS classes je met grow ?

[PolHenri]

Tu veux dire que la simple manip permet d'appeler tous les exemples de CSS contenu dans le doc hover-min.css ?

[lexoyo]

oui exactement

2014-03-10 19:26 GMT+01:00 PolHenri notifications@github.com:

Tu veux dire que la simple manip permet d'appeler tous les exemples de CSS contenu dans le doc hover-min.css ?

— Reply to this email directly or view it on GitHubhttps://github.com/silexlabs/Silex/issues/92#issuecomment-37216649 .

If you want to keep in touch with Silex Labs subscribe herehttp://eepurl.com/MCCDP

[PolHenri]

Excellent J'ai testé ça sur des containers contenant des bloc textes Impressionnant ! @lexoyo

[PolHenri]

Et dans le bloc ou on colle les classes, le séparateur c'est une virgule ? @lexoyo

[lexoyo]

Cool :)

On Mon, Mar 10, 2014 at 7:44 PM, PolHenri notifications@github.com wrote:

Excellent J'ai testé ça sur des containers contenant des bloc textes Impressionnant !

— Reply to this email directly or view it on GitHubhttps://github.com/silexlabs/Silex/issues/92#issuecomment-37218761 .

If you want to keep in touch with Silex Labs subscribe herehttp://eepurl.com/MCCDP

[lexoyo]

un espace

On Mon, Mar 10, 2014 at 7:51 PM, PolHenri notifications@github.com wrote:

Et dans le bloc ou on colle les classes, le séparateur c'est une virgule ? @lexoyo https://github.com/lexoyo

— Reply to this email directly or view it on GitHubhttps://github.com/silexlabs/Silex/issues/92#issuecomment-37219567 .

If you want to keep in touch with Silex Labs subscribe herehttp://eepurl.com/MCCDP

[superwup]

Intégration et usage de CSS dans Silex.

Afin d'utiliser les ressources disponibles dans ce projet http://ianlunn.co.uk/articles/hover-css-tutorial-introduction/

Et utiliser les effets hover ci-dessous dans Silex http://ianlunn.github.io/Hover/

A la racine du répertoire contenant le .html généré avec Silex, créer un répertoire CSS. Dans ce répertoire copier le fichier hover-min.css, disponible dans l'archive que vous téléchargez sur http://ianlunn.co.uk/articles/hover-css-tutorial-introduction/

Dans Silex, ouvrez view > JS scripts editor collez y : document.write('');

Ensuite intégrez, par exemple, un container.

Activez le mode Appolo Tools > Appolo mode

Sélectionnez le solide, en bas de la boite de propriétés (coté droit de l'interface), Styles > CSS classes, dans le champs texte disponible, collez y l'intitulé d'une classe (noms de effets indiqué sur chaque bloc présenté ici http://ianlunn.github.io/Hover/

par exemple le premier effet est Grow. Dans Silex collez "grow" dans le champs texte Styles > CSS classes ! : ne pas utiliser de majuscules

Enregistrez votre fichier Silex, et faite View > View in new window

@lexoyo

1. peux tu voir si cela te parait correct / suffisant. Quand tu es ok avec ça, je traduit et on publie ou tu veux.
2. pour le Animate.js : on se fait la même ?

[lexoyo]

usage de hover.css dans Silex.

objectifs

Afin d'utiliser les ressources disponibles dans ce projet http://ianlunn.co.uk/articles/hover-css-tutorial-introduction/

Et utiliser les effets hover ci-dessous dans Silex http://ianlunn.github.io/Hover/

mode d'emploi

installation

A la racine du répertoire contenant le .html généré avec Silex, créer un répertoire css/.

Dans ce répertoire copier le fichier hover-min.css, disponible dans l'archive que vous téléchargez sur http://ianlunn.co.uk/articles/hover-css-tutorial-introduction/

Dans Silex, ouvrez view > JS scripts editor collez y :

document.write('<link href="./css/hover-min.css" rel="stylesheet">');

utilisation

Ensuite insérez, par exemple, un container.

Activez le mode Appolo Tools > Appolo mode

Sélectionnez le solide, en bas de la boite de propriétés (coté droit de l'interface), Styles > CSS classes, dans le champs texte disponible, collez y l'intitulé d'une classe (noms de effets indiqué sur chaque bloc présenté ici http://ianlunn.github.io/Hover/

Par exemple le premier effet est Grow. Dans Silex collez "hvr-grow" dans le champs texte Styles > CSS classes ! : ne pas utiliser de majuscules

Enregistrez votre fichier Silex, et faite View > View in new window

@PolHenri ok pour moi, peut etre des shoot ecrans pour

• le résultat du tuto (et un lien vars le zip de la template d'exemple)
• Styles > CSS classes

[ceubri]

enfait, maintenant il faut ajouter hvr-grow au lieu de grow etc...