background preloader

CSS Table Generator

CSS Table Generator

CSS Sprite Generator | Project Fondue spin.js Comprendre la cascade en CSS | Tutoriaux Cette partie du site n'est plus maintenue, elle reste en ligne pour la postérité. Date de mise en ligne : 13 décembre 2004 Cet article est l'adaptation en langue française (pas une traduction exacte) de l'article Understanding The Cascade Article original par Holly 'n John ©positioniseverything Cet article va décrire ce que signifie exactement "cascade", et pourquoi c'est si important lorsqu'on utilise des feuilles de style en cascade. Rappel de la syntaxe CSS : Que signifie exactement une "feuille de style"? Une "feuille de style" est un jeu de règles de styles. CSS2 est un langage de feuille de style qui permet aux auteurs et aux lecteurs de lier du style (ex. les polices de caractères, l'espacement, les couleurs etc.) aux documents structurés (ex. documents HTML ou XHTML). La source d'un document (X)HTML est un bloc unique de code (tout du moins lorsqu'il atteint l'internaute), et n'importe quel nombre de feuilles de style peuvent lui être appliqué. D'où viennent les feuilles de style ? !

HTML & CSS Table Border Style Wizard Compatibility Notes If you are using Internet Explorer 6, you should be able to use this wizard with only minor limitations. This page does not work with Opera 8 or IE 5 on Mac. Internet Explorer 6 does not support the border-spacing CSS2 table property. Table Border Style Wizard Welcome to the totally revamped HTML and CSS border style wizard! The style sheet code generated by this wizard shows the easy way to apply a style to a table. The above example doesn't show it, but you can also efficiently alternate the row colors in an HTML table by using inheritance. The -moz-border-radius style tag will be rendered in browsers based on the Gecko Runtime Engine. HTML Toggle Buttons You might also have noticed the interesting toggle buttons that control the table style. The toggle buttons above behave like real radio buttons, like the ones on old-fashioned car radios. This is a lot of work to do something fairly simple. Get Firefox Now! Links More CSS Wizards Recommended Books

Text Rotation with CSS Once again, after reading somebody else's article, I felt inspired to put together an alternative example. In this case: Text Rotation. Within the article I linked to, the example uses an image sprite and a sprinkle of CSS to get things positioned right. Well, maybe not so much a sprinkle. It's like the top fell off the pepper shaker and you've suddenly got a large pile of pepper on your food. It makes me want to sneeze. Thankfully, many of the popular browsers of today support the ability to rotate HTML elements. <div class="example-date"><span class="day">31</span><span class="month">July</span><span class="year">2009</span></div> Nice and clean without too many extras. The Magical CSS For Webkit and Firefox (as of 3.5), you can take advantage of the proposed transform property to handle the rotation. -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); In order to perform a transformation, the element has to be set to display:block. In action

50 fantastic tools for responsive web design | CSS3 As introduced/coined by Ethan Marcotte in both his article "Responsive Web Design" as well as his best-selling book, one needs three elements to make a site responsive: A flexible/fluid grid Responsive images Media queries There are plenty of other great articles that cover motives, concepts, and techniques regarding responsive web design, so we'll keep the focus of this article on some top tools that will help you become responsibly responsive. Tools for starting out Before you start with building your site, it's best to sketch out how the elements on the page will adapt to fit the different browser sizes of the various devices that they will be viewed upon, and to avoid the disconnect that often comes from thinking primarily about the desktop design and the rest of the responsive iterations as an afterthought (see especially Stephanie (Sullivan) Rewis' comment). 01. 02. 03. 04. 05. Tools for a flexible/fluid grid 06. 07. 08. 09. 10. 11. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. slabText 23.

Best CSS Button Generator: Create CSS-only Buttons liege.mine.nu: Website analytical review | SiteRatios.Com Athena : apprendre autrement.. Rated 1.6 out of 5 stars, based on 7 metrics Updated on Feb 24,2013 at 2:38 PM [1years ago] LIEGE.MINE.NU is rated 2.21 out of 7 SEO metrics which we consider as an Average rating. The site seems to be popular in Japan with a rank of #3,044 and brings in 31% of the site's traffic which is 26.00% of the total pageviews to the site. When analyzed on Feb 24, 2013 the site was hosted in BELGIUM with the IP address 82.212.151.6. While reviewing the site, we have considered the following metrics for positive ratings: Excellent Alexa Global Rank rating (#14,480) Excellent SEOMoz Subdomain Rank (3.14/10) Very Good Google PageSpeed Score (70/100) Very Good Alexa Speed Score (61/100) Very Good number of daily visitors (approx. #88,074) The site has MyWot Reputation ratings The site has MyWot Confidence ratings The site was negatively rated due to the following metrics:

Les Media Queries CSS3 La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc. Approche historique Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style. <! screen Écrans handheld print Impression

Convertir du Flash (SWF) en HTML5 avec Swiffy Qu'on l'aime ou non, la technologie Flash existe encore et aucune date d'enterrement n'est prévue par Adobe. Utilisé à bon escient, il est toujours possible d'en avoir plein les mirettes avec des animations sexy. Pourtant, une difficulté voit le jour : plusieurs plate-formes ne supportent pas l'installation du plug-in Flash. Alors, pourrait-on rendre ces animations HTML5 friendly ? C'est ce que nous propose Google avec Swiffy ! Cet outil est destiné à convertir le contenu Flash (SWF) en code HTML5, ce qui permet de le faire fonctionner sur des supports qui, à la base, ne supportent pas Flash comme les mobiles et tablettes (Android, iOS...). Test en situation réelle Faisons un essai avec un fichier relativement classique. L'animation boucle Au survol, l'animation réagit Au clic également Il y a différents effets (opacité, flou de mouvement..) Une animation Flash des plus simples, vous en conviendrez Choix de la méthode de conversion L'extension pour le logiciel Flash Résultat du test Demo

Swiffy As part of our transition of display ads to HTML5. the Swiffy Flash conversion tool is no longer available. We will continue to serve the Swiffy runtimes, so any files you have already converted will continue to play. Today more consumers are using the web in HTML5 compatible environments than Flash-compatible environments. In order to reach as large an audience as possible, we encourage everyone to transition to HTML5 authoring. Developers who currently create Flash SWF files have several ways to switch to HTML5 including Adobe Animate and Google Web Designer. If you need to play an existing Flash SWF file in your browser alone, you might be able to use Mozilla’s Shumway.

Javascript - L'objet RegExp Avril 2014 Les particularités de l'objet RegExp L'objet RegExp est un objet permettant de manipuler des expressions régulières, c'est-à-dire des modèles créés à l'aide de caractères ASCII permettant de manipuler des chaînes de caractères, afin de trouver des portions de la chaîne correspondant au modèle. La création d'un objet RegExp se crée à l'aide d'une simple expression comme suit : Expression = /motif/drapeau Il est également possible de créer un tel objet de manière plus classique à l'aide de son constructeur : Expression = new RegExp("motif","drapeau") Le motif représente l'expression régulière en elle-même tandis que le drapeau (optionnel) permet de préciser le comportement de l'expression régulière : Construire une expression régulière Les expressions régulières permettent de rechercher des occurrences (c'est-à-dire une suite de caractères correspondant à ce que l'on recherche) grâce à une série de caractères spéciaux. Début et fin de chaîne Nombre d'occurences Les symboles *, + et ?

Related: