background preloader

HTML5 Grayscale Image Hover

HTML5 Grayscale Image Hover
Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software. I've put together a demo to show you how to use HTML5 & jQuery to dynamically clone color images into grayscale (see demo). Credits: thanks to Darcy Clarke (my Themify's partner) for the jQuery and Javascript code. View Demo HTML5 Grayscale The Purpose This demo is intented to show you how to make a grayscale/color image hover effect with HTML5 and jQuery. jQuery Code The jQuery code below will look for the target images and generate a grayscale version. How to use it To apply this to your site: include a copy of jquery.js paste the code as shown above set the target image (eg: .post-img, img, .gallery img, etc.) you may change the animation speed (ie. 1000 = 1 second) Compatibility It works with any browser that support HTML5 and Javascript such as Chrome, Safari, and Firefox. Credits

jquery-frontier-calendar - Project Hosting on Google Code Full month calendar jQuery plugin that looks like Google Calendar. Latest Version, 1.3.2- June 24th, 2010 Please visit the downloads section for a working example and API documentation. Download Latest Version: Download Older Versions: Google Group: Shameless mention of my other vertical tab plugin Change Log Screenshots All UI elements such as next-month & previous-month buttons, add event form, edit event form, tooltips, etc, are not part of the calendar plugin. When there are too many agenda items to fit within a day cell a "more" link appears. You may change the background image via the CSS file.

Creating a Mouseover Fade Effect with jQuery My last little jQuery tutorial was an alternative to using CSS to create an image change on a mouseover. Now I want to take that one step further and add a fade effect. For my example, I am going to make a black and white image fade into a color image. To achieve this effect I am going to introduce the animate function. There are tons of possibilities in regards to jQuery’s animate function, but for this tutorial, I’m going to keep it simple by just using it to do one thing. Add the jQuery script between your head tags. Here is the function. Here is the CSS. And here is the body code. All together you got something that looks like this. Test it out below: NOTE: If you are using jQuery with WordPress, you need to replace all the dollar signs ($) with the word jQuery due to other Javascript libraries that use the dollar sign.

jQuery Frontier Calendar - Un calendrier complet à la Google Agenda jQuery Frontier Calendar est un plugin jQuery permettant de créer rapidement un calendrier riche à la Google Agenda. Voici un plugin très pratique si vous souhaitez mettre en place un système de calendrier sur votre site web. Avec un design très classe à la Google Agenda, jQuery Frontier Calendar bénéficie des fonctionnalités de base d'un agenda: Navigation mois par moisSélection d'une dateAjout d'évènementsConsulter un évènementDrag and drop d'évènements pour changer la dateLecture et chargement d'évènements à partir d'un fichier .ics (iCal)Callback pour l'ajout / suppression d'évènementsEtc. Vous pouvez tester l'agenda à cette adresse. Personnalisable à souhait, vous pourrez modifier le CSS du calendrier pour mettre une image de fond, changer le design des évènements etc. Le calendrier peut aussi être redimensionner avec un ratio prévu dans la configuration du plugin. La documentation du plugin est fournie dans la démo fournie dans l'archive à télécharger. Site Officiel

Responsive Design with CSS3 Media Queries Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn't work any more. Web design needs to be adaptive. View Demo Responsive Design Download Demo ZIP See It in Action First Before you start, check the final demo to see how it looks like. More Examples If you want to see more examples, check out the following WordPress themes that I designed with media queries: Tisa, Elemin, Suco, iTheme2, Funki, Minblr, and Wumblr. Overview The page's container has a width of 980px which is optimized for any resolution wider than 1024px. HTML Code I'm not going to go through the details of the HTML code. HTML5.js Note that I use HTML5 markup in my demo. Reset HTML5 Elements to Block Main Structure CSS Again, I'm not going to get into the details. Step 1 Demo Updates

"Drupal 8 s'oriente vers HTML5 et la mobilité " Le créateur de Drupal est en France pour annoncer le lancement de la filiale française de la société de services qu'il a créée. Il revient pour nous sur les évolutions à venir du CMS Open Source. Le créateur de Drupal, et directeur technique et fondateur de la société de services Acquia, Dries Buytaert revient sur les dernières évolutions de Drupal, et les nouveautés à venir dans Drupal 8. JDN Solutions. Dries Buytaert. Un projet Web est une bonne porte d'entrée pour débuter dans le Cloud. Dans ce domaine, nous avons notamment signé un contrat avec Aljazeera. "L'écosystème Drupal manque pour le moment de compétences." Proposez-vous également des offres pour des plates-formes Drupal installées en interne ? Beaucoup de nos clients utilisent Drupal pour l'ensemble de leurs sites Web. Warner Music utilise l'ensemble de cette gamme. Mais, nous proposons aussi une distribution Drupal avec des services d'accompagnement associés pour les applications installées en interne.

activity-indicator A jQuery plugin that renders a translucent activity indicator (spinner) using SVG or VML. Features Lightweight script No images required No external CSS Resolution independent Alpha transparency Highly configurable appearance Works in all major browsers Uses feature detection Degrades gracefully Supported Browsers The plugin has been successfully tested in the following browsers: Firefox 2.0 Safari 3.2.1 Internet Explorer 6.0 Opera 10.6 Of course newer versions of the various browsers are also supported. Dependencies The plugin requires jQuery v1.4.2 (or higher). Usage To render the default indicator, invoke .activity(). segments The number of lines to draw. width The width of each line. space The space between the inner ends of the lines. length The length of the lines. color The color. steps The size of the gradient specified in number of segements. opacity The opacity of the lightest segment. speed Rotation speed in rounds per second. align The horizontal alignment. valign The vertical alignment.

reveal.js - The HTML Presentation Framework HTML Presentations Made Easy Created by Hakim El Hattab / @hakimel Heads Up reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with support for CSS 3D transforms to see it in its full glory. Vertical Slides Slides can be nested inside of other slides, try pressing . Basement Level 1 Press down or up to navigate. Basement Level 2 Cornify Basement Level 3 That's it, time to go back up. Slides Not a coder? Point of View Press ESC to enter the slide overview. Hold down alt and click on any element to zoom in on it using zoom.js. Works in Mobile Safari Try it out! Marvelous Unordered List No order here Or here Or here Or here Fantastic Ordered List One is smaller than... Markdown support For those of you who like that sort of thing. <section data-markdown> For those of you who like that sort of thing. Transition Styles You can select from different transitions, like: Cube - Page - Concave - Zoom - Linear - Fade - None - Default Themes Global State Custom Events

L'approche MVC en javascript avec backbone.js Si vous avez déjà travaillé sur une application utilisant massivement le javascript, vous savez que cela peut devenir rapidement cauchemardesque pour garder un semblant de synchronisation entre les interfaces HTML, la logique javascript et la base de données. Dans ces cas-là, jQuery (ou mootools, ou tout autre framework javascript "classique") n'est pas suffisant, une approche plus structurée est nécessaire. C'est là que backbone.js entre en jeu. Avec backbone.js, vous représentez vos données en models (approche MVC), qui peuvent être créés, validés, détruits et sauvegardés vers le serveur. A partir du moment ou une action modifie un model, celui-ci active un évènement "change". Toutes les vues qui affichent ce model sont notifiées par cet événement, les forçant à se ré-afficher. Exemple TODO List L'exemple donné dans la documentation officielle est très complet. Model window.Todo = Backbone.Model.extend({ Représente une tâche dans la todo list. Collection Représente la todo list. View Application

CSS: Elastic Videos While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn't work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve this. View Demo Elastic Videos Elastic HTML5 Videos (demo) With HTML5 video element, you can easily make it elastic by using the max-width:100% trick (see elastic HTML5 video demo). Elastic Object & Iframe Embedded Videos (demo) The trick is very simple. How to Create Fixed Width & Elastic To restrict the width of the video, an additional <div> wrapper is required. Compatibility This trick works on all browsers (tested on Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone and iPad). Credits This trick was found on tjkdesign.com.

Creating Stylish Responsive Form With CSS3 and HTML5 #buttons #submitbtn { display: block; float: left; height: 3em; padding: 0 1em; border: 1px solid; outline: 0; font-weight: bold; font-size: 1.3em; color: #fff; text-shadow: 0px 1px 0px #222; white-space: nowrap; word-wrap: normal; vertical-align: middle; cursor: pointer; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border-color: #5e890a #5e890a #000; -moz-box-shadow: inset 0 1px 0 rgba(256,256,256, .35); -ms-box-shadow: inset 0 1px 0 rgba(256,256,256, .35); -webkit-box-shadow: inset 0 1px 0 rgba(256,256,256, .35); box-shadow: inset 0 1px 0 rgba(256,256,256, .35); background-color: rgb(226,238,175); background-image: -moz-linear-gradient(top, rgb(226,238,175) 3%, rgb(188,216,77) 3%, rgb(144,176,38) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(3%,rgb(226,238,175)), color-stop(3%,rgb(188,216,77)), color-stop(100%,rgb(144,176,38))); background-image: -webkit-linear-gradient(top, rgb(226,238,175) 3%,rgb(188,216,77) 3%,rgb(144,176,38) 100%);

Related: