background preloader

Generateur de multi-colonnes en CSS3

Generateur de multi-colonnes en CSS3
Développement CSS animation, transition, font, playground, ... Développement Javascript jQuery, Javascript, performance, ... Développement PHP test unitaire, librairies, ... Développement HTML5 HTML5 Api, localStorage, geolocalisation, ... Développement jQuery jQuery, plugins, performance, ... Outils pour développeur bordure, box-shadow, multi-columns, ... UPDATED - nouvelles fonctionnalités HTML5 - sliders Résultat Lorem ipsum dolor sit amet, consectetur adipiscing elit. Code à copier -moz-column-count: 4; -webkit-column-count: 4; -o-column-count: 4; column-count: 4; -moz-column-gap: 20px; -webkit-column-gap: 20px; -o-column-gap: 20px; column-gap: 20px; -moz-column-rule: 1px dotted #cbcefb; -webkit-column-rule: 1px dotted #cbcefb; -o-column-rule: 1px dotted #cbcefb; column-rule: 1px dotted #cbcefb; Faire un don pour m'aider à continuer d'améliorer le site Autres outils que vous pourriez aimer Related:  HTML CSS

CSS3 Multiple Columns JSbin, JSfiddle or Codepen, which one to use and why? There are lots of css – js playgrounds now in the market, and the most popular ones are JSbin (by Remy Sharp), JSfiddle (by Oskar Krawczyk), codepen (by Chris Coyier, Tim Sabat and Alex Vasquez). So sometimes it become a confusing question which one to use; and more importantly why and when? Let’s compare these three today and find out which one can be the most suitable one for you. So, first of all let’s compare the features of these three. Feature comparison table These are the main features provided by these three playgrounds. My Personal Recommandation Why JSbin It is fast, light weight, windows can be hidden and shown easily. Why JSfiddle I like the collaboration feature of jsfiddle. Why Codepen Preview feature is what I like there. Cons of them I’m not mentioning any paragraph or table for the pros; cause, the feature table itself says about the pros of each of them. JSbin cons JSfiddle cons Hitting the run button everytime is frustrating if you are testing a small snippet. Codepen cons

Flexbox, guide complet Le module Flexbox Layout fournit une façon plus efficace de disposer, aligner et distribuer l'espace entre les éléments de votre page. 4 riches articles de Chris Coyier sont réunis ici. Par Chris Coyier Cet article est la réunion de quatre articles de Chris Coyier sur Flexbox. Le module Flexbox Layout fournit une façon plus efficace de disposer, aligner et distribuer l'espace entre les items d'un container, même lorsque leurs dimensions sont inconnues et/ou dynamiques - d'où le terme "flex". L'idée principale est de donner à un élément contenant (container) la possibilité de changer les largeur et hauteur des éléments contenus (items), afin de remplir au mieux l'espace disponible, et s'adapter à tous les devices et toutes les tailles d'écrans. Un container flexible permet aux items de s'étendre pour occuper la place disponible ou au contraire les réduit pour leur éviter de déborder. Les bases Le schéma ci-dessus montre bien que l'axe principal peut être horizontal ou vertical. Propriétés flex

Création de dégradés de coluleurs avec GRADIENT de CSS3 : tuto pas à pas et illustré Gradient, Border-radius, Box-shadow... le trio magique de CSS3 Bien que notre tuto consiste à expliquer ce que c'est GRADIENT de CSS3, on va quand même en profiter pour aller encore plus loin en utilisant d'autres propriétés de CSS3 : border-radius et box-shadow. Ci-dessus, nous avons un joli bouton (ou un onglet, si vous voulez). Il s'agit d'une image png avec des effets de dégradé de couleurs, des angles arrondis et, enfin, une ombre portée. Maintenant, on va essayer de reproduire le même bouton. Mais cette fois-ci, avec seulement du style CSS3. Commençons par écrire le code html.Supposons que notre bouton est un élément <li>. <ul> <li id="bouton_YES">YES ! Maintenant, on va lui donner un style CSS3.Afin d"éviter toute mauvaise surprise quant à la compatibilité des propriétés CSS3 avec les navigateurs, on va rajouter à ces propriétés des préfixes bien spécifiques: Le style CSS3 : -webkit-border-radius : 40px ; -moz-border-radius : 40px ; border-radius : 40px ; Et voici le résultat

Contraintes web : le matériel L'accessibilité d'un site web est liée en grande partie à l'aspect technologique. Une page Internet peut être vu différemment par les internautes en fonction du matériel sur lequel le site est consulté. Différents critères rentrent en ligne de compte. Le navigateur. Le système d'exploitation. Il est impossible de concevoir un site Internet qui réponde à l'ensemble des caractéristiques optimisées d'une plate-forme informatique. Une grosse erreur de design consiste à concevoir un site qui ne rentre pas dans la largeur des écrans standards du moment. L'interface de votre site occupera au maximum 960 pixels de large, pour que le contenu de la page web rentre dans la largeur de l'écran. Recourir à de nombreux plug-ins multimédias ou à des technologies non standard peut réduire sensiblement le nombre d'internautes capables de lire votre site.

Structure HTML et rendu CSS des balises : bloc et en-ligne La compréhension de la structure des éléments HTML est paradoxalement un sujet peu connu des développeurs web. Bien souvent sont évoqués des éléments de type bloc et des éléments de type en-ligne. Il faut savoir que ces désignations sont quelque peu faussées car elles mélangent une partie des spécifications HTML (qui proposent des catégorisations d'éléments) et une partie des spécifications CSS (qui proposent des modèles de rendus). Historiquement, HTML ne proposait que deux catégories d'éléments : les éléments de niveau block et les éléments de niveau inline. En HTML5 La catégorisation est améliorée et modifiée depuis HTML5. Le flux (flow) regroupe la plupart des éléments courants, c'est-à-dire les autres sous-modèles cités ci-après, ainsi que le contenu texte simple. Le contenu sectionnant (sectioning), définit les grandes zones du document HTML ou de l'application web : <article>, <aside>, <nav>, <section>. Emboîtements En HTML4 et XHTML 1.x Fonction et emboîtements En règle générale : none

Insérer des données d’un fichier Excel ou Access dans MySQL Préparation Pour cette solution, il est nécessaire de passer par ces quelques étapes de préparation : analyser la structure du fichier ;mettre en place la base de données et la table qui recevra les données du côté de MySQL ;installer le pilote ODBC pour faire communiquer Access et MySQL ;créer la source de données. Analyse du fichier source Nous allons ici ouvrir le fichier qui contient les données, et ainsi prendre connaissance du nombre de champs (colonnes) et des types de valeurs que nous souhaiterions obtenir en sortie. Dans la colonne A, nous avons des nombres (certes, pas stockés sous un type numérique dans notre champ, mais ce n’est pas un problème) et, en colonne B, des prénoms. Mise en place de la base de données de destination Nous avons donc deux champs. Voici le code SQL permettant de créer la base de données tuto et d’ajouter la table personnes contenant les deux champs cités précédemment. CREATE DATABASE tuto; USE tuto; CREATE TABLE personnes ( id int(11) NOT NULL AUTO_INCREMENT,

Initiation à la création d'un design extensible Nous allons donc créer un design extensible simple, pas à pas, en abordant les principales techniques. Je passerai très rapidement sur le code qui ne concerne que l'esthétique (bordures, couleurs, etc.) : vous êtes normalement capables de le faire sans problème. Notez que ce qui est abordé dans ce tutoriel peut être utilisé sans problème pour un design fixe en faisant quelques modifications (en ajoutant des tailles fixes, notamment). Voici donc à quoi va ressembler notre design : Aperçu du design Magnifique, n'est-ce pas ? Résumons un peu, le design comportera : un titre principal centré en haut de la page ;un menu à gauche comportant quelques liens ;le contenu de la page à droite, dans un bloc ;un pied de page centré en bas. Il s'agit d'un exemple de design qui n'est pas très compliqué à mettre en place. Préparation Le site ne sera composé que d'une seule page, nous aurons donc une page HTML et une page CSS. <title>Mon premier design extensible</title> <h1>Mon premier design extensible</h1> h1

Related: