Style Master CSS Editor for Windows and Mac OS X Cool Tools and Toys for Web Developers John, the lead developer (ok, pretty much the only developer) of Style Master is an avowed hacker. He loves exploring and experimenting with the latest features in browsers. Here's a collection of tools for web developers he's put together to help you analyse and debug your sites (and other people's sites as well), play with CSS3 features (bleeding edge browsers recommended) and more. XRAY works in Safari, Firefox and Internet Explorer. XRAY uses lots of cool CSS3 features like border-radius, opacity, box and text shadow, as well as the HTML5 canvas. MRI helps you create the best possible selectors for your CSS. MRI also uses lots of cool CSS3 features like border-radius, opacity, box and text shadow, as well as the HTML5 canvas. CSS3 Sandbox Gradients Explore CSS gradients (both linear and radial) (an experimental feature in Safari 4, and a proposed addition to CSS3). Shadows CSS now lets you create drop shadows on text, and on the box of an element.
Feature, Browser, and Form Factor Detection: It's Good for the Environment Overview This article is about tuning your app to the environment it's running in, focusing on the specific challenge of detection. In other words, surveying the environment you're running in. Feature detection, to decide if a particular feature is supported. Background HTML5 is everywhere these days. But how about the developer experience? If the web's promise of "write once, run many" sounds too good to be true, that's because it is too good to be true. Fortunately, the web has always worked this way. Feature Detection Feature detection is the most popular technique among the three we'll examine in this article. detectCanvas() ? Simple enough. In the case of canvas detection, one way is to create a canvas element and see if it supports a known property of canvas, the getContext method: You might wonder why we need the second line. Our canvas detection is an example of a more general pattern for feature detection: "Create a DOM element and see if it behaves like we expect". Summary
Paris Web 2010 ? Plus belle la vie avec HTML5 et CSS3 Webdesigner de profession (chez Alsacréations), je cumule deux passions créatives : la conception Web et la Photographie. Auteur des ouvrages web de référence « CSS2 - Pratique du design web » publié chez Eyrolles (3è édition en janvier 2009), du « Memento CSS » et du « Memento XHTML », chez le même éditeur. Membre du collectif Openweb, référence francophone en matière de standards web. Formateur expert en langages web (X)HTML et CSS auprès de groupes nationaux et internationaux. Créateur et administrateur du site Alsacreations.com, communauté d'apprentissage web dont le trafic quotidien dépassait les 20000 visites uniques en 2010. Passionné de photographie, et auteur d'un livre technique d'apprentissage : « Le B. Administrateur de plusieurs sites personnels ou associatifs tels que Goetter.fr, Polychromies.com, IE7nomore.com ou SLConstantia.com.
Récupérer un formulaire en Javascript, Les Trucsweb - Québec Récupérer un formulaire en Javascript Les paramètres GET de la requête HTTP par Django (Oznog) Blais, Trucsweb (24 Avril 2001) Les données d’un formulaire peuvent être envoyées avec la méthode « GET » en d’autres mots, directement dans la requête HTTP. Bref rappel du fonctionnement d'un formulaireDans la déclaration d'un formulaire, il faut indiquer l'action (la page ou le script qui récupère l'information) et la méthode (comment l'information est envoyée). On note ici l'utilisation de la méthode " GET " obligatoire pour le bon fonctionnement du script. Les champs de saisies doivent être identifiés par un nom pour y référer lors de la récupération. Et ne pas oublier le bouton pour envoyer le formulaire. Donc dans une page " saisie.htm " vous aurez quelque chose comme ça : Page : Saisie.htm Une fois que le visiteur aura cliqué sur le bouton " envoyé " les données seront envoyées à la page " recupere.htm " nReq = location.search - nReq égal donc " ? nReq = nReq.split("&"); Page : page.htm
Une Feuille de style et des ? hacks CSS ? pour cibler IE6, IE7 ou IE8 25 Excellent Examples of Forms in Web Design A form can be a very important part of a website. From really simple and direct ones, to fancy, colorful and creative, there is a form style for each site. When thinking about the interface design of your site, this is certainly an element you should focus on. From Login/SignUp forms, to contact forms and other types of forms, we need to keep in mind that the point of those forms is to get the user’s attention and make them want to fill in the info. So here are some excellent examples of forms in web design. Awesome Foundation Six Wanken Visual Republic Andrew McClintock Chris Woods bio-bak Vincent Mazza Ed Peixoto Christian Sparrow olga designs Krista Ganelon Forever Heavy Cornerd Justdot sikbox Justalab Buffalo Sprocket House Gardener & Marks Pentagon Gams All Creative Creditable Gowalla Source: Pattern TapMinimal SitesThe Best Designs About the Author Gisele Muller loves communication, technology, web, design, movies, gastronomy and creativity. Related Posts 480 shares Read More 1333 shares
Nouveautés CSS 3 : c’est quoi les Media Queries ? - Kiwano Les medias queries sont une nouveauté CSS 3 qui permet de définir des styles en fonction du média sur lequel est affiché la page web. Avec les medias queries on peut limiter l’action d’un style en fonction d’informations précises comme par exemple les propriétés width, height, et color du navigateur. Dans un article précédent, nous vous avions parlé de la beta 4 de Firefox 3.5 et de son lot d’innovations dans un article intitulé « Nouveauté Mozilla Firefox 3.5 : raccourci nouvel onglet« . Parmi ces améliorations nous revenons ici comme promis sur le support des Media Queries une des nouveautés CSS 3. Exemple @media min-width Un exemple d’application très utile des media queries serait de pouvoir définir des styles en fonction de la taille du navigateur. Avec les media queries, il est très facile de fixer un style pour les navigateurs ayant une largeur minimum. Les fonctionnalités Media Queries Notez enfin que la beta de Safari 4 supporte également ces Media Queries !
A custom image for a reset button? Just as HTML authors often like to replace a submit button by an image in a form, they may ask how to do the same to a reset button, or at least make the button somehow visually different from the default. This is a more complicated question, but there are stylesheet and JavaScript techniques by which it can be done in rather many cases, even in a safe manner which "degrades gracefully" to a normal reset button when the conditions are not met. This document discusses, in addition to those techniques, the question whether and when this is a useful thing to do, as well as the necessity and placement of a reset button. The conclusions recommend making the reset button the first field in a form and using style sheet in a simple way to suggest modified visual appearance without trying to use a custom image; a relatively complex method could be used which often causes such an image to be used, without sacrificing basic functionality when that does not happen. The normal reset button
CSS Vertical Text | ScottGale.com Many people have written about the potential for vertical text in CSS so I wanted to try it out for myself. By using the technique described below I was able to achieve this effect: *Disclaimer: This doesn’t work in old Opera versions, but does work in Opera 10.5. This also works in IE6+, FF, and Webkit based browsers, so that is pretty encompassing. Here is the basic markup: <p>CSS Vertical Text</p> I wanted to try to do my best to exclude IE browser checks and conditional checks. Also, if I can stay away from IE filters I like too, but it’s worth mentioning that if you have an specific rotation, you have to use the IE filter: filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); Where 0, 1, 2, 3 correlate to 0, 90, 180, and 270 respectively. So I tried to keep this one simple, but lining everything up in different browsers can be a pain because of the way each browser interprets the spacing. Information for this post was pulled from the following places:
Snook.ca: Tips, Tricks and Bookmarks on Web Development. CSS Sprite Generator | Project Fondue Shadowbox.js ScrollTo jQuery.LocalScroll Notice I've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article. What does this plugin do ? This plugin will animate a regular anchor navigation [1] [2]. Each time a link is clicked, the element you decide(can be the whole screen), will gradually scroll to the targeted element, instead of "jumping" as it'd normally do.jQuery.ScrollTo is used for the animation. How to implement it ? That's easy! <a href="#the_id">your_text</a> Let's call these "local links". So if (for example) you have a div with id "navigation" and the local links are inside. $('#navigation').localScroll(); If your links are all spread, you can use: $.localScroll(); That gets all the local links in the page. Settings targetWhat to scroll (selector, DOMElement, or jQuery Object). How do I use the settings ? Instead of the window, an element with id 'content' will be scrolled. Troubleshooting Strange things happen Links