background preloader

Veille Technologique

Facebook Twitter

US Open Sessions - Motion Demo. 3 cool CSS3 image hover effects. On the modern web there are numerous techniques that can be used to create interesting interactions, but the simplest and most elegant is usually CSS, and specifically the additions that came with CSS3. Back in the old days, we had to rely on JavaScript for this kind of effect, but thanks to ever-increasing support for CSS3 across browsers, it’s now possible to set up effects like these without any scripting at all. There are sadly still browsers (IE9 and below) that don’t support CSS3, so you’ll either need a fallback for legacy browsers or to treat the effect as a progressive enhancement. Today, we’re going to look at how we can apply cool, but neat hover effects to show and hide images captions. If you’d prefer to follow along with the code, you can download the files here. Demo 1 The first demo is our simplest: the image will fly to its right to reveal the caption.

The markup For our first demo’s HTML we will use an unordered list and then wrap the caption and the image inside it. The CSS. CSS buttons with pseudo-elements. Bootstrap - Components. Available glyphs Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible. How to use For performance reasons, all icons require a base class and individual icon class.

To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding. Don't mix with other components Icon classes cannot be directly combined with other components. Only for use on empty elements Icon classes should only be used on elements that contain no text content and have no child elements. Changing the icon font location Bootstrap assumes icon font files will be located in the .. Change the @icon-font-path and/or @icon-font-name variables in the source Less files.

Use whatever option best suits your specific development setup. Copy Example. Web design: 6 tendances fortes pour 2014. L’année 2014 commence à peine que de nouvelles tendances dans le monde du design se profilent. Le Web Design Ledger dresse ainsi le tableau des tendances qui marqueront le webdesign cette année, parmi elles: Le Flat Design: c’est la tendance qui s’est le plus imposée en 2013. Apple l’a utilisé dans iOS 7, en mettant par la même occasion le « skeumorphisme » (son opposé) au placard. Il s’agit ici de se débarrasser de tout effet de profondeur pour éviter une impression de superflu visuel. La typographie expérimentale: désormais les graphistes se lâchent avec les polices, l’espacement typographiques etc. Les menus déroulants: pour une meilleure expérience de navigation, les menus déroulants sont de plus en plus utilisés.

Le défilement infini: encore une fois c’est la simplicité qui est recherchée. Des couleurs simples: en 2014, de nombreux sites devraient revoir en en partie leur charte graphique. Le reponsive design: il a été très utilisé en 2013 et ce n’est sans doute pas fini. Les tendances du Webdesign en 2014. Avec quelques mois de recul, il nous semblait désormais temps de faire une synthèse sur l'étude « Les 10 Tendances Webdesign de 2014 » publiée en février dernier par Vanksen. C'est désormais chose faite... Avec l’évolution des technologies et l’arrivée en masse des terminaux mobiles (smartphones et tablettes), le web s’est retrouvé chamboulé et a dû s’adapter à ces nouveaux supports. Designers et Développeurs ont donc été dans l'obligation de remettre en cause « leurs acquis » ;D Responsive et Mobile first Grâce au « responsive », les développeurs ont pu rendre leurs sites visibles, accessibles et implémenter un comportement « intelligent » sur toute taille d’écran.

Est-ce que le choix du développement d'un site Internet « responsive » a une influence sur le design des sites ? La réponse est oui, car les utilisateurs consultent de plus en plus internet avec leurs terminaux mobiles que chez eux sur leur ordinateur de bureau. Monopage ou Onepage Alors c’est tout, juste du flat design…? Source. Les 12 tendances webdesign qui se confirment pour 2015. Ça y est, 2015 est à notre porte ! Durant l’année 2014, nous avons expérimenté et avons intégré intelligemment les tendances webdesign dans nos projets. Selon Shiva Sherbaf, lead du pôle DA, certaines tendances ne sont pas prêtes de disparaître bientôt, d’autres vont évoluer… tandis que de nouvelles feront leur apparition. 1 – Multi-device design De plus en plus les gens utilisent leur mobile pour accéder à Internet et le mobile sera bientôt le moyen le plus commun pour surfer.

Avoir un site web qui peut être visualisé facilement sur mobile, tablette et ordinateur de bureau est devenu indispensable. Les entreprises misent sur la compatibilité avec tous les devices mobiles afin de rendre leur service ou leur produit le plus accessible possible aux clients. Les consommateurs attendent que les produits et les services soient à portée de main partout et à n’importe quel moment. 2 – Des menus cachés à faire glisser ou à afficher 3 – En 2015, moins de clic et plus de scroll. Tendances Web Design 2015.

Présenter les tendances web design n'est pas une chose aisée. Il faut tout d’abord analyser les raisons qui poussent les designers à faire un choix plutôt qu'un autre : par mimétisme, par mode ou pour répondre à une problématique spécifique ? Aujourd'hui, il est inimaginable de concevoir une charte graphique sans y intégrer les supports dématérialisés. Les arts appliqués comptent une nouvelle discipline : le web design, avec ses codes, ses possibilités et ses limites.

Il n'est plus question d'imiter le support papier, mais d'envisager le web design dans sa globalité, avec ses spécificités techniques, ergonomiques, d'accessibilité… et dans le respect des standards. Le web design est vivant. Tout comme dans le prêt-à-porter, il est possible de cerner les tendances en web design. Je développerai les tendances web design 2015 en 10 points.

Le flat design et le style minimal Le flat design est une tendance de fond qui fut en partie initiée par Microsoft en 2010 avec Windows Phone. Le Monopage. Tendance du webdesign : écran divisé vertical. Appelez-la « split-screen », « divided-screen » ou écran divisé vertical. Cette nouvelle tendance se retrouve dans de nombreux web design : décryptage et exemples.

La tendance du webdesign à deux colonnes, a petit à petit fait son apparition avec l’utilisation du double scroll. Depuis un ou deux ans, de nombreux sites mettent en place ce genre d’effet pour présenter leur contenu. Bien plus qu’un simple parti pris graphique, diviser l’écran en deux parties bien distinctes offre une manière originale de guider l’utilisateur dans votre site.

Créer des mises en page minimalistes et efficaces.Attirer l’attention de l’utilisateur vers une partie bien précise.Jouer sur les contrastes.Offrir une mise en page non conventionnelle.Créer des sites plein écran. Ce type de mise en page est particulièrement bien adaptée à une navigation sur grand écran ou encore sur tablette. Plastic Bionic Studio Meta Play Mag / Most Wanted 2015 NightCall US Hello Monday London Art Weekend Parktavernsp La grande Evasion. Le SVG - SVG Animation. It is possible to animate the shapes in an SVG image. There are several different ways to animate SVG shapes. In this text I will go through the various possibilities. SVG Animation Example Here is a simple SVG animation example: Notice how the <rect> element has a <animateTransform> element nested inside it. It is this element that animates the rectangle. Here is the resulting SVG animation: Overview of Animation Options Animation is done by manipulating the attributes of shapes over time.

Each of these SVG animation elements sets or animates different aspects of SVG shapes. Set The set element is the simplest of the SVG animation elements. Here is a <set> element example: Notice the <set> element nested inside the circle element. The <set> element sets the value of an attribute at a certain time. The example above sets the attribute r to 100 after 5 seconds. AttributeType The previous example also had an attributeType attribute inside the <set> element. Animate Here is the resulting animation: Flat Surface Shader. Canvas 3D (WebGL) plus facile avec Three.js - La 3D adaptée au web. Nous avons tous déjà vu des sites de grandes marques nous en mettant plein la vue avec des animations 3D interactives, ou des démonstrations technologiques qui font rêver. On pense ici à quelques berlines allemandes parfaitement modélisées qu’il est possible d’inspecter sous tous ses angles avec un simple mouvement de la souris...

Bien souvent développées en Flash avec la librairie Papervision3D ces animations en jettent un max, mais restent dépendantes du plug-in d'Adobe qui est de moins en moins populaire et "incompatible" tablette et smartphone. Aujourd’hui la tendance est au HTML5 et CSS3, parsemé d’un peu de JavaScript. Ô chance, le W3C et ses contributeurs ont justement prévu de passer par Canvas (qui permet déjà de dessiner dans une page web en 2D) pour exploiter une scène 3D avec les standards du web. Comment et pour qui ? Pour ceux qui ne le savent pas, il existe deux composants HTML5 pour dessiner : La librairie Three.js <! Démonstration “Tout ça pour ça” me direz-vous ? Et voilà ! OnePageScroll.js: - Parallax. Tutorials On the 9th of September, 2013, Apple announced 2 new versions of the iPhone called the iPhone 5S and the iPhone 5C.

Like all new product announcements these days, the releases were accompanied with beautiful websites to showcase their products. I was interested in the new iPhone 5S website in particular because of the way the scroll works. On the iPhone 5S website, you can only scroll one step at a time, allowing the viewer to get only relevant information without accidentally scrolling pass things. Today, I have decided to build a simple plugin called One Page Scroll that will let you quickly create a similar website to the iPhone 5S and iPhone 5c page, with one JS call.

Note: This plugin has been tested on Windows’, OSX’s, iOS’s, Android’s Chrome, Firefox, Safari and IE10. Using OnePageScroll.js in Website Design How Does It Work? You can see this in action in demos 2 and 3 where all you need to change is one line of CSS code and the animation will change accordingly. How-Tos. 20 ans de design web – L’évolution et les grandes tendances | Le très petit blogue.

Détail Formation a travaillé avec Tommy Ferlatte et son équipe en 2008 pour la refonte de son site Web. Reconnu entre autres pour son expertise en design Web, Tommy a récemment rédigé un article sur cette évolution et les tendances 2012. Le design web a connu une évolution marquante depuis le premier site lancé par Tim Berners-Lee, il y a plus de 20 ans. Contrairement aux autres catégories de design, le web design doit son évolution, parfois forcée, à la technologie.

Parfois contraignante à la créativité et d’autres fois plus propice. La première partie sera consacrée à la période de 1992-99. Chapitre I Le présent chapitre traite des débuts du design Web, plus précisément la période entre 1992 et 1995. Un peu plus tard, entre 1996 et 1998, arrive la période du « M’as-tu vu ». Ce dernier paragraphe me rappelle énormément un épisode de la série « les Simpson », où Homer se créé son premier site Web, constitué uniquement de « GIF animés ». Chapitre II Une grille, comme dans TRON, ou presque!