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:
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.
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.
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":
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.
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.
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
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.
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.
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.
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 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.
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
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.
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.
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.
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".