Internet Explorer CSS3 PIE: CSS3 decorations for IE CSS Frame Generator v. 1.00 What is it? Ok, here's the deal. Put your XHTML code below, we will grab it and send over to one of our scientists. He will do his voodoo and in return you will get a corresponding CSS frame. And yup, it's free. more More information This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure - each selector and all of its properties and values in one line. display position z-index visibility overflow float clear list-style width height margin padding border background color font line-height text-* letter-spacing word-spacing word-wrap white-space vertical-align outline cursor
Les possibilités offertes par CSS3 La technique en CSS3 Si votre design est bien fait, l'utilisateur ne devrait pas avoir à scroller (c'est-à-dire à faire défiler) horizontalement votre page. En CSS, on va donc se débrouiller pour que notre site ne dépasse pas une largeur minimale que nous avons fixée. Les media queries peuvent être utilisées de deux façons différentes : une fois directement dans le CSS, et l'autre depuis la balise <link> de votre page HTML qui inclut votre feuille de style. Pour la méthode en HTML, voici comment procéder : L'avantage de cette première méthode est qu'un visiteur avec un appareil ne correspondant pas à la requête ne téléchargera pas ce dont il n'a pas besoin. En CSS, il faut englober tout le code que vous destinez aux mobiles dans un bloc, comme ceci : @media votre requete ici { /* Le code pour les mobiles ici */ Valeurs standards Pour adapter votre design, il va falloir prendre en compte la taille réduite de l'écran de votre visiteur. Je vous propose le tableau suivant : max-width: 100%; Quoi ?
Grid Designer 2 If you're familiar with the grid, a bit of design and basic typography, using this script should be pretty easy - most of the functions are pretty self-explanatory. If you're unfamiliar with grids in general, you could start by reading an excellent series of articles by web designer Mark Boulton. For those who want a real understanding of the theory of grids in relation to design and typography, I strongly recommend this book. On the Columns tab, you can start your design in two ways: Fill in the number of columns, total width, gutters and margin widths, all specified in pixels - then press the design button. The grid preview on the Columns tab will display the widths of each area, in pixels. Use the Typography tab to adjust and calculate basic typographic settings for your design. Finally, on the Export tab, you can generate copy-and-paste ready CSS, and a sample XHTML template.
css Zen Garden 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
CSS Layout Generator About the CSS Layout Generator The CSS Layout Generator was first released by Tony Aslett in October 2003, since then over 871,000 layouts have been generated. Updated in November 2010, HTML5 doctype can now be selected and a simple HTML5 template with appropriate tags will be created. Other HTML and XHTML doctypes are still available. The generator helps you create the structure of your website template using valid HTML and CSS. You can create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. The generator requires a modern DOM capable browser with JavaScript enabled. Instructions To create your layout select the structural elements your site requires (header, footer, columns). Info popups are available where you see InfoMore info example :) icon, just hover over it for more information. Join the CSS Forum to suggest changes or ask for help where needed. Author: Tony Aslett
Написание эффективного кода В процессе написания CSS следует придерживаться некоторых принципов, которые позволяют сократить код CSS, сделать его более удобным, наглядным и читабельным. Читабельность в данном случае означает, что разработчик спустя какое-то время может легко понять и модифицировать стиль или что в коде разберётся даже сторонний человек. Размещайте каскадные таблицы стилей в отдельном файле Размещение стилей в отдельном файле позволяет ускорить загрузку веб-страниц за счёт уменьшения их кода, а также кэширования файла с описанием стиля. Удаляйте неиспользуемые селекторы Большое количество селекторов создаёт путаницу в вопросе о том, кто из них за что отвечает, да и просто увеличивает объем документа. Применяйте группирование Достоинство и удобство группирования состоит в описании одинаковых свойств в одном месте. Используйте универсальные свойства Форматирование кода Существует множество разных подходов как же писать CSS-код. Ссылка на сайт Компактно (Compact) CSSMin
Un Infinite slideshow en quelques lignes de jQuery - Tutoriels Un Slideshow sur une page d’accueil, c’est joli, c’est à la mode, mais c’est souvent lourd à intégrer. Il vous faudra des compétences certaines en jQuery, ou utiliser des plugins déjà prêts. Aujourd’hui je vous propose un tutoriel pour créer un infinite slideshow en quelques lignes de code. Je vous ai promis, via Twitter, un « dossier-tutoriel » sur la création d’un slideshow de A à Z avec quelques options sympa. L’effet infinite Cet effet donne l’impression que votre slideshow ne se termine jamais, il tourne en boucle indéfiniment sans jamais revenir en arrière. À chaque fois qu’une image vient d’être vue et laisse place à l’image suivante, elle est placée en fin de liste afin de créer une boucle sans fin. La structure de base Une division contenant une liste d’images suffira pour notre tutoriel. J’utilise ici une liste non ordonnée, mais un groupe de figure et figcaption peut aussi faire l’affaire. Les styles de bases Un petit coup de jQuery Un grand coup d’explications $(function(){ […] });