CSS-Tricks Screencasts

The buttons on CSS-Tricks, at the time of this video, have a faux 3D effect. They look like a blue brick you are looking at from above at an angle. When you press down on them, their :active state is triggered (like all links/buttons/inputs) and the CSS moves them down and to the right, appearing as if you are literally pressing the brick down into the surface a bit. What's the problem? When you move an element like that (in …

Forever we all made 16x16 graphics and got them into the .ico format somehow. I probably used this converter tool a million times. Somewhere along the line it started to get more confusing. Browsers can support .png favicons too. And now there are retina displays, and nothing looks worse on retina than little tiny graphics scaled up. Browsers are starting to support 32x32 favicons now too. What are we to do? The situation is that if you provide both, many …

The perfect CMS to suite the needs of any non-trivial content-oriented website does not come out-of-the-box. They require customization. For instance, a feature article for a news site isn't just a title and content anymore. It's a title, optional subtitle, alternate short title, blurb, full content, related articles, featured image, optional featured video, and optional slideshow/slides. If your CMS can make those fields available on the entry screen, that's a recipe for success. This screencast covers customizing WordPress to be …

I've never messed with creating custom Sublime Text snippets before. So when James Nowland sent one in, I took the opportunity to learn. Here it is: <snippet> <content><![CDATA[ @include breakpoint(${1:papa-bear / mama-bear / baby-bear}) { ${2:} } ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <tabTrigger>mq</tabTrigger> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet> The point of this particular snippet is to help with …

In this screencast we live answer more forums posts with no planning whatsoever. I don't think we hit a homerun on any of the threads we look at, but that's the lesson. You don't have to have the answers to everything to be a useful forum member. Just a few thoughts and your related experience can be helpful in nudging the original person in the right direction.…

CodePen PRO offers a slew of new features. You can read about them, but much better to show them right? [Deep awesome voice]: and this is just the beginning.…

I've never in my life submitted a "Pull Request" on GitHub. I wanted to give it a shot, so this video is capturing the moment of me attempting to figure it out. Fair warning, this isn't a succinct, quick tutorial. This is me thinking to myself and struggling through it all. My idea was that I wanted to put FitVids.js onto cdnjs so people can link it up through there. Their process for doing that is by forking their GitHub …

In this screencast we pop over to The Forums to answer as many questions as we can. The point is just to have a little fun and show you how easy it is to contribute to the community. Become a good member there, and next time you are stuck your chances of getting help skyrocket! You don't have to be a super genius at everything. I'm certainly not and I prove it in this screencast by not having a good …

Even if the layout of a site is simple as a main content area on the left and a sidebar on the right, that's a grid. There are new layout methods in CSS that are getting closer to prime time (like flexbox and grid layout) that will be very great for grids, but for now, floats are still doing the job. I see a new grid framework just about every week. I think this saturation of grid frameworks gives rise …

I present four really simple things you can do to make your websites faster. Nothing even as complex as making image sprites (which ain't that complicated). These are all easy wins with big possible performance gains. Plus, we handle a "Performance Troll" at the end. Links from the video: HTML5 Boilerplate gzipWTF.com Billy Hoffman - Zoompf.com Steve Souders - 80/20 Paul Irish W3 Total Cache …

As we've said around here many times: icon fonts are awesome. They are efficient in the same way CSS sprites are efficient: lots of images usable for different areas/purposes in one single download. But they are even more awesome than sprites because they are vector and so can scale to any size, be shadowed, change color, and more. They also look fantastic on retina displays (or displays of any size and resolution, really). To be the most efficient with your …

CodePen is an app for sharing and playing around with front end code. I made it with some friends of mine: Alex Vazquez and Tim Sabat. In this typical ramble-ridden screencast I introduce what it is, what it's for, how to use it, and some of its fancy features.…

There is nothing to be afraid about in this brave new world of preprocessing. Native apps make it so easy that it should be a vital part of any modern workflow. In this video we have a simple project in which we use Jade and Sass on. We use CodeKit to watch the project, which not only makes the preprocessing trivially easy, but helps in more ways like refreshing the browser, injecting styles, and optimizing images. Links from the video:…

This is a quick beginner-level overview of the different CSS position values. In a nutshell: relative allows you to "nudge" and leaves the element's original position in the page flow. Absolute and fixed allow for exact placement of elements and remove them from the page flow. Fixed positioned elements are unaffected by scrolling. All of them set a new positioning context and allow z-index to work. Links from Video: Dabblet Position (on MDN) …

In this screencast I move my own personal website from my old live FTP editing ways to a proper version controlled system including deployment. I haven't had much experience with this, so forgive me if it's a bit rough. We start by moving the live website local, including bringing all the files down and copying the database. Then we set up a Git repository in Beanstalk and push it all up to that. Then we give Beanstalk our FTP credentials …