background preloader

Intégration / Design

Facebook Twitter

(Watercolor tiles, with Toner Labels) (Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.) 43 Brilliant Free jQuery Image Gallery/Slider Plugins (And 14 Tutorials to Make Your Own) jQuery image galleries (also known as homepage sliders, slideshows or image carousels) have become more and more common on websites since the inception of jQuery in 2006. Designers and Photographers are especially attracted to them because they allow you to present many beautiful images in an interesting way.

You can easily load up multiple images in the carousel and present them in a single position on your site without taking up too much room. However, there are several issues with using jQuery Image Gallery/Sliders that you should be aware of before you jump the gun and add one to your homepage. They aren’t ideal for every type of website, and in some instances they could actually hurt your website. The Problem with jQuery Image Sliders jQuery sliders can be great for certain types of websites, but disastrous for others if you want it to rank in Google. There has also been a lot of discussion about how image sliders can actually lower conversion rates for B2B sites. 1. 2. 3. 4. 6. 7.

Create Your Icon Fonts - Free icon Vectors - Fontastic. Swiper - Mobile Touch Slider And Framework With Hardware Accelerated Transitions. Swiper - is the free and ultra lightweight mobile touch slider with hardware accelerated transitions (where supported) and amazing native behavior. It is intended to use in mobile websites, mobile web apps, and mobile native apps. Designed mostly for iOS, but also works great on Android, Windows Phone 8 and modern Desktop browsers. Swiper is created by 1:1 Touch movementBy defaut Swiper provides 1:1 touch movement interraction, but this ration could be configured through Swiper settings.Touch emulationThis function will be useful if you are going to use Swiper on desktop sites.

With all these features you can build amazing touch interfaces and apps with awesome native behavior. CSS3 Drop Shadows Generator - Application. Live Tools - Des outils de génération d'UI en CSS3 / HTML. UI Live Tools est un site web proposant 4 générateurs d'éléments d'interface: Boutons, formulaires, icones et ribbons en CSS3. Voici un site web qui va rendre grand service à ceux qui n'ont pas forcément la fibre graphique dans le sang ! Ui Live Tools est un service proposant 4 générateurs: Générateur de boutonsGénérateur de formulairesConstructeur d'icônesGénérateur de ruban / ribbon A chaque fois, de nombreux paramètres sont disponibles pour personnaliser le style, les couleurs, ...

Générateur de boutons CSS3 Le générateur de bouton est complet, vous pouvez personnaliser les couleurs des différents états, avec des transitions CSS3... Générateur de formulaires design CSS3 Même principe mais pour les formulaires. Il ne s'agit pas là d'un générateur de formulaires avec validateurs etc, mais un générateur de formulaire design. Générateur d'icones Le générateur d'icones permet de créer à la main, pixel par pixel à la souris. Générateur de rubans CSS3 Site Officiel.

PlaceIt - Un service pour mettre vos screenshots en contexte. PlaceIt est un service en ligne gratuit permettant de mettre vos screenshots de sites et applications mobiles dans un environnement contextuel. Pour faire des présentations client ou de projets, vous êtes souvent amené à prendre des screenshots de votre site ou application mobile. Pour donner un peu de style à cette présentation, pourquoi ne pas mettre en forme ce screenshot directement sur le ou les périphériques sur lequel il pourra être consulté ? C'est le concept de PlaceIt, plutôt que d'avoir à faire un montage sous photoshop, vous n'avez qu'à sélectionner le style de fond souhaité parmi les nombreuses propositions déjà existantes, puis au choix: Uploader un screenshot déjà réaliséOu spécifier l'URL du site / web app à screener Et l'image viendra automatiquement s'ajouter à votre contexte, avec la bonne orientation ...

Site mobile Novaway Le service utilise URL2PNG pour générer les screenshots à partir d'une URL, et le résultat est plutôt bon ! De quoi vous économiser un temps précieux! SpriteMachine - Create css sprite images easily! FB Style Menu. FlexSlider 2. Initializr - Start an HTML5 Boilerplate project in 15 seconds! Web Features - Parallax Background Builder.

Responsive Design

30 Free Gesture Icons for Multi-Touch Devices. Photo Booth Strips with Lightbox. Smore - Design beautiful online flyers and publish instantly. Timeline JS - Beautifully crafted timelines that are easy, and intuitive to use. Thumbnails are only shown from Flickr, Youtube, Vimeo etc. That was done for performance reasons. Having a very large image file as a thumbnail really slows down the timeline. Flickr, Youtube etc have actual thumbnail sized images that can be used that don't cause performance issues. You can also create your own thumbnails. Thumbnails are only shown from Flickr, Youtube, Vimeo etc. IosSlider – Touch Enabled jQuery Horizontal Slider/Carousel/Image Gallery Plugin. Features Hardware accelerated Using CSS3 for supported iOS, Surface, Android and WebKit browsers.

Responsive support To work with the most dynamic desktop and mobile sites. Non-intrusive JavaScript Respects your code first. No unnecessary CSS attribute overrides or event bindings. Tons of API callbacks To get the perfect slider feel for your web application. FF/Safari/Chrome/IE7+ Full modern browser support for desktop. iOS/Surface/Android Support for a wide range of mobile operating systems and platforms. Infinitely looping Loop through your slides endlessly in both directions. Auto-sliding Set your slider to automatically transition and pause on hover. Custom scrollbars Over a dozen settings to control placement, look and feel, and user interaction.

Slide Navigation Built-in support for slide indicators and next/previous buttons. Robust demo package Download package includes working examples of all features. First class service User Ratings 4.8 out of 5 average rating Browser Support Details Getting Ready <!