My Apologies - Vanseo Design

---

My Apologies Posted: 26 Sep 2013 10:30 PM PDT My apologies to anyone subscribing to my rss feed. The feed to my last post, How To Price Freelance Services — Understanding Your Costs, seemed to indicate you needed to be logged in to view the post. You didn’t need to login to view and read it. I’ve been working to set up a few new things on the site, which I’ll announce soon and I left a checkbox in a plugin checked that should have been left unchecked. My bad. At least that’s why I think you received the login message instead of the content of the post. This post will be the test. You can read the previous post by clicking on the link above or this one. It’s an audio post, so if you only want the audio you can find it here. Sorry about that. Hopefully the contents of this post make it to you and my mistake didn’t inconvenience you too much. The post My Apologies appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

How To Price Freelance Services — Understanding Your Costs Posted: 26 Sep 2013 05:30 AM PDT One of the questions I often get asked is how do you price your services? What should you charge when someone approaches you to design and/or develop a website? Since, we’re talking about custom work, the answer, as you might expect, is it depends. I’d like to share some thoughts about what it depends on. Note: This post includes an audio version. If you don’t see the audio above, Click here to listen. Pricing any service based job is a negotiation. All else being equal, you’d like the client to pay as much as possible and the client would like to pay as little as possible. Ultimately the price of any project will be one both you and your client are willing to accept. More specifically there’s a range of prices, below the maximum the client will pay and above the minimum you’re willing to accept. Somewhere in that range is the price you should set for the job. Today I want to focus on that minimum you’re willing to accept. I want to consider how you arrive at your costs and how you use your costs to set a minimum price you’ll accept. Next week I’ll look more at pricing itself. Understanding Costs A lot of advice about pricing web design services is about estimating time and then multiplying time based on some hourly, daily, or weekly rate. I’ve offered that advice myself in the past and it used to be solely how I thought about price. Over time I’ve come to understand that it’s not the best way to price a project. When we estimate our time and effort to complete a project, we’re figuring out our costs, not the price we should charge. We can use our cost estimate to set a minimum price we’d accept for the project, but remember if you set a price equal to your cost, your aren’t making a profit. Tracking Time Most of the cost involved in a service based business comes from the time you spend completing the project. Some projects will require you to make purchases, like stock images, a CMS, or a script of some kind, however most of your cost will come from the time you spend working on the project. Since it will be the bulk of your costs, the first step in understanding your costs is to track your time. Record the time it takes you to complete every project. Even better track the different tasks within that project. How much time did you spend sketching? Researching? Preparing deliverables? There are a couple of reasons to refine your tracking and record the time spent on individual tasks instead of the project as a whole. It helps you better estimate projects as few projects will be the same. Most will be a combination of different tasks. It will help you discover bottlenecks in your process, which you can then improve them in order to reduce your costs. Naturally the above won’t help you figure out how long your first project will take to complete, but within a few projects you’ll have a much better idea, and each project will be that much easier to estimate than the one before. Dealing with the Unknown One of the things I find difficult in estimating how long a project will take is that every project seems to require something I’ve never done before and it’s hard to estimate how long that something will take. It’s one reason why it’s so important to track your time as much as you can. You reduce the amount of unknown in the project so the impact of any unknown is less than if everything was unknown. Many, many years ago I worked as an engineer and one thing engineers apply to the design of buildings and bridges is a factor of safety. In the context of estimating time for a project, a factor of safety is a number you multiply your entire estimate or parts of your estimate by in order to cover some unknowns. The more confident you are in your estimate, the smaller the factor of safety will be. For example I’ve gotten pretty good over the years at looking at a comp and estimating how long it will take to turn into an html/css template. I don’t need to add any factor of safety to that estimate. On the other hand I haven’t spent a lot of time working with Drupal as a CMS. If a project required Drupal, I’d add a relatively high factor of safety to many tasks associated with it. As I learned the system more I could reduce that factor of safety on future projects. There are two areas you should keep in mind when estimating time and deciding on a factor of safety. We’re usually optimistic about how long something will take to complete, but we’re seldom right in that optimism. We tend to estimate based on best case analysis instead of something more realistic. Something difficult to estimate with new clients, is how much time you’ll spend communicating with them and making changes based on their feedback. For the first I tend to apply a factor of safety across the board to cover my optimism and for the second I tend to go with my gut based on what my initial communication with the client is telling me. Setting Your Rate Time is one aspect of understanding your costs. The other is how to set some kind of rate that reflects your value. Here too there’s no absolute answer, but I think the main things to consider are: Your skills (and experience) The general rate for your market While we tend to be optimistic when it comes to how quickly we can get something done, we tend to be pessimistic when evaluating the worth of our skills and experience. Early on you might lack confidence and so devalue your worth. Later, and with more experience, you see difficult tasks as simpler than they really are and devalue their worth. Remember your value is the value you bring to the client. Sure it’s easy for you to write some basic html in a code editor. It’s not so easy for most of the planet. Don’t mistake the ease with less value. If anything it’s more valuable, because of the work you put into making it easy. Design rates, development rates, any service based rates vary, but they generally vary within an accepted range for the market you’re serving. By market I don’t only mean the overall industry. Design rates will have a different rate than development rates and copywriting rates, but even within any of those the accepted range of rates is different for different types of clients. A large corporation will likely pay a greater rate than a single owner business. In thinking about your rate, be honest about your skills and don’t undervalue yourself. Think too about your clients and what’s an acceptable range given who your clients are. Spend a little time searching for businesses, similar to yours and discovering what they charge. Look to industry surveys to get a feel for going rates. You may not find exact hourly rates for your industry and market, but you should be able to get a pretty good sense of what those rates are. Closing Thoughts Let me remind you again that an estimate of your time and some kind of rate are about your costs and not your price. It’s one of the mistakes I made early on and one I think many new to service based businesses also make. It can be easy to think that since your out of pocket expenses are $0 for a project that the cost to you for that project is also $0. It isn’t. Any time you spend on a project is time you can’t be spending on another. If you value yourself at $100/hour then 20 hours of your time costs you $2,000. If someone wants to hire you for a project that will occupy 20 hours of your time, you want to charge more than $2,000. How much more is a topic we’ll get back to next week when I talk more about pricing itself. The post How To Price Freelance Services — Understanding Your Costs appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

CSS Filter Primitives — SVG Filters on HTML Elements - Vanseo Design

---

CSS Filter Primitives — SVG Filters on HTML Elements Posted: 22 Sep 2013 05:30 AM PDT Last week I walked through the css named filter functions which are relatively easy to understand and use. However, they’re only one way to add css filter effects and the least powerful way at that. Today I want to look at filter primitives, one of the other and more powerful ways to add filters to images and elements. Filter primitives offer us a bit more than named functions. For one there are more of them. For another where primitives and named filters overlap the former tend to have more options in how they’re used. Primitives are a bit more complicated to work with and there are far more details to working with all of them than I can cover here in a single post. I also need to offer an apology upfront. Where primitives are concerned, I found the spec more than a bit confusing and lacking examples to help clarify things. I sought other resources, but most talked about filter primitives through the lens of SVG filters, which also led to some confusion on my part. On the bright side I was able to work an example easily enough, which I’ll share below. What wasn’t so easy was making it work in all the browsers I thought would support it. What are CSS Filter Primitives? Filter primitives aren’t that different from named functions. In many ways they’re the same thing just done a different way. Primitives were originally developed as SVG filters and are expanding to be applied to more than SVG images. Like named functions, they’re simply a way to add some filters without the need for a graphic editor. That makes them non-destructive and more flexible. They’re written using SVG markup and are applied to an image or element through the css filter function, specifically the url value of the filter property. 1 .filtered {filter: url(path-to-filter-primitives);} The general concept of filter primitives isn’t any more complicated than it was for named filters. The primitives are simply written a different way than the named functions. There are more of them with more options and they’re applied to the element you want to filter in a different way. An example is probably the best way to explain what filter primitives are and how they work. Working with SVG Filter Primitives One of the filter functions I used in examples last week was hue-rotate. As a named function, you might use it like this. 1 filter: hue-rotate(60deg); The equivalent filter primitive would look something like this 1 <feColorMatrix type="hueRotate" values="60"/> It’s markup as opposed to css and it has a new name, but you can see the type attribute matches the function name from the css and takes a similar value. There’s a little more code needed to make the above primitive work, but you can see how the primitive and named function are related. Let’s walk through a simple example. Once again I’m going to apply filters to my image of the Strawberry Fields Memorial in Central Park. The html is simple. Just an image inside a div. 1 2 3 <div class="filtered"> <img src="images/strawberry-fields.jpg" /> </div> The css is also simple. 1 filter: url(filters.svg#filter-primitives); I’m using the url value for the filter property and having the url point to a document named filters.svg. Inside that document I’m calling the specific filter with the id filter-primitives. So far easy enough, but we need to define the actual filter. Here’s the full filters.svg document. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="filter-primitives"> <feGaussianBlur stdDeviation="3" /> <feColorMatrix type="hueRotate" values="270"/> <feColorMatrix type="saturate" values="0.75"/> <feBlend mode="multiply"/> </filter> </defs> </svg> The document starts by defining itself as xml with an an svg doctype. Next is the SVG object. The filter is defined inside the defs element. Its id is the one we used to reference it from the css. Here I’ve applied 4 filter primitives. I hope each is mostly self explanatory. A couple of things to note. is used for both hue-rotate and saturate, each of which were unique named filters. isn’t limited to hue and saturation. It also takes a luminanceToAlpha value and you can apply a matrix to it directly Also note , which give us several blend modes as filters, something I’m sure you’re used to working with in Photoshop or whatever graphic editor you use. We don’t get every blend mode, but we do get normal, multiply, screen, darken, and lighten. This all leads to the filtered image below. The above worked perfectly in Firefox. I had no luck getting it to work in either Chrome Canary or Safari, which I didn’t expect. I was, however, able to make the example work, by using similar code all in the original index.html document. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <svg> <image x="0" y="0" width="800" height="600" xlink:href="images/strawberry-fields.jpg" filter="url(#filter-primitives)"></image> </svg> <svg> <defs> <filter id="filter-primitives"> <feGaussianBlur stdDeviation="0" /> <feColorMatrix type="hueRotate" values="270"/> <feColorMatrix type="saturate" values="0.75"/> <feBlend mode="multiply"/> </filter> </defs> </svg&gt Instead of linking to an external document via css, everything here is located in the same document. The filter itself is the same. The difference is that the image is displayed as an SVG image instead of a regular html image. Interestingly this works, kind of, in Firefox. The filter is applied, but for whatever reason Firefox would only display the image inside a clipped area as you can see to the left. The image is rendered full size, and the containing div is the full size, but the image is clipped at 300px by 150px. I haven’t been able to figure out why. If someone knows please share. More Examples Here are a few other examples I came across while trying to figure all this out. SVG Filter Effects in IE10 Applying SVG effects to HTML content Gaussian Blur and CSS3/SVG Filters — from Mozilla Developer Network Filters — from Web Platform Docs SVG-Wow You can see even from the titles of these examples they cross into SVG filters and while css and SVG are using the same filter primitives there’s a slightly different way of working with them as far as I could tell and different browser support for the different ways. List of Filter Primitives There are more filter primitives than the ones I used above. Many will look familiar to the named functions we saw last week or at least be familiar enough to understand what they do. Quite a few are more complex and I haven’t had a chance to explore them. Blend and Merge Effects feBlend feComposite feMerge Color Effects feColorMatrix feComponentTransfer feFlood (flood-color and flood-opacity) Light and Light Source Effects feDiffuseLighting feSpecularLighting feDistantLight fePointLight feSpotLight Other Special Effects feConvolveMatrix feDisplacementMap feTurbulence feGaussianBlur feImage feMorphology feTile feOffset feDropShadow Custom Effects feCustom This is clearly a larger list than the list of named functions. Perhaps all or more of these primitives will eventually find their way into the named functions list as I think those are much easier to work with. Summary Again my apologies for any confusion I might be creating. The spec isn’t all that clear to me, mainly due to a lack of examples and most of the information I found outside of the spec seems to be more about svg filters. The two are clearly related, but they aren’t exactly the same. If we stick to the filter effects spec, filter primitives are SVG markup stored in a separate file accessed through filter: url(); They can be applied to any image or other element in your html. SVG filters on the other hand are stored in the same file as the element being filtered and they only apply to SVG elements. While I struggled to make them work, when they did, it was easy to see how powerful they can be. Hopefully in the not too distant future, I’ll gain a better understanding and be able to clear up any confusion I created today. The post CSS Filter Primitives — SVG Filters on HTML Elements appeared first on Vanseo Design.

You are subscribed to email updates from Vanseo Design To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

How Does Flat Design Damage and Improve Usability? - Vanseo Design

---

How Does Flat Design Damage and Improve Usability? Posted: 19 Sep 2013 05:30 AM PDT As skeuomorphism falls out of favor and the trend towards flatter design takes hold are we losing something more than depth in the interfaces we design? Is it possible we’re making our sites less usable? Could it be that flat design is damaging to usability. Note: This post includes an audio version. If you don’t see the audio above, Click here to listen. That’s a question Paul Boag is asking in preparation for the upcoming season of the Boagworld podcast. Instead of leaving a comment on Paul’s post I want to offer a few thoughts here. The abridged version to the question is that in the short term flat design possibly makes a few things less usable for some. In the long term the trend toward flat design likely improves usability. Read on for the longer version. Visual Metaphor Flat design began as a reaction to skeuomorphism. A skeuomorph is basically a visual metaphor. Metaphor has been a common and effective way to communicate new ideas by relating them to existing ideas that are likely familiar to an audience. Metaphors help explain complex concepts by connecting the new to the familiar Metaphors add richness to communication by appealing to the senses Metaphors are persuasive and engaging and lead people to take action If I tell you someone has a broken heart it communicates much more than saying that person is sad and it does so in a more interesting and emotional way. We’ve all been there and know the feeling of a broken heart and everything we’ve ever felt or understood about those events is communicated by the phrase “broken heart” in a way they aren’t with the word sad. The same thing happens visually. For example we’ve all had experiences with buttons. We’ve been pressing real physical buttons our whole lives. The screen doesn’t offer physical buttons, but it does offer things that want to be pushed or clicked or tapped. Designing those things to look like a button relates to the familiar and makes the clickable more appealing to our sense of touch. Even if you aren’t familiar with the web, you’d likely recognize the button and know it can be pressed in some way. A Metaphor too Far The problem with some metaphors is they get overused. As they do each person who uses one, tries to top everyone who used it before. A subtle drop shadow loses its subtlety. Gradients and reflections are soon added. With overuse and one-upmanship, the metaphor becomes cliche. We tire of it and an unintended message gets communicated that the person using the now cliche is lazy. That’s essentially what happened with flat design. The visual metaphors, the skeuomorphs, that designers have been using have crossed into the tiresome. They’ve become cliche. The meanings they once communicated are getting lost in the unintended communication they now carry. They’re overused and lazy just as fewer and fewer people need to the metaphor to understand the interface. Flat design took lessons from Swiss Design. It stripped away the lazy metaphors and the visual cliches we’ve been relying on for too long. Is Usability Lost in the Transition? Getting back to the original question, Is flat design damaging usability? To some degree it is. It’s removing visual metaphors that have been communicated. Sure, they’ve become tired metaphors, but not to everyone. And while fewer and fewer people need the metaphor to understand the interface, many are still helped by it. Even for those of us who don’t need to be told that things on a web page can be “pressed” it might still slow us down at times. A flat rectangle doesn’t suggest press me the same way a 3-dimensional button does. Of course, depth cues are not the only visual cues we have as designers. Shape, color, location, space, and many other things can be used to communicate what’s present on the screen. In taking inspiration from Swiss Design, the trend toward flat design is a return to design fundamentals that will ultimately help make our designs more usable. A flat button may not appear as “pushable,” but a better use of space around it will make it easier to push or click. Simplicity, order, clarity, and legibility all buzzwords from Swiss Design point to an increase in usability. Summary Flat design probably reduces usability for some in the short term. It’s stripping away metaphors that some have relied on for years. Fewer and fewer people need those metaphors though, and in time new visual metaphors will be with us to help replace those that are being removed. The loss of depth cues is not the end of visual communication or design. There are other visual metaphors to be created, repeated, and eventually overused. And it won’t be too long before depth cues make their way back. To focus on the word flat and see only the lack of depth is to miss the point. Flat design is more than removing depth. It also brings more attention to design fundamentals that, if anything, will lead to an overall improvement in usability, even if less buttons are recognized as buttons. Flat design done wrong is just flat. Flat design done well removes some visual depth cues in order to return to the fundamentals and it provides many more cues beyond depth to communicate. The post How Does Flat Design Damage and Improve Usability? appeared first on Vanseo Design. This posting includes an audio/video/photo media file: Download Now

You are subscribed to email updates from Vanseo Design » Blog To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

CSS Named Filter Effects — Non-Destructive Effects for Images and Elements - Vanseo Design

---

CSS Named Filter Effects — Non-Destructive Effects for Images and Elements Posted: 16 Sep 2013 05:30 AM PDT Like clipping and masking, filters have long been the domain of graphic editors. For example if you wanted to change the saturation of an image, you’d open an editor, make the changes, save the image, and be on your way. Before too long we’ll skip the graphic editor and filter our images through css alone. As with most of the future css I’ve been covering the last few weeks, browser support isn’t there yet, but it’s probably better than you expect. Chrome, Safari, Opera, iOS Safari and Blackberry browser all have support in some way, while IE, Firefox, Opera Mini, and Android Browser don’t. That’s 5 to 4 in favor of support if you’re counting. The css filter effects spec is the longest of any I’ve covered recently so I won’t even attempt to go over everything here. Instead we’ll look at the simplest way to add filter effects today and continue with a couple of other ways in the coming weeks. Hopefully after today you’ll get a feel for the possibilities css filters provide. An image of Strawberry Fields Memorial in Central Park (left) with css filters applied (middle and right) What are CSS Filter Effects? If you’ve worked with filters in a graphic editor before then you should have an idea what filters are. In css they’re a way to process how an element will render on the screen before it’s actually displayed. They were originally created for SVG, but they’ve expanded beyond SVG alone. When a browser renders a page, elements will first be drawn to a buffer, where the filters are applied and then they’ll be drawn to the screen itself. CSS filters are image based in that they take zero or more images as input. To these images a number of parameters are applied to create the desired effect and then a new image is produced as output for the screen. Even though they’re considered to be image based they can be applied directly to non-image elements, hence the zero images as input. There are several levels of css filter effects that you can apply, each with varying levels of complexity. A set of named filter functions offering convenience and simplicity in use over power and flexibility Filter effects described in markup that define an overall effect and can be applied to any content A customizable system that exposes a shading language allowing control over the geometry and pixel values of filtered output This post will cover the first level of complexity, named filter functions, and I’ll look at the second level next week. How to Use Named CSS Filter Effects Adding a filter effect is done through the filter property, which looks simple enough on its own. 1 filter: none | <filter-function>+; The value none isn’t particularly interesting except to overwrite a filter given to a parent or to remove one that’s been applied. The value filter-function has a list of potential filters. Note the + signaling you can apply more than one filter at a time to an element or image. The filter-function property can take a URL that references a filter, a number of named filter functions, or a custom function. Again I want to focus on the named functions today. I’ll list them all below, but let’s start with a simple example using the hue-rotate function, which does pretty much what it sounds like it does. While the image above looks like 3 different background-colors have been applied to different divs, it’s actually a single background color along with 2 versions where that color was filters. The left rectangle is the original and it simply has a background-color: green applied to it. The purple in the middle is the same green background with the following filter applied to the div. 1 .filtered {filter: hue-rotate(180deg);} Rotating a color’s hue by 180 degrees leads to its complement and so the green background becomes purple. Since, we aren’t limited to one filter let’s add another. 1 .filtered {filter: hue-rotate(180deg) saturate(30%);} Now in addition to changing the original green to its complement purple, we’ve added a filter that also desaturates the color. The right side of the image above shows the result of applying both of these filters. I applied the same filters with the same values to my image of Strawberry Fields in Central Park, which you can see at the top of this post. Again these filters are non-destructive to the image and can be easily changed to create a new effect. We can do more than change hue and saturation values. Here’s the complete list of named functions found in the spec. 1 2 3 4 5 6 7 8 9 10 grayscale(<number> | <percentage>); sepia(<number> | <percentage>); saturate(<number> | <percentage>); hue-rotate(<angle>); invert(<number> | <percentage>); opacity(<number> | <percentage>); brightness(<number> | <percentage>); contrast(<number> | <percentage>); blur(<length>); drop-shadow([<length>{2,3} && <color>?]#); I think the functions above are generally self-explanatory given their names, but if you’re not quite sure what one of these names filters might do here are a few demos that will show you. CSS FilterLab demo — from Adobe. CSS3 image manipulation — webapp created with Angular.js CSS Filter Effects — from Eric Bidelman CSS Filters — from David Walsh Each of the above will present one or more images along with a variety of sliders to control the different filtering effects. The first two will also show the resulting css used to create the effect. If the above isn’t enough you can also have a look at the two links below. CSS Filters Playground — Filters applied to Spongebob Squarepants Say Hello to Webkit Filters — Article with examples from nettuts+ One last filter-function is the custom function, which again isn’t something I want to cover in detail today. This function allows you to extend things and create additional filtering effects and it deserves a post of its own. 1 custom(IDENT [, <param>]*); Even without the more powerful URL and custom functions, that still leaves us with 10 convenient named filters that can be applied non-destructively to any element or image. One thing to keep in mind when using them is their performance. Most of the filters run quickly, but blur and drop-shadow aren’t as quick. You shouldn’t ignore them, but you should consider the performance hit if you do. Summary Filter effects are something I’m sure you use in graphic editors all the time. The downside is that if you later want to make a change it’s back to the editor, apply the new filter, save and optimize, etc. CSS filters will offer a more flexible and non-destructive way to add filters to images and elements. They make it easy to adjust color fundamentals and provide another way to vary transparency among other things. There are three kinds of filters we can add; named functions, a url pointing to filter primitives, and a custom filter function. Today we looked at the simplest of the three, named functions. I think the names give away what each does, and all are easy to work with in practice. Browser support isn’t quite there, but it’s there enough that you can experiment and even use css filters in production depending on your project. Browsers without support will simply ignore the filters so think of them as a progressive enhancement thing for the moment. Hopefully it won’t be long before all browsers are fully supporting the filter effects spec. Next week we’ll move beyond the simple named functions and consider a url pointing to one or more filter primitives. The post CSS Named Filter Effects — Non-Destructive Effects for Images and Elements appeared first on Vanseo Design.

You are subscribed to email updates from Vanseo Design » Blog To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

CSS Clipping and Masking: Examples and Observations - Vanseo Design

---

CSS Clipping and Masking: Examples and Observations Posted: 12 Sep 2013 05:30 AM PDT On Monday I walked through the spec for css clipping and masking. Since the post grew a little long, I promised some examples for today. I’ll also offer a few observations at the end of the post. The setup for these examples is actually quite simple. The html is little more than a div filled with text for some of the examples and an image for others. The difference you see in the screenshots below is mainly the difference in how the div or image was clipped or what I used to mask it. As a reminder browser support for both clipping and masking isn’t quite there yet, but it’s not that bad either. More browsers support both clipping and masking than don’t support them. In practice I couldn’t get these examples to work in Safari, though they did work in Webkit Nightly. I’m not sure why, since Safari is supposed to have support. The screenshots below are all from Chrome Canary. Shapes Reminder The clipping examples below use basic shapes to clip an element or image so as a quick reminder here’s how those shapes work. If you need more detail about how these work, you can check my post on css shapes. 1 2 3 4 rectangle)<top>, <left>, <width>, <height>, <rx>, <ry>) circle(<cx>, <cy>, <r>) ellipse(<cx>, <cy>, <rx>, <ry>) polygon(<x1> <y1>, <x2> <y2>, ..., <xn> <yn> Clipping Examples I thought I would start easy and work with clipping before masking. The rather simple html I used is below. 1 2 3 4 5 6 <div class="rectangle"> <p>< /p> <p>< /p> <p>< /p> <p>< /p> </div> Each of the paragraphs was filled with some lorem ipsum text and I added some general and arbitrary default styling. 1 2 3 4 5 6 7 .rectangle { margin-top: 10em; width: 660px; height: 660px; background: #696; padding: 1em; } Here’s how the above looks without any clipping applied. To play around I just added the -webkit-clip-path property with a variety of values. First I tried circles and ellipses. Below are the results along with the clip-path and value used. 1 2 -webkit-clip-path: circle(50%, 50%, 50%); -webkit-clip-path: ellipse(50%, 25%, 50%,25%); For the next few example I reduced the height of the original div to 330px and clipped the original with different polygons. 1 2 3 -webkit-clip-path: polygon(0 0, 0 100%, 100% 0); -webkit-clip-path: polygon(16.67% 50.00%,33.33% 78.87%,66.67% 78.87%,83.33% 50.00%,66.67% 21.13%,33.33% 21.13%); -webkit-clip-path: polygon(10.42% 67.00%,31.58% 95.62%,90.67% 73.87%,96.33% 39.25%,45.42% 43.13%,17.83% 9.13%); The triangle I was able to work out for myself easily enough, but I didn’t try to figure out the more complex polygons. Instead I used the polygon tool to visually create them and let the tool give me back the code to use. Masking Examples For masking I decided to use an image instead of a simple rectangle. Once the again the html is trivial. 1 2 3 <div class="image"> <img src="images/strawberry-fields.jpg" alt="Strawberry Fields, Central Park, NY"width="660" height="auto" /> </div> The image is one I took a few years ago in Central Park of the Strawberry Fields memorial for John Lennon. Here’s how it looks without any styling applied Even though this is the masking example I thought I would first clip the image and I experimented using a circle. 1 -webkit-clip-path: circle(50%, 25%, 60%); You can see that using a circle for the clip-path doesn’t mean you’ll end up with a circle. By varying the x and y offsets and the size of the radius you can create more interesting shapes. Let’s get to some masking. First I tried to mask the image with simple linear and radial gradients 1 2 -webkit-mask-image: linear-gradient(to right, black 0%, transparent 100%); -webkit-mask-image: radial-gradient(50% 50%, black 20%, transparent 100%); After that I decided to have a little more fun and play around with some of the other masking properties The example on the left in the image above uses the css below. Setting the size of the mask to something less than 100% and repeating it led to an interesting effect. 1 2 3 4 -webkit-mask-image: radial-gradient(50% 50%, black 20%, transparent 100%); -webkit-mask-position: 50% 50%; -webkit-mask-size: 50%; -webkit-mask-repeat: repeat; Changing the mask size to 10% produced the example in the middle and changing the gradient to linear and the mask size to 20% produced the example on the right. The code for this last example is below. 1 2 3 4 -webkit-mask-image: linear-gradient(to right, black 0%, transparent 100%); -webkit-mask-position: 50% 50%; -webkit-mask-size: 20%; -webkit-mask-repeat: repeat; Next I decided to experiment with some image masks. I grabbed a drawing I had done years ago of Starry Night to use as an image mask. I opened the image in Pixelmator, selected a portion of it and applied a gradient. Then I created varying levels of transparency in the entire image to create 3 different masks. The css was simple. It just needed a link to the image mask I wanted to use. 1 -webkit-mask-image: url("path-to-image-mask.png"); Below are the results of applying each of the above masks to the original Strawberry Fields image. For my last bit of experimentation I created a couple of images of text and used each as the mask. Again the css was simple as it’s the path to the image mask. 1 -webkit-mask-image: url("path-to-text-image-mask"); You can see the results below. The only difference between the two is the font used for the text. Don’t ask me which fonts though, since I forgot which I used. The text on the right is actually the same as on the left. More Examples I’m hardly the only person to play around with css clipping and masking so here are a few more examples from others. CSS Masks — Surfin’ Safari blog Using Masks — Safari Developer Library Optimizing Graphics with CSS Masks — video from Method & Craft WebKit Image Wipes — CSS-Tricks These are plenty more examples online if you care to search. These are just a few I happened across while researching this post. Observations and Closing Thoughts I didn’t try every combination of every clipping and masking property. I barely scratched the surface of possibilities. Still you can likely see how a little bit of experimentation and creativity can lead to some interesting results. One thing I didn’t try at all was SVG clipping and masking, mainly due to my own lack of skills working with SVG. I never could figure out how the source-type properties worked. No matter which value (luminance or alpha) I used, the results always looked exactly the same. I assume the issue was in the masks I applied and that the ones I used wouldn’t show any meaningful difference between luminance and alpha. It was very easy to get both clipping and masking to work. What took a little more time to understand was how to control them, at least to whatever degree I actually learned to control them. Like I said at the start I also couldn’t get these examples working in Safari, though they did work in Wekbit Nightly. I’m not sure why as Safari is supposed to support clipping and masking. Finally in my post about css shapes I mentioned that I wasn’t able to constrain the background behind a shape and that it remained a rectangular box despite my efforts. Alan commented that it could be done using -webkit-clip-path with the same shape as -webkit-shape-outside. Yep. It works perfectly. Thanks Alan. My original css shapes example (left) and with clipping applied (right) I’d encourage you to experiment on your own. I maybe played around for half an hour at most to create everything I showed above plus quite a few more examples I didn’t show. Again while css clipping and masking isn’t going to work in every browser, there isn’t much harm in using either as far as I can tell. Non-supporting browsers show the original element or image so you can clip and mask away in the name of progressive enhancement now if you’d like. There’s one last topic I want to cover in regards to future css and that’s filtering. It’ll take more than a single post to cover and I’ll begin the discussion on Monday. The post CSS Clipping and Masking: Examples and Observations appeared first on Vanseo Design.

You are subscribed to email updates from Vanseo Design » Blog To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

CSS Clipping and Masking — Show and Hide Parts of Images and Elements with Code - Vanseo Design

---

CSS Clipping and Masking — Show and Hide Parts of Images and Elements with Code Posted: 09 Sep 2013 05:30 AM PDT If you’ve done any work with a graphics editor, you likely know what clipping and masking are. Both hide parts of elements visually. Clipping defines which part of an element to show and which to hide, while masking combines two elements to determine how much of each pixel should be transparent. Both are coming to css, In fact they’re already here for more browsers than not. Safari, Chrome, Opera, iOS Safari, and Blackberry browser should have support using the -webkit prefix. Internet Explorer, Firefox, and Opera Mini don’t. In practice I couldn’t get Safari to respond, though everything worked as expected in Webkit Nightly suggesting they will work in Safari soon. Similar to last week, there’s a lot to cover so I’ll walk you through the css masking spec today and present some examples and code on Thursday. Clipping region showing how top, right, bottom, and left distances are measured CSS Clipping Paths Clipping constrains the region in which an element is rendered. Anything inside the clipping path is drawn and anything outside the clipping path isn’t. Clipping in css isn’t anything new. It was defined in css 2.1, but the only shape you could use to clip an element in that definition was a rectangle. 1 2 p {clip: top, right, bottom, left;} p {clip: 10px, 100px, 75px, 5px;} Each of the above values is measured from the top left corner so the second line of css above creates a clipping area from 5px to 100px from the left edge and 10px to 75px from the top edge. CSS3 is extending the shapes so we’re not limited to rectangular clipping paths. The clip property above is being deprecated in favor of the new clip-path, which enables you to define different shapes or to use a scalable vector graphic as the source of the path. 1 clip-path: <basic-shape> | <clip-source> | none; The path can be applied to any and all html elements including SVG elements and SVG containers. In my previous post on css shapes I listed the basic shapes you could create. Here they are again. 1 2 3 4 rectangle(<top>, <left>, <width>, <height>, <rx>, <ry>); circle(<cx>, <cy>, <r>); ellipse(<cx>, <cy>, <rx>, <ry>); polygon(<x1> <y1>, <x2> <y2>, ..., <xn> <yn>); The value of clip-source adds more options 1 <clip-source> = <url> | child | <child-selector>; child and child-selector point to a descendent element. The former indicates that the last direct child should be used for the clip-path, while the latter gives you more control in specifying which child to use. url points to an external SVG, which defines a clipPath that can use any svg shape. Here’s an example using a clipPath inside an SVG from an HTML Rocks article on clipping and masking I recommend reading the article as it offers more good examples and explanation of both clipping and masking. 1 2 3 4 5 6 7 < svg> <defs> <clipPath id="clipping"> <circle cx="284" cy="213" r="213" /> </clipPath> </defs> < /svg&gt An object, a luminance mask, and the result of combining them CSS Masking Masks take things a bit further. Instead of defining absolute paths where inside is visible and outside isn’t visible, masks filter what does and doesn’t show. There are 2 types of masks that can be used. luminance masks — Where the mask is black nothing in the element shows. Where the mask is white, everything in the element shows. For anything in between a portion of the element shows. The lighter the mask, the more of the element shows through. alpha masks — Similar to luminance masks, except only the alpha channel of the mask is used. It may seem counterintuitive, but the more opaque the alpha mask, the more of the element shows through. Layered Masks Layered masks are what you’ll first think of when you think of masks. There are a number of properties for working with them that can later be combined in a single shortcut. 1 2 mask-image: <mask-reference>; mask-reference = <mask-image># | <mask-source>; The mask-reference can either be a mask-image or a mask source. I know that sounds a bit circular. The mask-image (in the mask-reference) can be the direct path to an image or something like a css gradient. 1 2 div {mask-image: url(mask.png);} div {mask-image: linear-gradient(black 0%, transparent 100%);} A mask-source is similar to clip-source that we saw above. 1 <mask-source> = <url> | child | <child-selector>; The url would be a path to an external mask, like we saw above and child and child-selector also work the same way as they did for clip-path. You can define the type of mask (luminance or alpha) using the mask-type or mask-source-type properties. The former is the more general property, which can be overwritten for specific masks by the latter. 1 2 mask-type: alpha | luminance; mask-source-type: alpha | luminance | auto; Masks can be positioned, and sized through the following 2 properties that are obviously named. mask-position mask-size Both take the typical values of measurement (px, em, %). mask-position can also take keywords like right, bottom, center, etc. Two more related properties are mask-origin and mask-clip. The former specifies the mask positioning area and the latter determines the mask painting area. They have similar possible values. 1 2 mask-origin: padding-box | border-box | content-box; mask-clip: border-box | padding-box | content-box | no-clip; In each case the first value is the default. One last property to mention is mask-repeat, which specifies how mask images should be tiled after they’ve been sized and positioned. 1 mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat; The values are the same as those for background repeat. I’ll refer to my post on css-backgrounds for details on their definitions. In fact much of the above properties are similar to css background properties. If you want to understand how masking works, reading up on css backgrounds is probably a good idea. Everything above can also be combined into a single mask shortcut property. 1 mask: <mask-layer>#; where 1 <mask-layer> = <mask-reference><source-type>? || <position> [ / <bg-size> ]? || <repeat-style> || <box> || [ <box> | no-clip ]; Box-Image Masks The divisions of a box image mask The other type of mask is the box-image mask. If you’re familiar with border-images, the following should be familiar. The idea with box-image masks, is that the mask can be split into 9 pieces (4 corners, 4 edges, and a center). Each piece can be sliced, scaled, and stretched. The properties are so similar to the border-image properties that I’ll just refer you to my post on css border images for details on their values and how to work with each. mask-box-image-source mask-box-image-slice mask-box-image-width mask-box-image-outset mask-box-image-repeat Naturally there’s a shortcut to use all of the above. 1 mask-box-image: <'mask-box-image-source'> || <'mask-box-image-slice'> [ / <'mask-box-image-width'> | / <'mask-box-image-width'>? / <'mask-box-image-outset'> ]? || <'mask-box-image-repeat'>; Summary CSS clipping and masking offer some interesting effects that previously required a graphics editor to pull off. Browser support while better than expected, is not quite there yet. However, as most of these effects probably aren’t critical to functionality, you may want to consider using clipping and/or masking now. I’d encourage you to read or reread information about css backgrounds and borders, since much about clipping and masking is similar. Understanding the former will help with understanding the latter. On Thursday I’ll provide some examples of clipping and masking along with the code for how I achieved them. Again I hope you don’t mind the wait. It’ll give you a few days to experiment on your own if you’d like. The post CSS Clipping and Masking — Show and Hide Parts of Images and Elements with Code appeared first on Vanseo Design.

You are subscribed to email updates from Vanseo Design » Blog To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610