Tutoriel : Créez votre menu interactif en images en HTML/CSS ! Version en ligne Table des matières Créez votre menu interactif en images en HTML/CSS ! Bienvenue dans ce tuto qui vous permettra de créer un menu interactif uniquement codé en HTML/CSS ! Dans ce mini-tuto, je vais - enfin nous allons - comme je l'ai dit au-dessus, vous apprendre à créer un menu, avec de beaux effets, interactif, uniquement en HTML5 / CSS3, sans même avoir besoin de Javascript ! Voici un aperçu de ce que vous saurez faire à la fin de ce tuto : Nous pourrons naviguer dans les images soit avec Tabulation soit avec la souris ;) . Si vous êtes sage ( :-° ), vous aurez droit à quelques variantes de ce menu... Alors, envie ? La structure HTML Pour le tuto, nous utiliserons des images depuis lorempixel.com, celles-ci sont soumises aux droits d'auteurs. Nous allons donc construire notre menu en les intégrant à nos liens. Que va contenir notre page HTML ? Nous aurons des liens qui contiendront des images, ils auront un titre. Notre corps HTML5 <! La mise en forme Notre premier objectif : <!
CSS3 – Créer un slideshow automatique et contrôlable Si vous suivez le compte @NoupeMag sur Twitter (ça marche aussi pour mon compte), vous avez certainement vu passer mon slideshow en CSS3 datant de l’an dernier. Ce n’était pas ma première tentative de slideshow comme le présentent ces premier et second travaux datant de mai 2010. Ce tutoriel ne s’adresse pas aux débutants, il vous faudra un minimum de connaissances techniques pour vous y retrouver dans les tronçons de code qui vont suivre. Cependant, le code commenté reste – je l’espère – accessible. Avant propos La page de démonstration du slideshow full CSS3 vous propose des fichiers sources en téléchargement, profitez-en, notamment si vous souhaitez récupérer les images. Les codes CSS fournis ici sont légèrement différents de ceux fournis dans l’archive zippée téléchargeable. Les codes CSS3 présents sur ce tutoriel ne tiennent pas compte des préfixes parfois nécessaires (-webkit-, -moz-, -ms-, -o-) pour une question de gain de place dans le code. Les défauts des versions précédentes
10 Excellent HTML5, CSS3 & JS Tuts + Demos CSS Navigation Bar A sublime hover effect that is crying to be utilized. 3D Cube Rotate Menu A sleek 3D cube rotation effect on each link in the menu. Apple Mice A hompage to all the Apple Mice over the years (made with pure CSS) CSS3 Slider Timeline Menu Learn to create a slider timeline menu with CSS3 animations. Follow Widget with Folding CSS3 Animation Follow Widget with Folding CSS3 Animation Shape Shifter HTML5 canvas experiment Sliding Icon Button A rounded button with a circle icon that slides across the length of the button as the button title changes using CSS3 transitions Flat Responsive Sliding Boxes Flat responsive sliding boxes using HTML5 and CSS3 CSS Dashed Shadow Pure CSS hipster-ish typographic dashed shadow CSS Loader Another set of nice CSS loaders Found is our way of sharing the best articles, resources and tutorials that find their way to the eyeballs of the CSSDA crew.
10 templates HTML5 et CSS3 à télécharger gratuitement La rentrée approche à vitesse grand V et c’est souvent la période où en pense à refaire son site ou son portfolio. J’ai récemment dû faire une recherche de templates HTML pour un projet, et je me suis dit que ça pourrait être intéressant et le bon moment que je vous fasse un petit top 10 de ce que j’ai trouvé. Ces templates peuvent vous servir de base pour bâtir votre site, pour voir comment ils sont développés ou tout simplement pour votre inspiration, tout en respectant les licences associées. Ils sont tous développés en responsive design pour gérer les multi-écrans, au format HTML5 et CSS3 et comble de tout, ils sont gratuits. Il ne vous reste plus qu’à faire votre sélection, le mettre à votre goût et l’adapter, trouver un hébergeur et un nom de domaine et le tour est joué. Pour les novices, il existe toujours des solutions simplifiées et rapides pour créer son site. J’espère que ces ressources utiles pourront vous servir ! 1 – Infusion Demo | Téléchargement 2 – Yebo Bicycle 4 – Brushed
Fullscreen Video Slideshow with BigVideo.js A tutorial about how to create a slideshow-like fullscreen video background using BigVideo.js, a jQuery plugin for big background video. View demo Download source(Please note that the ZIP file does not contain any video files due to their size.) BigVideo.js is a jQuery plugin that makes it easy to create fit-to-fill background video on a web page. In this tutorial, we’ll be creating a page that shows a series of video screens, showcasing the free HD stock video footage and animated backgrounds available on Beachfront B-Roll. Before we get started, give some thought as to whether using this technique at all is appropriate for your project. The first thing you’ll need to do is get video content. The Markup First, let’s do the markup for the page: We have a header on the center of the screen. The CSS Before we get into the video, we need to style the page. Since navigation will be handled by a single big next button, we set the body overflow to hidden. Note the data-video attribute. Tidying up
25+ HTML5 and CSS3 Sliders Free To Use - DesignGrapher.Com | Design & Photography blog Creating or designing a unique and different website is very challenging. To make your job easier, you can select HTML5 and CSS3 sliders that are ready to. There are many HTML5 and CSS3 sliders available for free downloads on the internet. 1) Pure CSS3 and jQuery Rotating Image Slider [Via] 2) CSS3 Slider With HTML5 Canvas and jQuery[Via] 3) Full Width Image Slider [Via] 4) Fun 3D Image Slider [Via] 5) Pure CSS Slider [Via] 6) Pure CSS Featured Image Slider [Via] 7) CSS & HTML 3D Slider [Via] 8) A Simple Yet Effective CSS3 Image Slider [Via] 9) Experimental CSS3 Only Image Slider with 3D Transforms [Via] 10) Flipbook Image Slider with CSS3 3D Transforms and jQuery [Via] 11) Making a CSS Only Accordion Image Slider [Via] 12) Slim Slider Css3 [Via] 13) CSS Slider (Pure CSS) [Via] 14) Creative Accordion CSS3 Image Slider Free Download [Via] 15) Pure CSS Content Slider with Keyboard Navigation [Via] 16) Slider in only css [Via] 17) Minimal Pure Css Slider [Via] 18) Solitary CSS3 Slider [Via]
Créer son propre média - Korben Sur cette page est répertoriée tous les différents types de Médias existants et des outils vous permettant de créer le votre. Média: Media est le pluriel du mot latin medium dérivé de l'adjectif medius signifiant milieu, moyen. Par extension le mot désigne un objet positionné au milieu, dans l'entre-deux, jouant un rôle d'intermédiaire. Vidéo, Films, Télévision et Streaming vidéo MediaGoblin (en) est un service libre et décentralisé de partage de médias (textes, photos, musiques, vidéos etc). Audio, Musique, Radio et Streaming audio Voir la rubrique Radio & Co, la rubrique Son et Musique 100% libre et les rubriques Réseau social libre (type Myspace) et Créer son propre réseau social libre (type Myspace). Images et Photographie OpenPhoto (Source: Vidéo de Frenchweb.fr) | Tutoriel d'installation sur votre serveur auto-hébergé. Presse (journal, magazine etc) Libres: Newscoop The open content management system for professional journalists & online newspapers. Livre In Libro Veritas. Site web
Scattered Polaroids Gallery A flat-style Polaroid gallery where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides. Optionally, an item can have a backface which will be shown by flipping the Polaroid when clicking on the current navigation dot again. View demo Download source Today we’d like to share a little gallery experiment with you. We use the following structure for the gallery: The “photostack-start” class can be used to show an initial overlay on the gallery container. The div with the class “photostack-back” can be used to insert some more info for the backside of the Polaroid. The shuffle iteration count (the amount of times we want all Polaroids to move around before the next item becomes current) can be controlled with the data-attribute data-shuffle-iteration. Take a look at some screenshots of the gallery: I hope you like this gallery idea and find it inspirational :)
How to Create Multiple Dynamic Sidebars for Wordpress Widgets In the last tutorial, you learnt how to widgetize your wordpress theme to support wordpress widgets. Now this tutorial explains how to create multiple dynamic sidebars to add various combinations of widgets to customize your wordpress theme even more. Advertisements I suggest you read how to Widget-Enable WordPress Themes in 3 Easy Steps before reading further as examples will be quoted in the same context. Edit Functions.php for Multiple Dynamic Sidebars The functions.php code which helped to widgetize your wordpress theme and support a single dynamic sidebar, now needs to be edited (using any text editor like Notepad) to support multiple sidebars. to the new code below to support our customized template with h4 subtitles and non-default unordered lists in the sidebar. <? To support multiple sidebars, I simply need to specify that multiple sidebars be used and name them as I like. <? I personally have extended this capacity to 6 dynamic sidebars on this blog. Sidebar1 code goes like this
14 templates HTML5 gratuits | Webdesigner Trends - Webdesign et inspiration Nouvelle fournée de ressources sur le blog : au programme du jour, 14 templates HTML5 à télécharger gratuitement. Pratiques lorsqu’on souhaite mettre rapidement un projet en ligne, certains templates peuvent littéralement vous sauvez la vie ou du moins vous faire économiser un bon nombre d’heures de travail. D’après moi, il sont à utiliser avec modération et si vraiment nécessaire. Un template fera très bien l’affaire pour un petit projet personnel par exemple, alors que pour les projets professionnels et personnalisés, mieux vaut se baser sur un bootstrap par exemple. Certains sympathiques webdesigners offrent un certain nombres de templates codés, prêts à l’emploi. Brushed Template Un template one page, basé sur Twitter Bootstrap, Responsive, optimisé pour les écrans Retina. Kataklimt Responsive Html5 Theme Responsive et créé pour la photographie. MiniPort Telephasic Utile dans de nombreuses situations, ce template polyvalent pourra s’adapter facilement à vos besoins. Andia Agency Prologue
Un Infinite slideshow en quelques lignes de jQuery Un Slideshow sur une page d’accueil, c’est joli, c’est à la mode, mais c’est souvent lourd à intégrer. Il vous faudra des compétences certaines en jQuery, ou utiliser des plugins déjà prêts. Aujourd’hui je vous propose un tutoriel pour créer un infinite slideshow en quelques lignes de code. Je vous ai promis, via Twitter, un « dossier-tutoriel » sur la création d’un slideshow de A à Z avec quelques options sympa. Cet article ne fait pas partie du dossier, il n’a pas grand chose à voir, il s’agit simplement de vous présenter une solution enfantine avec une petite dose de HTML, CSS et jQuery. L’effet infinite Cet effet donne l’impression que votre slideshow ne se termine jamais, il tourne en boucle indéfiniment sans jamais revenir en arrière. À chaque fois qu’une image vient d’être vue et laisse place à l’image suivante, elle est placée en fin de liste afin de créer une boucle sans fin. La structure de base Une division contenant une liste d’images suffira pour notre tutoriel. Exemple :
How to Add Widgets to WordPress Theme's Footer I wanted to use widgets in the footer of my WordPress theme but my wordpress theme didn’t come with a footer-sidebar by default. I didn’t really wanted to change the theme just because of that. So I hacked the wordpress theme to introduce footer-sidebars. There are really three main parts to introducing a footer sidebar/widget area in your theme: Registering the Sidebar(s) in the WordPress ThemeInserting the Sidebars In the WordPress ThemePutting some style into the sidebars WordPress has introduced a few new functions recently which makes it hard to write one tutorial that will cater for every theme out there. Keep a backup copy of your “functions.php” and “footer.php” file just in case you make a mistake when making the code changes. Adding Footer Widget to a Modern Theme Do the following if your theme is relatively new. 1. 2. 3. Add the following block of CSS code to your theme’s style.css file to add some basic styling to the footer widgets you just added. 1. register_sidebars(4,array(
Loxia Studio : Créer des animations flash et html 5 en ligne facilement - SOS PC 95 - Le Blog En visitant certains sites, vous avez surement vu des animations flash, des galeries 3D, des diaporamas et vous aimeriez peut-être avoir la même animation sur votre site. Et bien à présent, c’est tout à fait possible , et cela sans aucune connaissance en flash ou html et sans l’aide d’aucun logiciel, car toutes les animations se font en ligne. Sur ce site vous aurez le choix parmi 37 animations (flash et html 5) : – Slice Cube 3D – Carroussel – Cube 3D – Mur 3D – Diaporama – Coverflow – etc À travers cet article vous verrez quelques animations que l’on peut créer (dont certaines sont mes préférés Pour commencer, allez sur ce site : Cliquez sur « Commencer« , là, vous aurez accès aux 37 animations. À partir d’ici, rien de compliqué, il suffit juste de choisir votre animation et ensuite d’ajouter vos images. Voici un exemple avec l’animation Slice Cube 3D avec ombre et menu. Voici un exemple avec l’animation Carroussel. Voici un exemple avec l’animation Cube 3D.
3 façons d'avoir plusieurs pages de blog avec wordpress - Buzut WordPress est un super moteur de blog, mieux, il est même un CMS complet. La preuve ? Il propulse la grande majorité des blogs auto-hébergés (bien devant drupal, joomla etc) et est derrière des centaines millions de sites : blogs, sites d’information, sites vitrines, ecommerces… Cependant, comme tout outil, WordPress a ses limites : il ne permet pas d’avoir plus d’une page de blog (comprendre page qui liste les articles ou posts). De la plus à l’arrache à la plus aboutie, ces différentes techniques ont chacune leurs particularités. Utilisation des catégories comme pages de blog Cette technique est d’une simplicité incroyable mais elle reste extrêmement efficace. Résumons la situation. Autre cas, vous avez un e-commerce et vous avez plusieurs gammes de produits. Dans le menu de WordPress, il vous suffit de vous rendre dans apparence > menus, puis d’ajouter à votre menu la catégorie 2 temps, et la catégorie 4 temps (si votre thème le supporte). Deux pages (ou plus) de blogs sur mesure <? <? <?