background preloader

Generateur de multi-colonnes en CSS3 - Design et programmation web2 - Dji

Generateur de multi-colonnes en CSS3 - Design et programmation web2 - Dji
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 Media Queries - Adapter un site à plusieurs résolutions d'écran Les Medias Queries sont des propriétés CSS permettant d'adapter une page HTML à différents types d'écrans et résolutions. Imaginons que vous ayez développé un site web adapté aux résolutions classiques: 1024px / 1280px de largeur, qu'avec la démocratisation des smartphones et tablettes, vous souhaitiez rendre votre site compatible sur ces écrans, sans toucher au HTML... Grâce aux CSS3 medias queries, extensions des types media en CSS2 (print, screen), c'est possible ! Voici quelques exemples de medias queries pratiques que vous pourriez utiliser sur vos prochaines réalisations web: Adapter le style de la page web en fonction des dimensions du navigateur via les medias queries Il peut être intéressant de connaître les dimensions de la zone d'affichage du navigateur de notre visiteur pour adapter au mieux la taille des listes, colonnes etc. Voici comment c'est possible en quelques lignes d'assigner un style particulier pour les navigateurs ayant pour largeur mini 400px et maxi 700px 1. 1. 2. 6. 1.

CSS3 Multiple Columns LESS « The Dynamic Stylesheet language - Waterfox Learn CSS Positioning in Ten Steps: position static relative absolute float 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let's move div-1 down 20 pixels, and to the left 40 pixels: Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. It appears that position:relative is not very useful, but it will perform an important task later in this tutorial. 3. position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Let's move div-1a to the top right of the page: What I really want is to position div-1a relative to div-1. Footnotes 10.

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. 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 It adds the libraries inside the script which is annoying.You can’t save the original bin.All settings are not exposed in user interface. JSfiddle cons Codepen cons

Pompage.net : le web design puisé à la source - Waterfox Make a Footer Stick to the Bottom of the Page This CSS footer stylesheet will make a footer stick to the bottom of the page. CSS Sticky Footer This CSS sticky footer code pushes a website's footer to the bottom of a browser window. It is valid CSS and HTML with no unsavory hacks, so it works in all of the major browsers (even the now defunct IE5 and IE6). View the example CSS Sticky Footer or the HTML5 Sticky Footer. How to use the CSS Sticky Footer on your website Add the following lines of CSS to your stylesheet. Follow this HTML structure. <html> <head> <link rel="stylesheet" href="layout.css" ... /> </head> <body> <div class="wrapper"> <p>Your website content here. Multicolumn layout with Sticky Footer Add clear to the .push div Adding margins to elements is messing up the footer. Simply use padding instead, and all your worries will go away. I put this on my site and it doesn't work right in browser X. Check to see if the example CSS Sticky Footer page works in that browser. Having trouble with the Sticky Footer and ASP.NET?

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. Le plus important à retenir c'est qu'avec Flexbox la disposition n'est pas rigidement directionnelle, contrairement à ce que nous connaissons - Block est basé sur un schéma vertical, Inline sur un schéma horizontal. Les bases Propriétés Notez que : flex

Related: