background preloader

» 20 tutoriaux CSS3 pour vous préparer au futur du web

» 20 tutoriaux CSS3 pour vous préparer au futur du web
Le web design évolue constamment, au grès des modes et des technologies. Les graphistes et designers doivent non seulement garder un oeil sur les nouvelles tendances mais aussi sur les dernières technologies comme jQuery, HTML5 et CSS3, qui permettent d’exprimer une plus grande créativité tout enrichissant l’expérience de l’utilisateur. Ces 20 tutoriaux CSS3 vous permettront d’apprendre à coder de superbes éléments web interactifs. Ajoutez ces sites à vos favoris, et prenez votre temps… N’hésitez pas à partagez de billet avec vos collègues / amis ! Ces 20 tutoriaux CSS3 ont été référencés sur web design ledger par Tomas Laurinavicius. Construisez rapidement une page annonce (teaser) en CSS3 Avec ce tutoriel, vous apprendrez à créer une page annonce en utilisant uniquement CSS. Créer un menu déroulant avec CSS3 Avec ce tutoriel relativement simple, vous apprendrez à coder un menu déroulant en CSS3 pour un résultat simple, propre et professionnel. Accordéon avec CSS3 Tableaux de prix en CSS3

CSS - Feuille de style - Cours CSS - Cascading Style Sheets MetaFilter | Community Weblog 20 ressources CSS pour vos sites web Pour booster votre créativité et votre productivité, je vous propose une petite sélection de nouvelles ressources CSS à utiliser dans vos futurs projets. Effets de survols, animations, effets d’images, bref de quoi avoir du style ! Ces dernières semaines, en arpentant le web à la recherche d’inspiration, j’ai sélectionné quelques snippets CSS qui vont faire plaisir aux développeurs front-end et aux webdesigners. Plutôt que de présenter des expériences inédites (à venir dans un prochain article), je vais vraiment mettre l’accent sur des snippets qui vous permettront de gagner du temps et d’apprendre les dernières techniques CSS. Même si c’est plutôt rare pour un snippet gratuit, pensez toujours à vérifier s’il est libre d’utilisation avant de l’implémenter dans votre projet. Effets de survol Flat UI Effet lumineux avec CSS et SVG Un bien gros menu déroulant Une horloge murale en pur CSS Formulaire de commande en CSS UI d’une fiche Twitter Une simple barre de progression Modal box en CSS Bonus :

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

HTML5 : 20 Conseils et astuces pour coder proprement ses pages Voici une liste de 20 astuces pour coder vos pages proprement en HTML5. Tous ces conseils, mis bout à bout, vous serviront à améliorer votre référencement, respecter certaines normes W3C ou encore optimiser la compatibilité. Efforcez-vous de suivre le plus rigoureusement ces règles en fonction de votre projet. 1. Le Doctype à subit un rajeunissement avec l’arrivé du HTML5. 2. Vous avez déjà du l’entendre, mais pensez toujours à bien fermer vos balises. 3. Il existe de nombreuses raisons pour qu’une page soit accessible à différentes adresses à la fois. 4. Bien qu’il existe d’autres solutions plus complète, vous pouvez néanmoins régler certain aspect du cache du navigateurs de vos visiteurs. Suivant votre cas, il peut être préférable de définir le cache. En revanche si, par exemple, votre site à accès régulièrement à des bases de données qui le maintiennent à jour le cache ne dois pas fonctionner. 5. 6. Le respect de la sémantique est primordiale pour un bon référencement naturel. 7. 8.

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

Alsacréations : Actualités et tutoriels HTML, HTML5, CSS, CSS3, standards du web CSS3 Shadows CSS3 nous apporte des brides du côté obscur de la force en proposant de gérer des ombres diverses et variées directement depuis votre feuille de styles : blocs et textes sont concernés avec également la combinaison de plusieurs ombrages pour obtenir des effets avancés. Les ombres portées prennent aujourd’hui une place importante dans le web design et permettent la mise en exergue d’éléments importants, ou l’ajout d’une touche de profondeur dans vos graphismes. Il est possible de dire adieu aux images superflues uniquement destinées à la réalisation d’ombres portées ; adieu à la soupe de <div>, <span>, et autres structures en tableau pour réaliser des effets graphiques riches. Deux types d’ombres existent en CSS : les box-shadow, les ombres ajoutées aux éléments de type bloc, les text-shadow, les ombres ajoutées au contenu textuel. Il est évident, comme tout effet graphique, que l’utilisation des ombres doit être faite avec parcimonie et ne pas gêner l'utilisateur. Syntaxe de box-shadow

CSS3Pie, styles CSS3 pour Internet Explorer CSS3 pointe son nez apportant son lot de propriétés de mise en forme très pratiques. Certaines fonctionnalités de CSS3 ont aujourd’hui un bon support dans les versions récentes des navigateurs (Firefox, Chrome, Safari, Opera… mais aussi Internet Explorer 9 et le futur IE10), mais bien entendu pas dans les anciennes versions d’Internet Explorer qui restent très présentes sur le marché. Comment gérer cette situation? Le script CSS3 PIE, qui permet d’imiter le support de certaines propriétés CSS3 dans les anciennes versions d’Internet Explorer, est un début de solution. Sommaire Dans l'astuce « Utiliser CSS3 aujourd'hui, outils et ressources » sont proposés un certain nombre d'outils permettant de pallier le manque de compatibilité des anciennes versions d'Internet Explorer avec les standards CSS3. Qu'est-ce que CSS3 Pie ? CSS3 Pie a pour but de rendre quelques styles CSS3 compatibles avec les versions 6, 7, 8 et 9 d'Internet Explorer. un simple fichier *.htc une propriété css behavior.

Créer un volet coulissant en CSS3 avec :target et transition Alors que CSS3 continue son chemin dans les validations, les réécritures et la prise en charge par les navigateurs, il y a des choses qui commencent à être plutôt bien implémentées par la plupart de ces derniers. La pseudo classe :target et la propriété transition - que nous avons déjà mis à l'épreuve dans ce long tutoriel sur la création d'un slideshow en CSS3 - vont être nos armes pour ce tutoriel. Qu'allons-nous produire ? Le but de ce tutoriel est de créer un volet caché dans un coin de la page que nous allons pouvoir révéler en cliquant sur un lien. Dans un premier temps nous allons juste nous charger de révéler le volet, nous verrons comment faire pour replacer notre volet à son état initial dans un second temps. la démonstration Structure de base Il va nous falloir une structure HTML (vous vous en doutiez, j'imagine). <div id="volet"><p>Lorem Elsass ipsum réchime amet sed bissame so libero. Styles de base Passons à notre code CSS. la démonstration Un peu plus de HTML Un peu plus de CSS

Créer des coins arrondis en CSS et sans images Vouloir créer facilement des blocs aux coins arrondis est un rêve de webdesigner aussi vieux que le Web lui-même. Traditionnellement, depuis les débuts du web, on réalisait ceci à l'aide de plusieurs éléments <div> imbriqués (ou autres), ou à l'aide d'un tableau à 9 cellules : la cellule du centre accueillait le contenu, tandis que les autres recevaient des images ou des images de fond étirables afin de dessiner les quatre coins et les bordures. Cette technique est généralement lourde et peu accessible. C'est pourquoi depuis quelques années et l'avènement des feuilles de style, de multiples techniques ont vu le jour pour proposer des solutions que l'on peut regrouper selon les critères suivants : avec ou sans images, avec ou sans JavaScript, avec ou sans ajout de markup (éléments dans le code HTML), fluide ou non fluide (blocs étirables en hauteur et/ou en largeur selon le contenu), toutes plus ou moins accessibles. Simple et approprié : border-radius Exemple : Et c'est tout !

Related: