CSS-Tricks Screencasts

pYou are probably pretty aware of why using version control is a good thing. In case you aren#8217;t, I quickly go through that in this video. Then we get into the most basic thing we can possibly do: put a hellip;/p

pWe spend an entire hour looking at a Photoshop design and writing HTML5 markup that describes what we see. We try and be as semantic as we can and discuss the challenges of that as they come up. We don#8217;t hellip;/p

pHTML5 has a bunch of form-specific features that all make forms on the web better. Browser support for the features is all over the map, but many of the features can be thought of as progressive enhancement, so if it hellip;/p

pPutting a border around the inside of the browser window is such a simple little idea and can be a nice design effect. But how do we do it so that the borders don#8217;t scroll away as the page scrolls? hellip;/p

pAnimations, like transitions, can alter page elements over time. Animations are more powerful and more complex in many ways. You need to declare an animation with a special syntax before you can use it, which allows you to specify values hellip;/p

pHTML5 has an incredibly simple method for storing persisting data called codelocalStorage/code. Natively, you just call a method with key/value pair and that is saved (pretty much) forever. Knowing the key, you can retrieve it at any time. This hellip;/p

pTurns out there is a simple way to accomplish gradients on borders. That took me longer than it should have to arrive at though, this screencast covers all the ways I tried and looked at along the way./p

pa href=https://css-tricks.com/examples/GradientBorder/ class=buttonView Demo/ahellip;/p

pPseudo elements are visible elements on a web page that aren#8217;t #8220;in the DOM#8221; or created from HTML, but are instead inserted directly from CSS. This allows you to do lots of neat design-y things without cluttering the markup. Pseudo hellip;/p

pFollow along as we use a few very simple CSS3 transitions to create a #8220;slideup#8221; box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a more descriptive stylized hellip;/p

pThe Drawing Table is in essence a mini one-page jQuery application. It has one primary function, creating a colored design by changing the colors of cells in an HTML table. However it has many features to make this as easy hellip;/p