Image Puzzle (plugin WordPress gratuit)

info74 — Mon, 03 Jul 2017 08:53:25 +0000

Nouveau plugin WordPress gratuit : Image Puzzle.

Il vous permet d’animer vos images avec différents effest de découpage : puzzle, rotation, distortion et fondu.

Voir le plugin en démonstrations

Si vous avez besoin de plus d’option j’ai développé une version Pro : Image Puzzle Pro

L’article Image Puzzle (plugin WordPress gratuit) est apparu en premier sur InfoD 74.

Nice page transition – plugin WordPress gratuit

info74 — Tue, 06 Jun 2017 07:27:19 +0000

Nouveau plugin WordPress gratuit

Je vous présente Nice Page Transition. Il vous permet de définir de beaux effets de transitions lorsqu’on change de page sur votre site/blog :

J’espère qu’il vous plaira

L’article Nice page transition – plugin WordPress gratuit est apparu en premier sur InfoD 74.

CSS3 – animation + steps

info74 — Thu, 19 Feb 2015 13:01:35 +0000

J’ai découvert récemment la fonction steps() qui peut être utilisé avec les animations CSS3.

Comment steps() fonctionne ?

@keyframes anim {
   form {
      width: 0px;
   }
   to {
      width: 100px;
   }
}

@-webkit-keyframes anim {
   form {
      width: 0px;
   }
   to {
      width: 100px;
   }
} 
div {
   animation: anim 0.7s steps(4) infinite;
   -webkit-animation: anim 0.7s steps(4) infinite;
}

Ici on défini 4 étapes pour notre animation. C’est à dire que notre div va passer de 0px de large à 100px de large en 4 étapes : 25px, 50px, 75px et 100px.
On met le préfixe -webkit pour Chrome, Opéra et Safari. A noter que Pour Internet Explorer la propriété @keyframes n’est supporté qu’a partir de la version 10.

Pour mieux comprendre nous allons voir comment on peut utiliser steps() pour animer un sprite d’un personne de jeu vidéo (Link de Zelda en l’occurrence) :

Notre but va être de définir une div avec comme background ce sprite, et de créer une animation qui décale le background pour obtenir l’illusion du mouvement :

On définit le CSS qui va bien :

#sprite {
   width: 90px;
   height: 90px;
   background: url('sprite.png') 0px 0px no-repeat;
}

Maintenant il suffit de créer notre petite animation :

#sprite {
   width: 90px;
   height: 90px;
   background: url('sprite.png') 0px 0px no-repeat;
   animation: anim 0.7s steps(4, end) infinite;
   -webkit-animation: anim 0.7s steps(4, end) infinite;
}

@keyframes anim {
   form {
       background-position: 0px 0px;
   }
   to {
      background-position: -360px 0px;
   }
}

@-webkit-keyframes anim {
   form {
       background-position: 0px 0px;
   }
   to {
      background-position: -360px 0px;
   }
}

Donc on définit un animation qui dure 0,7 seconde, qui est en 4 étapes (5 avec l’étape de départ, c’est pour ça qu’on met le deuxième paramètre à end, pour que le décompte commence à la fin de la première étape et non dès le début, sinon il manquera une image dans l’animation). infinite permet à l’animation de se répéter.

Voir la démo

Voila, c’est tout ! Pour réaliser les autres animations présentes dans le sprite il suffirait de décaler le background-position en y, sur le même principe.

L’article CSS3 – animation + steps est apparu en premier sur InfoD 74.

Responsive Web design et media queries

info74 — Thu, 17 Jan 2013 15:58:24 +0000

Qu’est ce que le Responsive Web Design

Le Responsive Web design est un terme que l’on rencontre de plus en plus souvent dernièrement. Sous ce terme se cache en fait un concept simple : le design d’un site ou d’une application web va s’adapter automatiquement à l’appareil (PC de bureau, Smartphone, IPad, etc) qui est utilisé suivants ses caractéristiques techniques (la taille de l’écran principalement).

Le tutoriel Media Queries

Une des manières de faire du Responsive Web Design : les Media Queries de CSS3. Je vous propose donc un tutoriel sur les Media Queries dans cette article. Je ne vais donc pas détailler tous les aspects des Media Queries (Vous pouvez consulter l’article d’Alsa Creations à ce sujet : Les Media Queries CSS3), le but étant de montrer directement leur utilisation dans un exemple (Voir la page d’exemple de Responsive Web design).

Pour ce tutoriel nous allons donc créer une page qui va s’adapter pour 3 types de résolutions :

PC de bureau
Tablettes
Smartphones

Commençons par le gabarit de notre page HTML. Notre page va se composer d’une bannière, un menu, un contenu principal (texte + images), une liste d’articles et un pied de page. Voici le code :

Lien 1
Lien 2
Lien 3
Lien 4

Titre
Mauris viverra augue purus, vitae ornare tortor. Sed fringilla pharetra luctus. Proin vehicula, erat ac egestas dictum, elit lectus pharetra massa, vel consequat massa quam cursus tellus. Integer sed augue arcu. Proin vestibulum urna fringilla mauris convallis pretium. Quisque mattis euismod turpis ut feugiat. Quisque lobortis, magna sit amet convallis lacinia, magna nibh mattis elit, nec mollis orci sapien ultrices lectus. Pellentesque egestas ipsum et libero viverra ut blandit dolor lacinia. Cras eget nulla a nulla tristique ullamcorper. Aenean ut lorem non diam dictum luctus eu vel lorem. Donec interdum rhoncus dui. Fusce ac massa nec augue aliquet interdum. Etiam egestas, justo vel lacinia sagittis, lorem purus rutrum lorem, non tristique massa dui ut erat.

Mauris viverra augue purus, vitae ornare tortor. Sed fringilla pharetra luctus. Proin vehicula, erat ac egestas dictum, elit lectus pharetra massa, vel consequat massa quam cursus tellus. Integer sed augue arcu. Proin vestibulum urna fringilla mauris convallis pretium. Quisque mattis euismod turpis ut feugiat. Quisque lobortis, magna sit amet convallis lacinia, magna nibh mattis elit, nec mollis orci sapien ultrices lectus. Pellentesque egestas ipsum et libero viverra ut blandit dolor lacinia. Cras eget nulla a nulla tristique ullamcorper. Aenean ut lorem non diam dictum luctus eu vel lorem. Donec interdum rhoncus dui. Fusce ac massa nec augue aliquet interdum. Etiam egestas, justo vel lacinia sagittis, lorem purus rutrum lorem, non tristique massa dui ut erat.

dfdfd

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam urna sem, tempor sit amet posuere non, semper non magna. Praesent felis urna, congue quis tempor non, imperdiet id lacus.

dfdfd

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam urna sem, tempor sit amet posuere non, semper non magna. Praesent felis urna, congue quis tempor non, imperdiet id lacus.

dfdfd

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam urna sem, tempor sit amet posuere non, semper non magna. Praesent felis urna, congue quis tempor non, imperdiet id lacus.

Footer

Maintenant commençons avec notre feuille de styles CSS. Nous allons dans un premier temps mettre en place le CSS pour la version bureau, puis nous viendrons ajouter les Media Queries pour les versions tablettes et Smartphones. Voila la feuille de styles de base :

body {
  display: block;
  width: 900px;
  margin: 0 auto;
  font-size: 14px;
}

header {
  background-image: url(img/banner.jpg);
  height: 150px;
  width: 100%;
}

menu {
  height: 30px;
  background: #4d68b3;
  margin: 0;
  padding: 10px; 
}

menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

menu ul li {
  float: left;
  margin-right: 10px;
  background: #fff;
  padding: 5px; 
}

#main {
  background: #a4b9f6;
  padding: 10px;
}

#main #content, #main #right { 
  float: left;
}

#main #content {
  width: 600px;
  padding-right: 10px;
}

#main #right {
  width: 260px;
  clear: after;
}

#main h1 {
  font-size: 22px;
  font-weight: bold;
}

#main h2 {
  font-size: 18px;
  font-weight: bold;
}

#right article {
  border-bottom: 1px solid #4D68B3;
}

.fl_left {
  float: left;
}

img.fl_left {
  padding-right: 5px;
}

footer {
  text-align: center;
  padding: 10px;
  background: #dcdcdc;
}

.clear {
  clear: both;
}

Nous avons les styles de bases qui permettent d’obtenir ce résultat :

Passons maintenant aux fameuses Media Queries. Notre site faisant 900px de large nous allons devoir spécifier 2 alternatives de styles :

pour les résolutions de largeur entre 900px et 768px (tablettes)
pour toutes les résolutions inférieures à 768px (Smartphone)

Pour les résolutions de tablettes nous allons réduire le body à 768px de large, afficher une bannière à la bonne taille, faire en sorte que le contenu principal prennent 100% de la largeur et que les articles de droite s’affichent en dessous. Pour les résolutions inférieures (Smartphones) on donne simplement au body une largeur de 100% pour que tout l’écran soit utilisé et on affiche une bannière encore plus petite. Voila le code CSS Media Queries à ajouter au fichier style.css pour réaliser tout ça :

@media screen and (max-width: 768px) {
  body {
    width: 100%;
  }

  header {
    background: #DCDCDC url(img/banner_mobile.jpg) top left no-repeat;
    height: 104px;
  }

  #main #content, #main #right {
    width: 100%;
    float: none;
  }
}

@media screen and (min-width: 769px) and (max-width: 900px) {
  body {
    width: 768px;
  }

  header {
    background-image: url(img/banner_tablette.jpg);
  }

  #main #content, #main #right {
    width: 100%;
    float: none;
  }
}

On voit que les Media Queries sont très simples à utiliser : on donne les conditions d’applications des styles contenus dans la Media Queries (ici min-width et max-width, mais il existe de nombreux autres paramètres pour les Media Queries. Voir : http://www.w3.org/TR/css3-mediaqueries/)

Voila un petit aperçu du résultat dans Chrome :

Et Internet Explorer dans tout ça ?

Les Media Queries sont supportées par la plupart des navigateur du marché (je n’ai rencontré aucun problème sous FireFox, Chrome, Opera et Safari). Mais comme souvent avec les nouvelles technologies du Web Internet Explorer n’est pas le plus en avance des navigateurs ! Les Medias Queries ne dérogent pas à ce constat car si vous testez sur Internet Explorer 8 cela ne fonctionnera pas. 2 raisons à cela :

les versions d’Internet Explorer inférieures à 9 ne prend pas en charge les nouvelles balises HTML5 (section, article, etc)
les versions d’Internet Explorer inférieures à 9 ne gère pas les Media Queries

Heureusement il existe des solutions Javascript pour résoudre ces 2 problèmes. Pour qu’Internet Explorer gère les balises HTML5 nous allons utiliser html5shiv et pour les Media Queries Reponsd.js. Ces 2 solutions sont très simples à utiliser puisqu’il suffit d’ajouter un fichier JavaScript pour chacune :

Une fois ceci fait notre Responsive Web Design fonctionne également sous Internet Explorer 8 (6 et 7 aussi normalement, mais je n’ai pas testé).

Voir la page du tutoriel en ligne

Voila ce petit tutoriel est terminé, j’espère qu’il vous aura aidé. Il y a bien sûr beaucoup d’autres aspects des Media Queries que je n’ai pas abordé ici (comme la détection de l’orientation de l’écran par exemple) mais vous connaissez maintenant les bases de leur utilisation. Si vous voulez en savoir plus je vous conseille l’article d’Alsa Creation dont j’ai déjà donné le lien plus haut : Les Media Queries CSS3

L’article Responsive Web design et media queries est apparu en premier sur InfoD 74.

CSS Archives - InfoD 74

Image Puzzle (plugin WordPress gratuit)

Nice page transition – plugin WordPress gratuit

CSS3 – animation + steps

Responsive Web design et media queries

Qu’est ce que le Responsive Web Design

Le tutoriel Media Queries

Titre

dfdfd

dfdfd

dfdfd

Et Internet Explorer dans tout ça ?