HTML5 Boilerplate, un template puissant et complet HTML5 Boilerplate est un template (HTML+CSS+JS+...) lancé par Paul Irish (Modernizr) et Divya Manian. Il contient toutes les bonnes pratiques du moment en terme de performances, de compatibilité inter-navigateurs, de JavaScript, avec un soupçon d'accessibilité (si utilisé à bon escient), voire de Flash. Une version sur-mesure peut être générée via Initializr. Vous retrouverez donc dans un zip tous les fichiers et sous-répertoires organisés pour débuter votre intégration avec d'excellentes bases. Bien entendu, vous l'aurez deviné, le but est de favoriser l'adoption de HTML, d'où l'inclusion par défaut de la librairie Modernizr, ainsi que jQuery via GoogleAPI (avec fallback local). Voici une liste des fonctionnalités supportées : Bien entendu d'autres sont à découvrir dans le code source, comme par exemples les indications pour les icônes Apple touch + favicon par exemple.
Original Hover Effects with CSS3 The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example. View demo Download source Please note that this will only work properly in modern browsers that support the CSS3 properties in use. The Markup The structure of markup is very simple and intuitive. Inside the view insert an element with the class mask that will be responsible for our effects driven by CSS3 and inside it we will put a title, description and a link to the full image. <div class="view"><img src="image.gif" /><div class="mask"><h2>Title</h2><p>Your Text</p><a href="#" class="info">Read More</a></div></div> The CSS After creating our markup we’re going to set our style. And now we’ll look at the ten effects. Example 1 And now comes the heart of our effect. Example 2 Example 3 Example 4
Sleek jQuery Accordion Menu Plugins and Tutorials jQuery accordion menus are menus that act like a musical accordion, with regards to their ability to expand and contract based on user interactions. This helps display additional information for the active menu items, while hiding non-relevant information from the user. Additionally, it can help add more content without sacrificing white space, leading to more usable and attractive user interface design. We’ve gathered up some sleek and useful jQuery accordion menu plugins and tutorials for you to get started using accordion menus in your own projects. Whether you’re looking for a horizontal accordion, a vertical one, a grid one, or a different implementation, you’ll find not only some pre-built plugins, but also some tutorials so you can make your own. If you need more jQuery, check out our other jQuery posts: Enjoy! Grid Accordion with jQuery Easy Accordion jQuery Plugin DesignReviver Horizontal Accordion Making an Accordion Menu with jQuery 1k Horizontal Accordion Tutorial Advertisement
CSS Transitions - Iceweasel Abstract CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration. Status of this document This section describes the status of this document at the time of its publication. Other documents may supersede this document. Publication as a Working Draft does not imply endorsement by the W3C Membership. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. This document is expected to be relatively close to last call. Table of Contents 1. This section is not normative. This document introduces new CSS features to enable implicit transitions, which describe how CSS properties can be made to change smoothly from one value to another over a given duration. 2. Transitions of ‘left’ and ‘background-color’ Example(s): 2.1. 3.
C XML Schema If you want yours listed here, please send an announcement to xmlschema-dev. Recent changes / news: 2010-01-05 generate bindings from XML Schema 2009-11-19 Python XML Schema Bindings 2008-01-06 Visual Schema 2007-12-12 Stylus Studio 2008 released 2007-11-13 CodeSynthesis XSD/e 2.0.0 released 2007-11-04 Saxon 9.0 2007-10-23 Liquid XML Studio 2008 2007-10-17 Intel XML Software 2007-09-20 XSD/e version 1.1.0 2007-09-17 XMLSpy/Altova 2007-09-03 Xerces-C++ 2.8.0 2007-08-22 LMX V3.4 2007-08-16 SchemaXpert 2007-08-01 CodeSynthesis XSD 3.0.0 2007-06-05 xchecker 2007-05-17 oNVDL 2007-05-08 oXygen XML version 8.2 2007-01-22 DocFlex/XSD 2006-11-28LINQ to XSD 2006-11-17SchemaAgent 2007 2006-10-18 XSDBench 2006-09-22XmlPad2006-09-21 ITCworks 2006-09-19 xnsdoc 1.2 - XML Schema documentation generator 2006-09-13BRICS Schematools 2006-09-07EditiX Altova XML (XML Spy) Version 2008 of the Altova XML product line is available 2007-09-17 More info and screenshots: Castor
Animated Buttons with CSS3 Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states. View demo Download source The icons used in some of the examples are by webiconset.com and the symbol font is by Just Be Nice We’ll go through every example and see how the HTML structure looks and what the styles for the normal, the hover and the active states are. Please note that the animations/transitions will only work in browsers that support those CSS3 properties. In order not to bloat the tutorial, I will not be using any CSS vendor prefixes. Example 1 In this example we will create a big button with several details in it. Markup The structure is pretty straightforward: the icon will be an image and the other elements will be spans: In the style we will make sure that the right transitions are set on the element that we want to animate on hover. Example 2 Example 3 Example 4 Example 5
CSS 3D Meninas (versión en castellano abajo) I’ve took the classic paint The Maids of Honour (Las Meninas) and made this CSS pseudo-3D/parallax effect. It is pure CSS, so no javascript or flash involved: only CSS and HTML code. It has been tested and it is working on Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 and Konqueror 3.5, and it validates. UPDATE: 3D Meninas Explained Castellano He tomado el cuadro Las Meninas y he creado este efecto pseudo-3D con CSS. Para la realización he usado tres imágenes: dos se corresponden al fondo (paredes) y otra de sprites (3 sprites: uno con el lienzo, niño y perro, otro con las meninas, y el último con la monja y acompañante). Hay algunos truquitos para que el hover funcione correctamente, podéis verlos en el código fuente. Funciona en las últimas versiones de los navegadores más usados y valida. UPDATE: Explicación del efecto
CSS Transitions - Iceweasel Abstract CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration. Status of this document This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at Publication as a Working Draft does not imply endorsement by the W3C Membership. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. This document is expected to be relatively close to last call. Table of Contents 1. This section is not normative. 2. Transitions of ‘left’ and ‘background-color’ Transitions are a presentational effect. 2.1. 3.
HTML 4.01 Specification Abstract This specification defines the HyperText Markup Language (HTML), the publishing language of the World Wide Web. This specification defines HTML 4.01, which is a subversion of HTML 4. HTML 4 is an SGML application conforming to International Standard ISO 8879 -- Standard Generalized Markup Language [ISO8879]. Status of this document This section describes the status of this document at the time of its publication. This document has been reviewed by W3C Members and other interested parties and has been endorsed by the Director as a W3C Recommendation. This specification is a Superseded Recommendation. A list of current W3C Recommendations and other technical documents can be found at Available languages The English version of this specification is the only normative version. Errata The list of known errors in this specification is available at: Quick Table of Contents Full Table of Contents
A lire - Design a clean sports web layout in magazine-style with Photoshop I spend my days developing websites, improving WeGraphics and playing football. Well, I’ve tried to mix these three activities designing a blog-magazine style layout, perfect for an on-line football/sport community. This kind of websites generally are focused on the content because they should provide a lot of information to the readers and in this case I’ve choosen to bring out all the contents (the articles) giving more relevance to images and headings. The reason behind the choice of using large images is the direct consequence of my love for this sport: browsing a football-related website I need images, pictures, figures, colors, videos… I want to see my favourite champions. From psd to html/css… In this first tutorial I’ll show you how to realize the layout in Photoshop. Below you can take a look to the final result of our efforts. The Final Result A grid-based magazine web layout with a clean design and a nice look to engage the visitors. Step 0 – The canvas Step 1 – The background
How To Create Depth And Nice 3D Ribbons Only Using CSS3 In this last period on PV.M Garage we have described many trends of the modern Web Design and many techniques for creating stunning and impressive web sites. In one of our tutorials we learned how to realize a nice 3D ribbon and how to play with the drop shadow in Photoshop to simulate depth in a web design layout. This is a widespread trends in recent web design: creating a 3D perception in a website and simulating a “world” in three dimensions are two great ways for the designers to play with their skills. Many beautiful web sites have a wonderful, balanced, three-dimensional perception and it’s clear that this kind of layouts use, in a clever way, images (generally in the background property), lines and some CSS techniques to create the illusion of depth (there is a brilliant post, by Henry Jones on Web Design Ledger, about the use of 1px line to simulate the depth). DesignM.ag Blogof.FrancescoMugnai.com Yoast.com From-The-Couch.com Wait, wait, wait. Sure? We prepare the HTML document.