Archive

Archives de l'auteur

Bande annonce finale pour Cars 2 et logo officiel pour Monstres & Cie 2

Apple Movie Trailers nous livre ce matin la version finale et longue de la bande annonce du prochain Pixar Cars 2 qui sortira le 27 juillet 2011 prochain. Suite de Cars, Cars 2 pourrait être la première déception des studios Pixar qui me sont chers. Cependant, ils ont toujours su être à la hauteur de mes attentes jusqu’ici alors je garde confiance comme dit dans mon dernier billet sur le sujet : Est-ce la fin de l’ère Pixar ?

Pour rappel, le pitch de Cars 2 réalisé par Bras Lewis et John Lasseter, papa de Cars premier du nom et des Toy Story est le suivant :

Dans Cars 2, Flash McQueen, la star des circuits automobiles, et son fidèle compagnon Martin la dépanneuse reprennent la route pour de nouvelles aventures. Les voilà partis pour courir le tout premier Grand Prix Mondial, qui sacrera la voiture la plus rapide du monde ! Mais la route du championnat est pleine d’imprévus, de déviations et de surprises hilarantes, surtout lorsque Martin se retrouve entraîné dans une histoire comme il n’en arrive qu’à lui : une affaire d’espionnage international ! Ecartelé entre son désir d’assister Flash McQueen dans cette course particulièrement difficile et celui de mener à bien une mission d’espionnage top secrète, Martin se lance dans un voyage bourré d’action et une course-poursuite explosive sur les routes du Japon et de l’Europe, suivi par ses amis et regardé par le monde entier. Sur la route, Flash et Martin trouveront de l’action, de l’humour effréné et de tout nouveaux personnages – agents secrets, redoutables méchants et adversaires décidés sur les circuits automobiles… (via Allocine)

De plus, cette nuit Pixar a dévoilé le logo officiel de la suite de Monstres & Cie, appelée L’Université des Monstres ou « Monsters University » en anglais. Douze ans après Monstres & Cie qui reste l’un de mes Pixar préférés, cette suite très attendue est prévue pour novembre 2012 et a le pitch officiel suivant :

Mike Wazowski et James P. Sullivan est un duo inséparable, mais ça n’a pas toujours été le cas. Dès que ces deux monstres complètement différents se sont rencontrés, ils ne pouvaient pas se supporter l’un l’autre. L’Université des Monstres dévoile comment Mike et Sully ont dépassé leur différences et sont devenus les meilleurs amis du monde.

6 mémos HTML 5 & CSS3 | 6 HTML5 & CSS3 Cheat Sheets

Lorsqu’on développe son site web avec les toutes dernières technologies comme l’HTML5 et CSS3, il est normal de ne pas tout savoir. En effet, les standards ne sont pas finalisés, les navigateurs internet n’ont pas encore tout implémenté. Du coup, on expérimente, on teste, on s’inspire d’autres sites, de best practices pêchées ça et là, on tâtonne. Mais, il est toujours très utile d’avoir sous la main les fondamentaux sous forme de mémos ou encore Cheat Sheets. (Anti-sêches mais j’ai préféré traduire en « mémo » en français).

 

Cliquer pour télécharger l'archive complète !

Aussi, je me suis baladé sur le net pour recenser, filtrer et élire les 6 mémos HTML5 & CSS3 les plus complets et utiles à avoir sous la main. Sous format PDF, ils seront vos premiers alliés une fois imprimés et fixés au mur.

  • Télécharger l’archive avec les 6 cheat sheets HTML5 & CSS3 :

[download id= »10″]

Contenu de l’archive :

Chers parents… tout est de votre faute !

Manuels IKEA des classiques de la science fiction

Dans la lignée du billet où je vous faisais découvrir le manuel IKEA de Stonhenge, je vous propose de découvrir de nouveaux manuels à la manière de ceux de la firme suédoise qui habille tous les studios d’étudiants français. Ce coup-ci, ils sont le fruit du dur labeur des petits gars de CollegeHumour. Ils ont choisi de nous pondre les manuels IKEA de montage et/ou utilisation d’objets de classiques de la science fiction internationale.

Ainsi, on a le droit tout d’abord au manuel de la DJILORIANN, la célèbre Delorean de Retour vers le Futur. Puis viens, le LITSABBUR, manuel IKEA du sabre laser de la saga Starwars. Ensuite c’est au tour du DINDASUR, qui explique comment produire son propre dinosaure qui vous bouffera à la fin à la manière de Jurassic Park. Enfin, on finira avec le manuel du TJARDIIS, qui détaille le fonctionnement du tardis, la machine à voyager dans le temps de la célèbre série Doctor Who.

Les auteurs sont fins prêts à passer leur entretien d’embauche chez IKEA !

via

Categories: Le Coin d'Alconis Tags: , ,

Casques scooter au design étonnant

L’agence Russe Good s’est amusée à décliner une idée loufoque qui pourrait rendre nos routes urbaines un peu plus fun (et un peu plus dangereuses pour certains) : designer des casques de scooter en pêchant l’inspiration n’importe où. Du coup, leurs imprimés pour casque sont tout bonnement barrés. Vous souhaitez vous faire remarquer sur votre scooter dans Paris ? Pas de problème. Adoptez donc le casque « cerveau » ou « balle de tennis » ou encore « paire de fesses » ! Franchement, les casques bleus pourraient trouver là quelques idées pour renouveler leur garde-robe, non ? Bref, c’est n’importe quoi, c’est marrant, c’est frais… et c’est pas grave.

via

Categories: Design & Marketing Tags: ,

Tutoriels HTML & CSS #2

Hello amis geeks. Voici le billet récurrent qui se fait l’écho de la catégorie « Geekitudes » de ce blog. Comme cette dernière est à part, ce billet permet de retrouver les 5 derniers tutoriels HTML, CSS, WordPress, Flex, Silverlight, Photoshop etc. Vous pouvez les retrouver en accédant aux catégories « Geekitudes » dans la barre de navigation supérieure du blog.

Les 5 derniers tutoriels HTML & CSS :

1. HTML & CSS3 : Réflexion d’image en HTML et CSS,  où l’on apprend comment produire une réflexion d’image simplement grâce à CSS3 à partir d’une simple photo de base et plus encore.

Réflexion d'image en CSS

2. HTML5 & CSS3 : Créer une navigation de site simple et élégante avec HTML5 et CSS3, où l’on reproduite la sympathique navigation principale d’un web magazine avec plusieurs catégories ayant chacune une couleur spécifique comme le site Mashable.

Cliquer pour agrandir la navigation de Mashable

3. HTML & CSS : Créer un compteur de commentaires pour votre blog en HTML et CSS, où l’on apprend une technique de base pour mettre en valeur le nombre de commentaires associés à une billet de blog.

Cliquer pour agrandir

4. HTML5 & CSS3 : Créer un design d’article de blog avec une date flottante en HTML et CSS, où l’on crée un beau design de base d’un billet  pour un blog avec la date mise en valeur sur la droite.

Cliquer pour agrandir

5. HTML & CSS3 : Créer une galerie animée d’images en HTML et CSS3, où l’on crée une belle galerie avec des effets de survol, d’opacité à la sauce CSS3.

Le titre coulisse sur l'image au survol de la souris et l'image devient plus nette.

Editions précédentes :

Categories: Tutoriels Tags: , , , ,

Inversion de logos

Graham Smith, designer de logo britannique, a eu une idée saugrenue : l’inversion de logo. En fait pas tout à fait une inversion. Il a appelé cela « reversion » c’est-à-dire appliquer la forme d’un logo textuel au texte d’un autre logo, les deux logos devant être de préférence ceux de marques directement concurrentes pour rendre l’effet encore plus saisissant. Ainsi, on va avoir un logo écrit Facebook écrit à la manière du logo Twitter. De même pour les marques Google et Bing, concurrents sur le plan des moteurs de recherche. Amusant.

Cliquer pour agrandir ou lancer le mode galerie.

Facebook en mode Twitter

Twitter en mode Facebook

Google en mode Bing

Bing en mode Google

Vimeo en mode Youtube

Youtube en mode vimeo (Super class d'ailleurs !)

Blackberry en mode Flickr

via

Categories: Design & Marketing Tags: , ,

Créer une galerie animée d’images en HTML et CSS3

Ce tutoriel reprend des choses déjà vues comme l’utilisation de listes ul pour disposer une suite d’éléments et les transitions CSS3 par exemple, mais aborde aussi de nouveaux concepts comme le fameux clear ou l’opacité d’image.

Au final, nous allons créer ensemble une galerie d’images. Chaque image est cliquable et animée lorsque l’utilisateur la survole : un titre coulisse par-dessus en venant de la gauche et l’image devient plus claire. Voici une image du rendu final. Aussi à partir de maintenant, je vais joindre un fichier ZIP avec les ressources du projet final. Comme ça vous pourrez visualiser le rendu final.

Le titre coulisse sur l'image au survol de la souris et l'image devient plus nette.

Ressources du tutoriel : [download id= »9″]

Attaquons l’HTML. Ici on a simplement un titre en h1 et une liste ul. Chacun des éléments li contient une image et un span avec le titre. Ce qui donne :


Bien passons au CSS qui va transformer tout ça en une belle galerie.

Commençons par un petit reset des familles qui enlève toute marge et padding de l’élément ul et toute bordure à nos images :

ul#incoming_movies {
	margin: 0;
	padding: 0;
}

#incoming_movies img {
	border: 0;
}

Ensuite, stylons nos éléments li en enlevant le rond noir de base (list-style-type: none) et les alignant de manière flottante à partir de la gauche (float:left), en les espaçant de 5px à droite (margin-right) et en bas (margin-bottom) :

#incoming_movies li {
	list-style-type: none;
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
}

On en profite dès maintenant pour styler l’écriture du titre en utilisant l’élément a. Je n’explique rien ici, ça parle de soi-même :

#incoming_movies li a {
	color: black;
	font-family: Arial, serif;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
}

Passons maintenant au comportement de notre span qui contient notre titre. Celui-ci doit coulisser en apparaissant du bord gauche de l’image. Pour ce faire, on va positionner le span de façon absolue (position: absolute) par rapport à l’élément li qui va donc avoir une position fixée (position: relative). Puis, on va positionner le span à 10 px au-dessus du bord inférieur du li (bottom: 10px). Pour rendre l’effet d’apparition, on décale sur la gauche le span de la largeur de l’image (left: -120px). Ainsi, le titre va sembler flotter en dehors de l’image. Pour le cacher lorsqu’il est en dehors du cadre du li, il suffit d’ajouter à ce dernier la directive overflow:hidden. Ainsi, tout ce qui dépasse sera caché. Ensuite, pour finir avec l’apparition du titre, nous allons faire que lors du survol du li par la souris, le span va venir se replacer à sa position horizontale initiale (left:0px). On rajoutera une belle petite transition CSS3 sur la propriété left avec la fonction de timing ease-in-out pour avoir l’effet inverse aussi. Bien entendu, on va styler un peu notre span en lui donnant du blanc en couleur d’arrière-plan, l’aérer avec un peu de padding et lui ajouter une ombre portée (box-shadow) et des les bords de droite arrondis de 3px (border-radius). Donc tout ça nous donne le code CSS suivant :

#incoming_movies li {
	list-style-type: none;
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;

	position: relative;
	overflow: hidden;
}
#incoming_movies li span {
	position: absolute;
	bottom: 10px;
	left: -120px;
	
	background-color: white;
	padding: 4px 10px 4px 2px;

	-webkit-box-shadow: 2px 2px 2px #333333;
	-moz-box-shadow: 2px 2px 2px #333333;
	-o-box-shadow: 2px 2px 2px #333333;
	box-shadow: 2px 2px 2px #333333;
	
	-webkit-border-radius: 0 3px 3px 0;
	-moz-border-radius: 0 3px 3px 0;
	-o-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
	
	-webkit-transition: left 0.2s ease-in-out;
	-moz-transition: left 0.2s ease-in-out;
	-o-transition: left 0.2s ease-in-out;
	transition: left 0.2s ease-in-out;
}
#incoming_movies li:hover span {
	left: 0px;
}

A ce stade, vous devriez avoir cela :

Cliquer pour agrandir

On remarque deux choses :

  • Un titre est trop long et dépasse de son décalage. Pour régler ceci, on va limiter la largeur maximum de nos span (max-width)
  • Toutes les images sont sur la ligne. On aimerait qu’il n’y ait sur chaque ligne que 4 images. Pour ce faire, on pourrait limiter la largeur du ul et les éléments iraient à la ligne automatiquement par le float mais ça n’est pas flexible. Ce que je veux ici c’est avoir 4 images par ligne et c’est tout. Pour ce faire, on va utiliser la nouvelle pseudo-classe CSS3 :nth-child(..) qui permet de définir des comportement en fonction de la place de l’élément. La formule entre parenthèse peut être très variée. Pour notre exemple ici, on veut ajouter un clear:left tous les 5 éléments. On va donc mettre :nth-child(5n). Magique non ? Et surtout tellement plus simple que l’ancienne façon de faire.
#incoming_movies li span {
	[...]
	max-width: 100px;
}

#incoming_movies li:nth-child(5n) {
	clear:left;
}

Revenons sur ce retour à la ligne. J’ai dit plus haut pour provoquer le retour à la ligne, j’utilise la directive CSS clear:left. Comment cela marche-t-il ? Le clear:left appliqué à un élément flottant signifie « je ne permets pas à cet élément d’avoir des éléments flottants sur sa gauche. » Du coup, le navigateur va provoquer un retour à la ligne puisque tous mes li sont flottants via la directive float:left. Le clear peut prendre les valeurs left (comme ici), right (si mes éléments étaient flottants à droite par exemple) ou encore both pour droite et gauche.

A présent, on a terminé ! J’ai personnellement rajouté un petit effet d’opacité pour mettre en valeur l’image survolée. Par défaut, je fixe l’opacité des images à 0.7 (opacity: 0.7) et au survol (pseudo-class :hover), je passe à 1.

#incoming_movies img {
	border: 0;
	
	opacity: .7;
	
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

#incoming_movies img:hover {
	opacity: 1;
}

Vous pouvez télécharger les fichiers de ce tutoriel ici :
[download id= »9″]

Categories: HTML & CSS Tags:

L’illusion d’optique de la danseuse en rotation

La danseuse tournoyante est une illusion d’optique célèbre et tout à fait fascinante aussi connue sous le nom de silhouette illusion. Elle a même sa propre page sur Wikipedia. C’est pour dire ! Aussi, je me dois de vous la faire partager. Créée par le web designer Nobuyuki Kayahara, elle représente une danseuse tournant sur elle-même et est accompagnée de la question « Dans quel sens la danseuse tourne-t-elle ? » Dans le sens des aiguilles d’une montre ou le sens inverse ? Demandez à vos voisins. Sont-il d’accord ?

Dans quel sens tourne la danseuse ?

En effet, l’absence de tout repère de profondeur comme les ombres 3D empêche de définir clairement dans quel sens la danseuse tourne. La source de l’ambiguïté est l’interprétation en trois dimensions d’une image qui n’en a que deux par notre cerveau. C’est ce qu’on appelle une perception bistable, « qui peut être perçu de différentes manières » comme le célèbre Cube de Necker. Avec un peu d’entrainement, on peut arriver à facilement « inverser » le sens de rotation en gardant le regard fixe. Sinon, regardez-la et dite dans votre tête dans quel sens vous la voyez tourner. Puis, détournez les yeux, et « suggérez » vous qu’elle tourne dans l’autre sens et forcez-vous à la voir tourner dans l’autre. Vous devriez y arriver. Restez fixe et à un moment, il est possible que d’un coup, vous la voyez tourner dans l’autre sens. Troublant !

Afin de démontrer que l’on peut réellement voir les deux sens voici une version avec quelques indications de profondeurs dans les deux sens horaire et anti-horaire. D’ailleurs, vous pouvez regarder la figure de droite rapidement puis regarder la figure seule ci-dessus, puis regarder celle de gauche et retourner voir la figure seule. C’est le plus efficace pour voir les deux sens.

Alors que cette illusion fut à l’époque de son introduction utilisée pour déterminer la dominance d’un hémisphère cérébral sur l’autre, des scientifiques ont démontré qu’elle ne permettait aucunement de déterminer une telle chose.

La petite fille qui a gâché le baiser de Kate et William

Alors, là, assurément, on tient un nouveau mème. A mon avis, vous allez voir déferler dans les jours et semaines à venir des déclinaisons photoshopées de la petite fille bougonne accoudée au balcon pendant que derrière elle, il se passe des choses au niveau de qu’est-ce qui se passe.

Rien à faire de ce mariage !

Evidemment, cette photo est celle du baiser de Kate et William le jour de leur mariage au balcon de Buckingham Palace. On parie combien que l’image de cette petite va être sortie de son contexte et reprise sur le web à foison. En attendant, j’ai éclaté de rire quand j’ai vu passer cette photo sur Twitter accompagnée du texte : « La petite fille moche qui a tout gâché. » Je m’empresse donc de partager ma bonne humeur avec vous.

Ah oui, et… Longue vie aux mariés ! #osef