A Collection of Separator Styles A collection of separator styles for horizontally dividing sections on a website. The dividers are created using several techniques, including styling pseudo-elements, using gradients and inserting SVG graphics with responsiveness in mind. View demo Download source Today we’d like to share some separator styles with you. SVG is used in the cases where we cannot simply use a pseudo-element that is nicely responsive, like the half circle shape. And now, dig in, scroll and get inspired! An example for a separator style using pseudo-elements is the following double diagonal representing a flat shadow: Another example is the inclined zig zag pattern (up and down) made with a linear gradient: …or the folded corner that uses diagonal gradients to simulate the triangles: For some styles we use SVG, like the big triangle: By setting preserveAspectRatio="none" and a width of 100%, we make the SVG graphic fluid to fit into the whole width without resizing its height.
Cheat Sheet Download cheat sheet as printable PDF A5 Syntax Child: > nav>ul>li Sibling: + div+p+bq Climb-up: ^ div+div>p>span+em^bq div+div>p>span+em^^bq Grouping: () div>(header>ul>li*2>a)+footer>p (div>dl>(dt+dd)*3)+footer>p Multiplication: * ul>li*5 Item numbering: $ ul>li.item$*5 h$[title=item$]{Header $}*3 <h1 title="item1">Header 1</h1><h2 title="item2">Header 2</h2><h3 title="item3">Header 3</h3> ul>li.item$$$*5 ul>li.item$@-*5 ul>li.item$@3*5 ID and CLASS attributes #header .title form#search.wide p.class1.class2.class3 Custom attributes p[title="Hello world"] td[rowspan=2 colspan=3 title] [a='value1' b="value2"] Text: {} a{Click me} <a href="">Click me</a> p>{Click }+a{here}+{ to continue} <p>Click <a href="">here</a> to continue</p> Implicit tag names .class em>.class ul>.class table>.row>.col All unknown abbreviations will be transformed to tag, e.g. foo → <foo></foo>. Alias of html:5 <! a a:link a:mail abbr acronym, acr base basefont br frame hr bdo bdo:r bdo:l col link link:css link:print link:favicon link:touch link:rss link:atom meta meta:utf img c
Unicode Lookup: convert special characters CSS Shapes, une introduction L'article de Sara Soueidan paru dans A List Apart a fait le buzz dernièrement. Sara présente ici avec clarté ce qui sera l'avenir des formes et du design dans CSS. Par Sara Soueidan Des rectangles dans des rectangles, telle est depuis toujours la structure de nos pages web. Depuis longtemps, nous tentons de nous libérer de leurs limitations en utilisant CSS pour créer des formes géométriques, mais ces formes n'ont jamais affecté le contenu situé à l'intérieur des éléments, ni la façon dont ces éléments affectent les autres éléments de la page. La nouvelle spécification CSS Shapes change tout cela. Dans l'image qui suit par exemple, remarquez comment le texte entoure les images circulaires. Regardons maintenant la façon dont fonctionne Shapes, et comment vous pourrez l'utiliser. Les prochains niveaux de CSS Shapes concerneront l'insertion d'un contenu à l'intérieur d'une forme. Pour utiliser CSS Shapes dans Chrome Canary, il vous faudra activer le flag “fonctions expérimentales”. ou bien :
LoremPicsum Créer un sitemap - Centre d'aide Search Console Cette page explique comment créer un sitemap et l'envoyer à Google. En savoir plus sur les sitemaps Créer et envoyer un sitemap : Déterminez quelles pages de votre site nous devons explorer, ainsi que la version canonique de chaque page. Formats de sitemaps Nous acceptons plusieurs formats de sitemaps, décrits ci-après. Tous les formats imposent la même limite aux sitemaps : 50 Mo (sitemaps non compressés) et 50 000 URL. Voici un exemple très simple de sitemap XML indiquant l'emplacement d'une URL : <? Des exemples plus complexes et une documentation complète sont disponibles sur sitemaps.org. Vous y trouverez des exemples de sitemaps spécifiant des pages alternatives et de sitemaps pour les actualités, les images ou les vidéos. Si vous possédez un blog doté d'un flux RSS ou Atom, vous pouvez envoyer l'URL du flux en tant que sitemap. Nous acceptons les flux RSS 2.0 et Atom 1.0. Encodez votre fichier en UTF-8.
Web Starter Kit — Web Fundamentals Download Web Starter Kit (beta) What is Web Starter Kit? Web Starter Kit is an opinionated boilerplate for web development. Features Quickstart Download the kit or clone the repository and build on what is included in the app directory. There are two HTML starting points, from which you can choose: index.html - the default starting point, containing Material Design layout.basic.html - no layout, but still includes our minimal mobile best-practices Be sure to look over the installation docs to verify your environment is prepared to run WSK. Web Performance Web Starter Kit strives to give you a high performance starting point out of the box. Browser Support At present, we officially aim to support the last two versions of the following browsers: ChromeEdgeFirefoxSafariOperaInternet Explorer 9+ This is not to say that Web Starter Kit cannot be used in browsers older than those reflected, but merely that our focus will be on ensuring our layouts work great in the above. Troubleshooting Docs and Recipes
Stitches - An HTML5 sprite sheet generator Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only compatible with modern browsers. Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Stitches is developed by Matthew Cobbs in concert with the lovely open-source community at Github. Copyright © 2013 Matthew Cobbs Licensed under the MIT license. Implementation After dependencies, Stitches requires a stylesheet, a script, and an HTML element to get the job done: The sprite sheet generator is automatically created in elements that have the stitches class: If you choose, any images that are a part of the initial markup will be loaded onto the canvas: Documentation Documentation is available here. Dependencies jQuery 1.7.1, Modernizr 2.0.6, Bootstrap 2.3.0 New Contributing License Download
jQuery.mmenu, app look-alike menus with sliding submenus