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.
Photomatix 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
KRPano Unicode Lookup: convert special characters SkiVR La réalité virtuelle 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 :
TroisSixZero Plugins KRPano LoremPicsum