Contenu text comme light box

Martin Angelov By now, you’ve probably heard about Adobe’s new CS5 software pack. Also, you’ve probably seen their product pages, where they present the new features of the suite. Knowing the importance of HTML standards, we are making a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. The idea The main idea is to create an easily configurable set of contextual slideouts. To create a slideout element, you need to include a regular paragraph p tag to the page. Contextual Slideouts Step 1 – XHTML Now lets take a look at the structure of the paragraph tags you should add to the page, and how they are configured. demo.html <div class="main"><p title="A New Tutorial Every Week" style="top:200px;left:120px;"> This slideout is going to open to the bottom-right (the default). As you can see, each of the tags contains a style, a class (optional) and a title attribute. slideout markup Structure of the Slideout Step 2 – CSS styles.css – Part 1

Lightbox Martin Angelov In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it. It will be search-engine friendly and even be compatible with browsers which date back as far as IE6 (although some of the awesomeness is lost). We are using jQuery, jQuery UI (for the drag and drop) and the fancybox jQuery plugin for the lightbox display in addition to PHP and CSS for interactivity and styling. Before reading on, I would suggest that you download the example files and have the demo opened in a tab for reference. So lets start with step one. Step 1 – XHTML The main idea is to have PHP as a back-end which will generate the necessary XHTML for each image. demo.php <div id="gallery"><? Nothing too fancy here. The gallery Step 2 – CSS Now that we have all the markup in place, it is time to style it. demo.css Step 3 – PHP

ColorBox, une lightbox jQuery légère et extensible ColorBox est un plugin jQuery qui permet de générer une lightbox légère et totalement personnalisable pour accueillir photos, textes ou vidéos. Avec plus de quarante options disponibles, ColorBox s’inscrit dans la lignée des meilleurs générateurs de « pop-in ». Facile à utiliser, c’est aussi un des plugins jQuery les plus utilisés sur Internet. Un plugin léger et complet Au même titre que Fancybox, ColorBox est un plugin de qualité. Parmi la multitude d’options, vous retrouverez le type de transition (« fade », « elastic » ou « none »), la vitesse d’animation, l’insertion d’une légende, les boutons de navigation, le degré d’opacité du background, les dimensions de la lightbox, l’activation du diaporama, ou encore la navigation au clavier. Facile à mettre en place ColorBox est très simple à utiliser. Une fois la structure prête, on déclare jQuery et le plugin (script et feuille de style) dans notre document. Il existe de nombreux plugins jQuery qui proposent de la génération de lightbox.

Orman Clark’s Vertical Navigation Menu: The CSS3 Version Next in the Orman Clark's coded PSD series is his awesome looking Vertical Navigation Menu. We'll recreate it with CSS3 and jQuery while using the minimal amount of images possible. The only images we'll be using are for the icons - I'll be creating a sprite using a new tool called SpriteRight, but this is optional. Additionally, I'll be using GradientApp to create my CSS3 gradients, but again this is optional. Step 1: Basic HTML Markup Let's start off by throwing in some basic markup, an empty HTML5 document: And now the markup for our menu; an unordered list within a containing wrapper. Lastly, we create the submenus by placing an unordered list nested within each of our existing list items. Okay, there may seem a lot there but don't let it confuse you. I've also added a class to each list item, just so it'll make styling easier later on. Step 2: Fluid Fonts We'll first make sure our menu displays correctly. Now to explain how the wrapper font size works. Step 3: Main Menu CSS Okay!