CSS3 Animations I recently wrote about CSS3 Transitions and the next step for that is sort of CSS Transitions on steroids: CSS3 Animations (CSS Animations Module Level 3 specification). What are CSS Animations? CSS Animations offers a more detailed way to control animations, the number of times it should iterate and property values at certain keyframes. A simple example Let’s take a look at the code for a simple CSS3 Animations example: 01..animation-container { 02. 03. 04. 05. 06. 09. 10. from { 11. width: 200px; 12. background: #f00; 13. opacity: 0.5; 14. 16. to { 17. width: 400px; 18. background: #ffffa2; 19. opacity: 1; 20. There are a number of new things we see above. The most interesting part here is the animation name, which is, contrary to what you might believe, any name of your choosing. In this example, the element will rotate to being straight, fade in and become twice as wide at the end of the animation. Using keyframe values and iteration-count 02. height: 60px; 03. padding: 10px; 05. 08. 10. width: 200px;
Working Off the Grid with HTML5 Offline Introduction When your web browser was tied to your desktop, there was never really a time that you couldn't get an Internet connection whenever you wanted to. With the significant increase in the ability to access the web on mobile devices — first on laptops, then phones and now tablet devices, it is now easier to access your data and your apps wherever you go. Or is it? This article was written on a train from London to Liverpool. So how do we solve this problem? Cache your assets Users are conditioned to not enter a URL when they are not online because they know they will get an error page. You should build your application to present a consistent UI to your users so that even if they are offline, they can still see and use some of your application. Following our AppCache tutorial, you will see that it is pretty easy to get this into existing apps. CACHE:/js/logic.js /js/options.js /images/loading.png /css/main.css Detecting network connectivity AppCache error event XMLHttpRequest
The Guide To CSS Animation: Principles and Examples Advertisement With CSS animation now supported in both Firefox and Webkit browsers, there is no better time to give it a try. Regardless of its technical form, whether traditional, computer-generated 3-D, Flash or CSS, animation always follows the same basic principles. CSS Animation Properties Before diving into the details, let’s set up the basic CSS: Animation is a new CSS property that allows for animation of most HTML elements (such as div, h1 and span) without JavaScript or Flash. Because the technology is still relatively new, prefixes for the browser vendors are required. All you need to get some CSS animation happening is to attach an animation to an element in the CSS: First, we have the animation code itself. When assigning the animation to your element, you can also use the shorthand: We can cut this down further by not entering all of the values. Those are the basics. Applying Principles of Traditional Animation This example demonstrates the features of CSS animation. Staging
The Shapes of CSS Learn Development at Frontend Masters CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals. We also get the ::before and ::after pseudo elements in CSS, which give us the potential of two more shapes we can add to the original element. Square Rectangle Circle Oval Triangle Up Triangle Down Triangle Left Triangle Right Triangle Top Left Triangle Top Right Triangle Bottom Left Triangle Bottom Right Curved Tail Arrow via Ando Razafimandimby Trapezoid Parallelogram Star (6-points) Star (5-points) via Kit MacAllister Pentagon Hexagon Octagon Heart via Nicolas Gallagher Infinity via Nicolas Gallagher Diamond Square via Joseph Silber Diamond Shield via Joseph Silber Diamond Narrow via Joseph Silber Cut Diamond via Alexander Futekov Egg Pac-Man Talk Bubble TV Screen Lock
70 Must-Have CSS3 and HTML5 Tutorials and Resources CSS3 and HTML 5 are capable of revolutionizing the way we design websites. Both include so many new features and functions that it can be hard to wrap your head around them at times. The inclusion of native support for things like rounded corners and multi-column layouts are just the tip of the ice berg. Below are seventy resources, tutorials, and articles to get you started with CSS3 and HTML 5. CSS3 Tutorials and Resources Get Started with CSS 3 – A basic guide to using CSS3. Cascading Style Sheets Current Work – Details the progress the W3C is making on the CSS3 standard. Border-image: Using Images for Your Border – A guide to the new CSS3 function for adding image borders. Overview of CSS3 Structural Pseudo-Classes – A handy reference chart of structural pseudo-classes in CSS3. Push Your Web Design Into The Future With CSS3 – An introduction to some of the new features in the CSS3 specification. CSS3 Selectors Explained – An overview of some of CSS3 selectors, including selector syntax.
Appward's Field Guide to Web Apps Case Studies of Web Apps in the Wild Power Users Rejoice Javascript enables us to offer keyboard shortcuts for navigating The Picture Page. Using the left and right arrow keys or the emergent convention of the J and K keys to move forward and backward through the photos makes browsing easy and reduces the distraction of finding the mouse while taking in the imagery. Using the HTML5 <progress> tag, we can semantically demonstrate the visitor's progression through the photo album. The Picture Page is a perfect example of the kind of site that doesn't need a ground-up reconstruction for the app era. Cross Browser CSS Transforms – even in IE Updates: (March 7, 2013) The examples on this page were missing due to a migration issue when upgrading my blogging software. Thanks to James Wages for pointing this out.(August 11, 2012) The skew() transform no longer works in Firefox, due to not being in the CSS3 specification anymore. Developers must use the skewX() and skewY() functions instead. An example of a page using the CSS Transform property and cssSandpaper. The CSS transform property allows developers to rotate, scale, and skew blocks of HTML via CSS. When I first saw sites using transform, I looked at the underlying code and tried to produce pages using transform in all browsers. Before I start talking about the details of my solution, let’s take a look at a few examples of it in action. (The examples also work on my copy of Opera 10.5, although I have seen it fail on other installations – I will update this post when I find out why). cssSandpaper to the Rescue Browser Differences Using cssSandpaper -sand-transform Description
Starting to Write CSS Don't you feel that CSS is not the same anymore? Last few years became a hot topic and many smart people talked about it. CSS is not that little thing which front-end developer should do to make the page looks pretty. It's far more then that. CSS Preprocessors Ok, let's face it. Concatenation I think that one of the most valuable thing which came is the concatenation of your files. Extending There are two main CSS preprocessors - LESS and SASS. The problem here is that if you define a mixin without parameters i.e. if you have just this goes to the final compiled CSS file, no matter if it is used or not. It looks almost the same. There are two good things happening. Configuration Both LESS and SASS support definition of variables. That's a good feature, because you may store some important things like company colors or grid widths in one place. Another handy usage of the variables is interpolation. Against the preprocessors Ok, I found a new tool to play with. .site-header .logo { ... } or
The No-Pressure Introduction to CSS3 | Onextrapixel - Web Design & Development Magazine It's difficult to escape the hype surrounding CSS3 at the moment, yet it has created a divide in the community. If you read any blog post on the subject and it is flooded with comments by developers who feel they still cannot use CSS3 in their work. Rather than being encouraging the responses from the experts in our community can appear as aggressive and superior. Although they are correct in saying CSS3 can be used now, the decision must still fall to the individual, even if their opinions are based on inaccurate assumptions. In this article I'll try to cover some of the more widely adopted CSS3 advancements, showing you not only how to use them but also the support you will likely expect from the major browsers. Why We Can Use CSS3 Now The arguments as to why we cannot use CSS3 include such things as the specification not being finalised or that some elements of CSS3 are either poorly supported or not supported at all. Vendor Prefixes Vendor prefixes that are in use today are : Examples