Hamburgers by Jonathan Suh

Multi-Line Padded Text By Chris Coyier On CSS This is one of those tricky CSS things that I see come up every few months. I guess what better place to address it than CSS-Tricks eh? The situation involves ragged-right inline text. Follows the ragged-right edgeIs padded along both the left and right edge of each line What you can't do is simply apply a background and padding to, say, the <p> element. You also can't simply apply the background and padding to a <span> or an inline element. Describing this is a bit futile. What we want is for each line to be padded like the beginning of that first line and end of that last line. There are some solutions though! #Harry Robert's Pseudo Element / white-space Method The big trick here is using white-space: pre-wrap; That gives us the padding on the ragged-right lines. Unfortunately Firefox doesn't dig the way the pseudo element is positioned in that technique. #Fabien Doiron's box-shadow Method Here is the original and then my fork to show how it works: #Prior Art

Position icons into circle Menu sticky | JavaScript et CSS J’ai bossé récemment sur plusieurs sites web, et la requête d’un menu sticky était quasiment systématique. Parfois elle était justifiée, parfois je me rapprochais du contre-exemple ergonomique stéréotypé. (Dois-je utiliser un sticky menu ?) Mais quand même ! Je vous propose de voir ensemble comment on peut faire ça. Concept du menu sticky J’aime bien partir d’une idée et poser quelques éléments par écrit pour ne pas partir tête baissée dans le code. Je veux bien diviser le fond (HTML), la forme (CSS) et les interactions (JS), et dans cet ordre là précisément. Le comportement attendu est celui-ci : J’ai un en-tête avec un logo et un menu qui sont « classiquement » positionnés. Nous aurons à la fin quelque chose dans ce goût : Démonstration La structure de notre menu sticky Je vous invite à utiliser cette structure de menu, et éventuellement à copier/coller le Lorem Ipsum de ma page de démonstration pour avoir du contenu et pouvoir scroller dans votre page. Les styles de notre sticky menu