background preloader

Structure HTML et rendu CSS des balises : bloc et en-ligne

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

Changer le CSS d'un template - Apprentissage du web Cet article va expliquer comment passer d'un template par défaut à un template personnalisé dans l'outil de création de site web Jimdo. Bien que le tutorial soit très didactique et détaillé il est recommandé d'avoir quelques notions d'xHTML et de CSS surtout pour ensuite personnaliser le design en question. Aucun support personnalisé ne sera fournis en plus de ce tutorial. Ce petit cours est fournit à titre informatif pour les Jimdonautes bricoleur. Pour plus d'informations et mieux comprendre certains points il faut absolument apprendre l'xHTML et le CSS, plusieurs sites très efficace existe sur internet sur ce sujet. Avertissement: Veiller à ne pas voler le template d'un autre site. La première étape de ce tutorial est de créer deux fichiers texte qui contiendront respectivement le code xHTML et le code CSS de votre template par défaut. Avant d'aller plus loin, assurez-vous que votre site web Jimdo possède le template que vous souhaitez éditer. Supprimer les scripts Organiser le contenu

Best CSS Code Snippet Sites On the web there are many different code repositories of web programming languages from which you can take free or licensed, but mostly free, small snippets for personal and professional use. Many are also collaborative communities that share code and discuss with others. Here is a small selection: asdfgas CSS Tricks CSS Tricks offer CSS code snippets but also some for HTML, HTAccess, JavaScript, jQuery, PHP and Wordpress. Although it is an HTML5 repository, labels filter snippets for CSS3 very well. html5snippets.com/css3 Other blogs have already published good collections of snippets in some of their posts: Tzine is an awesome web development website with tutorials and resources. tutorialzine.com

Simple scalable CSS based breadcrumbs A few days ago I was implementing breadcrumbs in a website I’m working on. Not that I sincerely believe every site needs this, but on some occasions and to some users breadcrumbs are practical. Anyhow, it gave me the idea to write an article about it because it’s been a while since I last wrote about anything CSS-related. The one I’ll share with you is a very simple one. It uses only one simple graphic. The rest is basic CSS styling with an unordered list as HTML code. The one I implemented in the project I'm working on looks a bit similar, but was more complex to code. The HTML code Here is our HTML code. <ul id="crumbs"> <li><a href="#">Home</a></li> <li><a href="#">Main section</a></li> <li><a href="#">Sub section</a></li> <li><a href="#">Sub sub section</a></li> <li>The page you are on right now</li> </ul> All items have links, except the page you're on. The CSS Here is the CSS styling: I've given the list an ID called #crumbs. We want to have the entire arrow area clickble.

40+ Beautiful CSS HTML Login Form Templates In this article we’ll show you some creative css html login forms templates using modern design with CSS3 and HTML5. In fact, nowadays, popular web service, web application are allows or requires user subscription, which means that they will need some kind of forms for users to register and sign in on their website. To help you, so I tried to find beautiful some different login forms, some of which are inspired by design concepts on the web design. I believe that css / hmtl login form templates web design should be clean and efficient. With in mind that the form design should have different style, the principals login form need including just three elements: a username, a password , and a submit input. You may like this: jQuery login form Log in Form Connect with Facebook Demo More Info CSS3 Login Form Demo More Info Dark Login Form Demo Download A clean and simple login form Demo Download Login Form Alert Interface in PSD and CSS More Info Nice CSS3 Login Form More Info Elegant Login Form

Les grands principes du Responsive Web Design Un site web responsive est un site dont le design s’adapte à l’écran de l’utilisateur. Cette technique s’oppose à celle des sites plus classiques où le choix d’une apparence entièrement statique a été effectué au préalable. Cette approche présente l’inconvénient d’obliger les possesseurs de petit écran à scroller pour visualiser l’ensemble du contenu, ainsi que de laisser une impression de vide à ceux, plus chanceux, qui naviguent sur un écran de grande dimension, par exemple un 27 pouces. À l’inverse, l’apparence d’un site dont le design est responsive s’adapte en fonction de l’écran sur lequel il est affiché. Cela est possible de manière extrêmement simple, grâce à une nouvelle fonctionnalité du CSS 3 : les media queries. Dans cet exemple, la valeur seuil est fixée à 1024 pixels : en deçà, on bascule sur la feuille de style réservée aux petits écrans. Les media queries peuvent également être directement insérées dans les feuilles CSS : Cela serait une solution en théorie. Les images

Créer un guide de style Les guides de style sont utilisés par les grandes entreprises pour assurer la cohérence de leur site et gagner en efficacité, mais tout designer exigeant peut s'inspirer de cette démarche. Par Susan Robertson Il y a quelques années je travaillais sur une application complexe. C'est à cette époque que j'ai découvert les guides de style (1) - une façon de contrôler le balisage et le CSS afin d'éviter qu'ils ne deviennent ingérables ou qu'ils n'enflent démesurément. Qu'est-ce qu'un guide de style ? Pour moi, un guide de style est un document vivant de code, qui détaille tous les éléments et les modules codés de votre site. Je devrais aussi mentionner le fait que ce que j'appelle guide de style (style guide) est désigné par d'autres comme bibliothèque de motifs (pattern library). Quand j'ai commencé à travailler pour Editorially, une des premières choses auxquelles je me suis attaquée a été le guide de style. Pourquoi utiliser un guide de style ? Étapes de construction d'un guide Phewww...

Méthode Daisy : les CSS feuille à feuille Bienvenue chez vous ! C’est le bazar, n’est-ce pas, dans votre code CSS ? Le CSS ? C’est une vraie galère dès qu’on doit y revenir, dès qu’on repasse derrière quelqu’un d’autre et même quand on doit replonger dans son propre code après longtemps... et ce n’est vraiment pas aisé de coder à plusieurs mains, en équipe. Voulez-vous vraiment continuer à coder chaque projet à partir de zéro ? Beaucoup se demandent alors s’il ne vaut pas mieux adopter un « framework CSS ». Mais c’est quoi, concrètement, un framework CSS ? Cependant ils restent peu utilisés : il semble que guère plus de 40 % des projets soient développés à l’aide d’un framework CSS [1]. Je vous propose plus simple : exploiter l’existant ! Prenons par exemple, l’une de ces feuilles de style longue comme le bras. Maintenant que nous avons identifié des ensembles, allons-y franchement et découpons en autant de feuilles de style individuelles : reset.css, typo.css, forms.css, grid.css, layout.css, skin.css, pages.css, etc.

Créer une grille CSS responsive Les grilles CSS, à quoi ça sert ? La plupart des sites Internet ont un gabarit « générique ». Par exemple, un blog va avoir un corps et une barre latérale. Une grille CSS va vous permettre de gérer ce gabarit très facilement. L’idée c’est de partager votre site en un nombre défini de colonnes. L’image ci-contre affiche un exemple d’un site (au hasard deercreation.fr) qui utilise un système de grille à 12 colonnes. Dans la partie réalisations, la largeur d’une vignette vaut 4 colonnes. Réalisation Ce système de grille est finalement assez simple à mettre en place et ne nécessite que du HTML et CSS. Dès le début, il est important de bien choisir la largeur de son site. Pour mettre ça en place, on va utiliser des classes CSS spécifiques et réutilisables. Ligne Une ligne est une div qui contiendra les colonnes dont la somme font 12. Comme signalé, chaque ligne fait 960 pixels de large. Colonnes Notre système est à douze colonnes. Rien de trop compliqué. Séparateur Et le code CSS qui va avec :

Une grille responsive avec CSS3 Flexbox et LESS (ou Sass) Ce tutoriel a pour but de présenter dans les détails une technique de conception de grille de mise en forme responsive à l’aide du positionnement CSS3 Flexbox Layout, actuellement parfaitement adapté à ce genre de fonctions en attendant une meilleure implémentation de Grid Layout. En février 2016 est sorti mon livre entièrement dédié à Flexbox. Il se nomme "CSS3 Flexbox : plongez dans les CSS modernes" et je vous recommande bien évidemment sa lecture afin de comprendre tous les rouages de ce positionnement révolutionnaire, et d'en maîtriser tous les aspects. Le concept de grille produite permettra de gérer les espaces inter-colonnes (gouttières), les décalages (“offsets”), les différentes tailles d’écran et d’être automatisable. Voir le résultat final en ligne Le fondement : Flexbox Layout Notre grille sera construite grâce au module Flexbox, aujourd’hui compatible sur une bonne majorité des navigateurs (95% en France selon les stats Caniuse en fin 2014). Les bases de la grille

Quelles mesures CSS, pour quel usage ? Par Dudley Storey Confrontés au foisonnement des systèmes de mesure CSS, les développeurs web peuvent avoir du mal à comprendre quelles unités il faut utiliser dans leurs pages, et à quel moment. On peut être tenté de toujours utiliser les mêmes mesures, mais ce choix risque de limiter sérieusement l’aboutissement de vos designs. Les pixels (px) À choisir pour : les traits de bordure et les éléments généraux, lorsqu’il s’agit de designs à largeur fixe ; également pour les valeurs des décalages des ombres portées en CSS. Les pourcentages (%) À choisir pour : intégrer des images et des conteneurs à taille variable ; et pour définir la hauteur de la balise body dans certains cas.À éviter pour : la typographie. em et ex À choisir pour : la typographie, et les éléments qui y sont liés (les marges, par exemple), mais sans perdre de vue que em et ex peuvent être très délicats à employer dans des mises en page complexes. Les points et les picas rem Les pouces (in) et les centimètres (cm)

Focus sur le Graal des sites responsive : Flexbox Aujourd'hui, focus sur une propriété CSS donc vous avez tous entendu parler au moins une fois : Flexbox. Vous souvenez-vous de l'époque où nous utilisions des tables à tort et a travers pour désigner nos sites ? Je pense que tout le monde parmi nous s'accorde pour dire que cette époque était une période très sombre, avec un HTML absolument pas sémantique et un CSS plein de hack pour obtenir un design convenable sur la plupart des navigateurs. Notre CSS actuel est plein d'éléments en Float, et notre HTML sémantique se retrouve plein de classes pas sémantiques du tout comme .row, .small-12 ou .columns. La solution existe, pourtant, et elle s'appelle Flexbox. Flexbox, qu'est-ce que c'est ? Flexbox est un nouveau modelé de boîte (comme "block", ou "inline") fait pour travailles avec des changements de taille. Pour plus d'informations, je vous propose cet excellent article en Français. Autre article tres interessant sur le sujet, en anglais malheureusement. Quand pourra t'on utiliser Flexbox ?

sans titre With recent advances in front end technologies, front end developers have been going crazy, pushing CSS to its limits and doing all sorts of beautiful animations. Seriously, there are some crazy things out there. I recently did this 3D animated atom in which I had to employ a couple of weird techniques which I'll try to explain here. I'll be using indented Sass syntax in the examples. Transforms basics Let's start from the very bottom. .Square--translate transform: translate(30px, 20px) // x and y axis .Square--rotated transform: rotate(45deg) .Square--skewed transform: skew(20deg) .Square--scale transform: scale(0.5, 0.5) You can also combine multiple transformations in a single rule, like so: .element transform: translate(50px) rotate(90deg) However, keep in mind that order is important here. .Square--translateThenRotate transform: translateX(30px) rotateZ(45deg) .Square--rotateThenTranslate transform: rotateZ(45deg) translateX(30px) Animations Building an atom, one orbit at a time Wrapping up

Related: