background preloader

A Colorful Clock With CSS & jQuery

A Colorful Clock With CSS & jQuery
Martin Angelov The first wave of Christmas holidays passed and we are looking forward to New Year’s Eve for a fresh start at all those things we failed to do the last 12 months. And in the mood of the upcoming holiday, this week we are going to make a colorful jQuery & CSS clock, which will help you keep track of those precious last seconds of the year. This is also the first tutorial that features our first very own jQuery plug-in – tzineClock (soon to be released officially in a post of its own). Go ahead, download the demo files and continue with step one. Step 1 – XHTML As usual, we start with the XHTML markup. This saves us from having to manually type similar blocks of code for each one of the dials (there are three of them, one for the hours, the minutes and the seconds). Lets take a look at the XHTML that is inserted by jQuery: jquery.tzineClock.js This code is contained in jquery.tzineClock/jquery.tzineClock.js. Lets continue with the next step. A Colorful jQuery & CSS Clock Step 2 – CSS

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

Building a jQuery Image Scroller In this tutorial, we're going to be building an image scroller, making use of jQuery's excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads. The finished widget will be completely cross-browser and perform as expected in the latest versions of all of the most common browsers. Getting Started Let's create the underlying HTML page first of all; in a new page in your text editor add the following code: Save this as imageScroller.html inside a new folder. Our widget consists of a series of nested containers and a bunch of images wrapped in links. Styling the Widget Bringing the Widget to Life Changing Direction

Comment créer votre propre site de e-commerce? Le e-commerce s’avère être l’une des opportunités de business en ligne des plus viables sur le web. Comparativement aux business traditionnels, un site de e-commerce requiert un coût minimal de lancement et est relativement peu risqué. Cependant, cela ne signifie pas que la création d’un site web est une simple affaire et qu’une réussite future vous sera garantie. L’objectif de cet article est de vous accompagner à travers les étapes et les plans importants dont vous aurez besoin pour organiser et installer un site e-commerce prospère. Dénicher votre Niche! La toute première chose à faire est de trouver votre niche. Rechercher votre niche Une fois que vous aurez fait le tri dans vos idées, procéder à une analyse poussée des quelques idées obtenues au final. Analyser vos compétiteurs Rechercher vos compétiteurs partout, dans chaque recoin du net. Rédigez votre plan d’affaire Voulez-vous avoir un plan infaillible pour votre business? Créer votre site web Héberger votre site web CMS E-commerce

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. 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 The following CSS will reset the HTML5 elements (article, aside, figure, header, footer, etc.) to block element. Main Structure CSS Again, I'm not going to get into the details.

Interface elements for jQuery - About Interface Text-Shadow Exposed: Make cool and clever text effects with css text-shadow › Kremalicious The aim of this article is to give you a quick introduction of a css property named text-shadow which was first included in CSS2 (but it’s not implemented in all browsers yet). Nevertheless you can make some cool effects with it, which could only be done before by photoshopping text and rendering it as an image. Because it’s included in Safari since version 1.1(!) Mac users should be aware of various effects done by this property. In fact, most companys and persons with mac users as their main target audience use this effect on their websites. This article describes how text-shadow works, what you can do with it and which browsers currently support it. Here’s an overview of the headlines in this article. What text-shadow is good forWhich browsers support itCross-browser compatibilityHow does it work and how to use itExamples with code & demosHack: Safari Text RenderingMore articles and resources 1. subtle glow in my navigation text-shadow on Apple.com 2. 3. 4. 5. 5.1 Simple drop shadow 6.

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. If you are creating a responsive design, this simple CSS trick will come in handy. View the final demo and resize your browser window to see it in action. 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 Credits This trick was found on tjkdesign.com.

SimpleModal Demos / Eric Martin / ericmmartin.com Basic Modal Dialog A basic modal dialog with minimal styling and without any additional settings. There are a few CSS attributes set internally by SimpleModal, however, SimpleModal relies mostly on external CSS for the look and feel. Demo Download Basic Modal Dialog For this demo, SimpleModal is using this "hidden" data for its content. Examples: $('#basicModalContent').modal(); // jQuery object; this demo$.modal(document.getElementById('basicModalContent')); // DOM$.modal('<p><b>HTML</b> elements</p>'); // HTML More details... OSX Style Dialog A modal dialog configured to behave like an OSX dialog. Inspired by ModalBox, an OSX style dialog built with prototype. Demo Download OSX Style Modal Dialog Hello! SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development. As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. (or press ESC or click the overlay)

5 façons de promouvoir sa page fan Facebook gratuitement Créer une page fan Facebook, est à la portée de tous, avec un minimum de temps passé on peut avoir une présence sur le 1er réseau social. Promouvoir sa page, obtenir des fans et avoir des visites qualifiées est une autre paire de manches. Je vous propose de partager via ce billet, mon expérience de promotion de page fan… Mise à jour 2015 : Vidéo My Facebook is Reach Dans cette vidéo, vous apprendrez avec humour et sur fond de Rock and roll ce qu’est le reach sur Facebook et comment développer votre audience sur le réseau social et l’engagement de votre communauté… Pour retrouver nos prochaines vidéos, pensez également à vous abonner à notre chaîne Youtube ! Mise à jour 2011 : 10 nouvelles façons de promouvoir votre page Facebook Voici 10 nouvelles idées pour promouvoir gratuitement votre page Facebook. Avant de penser à promouvoir votre page, rendez la vivante… Avant d’aborder la partie promotion, il est important que la page fan soit alimentée régulièrement de contenus variés.

CSS3 Image Styles When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I'm going to revisit the topic and show you how much more you can do with the background-image CSS trick. I will show you how to use box-shadow, border-radius and transition to create various image styles. View Demo Image Styles Problem (see demo) Take a look at the demo and note that there is border-radius and inset box-shadow applied in the first row of images. Workaround To get the border-radius and inset box-shadow working, the workaround is to apply the actual image as background-image. Dynamic Way To make it dynamic, you can use to jQuery to wrap the background image dynamically for every image element. Output

Related: