Les Effets Parallax : la crème de la crème! Depuis la visibilité fulgurante qu’a obtenue le site web NikeBetterWorld.com, nous avons vu apparaître plusieurs sites web totalement géniaux utilisant des principes de navigations et d’expériences usager uniques grâce aux effets Parallax. Pour ceux qui ne connaissent pas cette fonctionnalité, les effets Parallax consistent à séparer des éléments visuels de l’arrière-plan d’un site Internet et à les faire défiler à des vitesses variantes créant ainsi un effet de profondeur lorsque l’usager navigue de haut en bas dans une page web. Nike Better World n’était pas le premier site à utiliser cette technologie, mais il est sans aucun doute, celui qui a fait le plus parler de lui et qui s’est fait le plus partager sur le web. Voici donc pour vous, une liste de 22 sites très impressionnants visuellement utilisant l’effet Parallax.
Les effets graphiques (très) avancés en CSS Vincent De Oliveira · Kiwiparty 2012 t.co/Vw9tDej Vincent De Oliveira Les sprites CSS Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est, comme le temps des Elfes de la Terre du Milieu, définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS. La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d'affichage sur l'une ou l'autre image sera définie en CSS grâce à la propriété background-position. Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives). Il est donc déconseillé de l'employer pour des images dont le contenu est pertinent (menu par exemple). Les avantages des sprites CSS sont multiples :
Sous Mac OS X : MAMP - PHP - Général (PHP) Pour ceux qui ont un Mac sous Mac OS X, je vous conseille le programme MAMP (Mac Apache MySQL PHP). Il est vraiment très simple à installer et à utiliser. Vous pouvez le télécharger ici. Vous devriez avoir téléchargé une archive au format .dmg qui contient le logiciel. Lorsque vous l'ouvrez, la fenêtre de la figure suivante apparaît. Vous devez tout simplement faire glisser le dossier MAMP en bas à gauche vers le dossier « Applications » au-dessus. Vérifier les positions sur Google A quoi sert cet outil ? L'outil référencement de cette page va vous permettre de vérifier rapidement votre positionnement sur plusieurs datacenters aléatoires de google et ainsi analyser le résultat de votre référencement. L'outil va simplement vous éviter de regarder votre positionnement manuellement. Ce sont surtout les webmasters qui en ont besoin afin de suivre l'évolution du référencement de leur site!
Générateur CSS3 Avec les dernières avancées CSS3, de nombreux effets qui demandaient autrefois le maniement de Photoshop sont désormais directement codable en CSS. Il est cependant toujours un peu difficile de visualiser des effets graphiques (ombrages, dégradés…) en regardant une ligne de code. Cette liste de générateurs CSS vous permettra d’obtenir facilement les effets de style désirés via une interface graphique, et d’extraire le code CSS correspondant. De la géométrie avec CSS Grâce aux CSS et à la nouvelle norme CSS3, nous pouvons créer de plus en plus de formes telles que les carrés, les rectangles, les ronds, etc. Dans cet article, je vais présenter les différentes possibilités de formes faisables en CSS (du moins une liste non exhaustive). Tous les exemples auront pour structure HTML cette base : Compatibilité : Chrome, Safari, Opera, Firefox 4, IE9.Compatibilité partielle : Firefox 3.5 et IE8 (problème avec le border-radius). 5 commentaires Article lu 102502 fois.
css float image flottante floatleft : image flottante gauche dans paragraphe Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mauris. Nunc commodo odio at ipsum. Dossier : comment apprendre le webdesign en ligne ? Inexistant il y a encore 20 ans, le métier de webdesigner suscite aujourd’hui de nombreuses vocations dans notre monde connecté. Si vous faites vos premiers pas dans le web ou que vous souhaitez vous perfectionner en webdesign grâce à Internet, cet article est fait pour vous. Depuis l’ouverture du blog, vous avez été nombreux à m’écrire pour en savoir plus sur les possibilités d’apprendre le webdesign. Quelles études suivre ? Quelles sont les meilleures écoles ?
Nouveaux Roomba 880 et 870 d'Irobot disponibles en France ! Nous vous l’annoncions il y a quelques mois, la nouvelle série 800 d’Irobot est maintenant en vente sur le site d’Irobot.com. Elle est composée de 2 modèles, le Roomba 880 à 729,99€ et le Roomba 870 à 629,99€. Sa capacité de nettoyage a été améliorée de 50% selon la marque, les brosses ne nécessiteront plus autant d’entretien, la batterie optimisée et l’ergonomie du bac à poussières repensée. Colin Angels, PDG d’Irobot avait récemment donné une interview dans laquelle il annonçait la sortie d’un nouveau Roomba fin 2013. Selon lui les nouveaux modèles devront avoir un minimum d’interactions avec l’homme et devront savoir se faire oublier. Toujours selon Colin Angels 2 points devront être améliorés, la vidange du bac à poussière et l’entretien des brosses.
25 sites utilisant un effet de parallaxe original - web-design-inspiration Aujourd'hui le Blog du Webdesign s'intéresse à la nouvelle tendance de plus en plus présente dans le web design, découvrez l'effet parallaxe avec notre sélection de sites web originaux. Pour commencer intéressons nous à sa définition. Qu'est ce qu'un effet de parallaxe ? La parallaxe est l’incidence du changement de position de l’observateur sur l’observation d’un objet. En d'autres termes, la parallaxe est l'impact (ou l'effet) de changement de position de l'observateur sur un objet observé.
Sass : Mixin ou Placeholder ? Hugo Giraudel est un spécialiste internationalement reconnu de Sass. Il explique ici clairement et simplement la différence entre mixin et placeholder, comment utiliser l'un ou l'autre ou... combiner les deux. Par Hugo Giraudel Quand j'ai commencé à m'amuser avec Sass il y a un an et demi, j'ai mis un peu de temps à comprendre la différence entre inclure un mixin et étendre un placeholder. En fait, la notion même de placeholder relevait un peu de la magie noire pour moi. Si vous êtes dans le même cas, pas d'inquiétude. Les dégradés de couleurs en CSS3 avec gradient Bonjour à tous ! Aujourd’hui nous allons parler des dégradés en CSS3. Vous en avez probablement déjà rencontré, et peut-être même déjà utilisé via des générateurs. Ce tutoriel très complet va vous permettre d’aller plus loin et de comprendre en détail comment les utiliser, ce qui améliorera les performances d’affichage de votre site en évitant d’avoir à utiliser des images !
Les grilles dans le webdesign "Il y a quelque chose de différent entre ce site et le mien… Il a l'air de faire plus pro et je ne sais pas pourquoi !" N'avez-vous jamais eu ce genre de remarque ? Pourtant vous utilisez Photoshop (ou autres programmes équivalents) depuis un certain temps, vous connaissez les règles typographiques et celles du web, la palette de couleur a été choisie avec soin... Bref, rien n'y fait : votre site semble déstructuré / désharmonisé. Pas d'inquiétude, vous n'avez sans doute pas utilisé de grille dans votre design !