Booklet - jQuery Plugin what is it? Booklet is a jQuery tool for displaying content on the web in a flipbook layout. It was built using the jQuery library. Licensed under the MIT license. Want to check out the source? Take a look at the project's GitHub Repository. see it work jQuery Booklet This is a sample booklet! Content Variety You can place any sort of html elements inside of your booklet pages. Default Options The default options include: Manual Page TurningThis option requires jQuery UI, but will degrade and be usable if not included. Move to the next page by dragging or the arrow keys to see the animation in action!
Responsive Retina-Ready Menu A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes. View demo Download source Today we will create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufacturer of the Borderlands game. The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to display and hide the navigation for smaller screens. Please note: some effects only work in browsers that support the respective CSS properties. Preparing the icon font Creating a custom icon font might look a bit complicated, but with tools like IcoMoon it’s just a matter of creating the icons and importing them into the tool. The first thing we need to do is to create the icons for the menu. We can also enhance our font with icons from the big library that IcoMoon offers. The HTML of the menu The CSS & JavaScript
Portfolio Flipping Slider Using jQuery & CSS3 There are many ways on displaying our portfolio, one of them is using grid style with slider effect for pagination. In this tutorial I’m going to share about how to displaying our portfolio grid with flipping slider effect for pagination using jQuery & CSS3 Transform. Slider Behaviour The slider will change our portfolio images when it’s flipping, this flipping effect is triggered by user click on the pagination. We will create four flipping effects that will be used for animation, there are : horizontal left direction, horizontal right direction, vertical top direction and vertical bottom direction. Markup & Styling We will create a listing of images using unordered list and create a single div for wrapper, this wrapper will be used to display our portfolio image in grid style and will be generated using JavaScript so it will left blank. We also will create a class that have CSS animation, this class will be injected to when flipping the div. Here’s the expected result : JavaScript Done
Ombres avancées avec CSS3 et box-shadow CSS3 c’est pour l’aspect vendeur du nom, car au final on va aussi et surtout bénéficier du service de pseudo éléments (:after et :before) qui sont prévus depuis CSS2.1. Les visuels que vous voyez sur la page de démonstration ne sont composés qu’avec des propriétés CSS sur une seule et unique <div> (pour chaque bloc). Chez moi le meilleur rendu est sous Firefox, notamment pour la dernière ombre qui est un peu osée (au passage il semblerait que la propriété opacity ne fonctionne pas sur les pseudo-éléments). Dans cette démonstration nous allons utiliser des propriétés avancées de CSS2.1 (:before et :after) qui sont des pseudo-éléments. Pseudo-éléments :after et :before Imaginez que dans un site vous souhaitiez ajouter derrière un lien la langue du site en référence (qui, pour rappel, se précise grâce à l’attribut hreflang sur un élément <a>) vous pouvez le faire en passant par du CSS : La base de travail Pour résumer simplement notre démarche nous avons des divisions : Ombre simple Bogues
20+ Powerful jQuery Flipbook Plugins | Goodfav Magazine A lot of websites use jQuery flipbook plugins to present their product catalogs, sales brochures etc., and for a good reason. jQuery flip solutions provide a convenient and effective experience for visitor to look through a large set of items. If done right it is almost like having a printed brochure in your hands. With a flipbook plugin, you can allow your website visitors to flip through pages easily as if they were reading in a real book. Making use of a jQuery flipbook will allow you to present more contents to the viewer and make it look impressive at the same time. Before you choose a solution, you need to be aware of some technical details. Some flipbook plugins are still based on Flash, and they do not really allow searchable content and does not work on iOS devices. This collection contains more than 20 jQuery flipbook plugins that replicate the effect of flipping through a book from page to page. Responsive Flip Book with Touch Support – MORE INFO The jFlip Plugin – MORE INFO
Balise INPUT : champs de formulaire « Partie précédente | Index | Partie suivante » La balise <input> fait partie des éléments permettant à un utilisateur d'effectuer des saisies de données pouvant être échangées avec le serveur. C'est l'un des différents contrôles utilisables au sein d'un formulaire <form> pour rapatrier des informations (au même titre que les balises button, textarea et select). C'est également le tag le plus complet et incontournable car il propose un nombre importants de types différents, allant de la saisie de texte à la validation ou au reset de formulaire en passant par l'affichage de cases à cocher ou de boutons radio. Propriétés pour la balise input : Exemple d'utilisation de la balise input :
Эффект перелистывания страниц на jQuery: более 20 мощных плагинов типа Flipbook Многие сайты используют подобные jQuery-плагины для предоставления каталогов продукции, продающих брошюр и так далее, и все это не просто так. jQuery-решения, позволяющие вам листать блоки контента, предлагают вам пользователям очень удобный способ ознакомиться с тем, что вы готовы предложить им. Если все сделать правильно, но такие электронные брошюры будут работать не хуже настоящих напечатанных, которые можно держать в руках. При помощи специальных плагинов, вы можете позволить посетителям вашего сайта без труда перелистывать страницы и чувствовать, будто они читают настоящую книгу. Использование jQuery-плагинов с эффектом перелистывания позволит вам представлять содержимое вашего сайта в более привлекательной манере. Эта подборка состоит из более, чем 20 jQuery-плагинов соответствующего предназначения, которые позволят вам реализовать механизм перелистывания страниц. 01. Responsive Flip Book представляет собой HTML/jQuery-решение без необходимости устанавливать Flash Player. 02.
Les dates Noter ce cours : Pour pouvoir noter les articles de VIC et bénéficier de tous les avantages des membres, inscrivez-vous, c'est gratuit et rapide ! Liens sponsorisés : La gestion des dates en PHP est très simple. Incontournable, la fonction date() s'utilise de différentes façons. Par exemple, voici un cas concret : nous allons afficher l'année en cours avec la fonction date() : Vous n'avez plus qu'à vous référer aux autres codes pour afficher ce que vous voulez. Si vous souhaitez afficher le mois et l'année, vous pourriez faire ceci : Cette solution est cependant peu pratique et gourmande. Vous allez même pouvoir formater votre date comme bon vous semble, par exemple si vous souhaitez séparer les composantes de votre date par un slash (/), vous pouvez mettre ceci : Vous allez sûrement vous demander de quoi il s'agit, et c'est normal ;) Un timestamp est un nombre qui indique le nombre de secondes qui se sont écoulées depuis le premier janvier 1970.
BrowserCam : Browser testing and cross browser compatibility testing products and tools, including free cross browser testing tool. colourcode - find your colour scheme Start Your Dev - Accueil : html css javascript xml xsl Le BlogDuWebdesign boost l'inspiration des intégrateurs #4 - inspiration-integration Découvrez sur le Blog du Webdesign 10 animations CSS3 sans javascript ! Les animations et transitions CSS3 Qu'on se le dise, il n'est plus obligatoire d'utiliser du Javascript pour avoir de jolies animations sur son site ! Les Transitions ne sont ni plus ni moins qu'un moyen de répartir le changement d'une propriété (par exemple un changement de couleur de texte au survol) dans le temps, pour donner un effet d'apparition, par exemple. Les animations sont bien plus que ça: Il est possible grace à elles de définir des images clés, et les transitions qui doivent être appliquées pour passer d'une image a l'autre ! Attention, ces deux propriétés ne sont pas supportés par internet explorer 9 et inférieur. Pour illustrer ce que l'on peut faire avec tout ça, découvrez 10 animations ne contenant pas de Javascript (ou alors n'utilisant le Javascript que pour des taches annexes, comme détecter un clic). Une animation en forme de diaphragme. Cet animal anime n'est en fait qu'un seul element !
Alsacréations : Actualités et tutoriels HTML, HTML5, CSS, CSS3, standards du web