Spriting with <img>

Sprites aren’t limited to background-image, as with the object-fit and object-position properties we can nudge an inline image around its content-box to act just like a sprite. For example, let’s say we want the image below to be added to our HTML page like a regular ol’ image:

<img src='sprite.png' alt='Icons'> 

Then we’ll crop the image so that only the first icon is visible on screen:

img {
  object-fit: none;
  object-position: 0 0;
  width: 100px;
  height: 100px;

Sprite image cropped to reveal the world icon

Here, the content-box of the <img> should be 100px wide and 100px tall, but because the image extends beyond those boundaries, it’s automatically cropped for us with object-fit: none. We might then want to use a class to nudge the image and reveal another part of it altogether:

.book {
  object-position: 0 -234px;

Sprite cropped to reveal the book icon

These sprites can be in any regular image format but it’s also possible to use the same technique with SVG. Here’s an example that currently works in the latest stable version of Chrome:

See the Pen Sprites with object-position by Robin Rendle (@robinrendle) on CodePen.

Image Slider

Using a dab of JavaScript, we can actually use this same concept to create an image slider out of a single <img> tag. When the image is clicked, just change some classes which change the object-position.

See the Pen SVG sprite with object-position by Robin Rendle (@robinrendle) on CodePen.


Keep this in mind for the future, since unfortunately the browser support for object-fit isn’t particularly great at the moment. The current desktop versions of Safari and Firefox don’t support it and neither does iOS. So make sure to double check the almanac entry for object-fit before using this trick anytime soon.

Spriting with <img> is a post from CSS-Tricks

Original Source

First Impressions of Photos for OS X: 'Vast Improvement' Over iPhoto

Following the release of the first OS X Yosemite 10.10.3 beta to developers this afternoon, the embargo has lifted for media outlets to publish their first impressions and hands-on reviews of the all-new Photos for OS X app. Below is a roundup of some of the more interesting comments and opinions about Photos for OS X, which combines iPhoto and Aperture into one for OS X Yosemite.

Photos for OS X
The Wall Street Journal describes Photo for OS X as a significant improvement for users in the Apple ecosystem, adding that the app is less confusing to use than iPhoto thanks to an improved iCloud-based approach. It also found Photos for OS X to have snappier performance than iPhoto based on the Apple-provided demo notebook.

“If you choose to turn it on, all of your Apple devices feed all their full-resolution photos into iCloud, making them all available over the Internet to the Photos apps on all your Apple devices. […] You can see the advantage to all this when you edit photos. With iCloud, any change you make on one device will show up moments later everywhere else.”

Wired was also impressed with Photos for OS X, describing the software as a “vast improvement” over iPhoto and praising its new built-in photo editing tools. It believes that, while some professionals might opt for Adobe Lightroom and other tools, Photos for OS X is an ideal photo management and editing solution for most Mac users.

“Advanced users, particularly those operating on 5K iMacs or Mac Pros, may be happier eventually switching to Adobe Lightroom—though most of them probably have done so already. But for most of us, particularly recent Mac converts and people who may not fancy themselves serious photographers, Photos is a welcomely humble way to approach image editing.”

Even further praise of Photos for OS X was provided by Re/code, which described the software as a “huge improvement” over iPhoto with easy-to-use editing tools and seamless iCloud syncing. Its hands-on impressions found Photos for OS X to be lacking some advanced editing tools found in Aperture, however, noting that some users might opt for professional software.

“While Photos offers some advanced settings like white balance and level, it lacks some of the professional-level tools found in Aperture. For example, it doesn’t have brushable or curve adjustments and doesn’t support splitting and merging libraries. And you can’t add custom metadata fields in the app.”

The Verge went hands on with Photos for OS X and walked away impressed, noting that it handles large photo libraries much better alongside more powerful photo editing, sharing and syncing options. As with other publications, it found Photos for OS X to be more suitable for beginners than professionals.

“iPhoto was never one of Apple’s most beloved products. Every year, it seemed slower and less connected to the phone — the place where most photos are taken. Photos for OS X does a lot of things right, but mostly it’s just fast and tightly integrated with your other devices. It feels like a big step forward, even if feels overdue.”

Yahoo Tech claims that much of Photos for OS X will be a familiar experience for most Mac users, noting that power users will be impressed with the several photo parameters that can be adjusted. The review finds that Photos for OS X gives up some iPhoto features, however, including flags, star ratings, events, round-trip editing in other apps and sorting albums by keyword, title and rating. Many professional options from Aperture are also missing.

“If you’re happy with iPhoto and Aperture now, you should feel no hurry to switch over when Photos comes out this spring (as part of the free Yosemite 10.10.3 update), unless you want that iCloud Photo Library feature. Which would be understandable. […] Someday, yes, there will be some OS X version that can’t run today’s iPhoto and Aperture at all. But that’s years away. In those years, Apple has plenty of time to bring Photos’ feature list up to code, and you can freely keep using iPhoto and/or Aperture and Photos, side-by-side on the same Mac.”

Overall, Photos for OS X appears to be a significant improvement for users migrating from iPhoto, but a step down in functionality for those coming from Aperture. A number of other publications have shared first impressions and hands-on reviews, including CNET, Engadget, Macworld, Mashable and SlashGear. Photos for OS X will be available as a public beta soon ahead of a Spring launch as a free update on OS X Yosemite.

Recent Mac and iOS Blog Stories
SwiftKey Keyboard for iOS Updated With Emoji, Flow Typing on iPad
FiftyThree Makes All Drawing Tools in ‘Paper’ iPad App Free of Charge
‘Tweetbot 2’ Yosemite Update in the Works, Will Be Available for Free
Universal Pictures to Release Steve Jobs Movie on October 9
Verizon Drops Many Data Plan Prices by $10 Per Month
iOS Continues to Lead in Mobile Ad Revenue Despite Increasing Competition From Android
HTC Calls Out Apple and Samsung in New Rap Video ‘Hold the Crown’
Hands-On With Olloclip’s New Telephoto/Polarizing and Macro 3-in-1 Lenses for iPhone 6 and 6 Plus

Original Source