Raphaël—JavaScript Library CSS - Feuille de style - Cours CSS - Cascading Style Sheets MetaFilter | Community Weblog 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]
CSS Débutant : cours et tutoriels sur les feuilles de style CSS 1,2 et 3 Lets build a deck of cards in JavaScript - Kequc Lets build a deck of cards in JavaScript typescript I'm diving right in and introducing the entire module to you all at once, including configuration options. That is why you see an optional limit attribute on cards. The purpose of this will become clear as we advance. We instantiate a cards array, which acts as storage of undrawn cards from the deck. Then we populate that options variable with defaults. The simple way to do this is using the variable = variable || xzy; method. You see we have an option to multiply the deck which means during construction of the cards, do it multiple times. The shuffle method is essentially for construction of the deck. As you can see we now check the cards for their limit attribute. inlay (card: Card): boolean { if (card && card.suit && card.rank) { this.cards.push(card); return true; } else return false; } Performs a rudimentary verification that the card has both a suit and rank before inserting it into the deck. And finally our draw method. javascript
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.
CSS3 : Transformations 2D CSS3 apporte les transformations en 2 dimensions à travers la propriété transform et une liste de fonctions prédéfinies. Voyons ensemble la prise en charge actuelle de cette propriété et des fonctions qui l'accompagnent. La propriété CSS transform permet de manipuler un élément HTML sur les axes X et Y (horizontal et vertical) grâce à des fonctions diverses de transformation graphique. Syntaxe La syntaxe est simple d'emploi. transform: function(value); Il est souvent nécessaire d'utiliser les préfixes vendeurs (-webkit-, -moz-, etc.) devant la propriété transform pour utiliser les transformations 2D sur les versions actuelles et passées de navigateurs. Il est également possible d'effectuer des transformations combinées en espaçant les fonctions d'un simple caractère blanc. transform : function1(value1) function2(value2) function3(value3); La propriété transform-origin La valeur initiale de cette propriété est le centre de l'élément, ce qui équivaut à la notation : transform-origin: 50% 50%;
Coding A Card Deck In JavaScript - ThatSoftwareDude.com In this post, I will be going over how to build a deck of cards in JavaScript. The deck can be used for future projects or future games, such as this JavaScript Blackjack game which I made a while back. This is a super quick implementation, and can typically be done with less than 100 lines of code. If you are brand new to JavaScript, then I recommend the following book Web Design with HTML, CSS, JavaScript and jQuery, which can get you up and running pretty quickly with JavaScript. Overview A traditional deck of playing cards is composed of 4 sets of 13 sequential numbered cards. The deck in this tutorial will consist of an Array of card objects which we will create dynamically. Variable declarations Declare the following variables in order to get started. var suits = ["spades", "diamonds", "clubs", "hearts"];var values = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"]; The variable suits is an array of card suites that we will use as a lookup table. Create The Deck