Lunarium Design

Replace the Image in an with CSS

Admin — Tue, 21 May 2013 21:04:22 +0000

The following is a guest post by Marcel Shields. Marcel in a difficult place where he needed to change the image on a page but didn’t have access to the HTML. Rare, but I’m sure we’ve all be in weird situations like this. He explains how he managed to replace that image without needing to access the HTML or JavaScript. Also turns out to be a pretty good way to replace anything with an image.

I just wanted to share something I found really cool about using CSS box-sizing. Chris wrote a really good introduction a few years back if you’re not familiar with the property. It makes things a lot more sane when thinking about layout. People love it so much, they put it on everything like hot sauce. I wanted to share how I found it useful as (yet) another image replacement technique.

A few days ago at work, I was asked to replace an on our site with another image hosted elsewhere. Simple right? But the catch was I would not be able to replace the markup as it was already deployed to production, but could inject CSS or JS through our CMS. For whichever technology I chose, it would be inserted on all site pages. I only needed on one specific page, and the attributes of parent containers were non-specific to the desired page.


  Really Cool Page

This is simple to do with JavaScript, but I wanted to see if there was another, even simpler, way. After a few iterations in Chrome Dev Tools, I thought to use the box-sizing property to keep dimensions strict, add the new image as a background image, and just push the inline image out of the way with padding and see what happened.

/* All in one selector */
.banner {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
  width: 180px; /* Width of new image */
  height: 236px; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */
}

It worked beautifully. Here’s what’s cool:

It works on just about any element, even empty ones like or
Browser support is excellent (Chrome, Firefox, Opera, Safari, IE8+) http://caniuse.com/#feat=css3-boxsizing
Refrains from using SEO unfriendly display: none or other properties

That last point seemed important, as it works really well for text replacement too without any adjustment. Check it out!

Check out this Pen!

jQuery Conference Portland 2013 has a limited number of regular tickets still available. Two days. Two tracks. Fresh speakers. Jun 13-14. $ 50 off for members of the jQuery Foundation. Join today and get your first year of fan dues paid for with purchase of both a training and conference ticket. Training provided by Bocoup on Jun 12. Use coupon code CSSTricks25off for $ 25 off.

Replace the Image in an with CSS is a post from CSS-Tricks

CSS-Tricks

Chrome’s requestAutocomplete()

Admin — Tue, 21 May 2013 10:59:12 +0000

Auto-filling forms is nice because it saves time and is less prone to user error. Even better is not even needing to see a form in the first place.

Direct Link to Article — Permalink

Chrome’s requestAutocomplete() is a post from CSS-Tricks

CSS-Tricks

Prepros

Admin — Tue, 21 May 2013 00:51:53 +0000

Is an open-source app modeled after CodeKit. Prepros runs on Windows where CodeKit is Mac only. From people who have tried it, it seems good.

Direct Link to Article — Permalink

Prepros is a post from CSS-Tricks

CSS-Tricks

Slack, the missing concept

Admin — Mon, 20 May 2013 14:40:17 +0000

…that is usually absent in fast-paced environments.This article is oriented to teams with mid-level proficiency in an Agile process, like mine. Impostor syndrome at work or new possibilities to deliver value?James Shore argument (Scrum)James Shore in ‘We deliver business value ‘ talks about aggressively reducing velocity, while lazily increasing it after large measurements. Velocity is not a…
Web Builder Zone – Web design, PHP, RIA, css, html, usability & some Ajax

WinJS: use the same data in the zoomed out and zoomed in view.

Admin — Mon, 20 May 2013 12:55:15 +0000

The Semantic zoom let you display your data in a zoomed out and zoomed in way. It’s really fine when your data is grouped but sometimes you need to display a non-grouped data just in a different way with a different template.
Preview Text:

The Semantic zoom let you display your data in a zoomed out and zoomed in way. It’s really fine when your…
Web Builder Zone – Web design, PHP, RIA, css, html, usability & some Ajax

My Workflow v2: Mobile, DevTools & LiveReload

Admin — Mon, 20 May 2013 07:47:51 +0000

Since I’m at Mobilism 2013 I think it’s worth sharing my recent mobile (mainly CSS) workflow. It’s not rocket science, but it’s a nice follow on from my workflow with devtools I shared a few months back.

Preview Text:

Since I’m at Mobilism 2013 I think it’s worth sharing my recent mobile (mainly CSS) workflow. It’s not rocket…
Web Builder Zone – Web design, PHP, RIA, css, html, usability & some Ajax

18 Websites that Take Scrolling to the Next Level

Admin — Mon, 20 May 2013 06:05:42 +0000

Advertise here with BSA

There was a time when the common practice was to try and place all content above the fold. But now, instead of fearing the scroll, web designers and developers are embracing the need to scroll, and using it as opportunity to engage the user with background reveals, element animations, and other clever effects based on the pages scroll position. So in an effort to inspire you, we’ve gathered a collection of websites that take scrolling to the next level.

Playground Inc.

Shadow

Artem & Julia are getting married

Shaun Dona

Koa Water

Loft City Church

I Shot Him

ISL

Scroll for your Health

Puma Actv

Designed to Move

The Story of the Pound

BTP Design

DSPG

Hot Dot

5 Reasons to Celebrate SoLoMo

Smart Phood

numero10

Web Design Ledger

Video: Building Web Applications with Ember.js

Admin — Mon, 20 May 2013 01:05:19 +0000

Preview Text:

In this talk, Yehuda Katz shows us how Ember can be used to build fast and responsive apps, and shares some nifty aspects of Ember you might not know about.

Legacy
Sponsored:

unsponsored
Web Builder Zone – Web design, PHP, RIA, css, html, usability & some Ajax

Video: Three Keys to Successful Single Page Web Applications

Admin — Sun, 19 May 2013 16:44:04 +0000

You’ve got 100 milliseconds for your web application to engage your
users before they start to feel disconnected from the app. That’s 1/10th
of a second. After a whole second, you’re starting to lose users
completely. This simple fact is motivation enough for many to employ
usage of single page web applications, and in this presentation from
HTML5DevConf, Josh Powell will share three keys to…
Web Builder Zone – Web design, PHP, RIA, css, html, usability & some Ajax

Video: microformats2 & HTML5: The Next Evolutionary Step For Web Data

Admin — Sun, 19 May 2013 11:29:19 +0000

Preview Text:

Tantek Çelik of Mozilla talks about the exciting improvements that microformats2 and newer HTML5 elements bring to structured web data.

Legacy
Sponsored:

unsponsored
Web Builder Zone – Web design, PHP, RIA, css, html, usability & some Ajax