Chrome, Opera, and Safari have already shipped CSS Shapes, and we’ve made a CSS Shapes polyfill available for browsers that don’t have the feature yet. For regular shapes and arbitrary polygons, there’s support in Brackets and Chrome’s web inspector.
Now that there’s support, how about creating CSS Shapes with images? Rebecca Hauck wrote an article about how to create image shapes with Photoshop. Today, I want to show you an awesome way to create masks using the Mac Preview application. Preview has some neat photo editing capabilities, which we can use for creating image-masks with an alpha channel. We then, use these image masks to create breathtaking responsive designs for the web for our shapes images. Notice how the text wraps around the tree, conforming in a cozy way to its shape:
How is it made?
First, let’s pick an image. I took the following photo recently in the wilderness of the Yukon.
My plan is to make this image as wide as the actual page size, and place the text content on the image. The text will appear on the white clouds and wrap around the trees. The image and the font-size will scale as I resize my browser window. In order to achieve this behavior, I’m going to make an image-mask. Using an image mask causes the content to wrap around the shape I’ve created. This means I don’t need to add any alpha to the original image. The mask scales as the image scales, so the whole experience is going to be smooth and visually appealing.
How to mask an image using Preview?
I recorded my screen while making the mask in Preview. Take a look at it first, then I’ll explain the steps below the animation.
- In Preview, select the Edit button (). This opens the editing toolbar.
- With the Instant Alpha button (), select where the content should go:
- Click on the clouds and keep the mouse button pressed. Now, slowly start moving the mouse. As you move the mouse, the smart selection will spread out.
- When you’ve highlighted the area that you want the text to wrap around, release the mouse button.
- Hit the delete button on your keyboard to remove the selected area.
- Reselect the transparent (gray) part and then invert the selection by hitting Shift+Command+I.
- Get rid of mask colors. (Doing so reduces the mask file’s size.)
- Hit the Adjust Color button ().
- On the Adjust Color window, move the left level adjustment bar to the very right. This moves all the shadows onto the highlights and removes the lights and colors from the picture.
- Preview sometimes leaves some pixels lightened, so move the Contrast bar to the left to make sure that we removed all the highlights.
- Save the image. We are going to use it as a value for the shape-outside CSS property.
How to connect the shape mask with the image and the content?
We need to add our original image as an <img> tag following by some content. CSS Shapes works on floating objects, so after making the image a floating object (line #3) and setting the size of it (line #4), we need to define the shape-outside property. For shape-outside, we use our shape-image mask (line #5). To make the text size responsive, I recommend using viewport units as I did in this code snippet (line #7) and also in the codepen.io demo.
The original demo contains a little bit more code and includes the CSS Shapes polyfill when the browser doesn’t support CSS Shapes. You can view the code in detail on codepen.io.
Our team is starting to look at SVG on the web and in our tools and at ways it can be better. We would love to hear your input and where you’ve hit problems using SVG. Whether it’s inconsistent behavior across browsers or challenges in Adobe tools when working with SVG – we want to hear it all!
Your feedback in the comments here would be greatly appreciated or send us a tweet @adobeweb with the hashtag #BetterSVG.
This past week the Web Platform team went on the road (all 1.4 miles of it) to HTML5 Dev Conf, a gathering of people from many different backgrounds coming together to discuss all things web. Popular topics included new features in the web platform, effectively delivering content across devices, and reimagining the internet of the future. Our team gave two presentations at the conference, one on icons on the web, and one on CSS Shapes, a method of customizing how inline content wraps around floats.
Icons and the Web
Bear Travis discussed why icons are important, and some things to keep in mind when designing, authoring, and packaging them for the web. He covered several different methods of using icons, including fonts, sprite sheets, stacks, symbols and raster and vector images.
His slides are posted on github.
Freeing the Floats of the Future from the Tyranny of the Rectangle
Bem Jones-Bey gave an introductory talk on CSS Shapes. CSS Shapes specifies a series of properties that customize the wrapping edge of a float, allowing inline content to follow contours much more interesting than those of a simple rectangle. Bem discussed the various CSS properties, what they do, and more importantly, what effects can be achieved by using them.
His slides are posted on github.
A month ago I attended the second Extensible Web Summit, held this time in Berlin. I blogged about the first one back in April. Hopefully we’ll see more of these events in the future. All of the sessions were collaboratively minuted, so you can read through the notes and see what was discussed.
What is the Extensible Web?
The first main session was a conversation about just what an extensible web means. There has been a lot of talk about exposing underlying primitives in order to make features less magic and more extensible. I made the point that the word primitive can be a trap. It’s not always the lowest-level primitive that needs to be exposed for extensibility. Sometimes the best strategy is to provide a relatively high-level API underneath an even higher-level feature (as long as the API we expose now does not preclude going deeper in the future).
As an example, take some proposed CSS wizardry like float:bottom. We could provide a high-level feature like this with nothing more than an API to set a new ‘bottom’ keyword. Or we could delve the depths of layout mechanics and box trees to expose the primitive mechanisms from which this high-level feature could be implemented from the ground up. I don’t think either extreme is a viable approach. The highest level feature isn’t adaptable enough to be extended to new use-cases. And the lowest-level delving is way too much effort to build out one new feature.
There’s lots of room between the extremes. Analyzing the magic behind a high-level feature can help desribe a slightly lower-level feature, and you can add APIs for the next level down. It might turn out that grid layout gives enough expressive power to solve the use cases for float:bottom, while providing the necessary adaptability for similar use cases. And it might make sense to provide a bit of introspection into the details of grid layout, so that script can refine a responsive grid in ways difficult to express declaratively in CSS. Iterating on features in this way gets us closer to the lowest level primitives at each step.
Getting Developer Input
One main reason for these events is to bring developers together with standards people and browser implementors. The web needs input from the people using the platform to set priorities and evaluate proposals. One session at this event was a discussion on how to get more developer input in web standards. Robin Berjon described some of his efforts that will bring discourse-style forums to webplatform.org.
It turned out that quite a few developers at this session had worked (separately) on the difficulties of providing a good editing environment on the web. This is an area with a lot of current interest in the standards community. Hopefully the connections made at this conference will lead to a clearer set of editing APIs focused on the needs of these developers who have already put so much effort into this problem.
I had brought up the topic of a common debugging protocol at the first summit. This time I got to meet Kenneth Auchenberg, who is behind remotedebug.org (the site that sparked my interest in the topic). We talked a bit about what Mozilla has been doing mere minutes before they announced their new debugging add-on that lets you use Mozilla tools when debugging on iOS and Chrome on Android. Kenneth just gave a presentation at Fronteers detailing other efforts around making web debugging more interoperable.
The next Extensible Web Summit is tentatively planned for spring of next year in the bay area. Please consider attending if you’re near by. Sign up at specifiction and add your ideas on where the web platform should go. And please provide feedback on what we’re doing on the Web Platform Team at Adobe.
On September 18, the Adobe Web Platform team held a great event at the 111 Minna Gallery in SF. We called the event Evolving the Design Palette for the Web and invited designers from all over the Bay Area.
We were lucky to start the evening with a fantastic guest speaker, Michael Janiak, Creative Director at Fluid. Michael ignited the crowd with his talk on the current state of designing for the web (see his slides here). He noted that the first 25 years of the web were technology-driven and now the next 25 years will be expression-driven. In other words, the way the web evolves will be determined by creative aspirations of designers, not developers. His talk ended with a Call to Action for designers stop compromising on their creativity, engage with teams like ours at Adobe, and more generally, have their voices be heard within the open web community.
Michael’s talk was followed by drinks & a DJ and a lot of mingling where we met a lot of designers and started to learn about the challenges they face. While our team had many conversations that evening, some of our key takeaways were:
- Designers are frustrated and feel disenfranchised
- Animations on the web are very difficult
- Fonts & text rendering and layout is a challenge on the web
- Faster execution is often a limiting factor, not necessarily whether something is technologically possible
- Designers rely heavily on tools and look to them to help solve difficult problems
We’ll to continue to engage the great group of people we met that evening and with the broader design community. We are doing this to inform the current and future work we’re doing, and to advocate for designers who are compromising when bringing their creative ideas to the web. If you’re a designer who is as passionate as you are frustrated with the web today, let us know what challenges you face! Feel free to mail us directly at firstname.lastname@example.org.
As a design pattern that predates movable type, initial letters or “drop caps” remain quite common in books and magazines today. They can be merely decorative, they can help navigation by emphasizing the beginning of a new section, or both. Yet they seem comparatively rare on the web and are even more obviously missing in most e-books.
What is missing?
Though CSS offers the basic layout mechanisms needed for initial letters – floats and ::first-letter – the solution is incomplete. For the result to be visually appealing, a drop cap has to align with its adjoining text in a specific way. The diagram below shows how the baseline of the capital “H” should rest on a baseline of the adjoining text; and how, in the most common case, the top of the H should align with the top of capital letters in the first line.
Through careful adjustment of various properties – font-size, height, margin, line-height… – one can achieve a similar result in CSS. There is a catch: the resulting set of layout values will be tightly coupled to the metrics of a specific font family. If font fallback occurs, the alignment is lost. Any change to the original page design – new font size, a change of paragraph line-height – will also require updating all these values.
As an example, here is an initial letter in the online New Yorker:
Though this capital “I” is a little short – its top is lower than that of the capital “U” in ‘Utah’ – its baseline does line up well with the third line of text. But if the preferred Neutraface family does not load and the browser falls back to the next specified family, we would see this when the layout defined for Neutraface is instead applied to Helvetica Neue:
Often, no baseline alignment is even attempted. For instance, in this Vanity Fair article the baselines of the initial letters do not line up with those of the adjoining text. Dave Cramer collects more examples on his tumblr.
The initial-letter property
To fix this, the CSS Working Group is discussing the initial-letter property specified by Dave in the CSS Inline Layout module (The alignment diagram we used earlier was copied from the specification). Since earlier this month, you can try it out in Webkit Nightly.
It is very exciting to have a native implementation to play with, though there is of course more work to do to finalize the feature design and implement it across browsers.
On September 17th 2014, Apple released iOS8 which included the new Safari 8, featuring improved support for CSS Regions. We take this opportunity to highlight the most important changes from the previous version:
- Correct painting of content overflowing the region chain
We completely redesigned the way overflowing content is displayed in regions. Starting with Safari 8, the content is no longer clipped at the region’s content box, but properly overflows the region. Furthermore, using
position:relativeon the flowed content doesn’t affect the way it is fragmented across the region chain.
In Example 1 below, if you hover the orange button, you will notice that using
position:relativeon the content causes it to overflow the regions and be properly painted.
scrollingof content in regions
You can now set the last region in the chain to
overflow:scroll. In such cases, the last region will properly scroll its content. When the scrolling limit is reached, the scroll effect is applied to the region’s container. We created the codepen in Example 2 so you can test this behavior by scrolling the right most region. Besides this, we ensured the
scrollIntoViewmethod now works as expected.
- Improved rendering performance for content inside regions
- With the new Safari, the HTML content requiring hardware acceleration (e.g. video) is rendered using the GPU even when displayed inside regions. This way, if you use CSS Regions for your design, you will not incur any performance penalty.
- Flowing fixed positioned elements into regions
With the new release,
position:fixedelements flowed into regions are spec compliant. They are now correctly sized and positioned relative to the viewport and not the first region in the region chain.
Improved, fully spec compliant
Thanks to the collaboration with our colleagues from Igalia, we managed to improve the way selection of content displayed in regions works. You are now able to combine in a single selection content from a region chain and from outside the region chain. Of course we ensured that, even when combined with CSS Regions, selection is still spec compliant, following the DOM selection. For more information, we highly recommend the blog post from Igalia developer Manuel Rego Casasnovas.
- The WebInspector received some great new features for helping developers use regions. As you can see in Example 3, one of the most obvious additions is the highlighting of the entire region chain and providing information about the flow thread when hovering one of the regions.
These are the major changes related to CSS Regions that you’ll find in Safari 8. We hope you enjoy using regions as much as we enjoyed building it and we’d love to hear your opinion in the comments section below or on our twitter account.
In June 2014 at the Worldwide Developer Conference, Apple announced that Safari 8 would ship with support for CSS Blending. With the recent release of iOS 8, you can now use blend modes on your Apple mobile devices! OS X Mavericks users who update Safari to version 7.1 can also start experimenting with this new feature. And this is not the only good news: Firefox recently enabled the mix-blend-mode CSS property by default in version 32, released on September 2, 2014.
Safari and Firefox are the first browsers to ship the CSS Blending feature! These implementations are based on the CSS Blending specification – which has reached W3C Candidate Recommendation status. There are a few remaining work items to be completed in these two browsers: the non-separable blend modes in Safari and the CSS
isolation property in Firefox.
Chromium also has a complete implementation of the CSS Blending specification: the background-blend-mode property is supported by default, while mix-blend-mode and the CSS isolation property are available behind the experimental features runtime flag. You can play with the full implementation of blend modes in Chromium-based browsers (Chrome and Opera) by enabling this flag.
Want to know more about CSS Blending? The Adobe Web Platform Team’s website contains additional information about this feature, along with a list of useful resources that will allow you to create compelling visual effects using blend modes.
Please share your thoughts and experiences regarding CSS Blending in the comments here, or on Twitter.
The last few weeks have been exciting for CSS Shapes. At the end of August, Shapes shipped in Chrome 37. Then in early September, Opera 24 also shipped with support for Shapes. And now, iOS 8 just launched with Shapes support in Safari! Also, support for OS X versions of Safari will be coming soon.
What is CSS Shapes?
CSS Shapes allows you to build layouts like this on the web. In this example, the text content wraps around the contour of the hanging-lamp and the wall (photo and demo by @ZoltanWebkit). The contour of the shape is defined by a polygon with the help of the CSS Shapes Editor. (Note that this example uses the CSS Shapes Polyfill, so it works in all browsers.)
But can I really use it now?
Yes! Even though Firefox and Internet Explorer don’t support CSS Shapes yet, you can use them today in production. In browsers that don’t support Shapes, you simply get the standard float wrapping behavior. For example, view the following demo in a browser that supports shapes and one that does not.
For cases where having the shape is essential, you can use the CSS Shapes Polyfill, which supports many of the use cases for CSS Shapes. The polyfill is smart enough to use the built-in Shapes functionality in your browser if that is available. For example, here is the previous demo with the polyfill enabled, so it will look great in browsers that support shapes and browsers that don’t. Most notably, if you compare the source of the two demos, you will notice that nothing needs to change but to include the JavsScript for the polyfill.
If you’re doing something more exotic, like emulating shape-inside, then you can use Modernizr — or when they are more widely supported, Feature Queries — to remove or modify the floats when CSS Shapes support isn’t present. The following example does just that.
See the Pen Emulating Shape Inside with Shape Outside, with Modernizr fallback by Adobe Web Platform (@adobe) on CodePen.
Make something cool
We hope you’re as excited about the availability of CSS Shapes as we are. Go out and play with it, and build great things! We’d love to hear about your experiences and the things you build in the comments here, or drop us a line on Twitter @AdobeWeb!