Osez HTML5 et CSS3 ! Après une excitante présentation de ce que nous réserve CSS3 et une introduction à HTML5, les concepteurs web sont de plus en plus curieux de savoir si l'on peut d'ores et déjà créer un site décent à l'aide de ces technologies passionnantes. La question en substance : "peut-on concrètement faire du HTML5 et du CSS3 en 2012?", la question subsidiaire - inévitable - "...et que faire des anciens navigateurs?". Vous l'avez deviné, le but de cet article est de répondre positivement à la première question et de proposer des solutions à la seconde. Un site perso en fil rouge Pour étayer cet article, nous allons nous servir d'un fil rouge : mon site personnel Goetter.fr dont l'intégration a été réalisée en plusieurs étapes, et destiné à servir de passerelle entre mes différentes activités. Cet article a été initialement rédigé en 2012. Voyons en détails le cheminement et les écueils de cette intégration... Les Grands Anciens Rappel historique Le cas Internet Explorer
Annexe H : Index Lisez-moi S.V.P. précédent sommaire propriétés index Annexe H : Index :active, 2, 3 :after, 1, 2 :before, 1, 2, 3 :first, 1 :first-child, 1 :first-letter, 1 :first-line, 1 :focus, 1 :hover, 1 :lang, 1 :left, 1 :link, 1, 2 :right, 1 :visited, 1, 2 =, 1 ~=, 1 |=, 1 @charset, 1 @font-face, 1, 2, 3, 4, 5, 6, 7 @import, 1, 2, 3 @media, 1, 2, 3, 4 @page, 1 absolue, longueur [...], 1 active (pseudo-classe), 1, 2 after, 1 agent utilisateur, 1 ancêtre, 1 <angle>, 1, 2 définition de [...], 1 anonyme, 1 anonyme, boîte en-ligne [...], 1 arménien, 1 'ascent' (descripteur), 1 atomiseur, 1 attr(), 1 attribut, 1 auditive, image [...], 1 'auditif', groupe de média [...], 1 'azimuth', 1 <gauche> définition de [...], 1 géorgien, 1 glyphe, 1 glyphe abstrait, 1 'grille', groupe de média [...], 1 'groove', 1, 2 <haut> définition de [...], 1 hauteur-x, 1 hébreu, 1 'height', 1 'hidden, 1 'hidden', 1 hiragana, 1 hiragana-iroha, 1 horizontale, marge [...], 1 hover (pseudo-classe), 1 katakana, 1 katakana-iroha, 1
CSS Examples linear-gradient La fonction linear-gradient() permet de créer une image (type <image>) représentant un dégradé de couleur linéaire. Le résultat de la fonction sera un objet CSS <gradient>. Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner et à envoyer une pull request ! Comme pour les autres types de dégradés, la valeur obtenu n'est pas une couleur CSS (type <color> mais une image sans dimension intrinsèque. Autrement dit, celle-ci ne possède aucune taille « naturelle » ou préférée, sa taille réelle correspondra à la taille de l'élément auquel elle est appliquée. Les dégradés linéaires sont définis par un axe : la ligne du dégradé. La ligne du dégradé est définie par le centre de la boîte contenant le dégradé et par un angle. Le point de départ utilise la couleur initiale du dégradé. La fonction linear-gradient ne permet pas de répéter le motif du dégradé. Syntaxe
htmlcolorcodes How To Create a Scroll Back To Top Button 20 outils d’animation web que vous ne voulez pas rater Si vous souhaitez intégrer des animations dans vos pages web, les possibilités ne manquent pas ! Que vous cherchiez à créer des animations web discrètes pour rendre vos interfaces plus vivantes et agréables ou bien des effets impressionnants qui blufferont vos utilisateurs, les 20 bibliothèques et plugins CSS et Javascript qui suivent sauront répondre à la majorité de vos besoins. Vous pouvez vous en servir pour animer les éléments habituels (boutons, icônes, …), mais aussi des images SVG, des particules, des nuages, des formulaires, des dégradés, des rendus 3D, … 1. Animate.css Animate.css est une bibliothèque d’animations très complète qui couvrira la majorité de vos besoins. 2. Transformez vos icônes avec ces transitions animées dynamiques et agréables à l’oeil. 3. Bounce.js vous permet d’expérimenter facilement avec différents styles d’animation CSS. 4. Ce convertisseur transforme vos artworks SVG réalisés sous Illustrator en fichiers jQuery qui gèrent l’animation du visuel. 5. 6. 7. 8.
Liens & Sujets utiles - Divers - Programmation 1323 connectés FORUM HardWare.fr Programmation Divers Liens & Sujets utiles Sujet(s) à lire : - Règles du forum Programmation - [Topic unique] débats sur les langages - Les logiciels gratuits pour bien programmer Aller à : Enlever le soulignement sous les liens en HTML/CSS Par défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Pour ce faire, il suffit de définir le code CSS suivant dans votre code HTML : Notez que la pseudo-classe :link permet de ne cibler que les liens hypertextes (<a href="">) et non les ancres (<a name="">). Grâce au CSS via une classe Si vous désirez que ce style ne s'applique qu'à certains liens, il vous suffit par exemple de définir une classe spécifique pour les liens non soulignés (par exemple la classe nounderline) : Puis, lors de l'écriture du lien, de faire référence à cette classe : <a href="/" class="nounderline">Texte du lien</a> Grâce au CSS en ligne Enfin, si vous ne souhaitez pas définir de feuille de style, vous pouvez tout simplement définir le style en ligne à l'aide de l'attribut style, de la manière suivante : Notre vidéo
CSS: Ombres de texte Ombres de texte La version 3 de CSS a une propriété appellée "text-shadow" pour ajouter une ombre à chaque lettre d'un quelconque texte. Dans sa forme la plus simple, cela ressemble à quelque-chose comme cela : Ceci ajoute une ombre gris-foncée (#333) un peu sur la droite (0.1em) et vers le bas (0.1em) par rapport au texte normal. Le résultat ressemble à ceci : The noak and the barcicle (En Août 2005, tous les navigateurs ne supportent pas encore complètement "text-shadow". Ombres de texte floues La forme la plus simple de la propriété "text-shadow" comporte deux parties : une couleur (comme la #333 ci-dessus) et un décalage (0.1em 0.1em dans l'exemple ci-dessus). Le niveau de flou est donné comme un autre décalage. “What do you say?” In order to see more clearly Texte blanc lisible Les ombres peuvent rendre le texte plus lisible si le contraste entre le premier plan et l'arrière-plan est faible. Sans ombre : What is in it for me? Avec ombre : With a shovel and some oranges Ombres multiples
creativemarket Awe your audience graphically with The Biggest Infographics Bundle on the Internet! It contains approximately 1500 infographic templates at this moment and it is veeeeeery updatable ;) Perfect for any industry from social media and marketing to medical and education. Buy now and get all upcoming infographics for FREE! Extended License is also $39. ★ Real value of all included products is $654. Each of these infographics is represented in Ppt, Pptx, Key, Psd, Eps & Ai (except for TRUE Infographics Bundle (only Ps & Ai) and Bonus Slides (only Ppt, Pptx & Key). Every file is absolutely easy to edit in the software of your choice: Powerpoint, Keynote, Photoshop, Illustrator. Now also added Free Bonus: - Must Have Slides Power - Must Have Slides Keynote You can try for FREE: This Bundle includes: Main features: Used free fonts: Buy now and get all upcoming infographics for free! Infographics | Free updates! TheSeamuss
The Box — Chapter 1 — Magic of CSS — Adam Schwartz Box model In CSS, the box model[1] describes the rectangular boxes that are generated for elements laid out in the page. Essentially, everything is a rectangle. Some interesting facts: border-radius rounds out the corners of this box. box-shadow adds a shadow to this box. outline and box-shadow aren’t part of the box, and therefore have no effect on the layout. Box sizing The box-sizing property gives you a little control around how boxes are sized within this model. content-box The default. border-box When computing the size of a box, padding and border are folded in. For example: Example Both of these boxes have the following CSS, but one has box-sizing content-box and the other border-box. In the border-box case, the width and height of the .box are 5em, exactly what we set. Flexible inputs One of the benefits of using border-box is you can set a padding and width of mixed units without creating strange sizing edge cases. width: 75% tl;dr Further reading Citations
Typography — Chapter 5 — Magic of CSS — Adam Schwartz Typography is hard First off, give yourself a pat on the back. You’ve made it this far. Now take a moment to realize that most of the things you look at every day are type. Take a moment and just fly through some of these beautiful typographically-based design collections: Seeing As with color, designing well with typography requires using your eyes. Basic CSS Typography Tools The basic tools in your toolkit consist of the following: Font properties font-family — inherit, serif, monospace font-size — inherit, 18px, 10px font-weight — inherit, bold, 100 font-style — inherit, italic font-variant — inherit, small-caps Text properties text-align — inherit, center text-decoration — inherit, underline, overline, line-through text-indent — inherit, 50px text-shadow — inherit, 0 1px 3px red text-transform — inherit, uppercase Miscellaneous letter-spacing — inherit, 5px white-space — inherit, pre pre line-height — inherit, .75em word-spacing — inherit, 100px 100px Examples Example One