High Performance Animations We’re going to cut straight to the chase. Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps. Take a look at this side-by-side slow motion video of the same animation: One is done with transforms, the other isn’t. From DOM to Pixels in DevTools When you use the Chrome DevTools timeline you should see a pattern similar to this: The process that the browser goes through is pretty simple: calculate the styles that apply to the elements (Recalculate Style), generate the geometry and position for each element (Layout), fill out the pixels for each element into layers (Paint Setup and Paint) and draw the layers out to screen (Composite Layers). To achieve silky smooth animations you need to avoid work, and the best way to do that is to only change properties that affect compositing -- transform and opacity. Animating Layout Properties
How To Build A CSS3 Sliding Menu It’s often best to put things away until you need them. Navigation menus are a good example. If I’m reading an article, I don’t want a large proportion of screen real estate taken with links — especially on a mobile device. In this article, we’re going to build a slide-out menu using CSS alone. If you’re using a modern browser, it will also show a lovely 3D page effect. This is what we’ll achieve: View the CSS3 sliding menu demonstration… There are various solutions throughout the web, but I struggled to find one matching my requirements: It must use clean semantic HTML5 with no superfluous tags.It must not rely on JavaScript.It must not require additional graphics.It must work on mobile and tablet touch devices.It must degrade gracefully in older browsers (IE7+) or when specific CSS3 properties are not supported.It must look great! Open your favorite editor and let’s get coding… The HTML CSS: Article Styles We’ve also defined the transform-origin to the middle of the left-hand edge.
LESS « The Dynamic Stylesheet language 3D card flipping | CSS transitions, CSS transforms and CSS animation Part of the design for the Southampton Hackney Association included a grid of sponsors. The design was such that on hover or click, they would flip over revealing a contact number, email address or URL. We wanted this site to work on browsers that didn't support 3D transforms, as at the time, only webkit had support. Code path for browsers with 3D transforms The code used is exactly as above. Fallback In older browsers, jQuery Flip is used. Due to issues with getting jQuery flip to work on hover, the behaviour was changed to work on click. Using this technique, the effect works on all browsers in use, back to IE6. Part of the design for the Southampton Hackney Association included a grid of sponsors. Code path for browsers with 3D transforms The code used is exactly as above. Fallback In older browsers, jQuery Flip is used. Due to issues with getting jQuery flip to work on hover, the behaviour was changed to work on click. Code path for browsers with 3D transforms Fallback
Tetris & The Power Of CSS To be really good at CSS, you have to learn CSS. I know this sounds like a tautology but I've become aware of a peculiar attitude that preprocessors such as SASS are somehow successors to CSS. Some SASS and LESS nerds are fond of proliferating the following aphorism. It should be noted that its author did not himself intend it as an advocation of preprocessors. The four stages of CSS:1. They forget that all preprocessors do is make writing CSS easier, not qualitatively different: It's still CSS that comes out of the end. Put down your classes, ladies and gentlemen, because we're talking about dynamic content and they cannot save you now. Incomplete grids Let's imagine we have a three-column grid but that we don't know how many items will be in that grid. Now, I'm the sort of designer who couldn't give a toss about "pixel perfection" so long as the page is usable and accessible. We could do this by adding some logic to the template and writing a last class to whichever item comes last.
CSS Positioning Review the W3C CSS standard recommendation. To use CSS for layout effectively, it helps to know how it's used to position page content. This article gives an overview of the methods and rules that govern visual rendering in the CSS2 specification. Although the specification applies to any device for displaying web pages, this article focuses on how it works in browsers. It's important to remember that a given browser may not support a given feature or may even implement it incorrectly. The Box Model To understand positioning in CSS you must first understand the box model. content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content margin border padding content Margins are always transparent. Box Types There are two basic types of boxes, block and inline. Normal Flow
Increasing the Clickable Area of Inline Links Demo It has been best practice for some time now to ensure that navigation links have appropriate padding. This makes clicking these links much easier, especially if you are on a mobile device. Here is an article, written four years ago, discussing this very idea. Why aren’t we taking this one step further? Now keep in mind that this is only a thought. The trick is to be subtle with this technique; increase the click area enough that users don’t have to be 100% accurate, but don’t increase it too much so that the behavior becomes unexpected. Here is an example of what the CSS rule might look like: Notice the use of position: relative? What are your thoughts on this technique? Tweet this
CSS Events It’s been a while since new pseudo-state-selectors were introduces to CSS. I would like to refer to some of them as “CSS Events”, since they represent, mostly, post-event states. This post will demonstrate all “CSS Events” capabilities. Before, some examples of CSS Events Capabilities: Toggle Event The trick of the toggle event is an hidden input of type checkbox, with connected label by ID, using the :checked pseudo class. Example of the idea: If input is checked, change it’s label by using adjacent-sibling-selector. input:checked + label{/*others styles*/} Base HTML & CSS <input type="checkbox" class="toggle-box" id="toggle-box1"><label for="toggle-box1" class="boxy">CLICK ME</label> .boxy{ /*box styles*/ display:block; width:250px; height:250px; background-color:#ccc; /*animation listener*/ transition:0.3s;} That’s it, we now have pure CSS Toggle with no JS. When clicking on the element with the boxy class(label element), we trigger the checkbox to change state, checked or unchecked. Click Event
Beautiful Slide Out Navigation: A CSS and jQuery Tutorial Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare […] View demoDownload source Today I want to show you how to create an amazing slide out menu or navigation for your website. The icons that we will be using are from the Colorful Sticker Icon Sets 1, 2, 3 and 4 by DryIcons. Ok, let’s get to work. 1. The only thing we will need for the navigation is a simple unordered list with links inside of the list elements: The list is getting an ID because we want to refer to it later in the JavaScript. 2. First, we define the CSS properties for the list: The navigation should always be accessible for the user, even if he scrolls down the page. Now, let’s look at the list element properties: For the links in the list elements, we define the following CSS properties: The JavaScript
CSS Quick Tutorials tools & resources for web professionals These materials are copyright Western Civilisation Pty Ltd. www.westciv.com They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses. Please see our website for detailed copyright information or contact us info@westciv.com. quick tutorials If you already know what a style sheet is and how to link it to your page, and how to specify selectors, properties and units with CSS, then in some ways the rest is detail. Can't find what you want to do here? resources
Revised Font Stack | A Way Back Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts. “… font stacks are ultimately design factors, and should be scrutinized as such.”—Nathan Ford, Better CSS font stacks Baskerville, Garamond and Palatino have already been used a few times to create font-stacks that inspire. I’ve selected 10 popular typefaces, serif and sans-serif, each from the survey. MicrosoftTahoma, Verdana, Segoe, sans-serif;Microsoft.com will be (in most cases) rendered in Verdana on Mac, and in Tahoma on Windows. Times New RomanIf we look at the above snapshots taken from Sushi & Robots’ about page, we will find that Palatino and Georgia have different x-height (and weight) than Baskerville and Garamond.