Quelle démarche suivre pour intégrer une maquette en page HTML/CSS
Voici une question posée sur le forum : Je suis relativement débutant avec CSS, auparavant j'utilisais des tableaux, et je créais mon design avec photoshop, ensuite il ne me restait plus qu'à utiliser les tranches, d'arranger un peu le code en fonction de mes besoins, et le tour était joué. Maintenant le css, je suis un peu perdu, et je n'aimerai pas perdre du temps à des "bidouillages", ma question est donc la suivante, quel est le meilleur moyen d'envisager un design CSS ? J'allais répondre de manière assez détaillée, mais je me suis dit que la réponse pourrait servir à tous. Un avertissement avant de commencer : il s'agit d'une analyse personnelle, qui reflète plus ma façon d'envisager l'intégration HTML/CSS qu'une quelconque règle ou « bonne manière de faire ». Découpage ou construction On pourrait résumer le design avec les tableaux de mise en forme de la façon suivante : Design avec tableaux de mise en forme : on part du design, et on le découpe en tableaux. 1. 2. 3. 4. 5. Conclusion
HTML5-CSS3.fr - Tutoriels, exemples et démos HTML5 et CSS3
Trouver son code couleur HTML ! Les couleurs avec du CSS sont les mêmes que celles avec un code HTML. Pour faire référence à d'autres couleurs, vous devrez utiliser le code hexadécimal. C'est bien sûr un peu moins parlant mais universel. Vous pouvez choisir votre couleur en cliquant ici : <-- Cliquer ici Il existe des couleurs nommées normalisées : Les 16 couleurs de fondamentales ont un nom parlant (en anglais) normalisé : elles sont reconnus par tous les navigateurs : Il est possible d'avoir l'ensemble des couleurs de l'arc en ciel :) avec une sa valeur hexadecimal : Couleur HTML et CSS En CSS, est bien pratique de mettre en forme un contenu et le définir une seule fois dans sa feuille de style. color: Gestion de la couleur du texte letter-spacing: Espace entre les lettres text-align: Alignement d'un texte text-decoration: Habiblement d'un texte A savoir : Dans ce chapitre, la notion d'héritage est appliquée. Couleur d'un texte ou une phrase en CSS Espace entre les lettres
Parallax Scrolling Templates
If you remember, a while back I provided a roundup on parallax scrolling websites (10 Awesome Parallax Scrolling Templates). Developing a parallax scrolling website can be rather complex and requires a fair amount of coding in jQuery, JavaScript, HTML, and CSS. Well that was the case until, so let’s take a look at a few parallax scrolling themes and templates that are out there for us to work with. Slide One Slide One is a WordPress theme that offers a nice, clean, simple look with one main column spanning from top to bottom down the middle of the page. The background images scroll and provide the parallax effect, while the navigation and social icon links maintain a fixed position. Stellar Stellar is a parallax scrolling website that was built with the 960 grid system. Parallaxr Paralaxr is horizontal scrolling WordPress theme with a pretty cool structure. Old Bakery Old Bakery puts a refreshing spin on the standard parallax scrolling site. Sense Parallax Background 3D Parallax Hero Impress
How to create slick effects with CSS3 box-shadow – Red Team Design
Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop's Blending options. But now, since CSS3 "hit the charts", you don't need Adobe's design tool to add a drop shadow or an inner shadow to a box. Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore. View demo box-shadow property Thebox-shadow property allows you to add multiple shadows (outer or inner) on box elements. <shadow> = inset? Rocket science? Not at all, here's an quick example: box-shadow: 3px 3px 10px 5px #000; This CSS declaration will generate the following shadow: A positive value for the horizontal offset draws a shadow that is offset to the right of the box, a negative length to the left.The second length is the vertical offset. The above theory it's just a small amount, if you want to read more, than be my guest and check the W3C specs. Enough theory, let's see some stuff! Add depth to your body Reference URL Drop shadows Quick tips
quora
:hover - CSS
Résumé La pseudo-classe CSS :hover permet de spécifier l'apparence d'un élément au moment où l'utilisateur passe la souris dessus, mais sans nécessairement l'activer. Ce style peut être écrasé par d'autres pseudo-classes liées aux liens, comme :link, :visited, et :active, apparaissant dans des règles subséquentes. Les navigateurs visuels, comme Firefox, Internet Explorer, Safari, Opera ou Chrome, appliquent les décorations lorsque le curseur (le pointeur de la souris) passe au-dessus d'un élément. On rencontre principalement cette pseudo-classe avec l'élément HTML <a> mais cela fonctionne aussi avec d'autres éléments HTML. Note d'utilisation : sur les écrans tactiles, :hover est problématique voire impossible. Exemple Grâce à la pseudo-classe :hover vous pouvez créer des algorithmes de cascade complexes. qui sont appliquées à une structure HTML telle que la suivante : Voyez notre exemple complet de menus déroulants en CSS pour plus d'informations. Spécifications
DISIC/guide-integrateur: Un guide destiné aux intégrateurs chargés de réaliser des gabarits HTML et CSS accessibles.
CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web.
Tester le bon fonctionnement de votre site web - Apprendre le Web
Dans cet article, nous présenterons les différentes étapes permettant de diagnostiquer les problèmes d'un site web ainsi que les mesures à prendre pour corriger certains de ces problèmes. Vous avez donc publié votre site web en ligne. Bien. Mais êtes-vous sûr-e que celui-ci fonctionne correctement ? Un serveur web distant se comportera différemment d'un serveur local. Voyons donc comment diagnostiquer et résoudre ces problèmes. Pédagogie active Il n'existe pas encore de matériau interactif pour cet article. Aller plus loin La première chose à faire pour tester une page donnée est d'ouvrir votre navigateur et d'aller sur cette page. Où est passée l'image ? Allons sur notre site web : Ouvrons les outils de développement et plus particulièrement ceux qui portent sur le réseau (Outils ➤ Développement Web ➤ Réseau) puis rechargeons la page : Les status HTTP Le serveur répond avec une message de statut à chaque fois qu'il reçoit une requête. Les erreurs 404
Create Market and Grow Your Own Website
Veille 2.0 et communication par les nouveaux médias - e-lLess blog
