teleject/Responsive-Web-Design-Artboards - GitHub How to fix the superscript and subscript line-height problem with CSS If you code CSS / XHTML, you are most likely familiar with the Superscript and Subscript tags. If you use these tags in a situation where there are multiple lines of text you might run into a common problem. The problem is that the Super or Subscript characters push the lines of text further apart to make room for the character. This leaves you with an ugly looking block of text, with 2 lines with too much space between them. Here’s another method some people use which you can try.
jQuery Masonry CSS Flip Animation You've all asked for it and now I've added it: Internet Explorer support! Annoyingly enough, the change involves rotate the front and back elements instead of just the container. Skip to this section if you'd like the Internet Explorer code. IE10+ is supported; IE9 does not support CSS animations. CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's content on both the front and back of a given container. Quick note: this is not the first tutorial about this effect, but I've found the others over-complicated. The HTML The HTML structure to accomplish the two-sided effect is as you would expect it to be: There are two content panes, "front" and "back", as you would expect, but also two containing elements with very specific roles explained by their CSS. The CSS CSS Flip Toggle CSS Vertical Flip
twolfson/File-Watcher - GitHub Is there a web-safe Helvetica Neue CSS font-family stack? « Rachael L. Moore Or: I would love to know how to use Helvetica Neue on the web Or: No, really, was this always so complicated? In this context, when I say “safe”, I don’t mean “using only web safe fonts”, I mean “how the heck do you get the non-web-safe-font to show up when you know you have it”? I never noticed before having so much trouble figuring out what a font’s name should be in a font stack. Sometimes, for a particular system, I’ve looked up a “better” font to add to the font stack, but.. Wondering what I’m talking about? It’s relevant to a design I’m working on right now. Unfortunately, searching the web for how to do this has raised more questions for me than it answered. The challenges are several: First, it seems that different systems — either having to do with the operating system or the browser — deal with spaces differently (or something)? #1 – Spaces? One system might recognize “HelveticaNeue” and another “Helvetica Neue.” #2 – Weights and Stretch Grasping at Font Stacks
DocumentUp Create a Trendy Retro Photo Effect Purely with CSS I’ve done plenty of retro photo effect tutorials in the past, but they’ve all been done using Photoshop. After playing around with some cool new CSS3 features I managed to create a pretty decent looking retro style image effect using just CSS. With the help of CSS gradients and filters, let’s take a look at how a cool vintage photo effect can be created directly in the browser. This little technique uses a mix of CSS gradients and filters to combine various colour overlays to create that typical old school analogue photo effect. Currently CSS filters only work in Webkit browsers (Safari, Chrome), but it won’t be long until this fun little tip can be put into practice across all browsers. In order to create a retro photo effect, we first need a photo. In the CSS add the above code to instantly create a cool retro effect on any image. The CSS begins with a box-shadow rule using the values inset 0px 0px 100px rgba(0,0,20,1);.