Working with pseudo elements should be a no-brainer for those looking to create lean, semantic HTML, and there’s all sorts of tricks that they can be used for. Upon revisiting inset shadows I found an interesting question posted over at CSS-Tricks; how do you apply an inset shadow to a whole container? So you know where this is going.
Read more…These days, it seems like everyone’s talking about media queries. Whether it’s a showcase of the different sites that use this functionality, or articles that teach us about how to make best use of them, they are generating a lot of interest in the community. Perhaps this is because demonstrating how they work is as simple as resizing a browser window, eliciting an “Oooh” from people who are used to seeing their websites break in anything but a resolution of 1024×768 or higher.
Read more…Black text on a white background is tough on the eye, especially when looking at a computer monitor. I’ve been using the Solarized colour scheme for the last few days and it greatly improves legibility and reduces eye strain. The website includes a number of presets but also gives you the colour codes so that you can type them into an unsupported editor. Well worth a visit.
via @smashingmag
As well as giving you a whole slew of custom cubic bezier animation timing functions to drop into projects, Ceaser makes creating custom CSS animations extremely easy. The tool allows you to manipulate the timing curve using either a mouse or fingertips (on an iOS device), and is well worth using if you plan on creating animations with CSS.
When in the development phase of a website, it’s common practice to use dummy content such as blocks of Lorem Ipsum; why not images too? Sure, you can spend five minutes cropping something that is just lying around in a folder somewhere, or you could do the whole thing programatically. That’s what Dummy Image enables you to do; drop in placeholder images if your client hasn’t provided you with actual content already.
<img alt="Sample Usage" src="http://dummyimage.com/600x400/fff/444.png&text=Hello,+World!">
Great free resource.
Social media icons are great additions to your website, if they suit the aesthetic of the website itself. Many icon packs usually add a lot of gloss and finish to the end icon, something we want to avoid if it doesn’t suit our branding. Happily, this extensive pack by Alex Peattie offers a set of monochrome logos that can be dropped into a project as is, or with some additional tailoring if we wish to do so. The free set comes with AI and EPS vectors as well as PNG and SVG formats and is a great starting point for social media integration into a website.
via @smashingmag
This deal is pretty nifty; $388 in design resources plus $50 off Valio Con for $49. Even if you don’t think that you’ll attend the conference, the bundle is very good value. It combines Billings, an invoice management app; the Pictos font; LittleSnapper, a scrapbooking tool; Icon Jar, containing 181 icons plus more as the guys behind the set add them; Design Then Code tutorials; Smaller, a graphical interface for the YUI compressor and more. You’ve only got seven days (from publish date) so hurry!
This little microsite has a brief overview of the Solar System, but that isn’t the primary reason that you should give it a look; The Planetarium makes extensive use of CSS transitions, transforms and font face. Each planet has its own unique diagram and small blurb and is overall far ahead of more traditional website designs. The whole idea is akin to something you would interact with on display in a science museum, and is well worth taking a look at.
via @smashingmag
Recently stumbled upon Web Standards Sherpa, and for such a young site it already has a few great articles on best practices within the field of web design. My personal favourite article is the latest, Stop Hiding Behind Products; although for the snow melting example it’s pretty clear that the website is poorly designed with many different sections, and lumping all of the snow melters into a generic product category isn’t the only failing here.
Take a look for yourself; visit Web Standards Sherpa.
What are CSS preprocessors? They are frameworks that help you to write more efficient code by introducing new coding techniques such as mixins, variables and nested rules. If used properly, for complex rules they can make a lot of sense, but it is still possible to write inefficient code with a preprocessor. For example, this recent article by Lea Verou examines a simple use of LESS which is very inefficient. A better example would involve different degrees of rotation which would end up looking like this:
Read more…