Présentation
Le thème Marylou a été construit sur la base d’un tutoriel de Mary Lou (d’où le nom du thème) publié sur codrops.
Merci à l’auteur pour son tutoriel très instructif, et j’ai tellement aimé la démo que j’en ai fait un thème
Ce tutoriel illustre les possibilités de CSS3, notamment en matière d’animation, de détection de la taille d’écran.
Le thème comporte 6 images de fond qui varient sans autres déclarations que celles de la feuille de style.
Les images fournies (licence CC BY-SA 2.0) sont de Mark Sebastian :
http://www.flickr.com/photos/markjsebastian/
http://www.markjsebastian.com/
Pour plus de lisibilité, ces images sont regroupées dans le dossier backgrounds et sont nommées uniquement par un chiffre (ordre d’apparition).
Les animations en CSS3 ne sont pas supportées par l’ensemble des navigateurs. Je vous invite à consulter le tableau suivant (issus de caniuse.com) pour vous en rendre compte :
Démonstration
http://zpip.spip.org/?var_theme=zpip-1/marylou
Captures
theme_marylou.zip
RSS 2.0
Vos commentaires
# Le 5 janvier à 11:36, par spipfactory
En réponse à : Marylou (thème)
Bonjour
fortement intéressé par ce thème pour réaliser un espace généalogique & famillial
j’aurai besoin de 15 images dans l’animation ( la photographie ayant été inventé vers 1780 a peu prés)
donc 15 images remonte sur la branche Arrière grand ...
le pb c’est que je n’arrive pas a regler la tempo
http://pastebin.com/C95Expgm,
vous voyez pas comment faire merci
Répondre à ce message
# Le 29 juin 2012 à 10:56, par AlainF
En réponse à : Marylou
Bonjour,
merci pour ce travail, je suis fier d’avoir pu l’adapter à ce site http://www.anim-16.com
Ce thème est parfait pour faire comprendre que si certains sites semblent fades, c’est peut-être que certains décideurs n’osent pas se lâcher et ne savent pas laisser une certaine liberté aux webmestres.
Utilisateur de Spip depuis 2005, bravo à tous.
Alain
# Le 29 juin 2012 à 11:10, par Yves Costiou
En réponse à : Marylou
Bonjour,
heureux que le thème vous convienne. Par contre, je renouvelle ma mise en garde concernant l’utilisation des animations CSS3 : Tous les navigateurs ne les supportent pas encore.
# Le 29 juin 2012 à 11:41, par AlainF
En réponse à : Marylou
Sous IE9 pas de changement de fond, j’ai donc choisi mon dernier background en fonction. Et c’est suffisant en attendant...
Mais avec le bouton d’affichage de compatibilité, j’ai un soucis pour afficher l’avertissement :
<!--[if lte IE 8]><style type="text/css">
#noiem { background: #fefefe[ url((#CHEMIN{noie.gif})) no-repeat 8px 8px; padding-left: 80px]; border: 3px solid #2D96E7; color: #fff; font-size: 14px; }
#noiem h1 { margin: 10px; padding: 0; color: #fF2222; font-size: 26px; font-weight: bold; }
#noiem p { font-size: 20px; margin: 10px; padding: 0; }
#noiem p a { font-weight: bold; color: #006; text-decoration: underline; }
</style>
<div id="noiem">
<h1>Attention, votre Internet Explorer n'est pas à jour !</h1>
<p>Pour naviguer de façon plus satisfaisante sur ce site et le reste du Web, nous vous recommandons d'<strong>actualiser votre <a href="http://www.microsoft.com/france/windows/internet-explorer/">Internet Explorer</a></strong> ou d'essayer un autre navigateur populaire comme <a href="http://www.mozilla-europe.org/fr/firefox/">Firefox</a>, <a href="http://www.google.fr/chrome">Chrome</a>, <a href="http://www.opera.com/">Opera</a> ou <a href="http://www.apple.com/fr/safari/">Safari</a>.</p>
</div>
<![endif]-->
L’avertissement s’affiche bien et aussitôt le style css change ?
(J’ai choisi d’insérer ce code dans « squelettes/contenu/page-sommaire.html » avec Zpip, plutôt que de mettre le plugin NOIE)
Malgré le changement de couleur dans le style, l’effet est toujours annulé et je m’embête avec firebug lite pour trouver la faille !
Si quelqu’un connait une direction, par avance, merci
# Le 29 juin 2012 à 11:51, par AlainF
En réponse à : Marylou
Je viens simplement de déplacer les commandes de style dans habillage.css et tout va bien, désolé du dérangement.
Répondre à ce message
# Le 22 mai 2012 à 12:54, par Shnoulle
En réponse à : Marylou
Ouah super !
Merci ! ( pour le lien du tuto aussi ).
Très joli !
Répondre à ce message