50 Shades of CSS3 background-size

Back in the days when CSS3 was new and really exciting I discovered the "background-size" option. It's a really greatthing and probably important to at least everyone who's builing retina-ready sites. But there are a lot of more interesting ways to use it. Here are my favorites:

background-size:cover;

As you can see in these two example pictures the whole box is covered by the background without changing the proportions. This means that you'll probably never see the whole background because there is always a part which is cut off. On devices with "land screen" orientation you probably parts of the upper and/or the lower. On "portrait" orientated devices you're more likely to see the left and/or right side being cut.

It's like a mix between "100% auto" and "auto 100%" according to which orientation is used.

.box {
width:400px;
height:225px;
background:url(http://37.media.tumblr.com/a35a6be745f3f60dda5bc4734184ba17/tumblr_n5w6lctTqq1st5lhmo1_1280.jpg) no-repeat center center;
border:3px solid #ff0000;

background-size:cover;
}

 

background-size:contain;

With "contain" the whole background image is always visible. No cuts and no change of proportions. I thinks it's clear and one example image is enough.

It's like a mix between "100% auto" and "auto 100%" according to which orientation is used.

.box {
width:400px;
height:225px;
background:url(http://37.media.tumblr.com/a35a6be745f3f60dda5bc4734184ba17/tumblr_n5w6lctTqq1st5lhmo1_1280.jpg) no-repeat center center;
border:3px solid #ff0000;

background-size:contain;
}

 

background-size:100%;

With "100%" it's finally getting more interesting. "100%" is the same as "100% 100%" which means 100% width of the box and 100% height of the box is covered by the image. With this set your background image will probably neither remain it's original proportions nor size. But nothing will be cut of, too. 

.box {
width:400px;
height:225px;
background:url(http://37.media.tumblr.com/a35a6be745f3f60dda5bc4734184ba17/tumblr_n5w6lctTqq1st5lhmo1_1280.jpg) no-repeat center center;
border:3px solid #ff0000;

background-size:100%;
}

 

background-size:100% auto;

Now "100% auto" is really interesting - I discovered it only not that long ago. It stands for 100% width and auto height. So your background image will remain it's original resolution. But nothing will be cut of (if your screen height is not to small), too, at any size. It's great for designing responsive websites where you want to have something always in 100% at the top and height doesn't matter.

In this example it's used in combination with "background-position:top center":

.box {
width:400px;
height:225px;
background:url(http://37.media.tumblr.com/a35a6be745f3f60dda5bc4734184ba17/tumblr_n5w6lctTqq1st5lhmo1_1280.jpg) no-repeat center center;
border:3px solid #ff0000;

background-size:100% auto;
}

 

background-size:auto 100%;

The opposite of "100% auto" is "auto 100%". It does the same thing but uses full height instead of full width. So it resizes you're image to always be in full height without changing proportions. Never needed this but there are probably some use cases for this, too.

.box {
width:400px;
height:225px;
background:url(http://37.media.tumblr.com/a35a6be745f3f60dda5bc4734184ba17/tumblr_n5w6lctTqq1st5lhmo1_1280.jpg) no-repeat center center;
border:3px solid #ff0000;

background-size:auto 100%;
}

 

Others

Of course there are a lot of other ways to resize your background image (at least 45 others). Like using fixed width pixel sizes or not 100% but 70% or 13% or whateever. In combination witth multiple background multiple positionings, etc. it looks like there is an infinite amount of ways to use it. So have fun with it and I hope this article helped you.

P.S.: Here is something to play with: http://jsfiddle.net/e9w4y/

http://supercode.co/s/4c7

WWDC 2014

I think all of us watched the WWDC today. Or read about the new features of OS X 10.10 "Yosemite" (yes, the new operating system is called after a national park) and iOS 8. So I thought I'll grab just some of the new features and write about them. Any other features are lengthy described on 9to5mac or Engadget or wherever.

But first things first:

The URL is dead

© 2014 Apple Inc.

© 2014 Apple Inc.

Maybe it's a minor feature but it grabbed my attention. Take a look at the URL bar above. It's looks like the one on iOS and I guess it works like it: It only displays the domain. That's a thing I read a lot about lately. Because Chrome changed it's URL bar in the same way in it's latest canery build, too and everybody reported about it and called it kind of the "death of the URL". And as it seems they're probably right with this prediction.

Alfred Spotlight

© 2014 Apple Inc.

© 2014 Apple Inc.

Do you know this little Mac App called "Alfred"? It's main interface is a bar which appears in the middle of the screen and let you enter commands, search terms and a lot of third party stuff. Is it shown on the image above? No, that's the new "Spotlight" which randomly appears to look like Alfred. But a little bit more beautiful.

Hopefully someone will create a mod which allows to add the third party Alfred stuff to the new spotlight like this mod redirecting Growl notifications to the notification center. And like Growl I think Alfred will have a hard life after the release of OS X 10.10.

Airdrop

© 2014 Apple Inc.

© 2014 Apple Inc.

The refreshed AirDop allows you to transfer images and data between your Mac and your iDevices. The announcement resulted a lot of applause. But I think it's not really a new feature. It's more like a bugfix. Because it should have been shipped already with iOS7. I mean that's what everybody expected back than.

I'm currently using Instashare for this purpose - but I think this is now another doomed app.

Mail

© 2014 Apple Inc.

© 2014 Apple Inc.

It looks like Apple thought it's Mail App wouldn't "pop" enough. So they added an inline image editor - a feature I'll probably never use. But the new Mail App design looks nice anyway.

Another new Mail feature is "Mail Drop". This feature simplifies the way you're sending large attachment. It won't send them directly attached to your mail but upload it on an external server.

It's like uploading files to Dropbox and just send the URL to the file via mail. Just a little better.

Messages

© 2014 Apple Inc.

© 2014 Apple Inc.

Messages is probably the App which changed the most. It now synchronizes sent and received SMS with your mac and vice versa.

It also adapted some WhatsApp features like group conversations, naming chats and voice messages.

Oh and one more thing: You can now accept calls via Mac and/or iPad. It's like Skype. Without Skype.


Unanswered questions

There are still some things I like would like to know. What happens to the Dashboard? Why always adding stuff but never cleaning up? Nobody needs Launchpad or Chess. And many more.

What are your unanswared questions? And what do you think about OS X 10.10? Tell me @derStadtpirat


Tl;dr

It could have been worse.

http://supercode.co/s/4c5

Weekly Recap

Time for the next weekly recap:

  • Dear Europe we are sorry
    After 25% of the frensh poeople voted for "front national" there are some (probably) designers who doesn't support this party. Even if this website won't change anything it looks quite nice.
  • Google Self Driving Car
    Google released a video of it's cute self driving car. It doesn't even contains a steering wheel or pedals. Everything is calculated by sensors.
  • The mysterious closing of TrueCrypt
    What first looked like a hack seems to be real now: The end of TrueCrypt.
  • Fuffr
    I don't know how this case works - but I would love to own one.
http://supercode.co/s/4b6

LanguageInstantInstall

There is one thing I always loved about Textpattern:
The language handeling.

You just had one list with all available languages and an "Install" link. After you clicked the link the language was downloaded, installed and ready to use.

ProcessWire handles language install a little different: There are language repos with json files containing the translated strings in it. To install a language you would have to create it manually (insert a name, add a title, etc.) and upload the language files afterwards. That's not what I would call "simple". So I made a module: LanguageInstantInstall

It adds this great Textpattern feature to Processwire and makes it a little easier to install new languages. Read more about it.

I did some bugfixes on it today and uploaded it finally to GitHub. Maybe it even becomes a core module - who knows.

What are the features you love most of your CMS? Tell me @derStadtpirat.

http://supercode.co/s/4c1

Capture Screen Casts as .gif with LICEcap

There is nothing better than a screen cast if you try to explain something. But sometimes it's just a little thing you would like demonstrate. A little interaction. Taking and cropping and uploading a video would take a unpropotional amount of time. The solution is called: LICEcap.

I know that you love .gifs. I guess we all do. These little animated images everywhere in the world wide web. But a .gif doesn't have to include a cat. Or afunny moment. A .gif can also be used as something ... productive.

Look at this video gif for example:

It took like one minute from taking to publishing it. And it was really easy.

LICEcap

The only thing you need to do is download LICEcap (it's free).

After downloading and moving it into your application folder you can launch it.

A border is going to appear - like in the gif above. Just move the border to the place you want to capure and resize it to fit your needs.

Now press "Record", choose the directory you want to save it into and wait three seconds (a counter appears on the bottom left corner of the app). Afterwards just do what you want to demonstrate and press "Stop".

That's all. Have fun with it!

http://supercode.co/s/4bc