Wireframes Magazine How to Create a Fast Hover Slideshow with CSS3 A little fast-running image slideshow that plays on hover and pauses when mousing out. The current image will stay visible. View demo Download source Today I want to share a little hover slideshow with you. The main idea is to run a super-fast image slideshow on hover and show the current image when mousing out. Please note: this is just experimental and will only work as intended in browsers that support the respective CSS properties. This is our simple structure: We’ll show and hide the images using an animation: The animation will be paused and we’ll just run it on hover: The animation will simply make an image visible and put it on top of the “stack”: As you can see, each image will have the same animation but we will start the animation for each image with a delay. The percentages of the animation are calculated as follows: take the 100% of the animation timespan and distribute 8 images over it. On hover, when the slideshow starts running, we’ll show the overlay: And that’s it!
Bien optimiser vos images pour le web | Orignal Communication J’ai choisi d’illustrer cet article avec la carte “Gorille de Beringeï” 3e édition bords noirs du jeu “Magic The Gathering” pour faire plaisir à mon grand frère ainsi qu’au parrain de ma fille, à Quentin et à Romain. Le rapport poids /qualité Nous sommes nombreux à publier des images régulièrement sur les internets. Sur les réseaux sociaux (Facebook, Twitter, Instagram, Google +…) on ne se pose même pas la question du format et de la compression, ils s’occupent de tout. Mais lorsque vous publiez sur votre blog ou votre site internet, c’est vous qui avez la main. À gauche l’image a été compressée très fortement pour un poids de 7Ko.Au milieu avec une compression moyenne on obtient un poids de 25koÀ droite avec une compression très faible on obtient un poids de 90ko. On remarque que l’image de gauche, bien que très légère, est totalement illisible tellement elle est compressée. D’accord, mais alors comment obtenir le meilleur rapport poids/qualité ? Mettre le bon nombre de pixels
Résolution spatiale des images matricielles Un article de Wikipédia, l'encyclopédie libre. La résolution d'une image numérique s'exprime en PPI (Pixel Per Inch) ou PPP (Pixels Par Pouce). En français, il est dangereux de faire l'amalgame entre Pixel Par Pouce et Points Par Pouce (PPP ≠ PPP). La nuance est que le nombre de pixels utile à l'image sert à fabriquer les points de la trame imprimée. De plus, le point est également une unité de mesure utilisée en typographie inspiré du point pica, et représentant 1/72e de pouce, il ne doit pas être confondu avec le point de trame. Contrairement aux images numériques destinées à être imprimées, les sources vidéos émettent un flux d'image sans résolution spatiale prédéfinie. Afin d'éviter cette confusion entre résolution d'affichage et résolution d'impression ou de capture, certains préfèrent utiliser le terme unique de "définition" pour la quantité de pixels des images et/ou des écrans. Image sous trois résolutions différentes Quelle résolution adopter ? O.
Fireworks Wireframing Kit Ajouter une image aux catégories wordpress sans plugin | Wordpress spirit Dans le fichier functions.php : [php] <ul id= »category-bloc »><?php $argsCat = array( ‘type’ => ‘post’, //’child_of’ => 0, //’parent’ => , ‘orderby’ => ‘name’, ‘order’ => ‘ASC’, ‘hide_empty’ => 0, ‘hierarchical’ => 1, // ‘exclude’ => , // ‘include’ => , //’number’ => , ‘taxonomy’ => ‘category’, ‘pad_counts’ => false ); $categories = get_categories( $argsCat ); foreach ($categories as $category) { //datas avalaible /* $category->term_id $category->name $category->slug $category->term_group $category->term_taxonomy_id $category->taxonomy $category->description $category->parent $category->count $category->cat_ID $category->category_count $category->category_description $category->cat_name $category->category_nicename $category->category_parent */ ?><li><?php $catID = $category->term_id; // Get the URL of this category $category_link = get_category_link( $catID ); ?><h2><a href= »<? Dans la page des catégories (category.php): [php] <img src= »<?
Définition et résolution d'une photo : pourquoi il ne faut plus utiliser le 72 dpi ? Pour commencer une petite devinette ! Connaissez-vous la résolution de votre écran ? un indice se trouve dans le titre de cet article… Commencçons par deux notions de vocabulaire importantes : La définition d’une photoLa résolution d’une photo La définition d’une photo ou d’une image représente le nombre de pixels de cette photo ou dit autrement sa taille en pixels; par exemple le capteur du nouveau Canon 6D a une définition de 20,2 MPixels soit 5472 x 3648 pixels. La résolution d’une photo s’exprime elle en DPI (Dot per Inch ou Point par pouce où 1 pouce mesure 2,54 cm) et dépend donc de la taille/ résolution d’impression. Maintenant, revenons à nos moutons et répondons à la dévinette du titre : mon écran Quato mesure 21 pouces en diagonale et physiquement son plus grand côté mesure 42,3 cm pour 1600 pixels. On est très loin des sacro-saints 72 dpi !!! La résolution d’une image n’a aucune espèce d’importance pour son affichage sur un écran; seule sa définition importe.
Les 10 erreurs CSS les plus répandues Même si le CSS peut apparaître à première vue comme l’un des langages web les plus simples qu’il soit, il est en réalité plus complexe qu’il n’y paraît. Même s’il est facile d’arriver à ses fins en tâtonnant un peu, le CSS est un langage qui possède des règles bien strictes, à respecter si l’on veut produire un code propre, valide, et obtenir un résultat similaire sur tous les navigateurs. Dans cette article sous forme de liste (oui, on aime ça en ce moment !) je vous propose de découvrir les 10 erreurs CSS les plus rependues, que vous et moi avons probablement déjà commis et continuons encore à commettre. 1. Même si les différents navigateurs (et leurs interprétations parfois totalement différentes du langage CSS) peuvent nous donner des nausées, c’est tout de même grâce à eux que notre site internet va être délivré à nos visiteurs, nous avons donc plutôt intérêt à les caresser dans le sens du poil (même IE6…). Bien que cela fonctionne, cette réinitialisation n’est pas assez complète. 2.
Comment faire un brief créatif ? Ces deux mots qui sonnent bien ensemble sont pourtant parfois difficiles à corréler et à mettre en oeuvre pour un designer . En effet, rédiger une approche, des idées, les informations pertinentes, les ressources de travail qui répondent le mieux aux attentes et parfois une affaire complexe. L’idée, lorsque l’on répond a un appel d’offre, à une compétition, serait donc d’avoir une méthodologie -et non une méthode- qui puisse nous guider quelque peu vers la rédaction d’un tel brief. des Designers Interactifs, a publié un document de travail intitulé « Comment formaliser un brief créatif ». source Ces articles peuvent aussi vous intéresser: [infographie] Le processus pour réaliser un site internet ! DesignLeaks : des PDF sur le design en libre consultation Synthèse sur l’identité numérique en 2010 et quelques pistes de réflexion… Transformez tous les sites internet en wireframes avec Wirify ! Le guide complet de la gestuelle pour les interfaces multitouch ! Un cyclope dans Paris ?
CSS3 – Effet parallaxe (sans JavaScript) - CSS / CSS3 Retour des tutoriels CSS avec quelque chose d’un peu original pour cet article : un effet parallaxe uniquement en CSS3. C’est à la suite de l’article de Simon Kern sur Alsacréations que m’est venue l’envie de tenter d’utiliser CSS pour reproduire cet effet initialement conçu avec JavaScript. L’article zoom sur l’effet parallaxe de Simon est bien conçu, je vous invite à le lire si vous préférez l’utilisation de jQuery, ou si vous souhaitez découvrir une alternative ou un complément à ce tutoriel. J’en profite pour remercier Simon qui m’a autorisé à reprendre son design ainsi que la base du code qu’il a conçu pour l’article sur Alsacréations. Démonstration Place à l’explication ! Concept Pour réaliser cet effet il nous faut plusieurs éléments qui vont nous permettre de simuler différents plans. Lorsque un tel effet est mis en place sur un site web, il l’est souvent pour offrir une transition originale entre deux vues, un peut comme lors d’un diaporama pour passer d’une slide à l’autre. <!
PhotoFiltre : supprimer les yeux rouges 1 - Téléchargement et installation du plugin Voici l'archive qu'il vous faut télécharger : Une fois l'archive téléchargée, il vous faut extraire le fichier "readjust.pfl" dans le dossier "Plugins" de PhotoFiltre ( exemple : C:\programmes\photofiltre\plugins). 2 - Suppression des yeux rouges Démarrez ensuite PhotoFiltre puis cliquez dans le menu "Fichier" sur "Ouvrir Sélectionnez votre image et cliquez sur "Ouvrir" : Voici l'image que j'ai choisi pour ce tutoriel : Sélectionnez la partie rouge (l'une après l'autre) en maintenant le bouton gauche de votre souris enfoncé et en la faisant glisser afin d'obtenir ceci : Une fois l'oeil rouge sélectionné, cliquez sur le menu "Filtre" puis "Module externe" et enfin "Suppression des yeux rouges" comme ceci : Vous aurez ceci : Réglez la force de correction à votre guise puis cliquez sur le bouton "Ok". Enregistrez ensuite votre image grâce au menu "Fichier" puis "Enregistrer" pour écraser l'ancienne.