Tag: images

Responsive Images in Practice

62% of the weight of the web is images and that’s growing every day. On small or low-resolution screens, most of that data is waste. This article by Eric Portis gives you the low down on how you can do your part for making the web faster…
csshead 0 Comments

Clown Car Technique for Responsive Images

We can use media queries within SVG to serve up the right image. The beauty of the “Clown Car” technique is that all the logic remains in the SVG file. It’s called the “Clown Car” technique since we are including (or stuffing) many images (clowns) into a single image file (car)…
csshead 0 Comments

CSS Creatures

CSS Creatures allows you to simply send out a tweet with your chosen characteristics, and, in less than 20 seconds, your new friend will appear among his siblings…
csshead 0 Comments

CSS effect: space images out to match text height

Make several fixed-width images change their spacing to stay lined up with accompanying text, no matter the window size or text size…
csshead 0 Comments

CSS3 Image Styles

If you apply CSS3 inset box-shadow or border-radius directly to an image element, it isn’t rendered properly by the browser. You can fix that by applying the image as a background image. Here’s a set of impressive examples using box-shadow, border-radius and transition to create various image styles…
csshead 0 Comments

CSS background image hacks

Emulating background image crop, background image opacity, background transforms, and improved background positioning. A few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers…
csshead 0 Comments

Supersize that Background, Please!

With an advertising world keen to use every inch of a medium for brand or product experience, it is becoming increasingly popular to design websites with full-browser backgrounds. Using CSS, this can be achieved quite easily. Just drop a huge background image in a page with one line of code. But which image size will […]
csshead 0 Comments

Flip an Image

You can flip images with CSS! Possible scenario: having only one graphic for an “arrow”, but flipping it around to point in different directions…
csshead 0 Comments

Snazzy Hover Effects Using CSS

With all these CSS3 effects and tutorials popping up every day that show all the new and wonderful things we can make happen, we sometimes forget about poor little old CSS2.1 and the great potential it still has.With very good browser support, we can do lots of cool things that we know will work in […]
csshead 0 Comments

Rounded corners on images, CSS-only

Admit it, even though rounded corners are widely seen as overused, you love playing with border-radius. A common complaint is that you can’t use that CSS3 property on images. Define any value, and the images will still display as nature intended: straight corners. For a project I’m working on, it would’ve been really nice having […]
csshead 0 Comments
Next Page »