CSS-Swag

So here’s a quick little trick I just learned today! Lets say you have a single, really big background image that you want to resize with your page no matter what size it is. You don’t want it to repeat, because that would look awful, but you want to show as much of it as possible without stretching/compressing it. An issue would crop up as soon as the aspect ratio of the background image didn’t match up with the dimensions of your browser window. So lets say you have background-size: 100%; This would make your image compress to fill 100%…

As hard as I try to not make this site a carbon copy of css-tricks…it just keeps happening. I’m adding a section for code snippets here on css-swag. I’ve noticed that I hack up a lot of random code. And I mean a lot. Unfortunately, most of this code doesn’t actually end up getting used, no matter how cool/useful it may be, and I don’t have time to write up an entire article on how its all done. Hopefully some of you can find some use for all of this random code, because I like to think that some of…

Oftentimes, when designing a user interface, we find the need for a simple component allowing the user to toggle a true/false (or on/off) state. These “switches” have become a fairly common UI element, found very commonly in the standard iOS visual component library. Recently, I’ve been spending a good amount of time building some in-house app prototype screens using Twitter Bootstrap, and came upon the need for one of these components. While bootstrap does come with a great assortment of visual elements (complete with jQuery code to make them functional!), I found it lacking these simple switch components. After a…

I was recently updating my resume, and in doing so, decided to include HTML5/CSS3 into my list of relevant skills. After handing out a few copies of my resume at a certain midwest startup fair, I was confronted about my knowledge of HTML5. As a web developer who has spent most of my recent time digging into WordPress and the hip new Responsive Web Design fad, I hadn’t really had time to consider just what exactly I would say to such a question. What exactly do I know about HTML5? I’ve read several of Chris Coyier’s articles on semantics using HTML5. I’ve…

Pagination is a common functionality that most people expect from their WordPress themes. Nobody wants to wait twenty minutes while 400 blog posts are loaded up onto a single page, and so we set a maximum number of posts for our loop to display, and let the WordPress take care of the rest. Right? Wrong! Unfortunately, WordPress doesn’t really come with functions preinstalled to give us our own easily customizable pagination, and working with plugins can be bulky and increase load times of our site. In this little tutorial, we will work through the following two things: Creating our own sexy…

Hey everyone! Welcome to CSS-Swag.com! A brand new blog dedicated to CSS, jQuery, PHP, WordPress, and just all things web design! My goals for this blog are simply to share my knowledge and work with members of the web design and development community, and do it all with swag!  So if there is anything you’d like to learn, or anything you’d like me to discuss here on CSS-Swag, leave it here in the comments, or shoot me an email at thejordanforeman@gmail.com!  Also, I would like to incorporate guest authors at some point in the future. If you have some good…