Raphaël—JavaScript Library Générateur CSS3 Avec les dernières avancées CSS3, de nombreux effets qui demandaient autrefois le maniement de Photoshop sont désormais directement codable en CSS. Il est cependant toujours un peu difficile de visualiser des effets graphiques (ombrages, dégradés…) en regardant une ligne de code. Cette liste de générateurs CSS vous permettra d’obtenir facilement les effets de style désirés via une interface graphique, et d’extraire le code CSS correspondant. Cette liste de générateurs CSS3 a été publiée par Chris Spooner sur le site Line25 . Les générateurs CSS3 tout-en-un Les générateurs CSS de grille et de squelette Les générateurs CSS de dégradé (gradient) {*style:<b> </b>*} Les générateurs CSS de bouton Les éditeurs CSS de texte Les générateurs CSS de « sprite » Le meilleur du reste
Les transformations 3D en CSS3 L’une des innovations majeures apportées par le CSS3 est la capacité à “transformer” des éléments. Ces transformations, qui peuvent être effectuées en 2D (sur la plan de la page) ou en 3D, permettent d’enrichir l’expérience utilisateur avec de tout nouveaux types d’effets visuels. Les transformations combinées avec les transitions permettent en effet d’animer des éléments HTML en effectuant des rotations, des transitions ou des changements d’échelle. Nous allons aujourd’hui appliquer ces transformations dans l’espace grâce aux transformations 3D du CSS3 ! Ce tutoriel a été rédigé par Vincent De Oliveira, enseignant et développeur à l’ENSG. Introduction Vous avez déjà entendu parler des transformations en CSS, qu’elles soient 2D ou 3D? Quelles différences entre la 2D et la 3D sur le web? Pour l’affichage d’un site web à l’écran, nous travaillons en 2D: axe X : positif vers la droite de l’écran,axe Y : positif vers le bas de l’écran. Quels navigateurs sont compatibles? Les rotations Matrice
Accordion with CSS3 | Codrops - Using hidden inputs and labels, we will create a CSS-only accordion that will animate the content areas on opening and closing. View demo Download source Today we’ll experiment some more with the adjacent and general sibling combinator and the :checked pseudo-class. Using hidden inputs and labels, we will create an accordion that will animate the content areas on opening and closing. There are many variations of CSS-only accordions around, most of which are implemented using the :target pseudo-class. So, let start! Please note: the result of this tutorial will only work as intended in browsers that support the CSS3 properties in use. The Markup We will be going through an example that uses checkboxes where one content section is open by default (the input needs to be ‘checked’). Note that we need to give each input an ID which we will then use in the for attribute of the label. Each article will have a class that will help us determine to which height we it to expand to. The CSS Demos
Apprendre le HTML5 – Tutoriel Complet Tutoriel complet pour apprendre le HTML5 – Quelque soit votre niveau, ce cours est fait pour vous. Que vous débutiez dans la création de site internet ou que vous maitrisez déjà le xHTML et / ou le HTML 4.01, découvrez toute la puissance du HTML5. Chaque chapitre est rédigé de façon concise et compréhensible par tous. Ils sont divisés en thèmes consultables indépendamment suivant votre niveau et vos connaissances. Chaque point détaillé est inclus dans un exemple concret et certains sont accompagné de démo consultable en ligne. L’ensemble du cours – en constante évolution - est accessibles à tous quelque soit votre niveau : Un problème, une suggestion ou une remarque : Poser votre question ou venez en discuter sur notre forum. Maintenant que vous savez à quoi ressemble le HTML5 et ce qu’on peut faire avec, passons aux choses sérieuses. Voici les bases des langages de développement web HTML et CSS. Le HTML et le CSS sont deux langages complémentaires. [cadrePTQ]
Using CSS to Fix Anything: 20+ Common Bugs and Fixes Jun 15 2008 Without a doubt, a logical and structured layout is the best way to go. Not only because your layout varies between browsers, but also because CSS has a lot of ways to position every element you have. This is the first part in this series as there are SO MANY good tricks out there and if you see an easier or better methods, then post a comment below or email me. You might be interested to check our other related post for some inspiration: IE Bug Fixes 1- Bug Fix: IE Double Margin Float Bug- It’s an Internet Explorer-exclusive bug wherein an element that is floated – and given a margin in the same direction as the float – ends up with twice the specified margin size. To something like this: 2-Overcoming the Box Model Hack- If you want to specify a width to any div, do NOT specify padding or margins. Do something like this: 3-Min-height attribute ignored in IE- “min-height” attribute works well in Firefox but IE ignores it. Centering a Block Element Column Issues CSS Positioning
Domptez vos puces, dressez des listes Par Mark Newhouse Dès juillet 1999, je pontifiais à propos des vertus des feuilles de style dans diverses listes de discussion. Certaines choses ne changent pas. Mais ce qui a changé, c'est la façon dont je réfléchis à la mise en forme CSS et à la structure (X)HTML sous-jacente à laquelle elle est appliquée. Par exemple, la plupart des sites que je visite ont un menu, placé dans une zone de navigation. Ceux-ci sont généralement constitués d'une suite de liens, le plus souvent placés dans des div ou des paragraphes séparés. Bien sûr, la raison pour laquelle nous ne les implémentons pas de cette manière est que nous ne voulons pas d'une puce devant chacun des liens de notre menu. Aujourd'hui, je vais montrer comment utiliser les CSS pour reprendre le contrôle de listes peu maniables au premier abord. Préparer le terrain Dans le cadre de cet article, j'utilise des listes non ordonnées. Item 1Item 2Item 3Item 4Item 5 - un peu plus long pour avoir plusieurs lignes Le positionnement Les puces
FancyBox 1.3.4 | Demonstration Une démonstation de Fancybox. C'est la traduction française de la documentation issue du site officiel Des animations différentes ('fade', 'elastic' and 'none') La position des titres ('outside', 'inside' and 'over') Les galeries d'images (utilisez la molette de la souris) Quelques exemples Le texte est d'abord écrit dans le code mais non-affiché (display:none). Inline un document dans le code html Ajax Un document interne (texte.txt) Iframe Le site Wikipedia dans une fenêtre (affichage à 95%) Swf Une animation vidéo Autres exemples (bidouillages personnels) 1. À déclarer dans l'en-tête : Puis à afficher dans la page html : <a class="site" href="l_url_du_site? On peut définir la taille de la fenêtre en pixel ou en pourcentage, la transition, la couleur et l'opacité de la trame (overlay) et la vitesse d'apparition et de disparition de la fenêtre fancybox. 2. Il faut d'abord définir l'objet sans l'afficher : Puis, le lancer : Un autre exemple : Le parti d'en rire (Pierre Dac et Francis blanche). 3.
Les bordures en CSS3 Nous verrons ici comment créer des bordures aux coins arrondis (border-radius), des bordures à partir d'image (border-image), des bordures aux couleurs dégradées (border-color) et enfin, des ombres portées aux boîtes (box-shadow). Et un petit bonus que je vous laisse découvrir par vous-même ! II-A. Jusqu'à présent pour réaliser des boîtes aux coins arrondis, nous devions utiliser une ou plusieurs images à appliquer en arrière-plan dans des <div> imbriqués ou des tableaux à neuf cellules. Avec le CSS3, il nous est possible de faire un angle arrondi via la propriété border-radius. Voici sa syntaxe : <valeur>{1,4} / <valeur>{1,4} Sa compatibilité : IE9+, Firefox 4+, Chrome, Safari 5+ et Opera 10.50+. <div style="background-color: red; width: 150px; height: 150px; color: white;" class="corner">Ceci n'est pas un carton rouge ! Vous voyez, rien de plus simple. Nous définissons une valeur pour le rayon du cercle décrivant la forme de l'arrondi. Heu...m'sieur l'arbitre ! II-B. II-C. III-A. III-B.
Top 20 Essential Firefox Add-ons for Web Designers Mozilla Firefox is a very popular browser, especially among web designers and developers. These days, with such a crowded field, staying at the top of the browser heap takes a lot of work. One of the factors that make Firefox so well-liked is the huge library of great extensions that enhance your browsing experience. Among the massive list of add-ons, many are vital to web designers and developers. If used, it will make your workflow quicker and more productive. Let’s look at our top 20 essential Firefox extensions geared for people who build websites. 1. The Web Developer add-on extends Mozilla Firefox by adding a toolbar with various options for working with web pages. 2. SeoQuake will help you in optimizing your web pages for search engines. 3. Window Resizer comes in handy for testing different screen sizes and monitor resolutions. 4. FireShot is a Firefox add-on that creates screenshots of your web page. 5. Firebug is considered to be the ultimate developer’s tool for Firefox. 6.
CSS3 – Effet parallaxe (sans JavaScript) Retour des tutoriels CSS avec quelque chose d’un peu original pour cet article : un effet parallaxe uniquement en CSS3. C’est à la suite de l’article de Simon Kern sur Alsacréations que m’est venue l’envie de tenter d’utiliser CSS pour reproduire cet effet initialement conçu avec JavaScript. L’article zoom sur l’effet parallaxe de Simon est bien conçu, je vous invite à le lire si vous préférez l’utilisation de jQuery, ou si vous souhaitez découvrir une alternative ou un complément à ce tutoriel. J’en profite pour remercier Simon qui m’a autorisé à reprendre son design ainsi que la base du code qu’il a conçu pour l’article sur Alsacréations. Démonstration Place à l’explication ! Concept Pour réaliser cet effet il nous faut plusieurs éléments qui vont nous permettre de simuler différents plans. Lorsque un tel effet est mis en place sur un site web, il l’est souvent pour offrir une transition originale entre deux vues, un peut comme lors d’un diaporama pour passer d’une slide à l’autre. <!
CSS Zen Garden: The Beauty of CSS Design Box-shadow, one of CSS3′s best new features Home / CSS3 Previews / Box-shadow, one of CSS3’s best new features The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset. Browser support is growing of late with Mozilla (Firefox), Webkit (Safari/Chrome/Konqueror), Opera and the IE9 Platform Preview all offering a decent implementation of the spec, although Mozilla and Webkit still require their respective -moz- and -webkit- prefixes (note Mozilla Firefox 4.0+ no longer requires the -moz- prefix). Here’s a basic example: Firefox, Safari/Chrome, Opera and IE9 users should see a grey fading shadow under this box. In theory, the code for this is straightforward: But for the moment, as with many other ‘experimental’ CSS3 properties, you’ll need to use the following prefixes to support Mozilla and Webkit: How it Works The Syntax: box-shadow: none | [ , ]* = inset? Examples: Creating a basic drop shadow Layering multiple shadows Example: