CSS3 Animations
0 likes646 views
CSS3 allows HTML elements to be animated without JavaScript or Flash. Keyframes are used to define the stages and styles of an animation over its duration. CSS properties like animation-name, animation-duration, and animation-timing-function can be used to control animations, and animations can be defined using a shorthand animation property. Browser support for CSS animations varies.
1 of 8
Download to read offline
![!
Animation Property Shorthand
!
animation: [animation-name] [animation-duration]
[animation-timing-function] [animation-delay]
[animation-iteration-count] [animation-direction]
[animation-fill-mode] [animation-play-state];
For multiple animations
!
.div {
animation: slideIn 2s, rotate 1.75s;
}](https://image.slidesharecdn.com/ombulabs-cssanimation-160105211358/85/CSS3-Animations-5-320.jpg)
Ad
Recommended
Fastest css3 animations 
Fastest css3 animations Ismail Berkay Beyaz Fastest CSS3 Animations slide for owtg 2016 , I'm doing in here show jquery animate performance and css3 animate and transform comperance
Serious Animation (an introduction to Web Animations)
Serious Animation (an introduction to Web Animations)brianskold English translation of Web Animations presentation given at html5j in Tokyo November 30 2013.
Introduces the importance of animation, problems with existing technology, the Web Animations API and core concepts and a new Animation Elements specification.
An HTML version of the slides (without comments) is available here: http://people.mozilla.org/~bbirtles/pres/html5j-2013/index-en.html
Animations on Fire - Making Web animations fast
Animations on Fire - Making Web animations fastbrianskold How to make Web animations perform better by understanding what browsers are doing and employing the latest technologies like will-change, layers, compositor animations and the Web Animations API.
HTML version: http://people.mozilla.org/~bbirtles/pres/graphical-web-2014/
CSS Animations & Transitions
CSS Animations & TransitionsEdward Meehan This document summarizes CSS transitions and animations. Transitions allow gradual changes between states, like color changes on hover. Animations define multiple keyframes to transition between over time. Both require setting a property, duration and can be controlled with JavaScript events. Transitions are simpler but animations can define complex multi-step changes. For performance, animating with transforms like translate is preferable to top/right/bottom/left since it uses the GPU.
CSS3 Animations & Transitions with PhoneGap
CSS3 Animations & Transitions with PhoneGapMark A R Smith This document discusses using CSS3 animations and transitions with PhoneGap. It provides an overview of CSS3 capabilities like selectors, box model, and animations. PhoneGap allows building apps that render to a mobile device's WebView and access native features. The document demonstrates simple CSS3 transitions and animations, and discusses tools for Android development like the ADT Bundle and Applaud. It proposes using these techniques to build a mobile app to help users remember physiotherapy exercises.
Running HTML5 Mobile Web Games at 60fps
Running HTML5 Mobile Web Games at 60fpsApoorv Saxena How to run Web Mobile Games at 60fps, talk presented at Meta Refresh 2015 conference.
Presentation discusses the performant tweaks / approaches to consider for running games at mobile at 60fps, and also entails the different pros and cons related to each approach.
Performance beyond page load - CSS Conf Asia 2015
Performance beyond page load - CSS Conf Asia 2015Apoorv Saxena Talk presented at CSS Conf Asia 2015 regarding "Performance beyond Page load" i.e. Rendering performance of your webpage. The talk focused upon the impact of CSS rules and operations upon the rendering performance of a webpage.
Performance beyond page load (jQuery Conference)
Performance beyond page load (jQuery Conference)Apoorv Saxena Talk to be presented at jQuery Conference on 24th July. It discusses the potential issues that hamper the rendering performance, and also their respective remedies.
Philly.NET Code Camp 2014.1
Philly.NET Code Camp 2014.1Mike Melusky This document introduces CSS3 transitions, transformations, animations and filters. It provides examples of transition properties, timing functions, transformation functions like translate, scale, rotate and matrix, how to define CSS animations with keyframes, and a list of supported filter functions. Browser support for these features includes Firefox 5+, IE 10+, Chrome, Safari 4+ and Opera 12+. References for further reading on these topics are also provided.
Designing Motion - FITC TO
Designing Motion - FITC TOthisisportable This document discusses using animation to enhance user experiences on the web. It covers animation principles like easing functions, appeal through character attributes, using animation for storytelling and UI, and imitating real-world physics and weight. The document emphasizes experimenting with animation to craft experiences and addresses challenges like browser support and limitations.
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...BookNet Canada "CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks" by Kris Vetter (Lerner Publishing Group) for ebookcraft 2016, presented by BookNet Canada and eBOUND Canada - March 31, 2016
the rabbit and the tortoise
the rabbit and the tortoisethreepointone The document discusses the creation of a CSS animation library called BEAM, which was inspired by the fable of the rabbit and the tortoise. It takes a physics-based approach to animations, treating time as a continuous stream of inputs rather than discrete timed events. This allows for smoother, more natural looking motions that reflect principles of physics such as gravity. The document outlines the history and motivation behind BEAM, demonstrates its capabilities, and addresses some caveats to its implementation.
CSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and AnimationsInayaili León This document discusses CSS3 transforms, transitions, and animations. It covers 2D and 3D transforms including translate, scale, rotate, and skew. It also discusses transitions including properties, duration, delay and timing functions. The document explains CSS animations using keyframes and properties like animation name, duration, and iteration count. It provides examples of transforms, transitions and animations. Finally, it discusses vendor prefixes, dynamic CSS with LESS/Sass, considerations for browser support, and resources for further reading.
The Future State of Layout
The Future State of LayoutStephen Hay The document discusses the future of CSS layout mechanisms. It describes several proposed CSS modules for layout, including Grid Positioning, Flexible Box, and Template Layout. Each provides advantages for creating explicit grids and separating presentation from structure. The document highlights how these new layout capabilities could improve web design and development by establishing CSS as the framework. It concludes by encouraging learning more and getting involved in the ongoing CSS layout standards work.
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016Rami Sayar Animations on the web have a storied history and no consistent approach. Using CSS animations is still considered an experimental technology but much can be created already. In this talk, we will explore how to create beautiful CSS animations, cover the compatibility between different browsers, share some ready-libraries for quickly animating your elements and share tools to help you build animations faster.
Experience Themes: An Element of Story Applied to Design
Experience Themes: An Element of Story Applied to DesignCindy Chastain This presentation was presented at IA Summit 09 in Memphis, TN. It explores a new way of thinking about holistic design, by envisioning experience themes at the start of project.
An Experience Theme is basically an over-arching statement or phrase that encapsulates the value and focus of the experience we intend to deliver to users.
It may sound like a strategy or "vision", but at its core, an Experience Theme identifies what the product/service/system is all about from the point of view of users engaging with the product.
Once agreed upon, the theme can not only be used as a conceptual frame for design solutions, but can serve as the foundation for the Product Concept and Experience Strategy, a clear set of goals for the product/service/system design.
The slides explore how this idea was developed in the context of an interactive agency and how it was applied to several projects. It also shows how teams can generate experience themes.
And it's only one small part of a larger conversation about what user experience design can learn from storytelling. Enjoy... Thanks for your comments!
Performance: Beyond Your Portfolio
Performance: Beyond Your PortfolioFITC Presented at Web Unleashed 2016
by Luke Dewitt, REDspace
FITC produces events for digital creators in Toronto, Amsterdam, NYC and beyond
Save 10% off any of our events with discount code 'slideshare'
Check out our events at http://fitc.ca
or follow us at https://twitter.com/fitc
Overview
Nowadays, user expectations of web applications are higher than ever. Unfortunately for developers, with the web changing at an exponential pace, our jobs are becoming more difficult. To keep up with competition and these user expectations, websites and apps need to take into consideration not only the powerful tools we have access to, but also the limitations we face with the modern web.
In this talk, we’ll take a look at how we can ensure our users get the best experience possible when they visit your work on the web. We’ll explore some simple techniques that you can add to your site in little to no time with simple optimization techniques and examine how the new HTTP2 protocol and how it is revolutionizing web delivery.
Objective
To empower developers to push performance in modern web applications.
Target Audience
Anyone who puts bread on their plate by building anything user facing on the web.
Assumed Audience Knowledge
Should have a basic understanding of web fundamentals (HTML, CSS, JavaScript).
Things Audience Members Will Learn
Why optimizing performance matters
The RAIL performance model
Effective ways to speed up an existing website
What is HTTP2 and how to take advantage of it
How to Extend Axure's Animation Capability
How to Extend Axure's Animation CapabilitySvetlin Denkov It can be argued that animations and particularly transitions are integral part of innovative mobile experiences for iOS and Android. Nowadays, UXers must know about motion design and staging.
While there are tools out there which are built for prototyping animations, Axure has similar if not identical capability with the help of few technologies.
In this presentation, we will go over the current animation limitations of Axure 7.0 including firing multiple animations on the same item, resizing, animation origin and others. In the process we will step by step build a complex animation sequence with the help of AxQuery (Axure’s flavor of jQuery) and CSS3 transform properties.
This presentation will give you the tools to build animations otherwise not possible in Axure such as dynamic rotations, varying the animation speed with custom Bezier curves, and others.
Css animation
Css animationAaron King This power point is introduce a simple CSS animation
in this PPT you can learn a new CSS 3 animation property and how to use that do a simple animation
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)Ontico The document discusses techniques for making SVG graphics responsive. It describes using media queries directly in SVG code to serve different background images based on viewport width. It also covers embedding SVG using inline, <img>, and <object> tags and their tradeoffs. The "Clown Car Technique" embeds the SVG as an <object> and uses media queries inside the SVG to switch background images. The "Poor Man's Method" defines all icon variants inside the SVG and shows/hides them with media queries. The "Man With A Gun's Method" uses transforms to adapt a single SVG to different sizes. JavaScript can also be added to SVG to make it more dynamic and responsive.
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSNaga Harish M This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
JS.Chi CSS Animations
JS.Chi CSS AnimationsJustin Meyer The document discusses different techniques for animating elements with CSS and JavaScript, including CSS transitions, CSS animations, and jQuery animations. It provides code examples for defining CSS animations and keyframes, as well as JavaScript code for triggering animations by setting style properties and handling events. The document also outlines some issues to consider with animations like replayability, vendor prefixes, performance, and browser support.
Mastering CSS Animations
Mastering CSS AnimationsGoodbytes This is the slide deck I used in a workshop about CSS animations, transitions and transforms. My students study Interactive Multimedia Design at Thomas More Mechelen. More info at http://www.weareimd.be
Choosing your animation adventure - Generate NYC 2018
Choosing your animation adventure - Generate NYC 2018Val Head The state of web animation. Of all the web animation technologies we have available today, which one, or ones, should you choose to get the job done efficiently.
Microsoft silverlight
Microsoft silverlightNguyen Tran Silverlight is a cross-platform plugin that allows developers to build rich media applications for web browsers. It uses XAML as its markup language, similar to HTML, and has a code-behind model where XAML defines the UI and code-behind handles logic. The document introduces Silverlight architecture and demonstrates how to install Silverlight, create applications with XAML, add animations using properties like Storyboard, and control animations through events and code. It also covers layouts, resources, shapes, transforms, and media integration.
Douban pulse
Douban pulseOpen Party The document discusses HTML5 features including Canvas, SVG, WebSockets, Web Storage, Web SQL Database, Audio/Video tags, and CSS3 properties like gradients, transitions and animations. It provides examples and links to resources about implementing these new technologies. Key HTML5 features like local storage, audio playback, and the Canvas API are highlighted in the context of enhancing the Douban Pulse application.
Html5
Html5Mehdi Jalal This document provides an agenda and introduction for a training session on HTML5. It discusses HTML5 features like new elements, canvas, SVG, drag and drop, geolocation, video, audio, forms, storage and more. The trainer is Mehdi Jalal from NETLINKS for the Afghanistan Workforce Development Program. Browser support for HTML5 is still evolving as the specification is not fully complete.
Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017Codemotion CSS animations have been around the web for some time already and have been helping us in many ways: they give the users feedback on their actions, lead them through a page, cheer them. Badly implemented animations on the other hand can be deadly to the website's performance and the user's delight. Let's learn together what are the best techniques to get our animations smooth.t
Html5
Html5Mehdi Jalal The document discusses HTML5 and provides an agenda for an HTML5 training session. It introduces HTML5 and covers new HTML5 elements, the <canvas> element for drawing graphics, and how to draw paths, boxes, circles and text on the canvas using JavaScript. It also briefly mentions HTML5 features for media, storage, and forms.
Ad
More Related Content
Viewers also liked (11)
Philly.NET Code Camp 2014.1
Philly.NET Code Camp 2014.1Mike Melusky This document introduces CSS3 transitions, transformations, animations and filters. It provides examples of transition properties, timing functions, transformation functions like translate, scale, rotate and matrix, how to define CSS animations with keyframes, and a list of supported filter functions. Browser support for these features includes Firefox 5+, IE 10+, Chrome, Safari 4+ and Opera 12+. References for further reading on these topics are also provided.
Designing Motion - FITC TO
Designing Motion - FITC TOthisisportable This document discusses using animation to enhance user experiences on the web. It covers animation principles like easing functions, appeal through character attributes, using animation for storytelling and UI, and imitating real-world physics and weight. The document emphasizes experimenting with animation to craft experiences and addresses challenges like browser support and limitations.
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...BookNet Canada "CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks" by Kris Vetter (Lerner Publishing Group) for ebookcraft 2016, presented by BookNet Canada and eBOUND Canada - March 31, 2016
the rabbit and the tortoise
the rabbit and the tortoisethreepointone The document discusses the creation of a CSS animation library called BEAM, which was inspired by the fable of the rabbit and the tortoise. It takes a physics-based approach to animations, treating time as a continuous stream of inputs rather than discrete timed events. This allows for smoother, more natural looking motions that reflect principles of physics such as gravity. The document outlines the history and motivation behind BEAM, demonstrates its capabilities, and addresses some caveats to its implementation.
CSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and AnimationsInayaili León This document discusses CSS3 transforms, transitions, and animations. It covers 2D and 3D transforms including translate, scale, rotate, and skew. It also discusses transitions including properties, duration, delay and timing functions. The document explains CSS animations using keyframes and properties like animation name, duration, and iteration count. It provides examples of transforms, transitions and animations. Finally, it discusses vendor prefixes, dynamic CSS with LESS/Sass, considerations for browser support, and resources for further reading.
The Future State of Layout
The Future State of LayoutStephen Hay The document discusses the future of CSS layout mechanisms. It describes several proposed CSS modules for layout, including Grid Positioning, Flexible Box, and Template Layout. Each provides advantages for creating explicit grids and separating presentation from structure. The document highlights how these new layout capabilities could improve web design and development by establishing CSS as the framework. It concludes by encouraging learning more and getting involved in the ongoing CSS layout standards work.
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016Rami Sayar Animations on the web have a storied history and no consistent approach. Using CSS animations is still considered an experimental technology but much can be created already. In this talk, we will explore how to create beautiful CSS animations, cover the compatibility between different browsers, share some ready-libraries for quickly animating your elements and share tools to help you build animations faster.
Experience Themes: An Element of Story Applied to Design
Experience Themes: An Element of Story Applied to DesignCindy Chastain This presentation was presented at IA Summit 09 in Memphis, TN. It explores a new way of thinking about holistic design, by envisioning experience themes at the start of project.
An Experience Theme is basically an over-arching statement or phrase that encapsulates the value and focus of the experience we intend to deliver to users.
It may sound like a strategy or "vision", but at its core, an Experience Theme identifies what the product/service/system is all about from the point of view of users engaging with the product.
Once agreed upon, the theme can not only be used as a conceptual frame for design solutions, but can serve as the foundation for the Product Concept and Experience Strategy, a clear set of goals for the product/service/system design.
The slides explore how this idea was developed in the context of an interactive agency and how it was applied to several projects. It also shows how teams can generate experience themes.
And it's only one small part of a larger conversation about what user experience design can learn from storytelling. Enjoy... Thanks for your comments!
Performance: Beyond Your Portfolio
Performance: Beyond Your PortfolioFITC Presented at Web Unleashed 2016
by Luke Dewitt, REDspace
FITC produces events for digital creators in Toronto, Amsterdam, NYC and beyond
Save 10% off any of our events with discount code 'slideshare'
Check out our events at http://fitc.ca
or follow us at https://twitter.com/fitc
Overview
Nowadays, user expectations of web applications are higher than ever. Unfortunately for developers, with the web changing at an exponential pace, our jobs are becoming more difficult. To keep up with competition and these user expectations, websites and apps need to take into consideration not only the powerful tools we have access to, but also the limitations we face with the modern web.
In this talk, we’ll take a look at how we can ensure our users get the best experience possible when they visit your work on the web. We’ll explore some simple techniques that you can add to your site in little to no time with simple optimization techniques and examine how the new HTTP2 protocol and how it is revolutionizing web delivery.
Objective
To empower developers to push performance in modern web applications.
Target Audience
Anyone who puts bread on their plate by building anything user facing on the web.
Assumed Audience Knowledge
Should have a basic understanding of web fundamentals (HTML, CSS, JavaScript).
Things Audience Members Will Learn
Why optimizing performance matters
The RAIL performance model
Effective ways to speed up an existing website
What is HTTP2 and how to take advantage of it
How to Extend Axure's Animation Capability
How to Extend Axure's Animation CapabilitySvetlin Denkov It can be argued that animations and particularly transitions are integral part of innovative mobile experiences for iOS and Android. Nowadays, UXers must know about motion design and staging.
While there are tools out there which are built for prototyping animations, Axure has similar if not identical capability with the help of few technologies.
In this presentation, we will go over the current animation limitations of Axure 7.0 including firing multiple animations on the same item, resizing, animation origin and others. In the process we will step by step build a complex animation sequence with the help of AxQuery (Axure’s flavor of jQuery) and CSS3 transform properties.
This presentation will give you the tools to build animations otherwise not possible in Axure such as dynamic rotations, varying the animation speed with custom Bezier curves, and others.
Similar to CSS3 Animations (20)
Css animation
Css animationAaron King This power point is introduce a simple CSS animation
in this PPT you can learn a new CSS 3 animation property and how to use that do a simple animation
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)Ontico The document discusses techniques for making SVG graphics responsive. It describes using media queries directly in SVG code to serve different background images based on viewport width. It also covers embedding SVG using inline, <img>, and <object> tags and their tradeoffs. The "Clown Car Technique" embeds the SVG as an <object> and uses media queries inside the SVG to switch background images. The "Poor Man's Method" defines all icon variants inside the SVG and shows/hides them with media queries. The "Man With A Gun's Method" uses transforms to adapt a single SVG to different sizes. JavaScript can also be added to SVG to make it more dynamic and responsive.
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSNaga Harish M This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
JS.Chi CSS Animations
JS.Chi CSS AnimationsJustin Meyer The document discusses different techniques for animating elements with CSS and JavaScript, including CSS transitions, CSS animations, and jQuery animations. It provides code examples for defining CSS animations and keyframes, as well as JavaScript code for triggering animations by setting style properties and handling events. The document also outlines some issues to consider with animations like replayability, vendor prefixes, performance, and browser support.
Mastering CSS Animations
Mastering CSS AnimationsGoodbytes This is the slide deck I used in a workshop about CSS animations, transitions and transforms. My students study Interactive Multimedia Design at Thomas More Mechelen. More info at http://www.weareimd.be
Choosing your animation adventure - Generate NYC 2018
Choosing your animation adventure - Generate NYC 2018Val Head The state of web animation. Of all the web animation technologies we have available today, which one, or ones, should you choose to get the job done efficiently.
Microsoft silverlight
Microsoft silverlightNguyen Tran Silverlight is a cross-platform plugin that allows developers to build rich media applications for web browsers. It uses XAML as its markup language, similar to HTML, and has a code-behind model where XAML defines the UI and code-behind handles logic. The document introduces Silverlight architecture and demonstrates how to install Silverlight, create applications with XAML, add animations using properties like Storyboard, and control animations through events and code. It also covers layouts, resources, shapes, transforms, and media integration.
Douban pulse
Douban pulseOpen Party The document discusses HTML5 features including Canvas, SVG, WebSockets, Web Storage, Web SQL Database, Audio/Video tags, and CSS3 properties like gradients, transitions and animations. It provides examples and links to resources about implementing these new technologies. Key HTML5 features like local storage, audio playback, and the Canvas API are highlighted in the context of enhancing the Douban Pulse application.
Html5
Html5Mehdi Jalal This document provides an agenda and introduction for a training session on HTML5. It discusses HTML5 features like new elements, canvas, SVG, drag and drop, geolocation, video, audio, forms, storage and more. The trainer is Mehdi Jalal from NETLINKS for the Afghanistan Workforce Development Program. Browser support for HTML5 is still evolving as the specification is not fully complete.
Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017Codemotion CSS animations have been around the web for some time already and have been helping us in many ways: they give the users feedback on their actions, lead them through a page, cheer them. Badly implemented animations on the other hand can be deadly to the website's performance and the user's delight. Let's learn together what are the best techniques to get our animations smooth.t
Html5
Html5Mehdi Jalal The document discusses HTML5 and provides an agenda for an HTML5 training session. It introduces HTML5 and covers new HTML5 elements, the <canvas> element for drawing graphics, and how to draw paths, boxes, circles and text on the canvas using JavaScript. It also briefly mentions HTML5 features for media, storage, and forms.
Html5 more than just html5 v final
Html5 more than just html5 v finalLohith Goudagere Nagaraj 1. HTML5 is a major revision to the HTML standard that is still under development and aims to be the future of the web.
2. It includes new elements like <video>, <audio>, and <canvas> that allow embedding multimedia without plugins, as well as features like geolocation.
3. The HTML5 specification is very large, covering HTML, SVG, CSS, and APIs. It aims to provide a common standard for web applications.
4. HTML5 is not just a marketing term - it represents an ongoing effort to develop a unified standard for the next generation of the web.
Css3
Css3Bronson Quick This document introduces several CSS3 features including CSS3 PIE, @font-face, border-radius, border-image, rgba, box-shadow, text-shadow, linear-gradient, and columns. For each feature, it provides a brief description, examples of CSS code to implement the feature, and the browsers that support it. It also includes links to additional CSS3 resources.
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleEstelle Weyl You no longer have to wait to use HTML5 and CSS3: in developing for mobile, you don't have to worry about archaic browser. Webkit, the browser engine found on Android and iPhone provide excellent support for CSS3 and HTML5. In this session we learn how we can use these new technologies to create mobile web applications.
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tourLohith Goudagere Nagaraj This document provides an overview of HTML5 and related technologies. It discusses how HTML5 is more than just HTML, and covers the HTML5 specification process and components. It then provides a tour of new HTML5 features like <video>, <audio>, SVG, <canvas>, geolocation, and CSS3 specifications including borders, colors, shadows, backgrounds, fonts, media queries and transforms. The document demonstrates several of these features and provides resources for further information.
Responsive Design in WordPress
Responsive Design in WordPressThad Allender Intro to responsive design in WordPress. Slides from Thad Allender's April 10, 2012 talk at WordPress DC at Fathom Creative in Washington, D.C.
Html5
Html5Soliman ElSaber This document discusses HTML5 features including new elements, CSS3, animation, touch events, JavaScript, and how to develop for smartphones. It covers topics such as new HTML5 elements, CSS3 transitions, animations and fonts, audio/video elements, the canvas element and 2D drawing, touch event handling, JavaScript APIs, and optimizing for mobile performance and limitations. The goal is to understand and utilize the latest web technologies to build engaging applications and sites, including for smartphones.
HTML5, the new buzzword
HTML5, the new buzzwordFrédéric Harper The document is a presentation about HTML5. It discusses what HTML5 is, some of the new elements it introduces like canvas, video, audio, and geolocation. It also covers new features like CSS3 media queries, web fonts using WOFF, and whether HTML5 is ready for use. The presentation encourages trying out HTML5 and provides some resources for learning more.
Web Design Trends 2010 - What Is CSS3 All About?
Web Design Trends 2010 - What Is CSS3 All About?Alexandra Lo Cascio This document discusses several web design trends for 2010, including CSS3 features like box shadows, custom web fonts, transparency layers, rounded corners, and animation. It provides examples of websites that demonstrate these trends and the relevant CSS code. The document also includes contact information for the web designer author.
Building Websites for Retina Displays: Making Friends with Pixels
Building Websites for Retina Displays: Making Friends with PixelsShoshi Roberts This document discusses how to build websites that look good on high pixel density displays like the iPhone 4's Retina display. It recommends using responsive design so the site looks good on all devices. It also recommends using CSS3 properties instead of images when possible, optimizing images by creating higher resolution versions, and using media queries or SVG to serve the appropriate image based on the device's pixel density. The document stresses testing websites on different devices and prioritizing the platforms your users visit most.
Ad
More from Ombu Labs, The Lean Software Boutique (19)
Trabajando en Código Abierto
Trabajando en Código AbiertoOmbu Labs, The Lean Software Boutique Algunas notas y lecciones aprendidas sobre nuestra experiencia trabajando en código abierto. 8 proyectos interesantes que abrimos en los últimos meses.
Design Patterns: Strategy and NullObject
Design Patterns: Strategy and NullObjectOmbu Labs, The Lean Software Boutique A short presentation about two of the most popular design patterns in object oriented software: Strategy and NullObject.
Check out these examples to understand when it's a good time to apply them to your own code.
Our Values at The Lean Software Boutique
Our Values at The Lean Software BoutiqueOmbu Labs, The Lean Software Boutique This is a presentation about the values that guide our activities. When in doubt, look at these slides and think about the values that represent the work that we do.
Are you building something that you can be proud of? Are you applying that principles that guide our company? Are you striving to achieve a simple but powerful solution?
Always deliver on time and always strive for simplicity. These values will guide us through hard times.
Rspec Tweaks
Rspec TweaksOmbu Labs, The Lean Software Boutique Rspec Tweaks, enhancing specs (Controller, Model, etc.), let vs instance variables, refactoring, use more “let”, just build, don’t create!
flexible use of “let”, more than 65% faster, test without ActiveRecord
A short guide to git's interactive rebase
A short guide to git's interactive rebaseOmbu Labs, The Lean Software Boutique Git's interactive rebase allows developers to clean up and edit commits before publishing them. It can be used to squash multiple commits into one, reorder commits, or drop unwanted commits and move them to a new branch to keep feature and bugfix branches more logically separated. The interactive rebase is started with `git rebase -i` which opens an editor showing the commits to allow picking, editing, squashing or dropping them.
Git Sensitive Data
Git Sensitive DataOmbu Labs, The Lean Software Boutique Git can unintentionally store sensitive data like passwords or keys in its commit history. While commands like filter-branch can remove sensitive data from the local history, it may still be retrievable from remote repositories unless the history is rewritten there as well. The safest approach is to change all credentials and remove the local git repository entirely.
Bitpagos Ruby Gem
Bitpagos Ruby GemOmbu Labs, The Lean Software Boutique The document summarizes the Bitpagos Gem, an open-source Ruby gem that provides an API wrapper for the Bitpagos payments platform. It implements the Transaction endpoint to retrieve transactions, but lacks pagination, usage documentation, and implementation of the Checkout endpoint. The gem is not yet production-ready due to the missing pagination feature.
Open Source Recap (Dec '15) by etagwerker
Open Source Recap (Dec '15) by etagwerkerOmbu Labs, The Lean Software Boutique The document recaps open source work done by Ombu Labs in December 2015 and outlines goals for 2016. In December, Ombu Labs fixed an author section, wrote posts on reporting bugs and adding Docker to gems, reviewed PRs for DatabaseCleaner, and worked on gems including Bitpagos, email-spec, and ombubot. Goals for 2016 include releasing new versions of DatabaseCleaner and EmailSpec, launching Freckler 1.0 and InfractoresBA 1.0, and releasing OmbuShop 4.0. The document ends by thanking readers and asking if they have any questions.
Gotchas and Stack Traces in Ruby
Gotchas and Stack Traces in RubyOmbu Labs, The Lean Software Boutique This document discusses common "gotchas" and issues when working with Ruby, along with explanations of stack traces. It covers:
1. Syntax errors due to whitespace when calling methods.
2. The behavior of the "any?" method on arrays and how it checks for "truthy" elements.
3. That constants in Ruby can be reassigned with a warning, and examples of variable scope errors.
4. Examples of stack traces for different errors and the importance of including the full trace when asking for help to identify the root cause.
Mocks vs. Stubs
Mocks vs. StubsOmbu Labs, The Lean Software Boutique This talked is inspired by Martin Fowler's "Mocks aren't stubs" http://martinfowler.com/articles/mocksArentStubs.html
We talked about Cassical TDD vs. Mockist TDD and the libraries that help Ruby developers with their tests.
Webmock, FactoryGirl, VCR, Rspec mocks, stubs and spies.
What do you prefer? To mock everything, or to mock as less as possible?
Intro to Active Record
Intro to Active RecordOmbu Labs, The Lean Software Boutique ActiveRecord is an object-relational mapping (ORM) pattern that allows developers to interact with a database using objects. It establishes a one-to-one relationship between classes and database tables, with each class representing a database table and objects representing table rows. ActiveRecord provides methods for easily creating, reading, updating, and deleting records in the database. It also handles associations between models and allows chaining conditions to build queries before executing them against the database.
Relational Databases 101
Relational Databases 101Ombu Labs, The Lean Software Boutique A brief introduction to relational databases, SQL and ActiveRecord.
What's a SELECT, UPDATE, INSERT or DELETE query? What's an Index, a Foreign Key, a Primary Key?
The 7 Days Open Source Challenge
The 7 Days Open Source ChallengeOmbu Labs, The Lean Software Boutique The document outlines a 7 day challenge to contribute to open source projects in order to gain experience, respect, good karma, and knowledge. It encourages participants to submit new issues, try to solve existing issues, add relevant information to issues, improve documentation, write failing test cases, and submit pull requests for 7 straight days. If a day is skipped, one must start over. Upon completion, participants should share their experience and look to codetriage.com or the DatabaseCleaner project as places to begin contributing.
Basic memoization in Ruby
Basic memoization in RubyOmbu Labs, The Lean Software Boutique Memoization is an optimization technique that caches the results of expensive method calls to avoid repeating the same computation multiple times. The document discusses memoizing the current_user method in Ruby by using the ||= conditional assignment operator to assign the result of User.find(session[:user_id]) to the @current_user instance variable only if it is nil. This avoids duplicate database queries when current_user is called multiple times. The document also provides examples of when memoization should and should not be used, such as memoizing expensive calculations that do not change but not calculations that take parameters or can easily change.
Productivity Tips for Programmers
Productivity Tips for ProgrammersOmbu Labs, The Lean Software Boutique The flow is what makes a programmer thrive or fail. How many interruptions did you have today? Can you stop them?
Interruptions turn each day into chunks of productivity. Each interruption costs a programmer at least 10 minutes, plus the time spent during the interruption.
Here are some tips to avoid interruptions and get to a flow state of mind. Kill interruptions before they kill your productivity.
When was the last time that you programmed without any interruptions?
Some of the tips:
1. Keep your email clients closed
2. Keep Twitter closed
3. Keep Facebook closed
4. Start tracking time spent on every project
5. Unplug your phone
6. Silence your cell phone
7. Use Slack
Manage your interruptions before they manage your productivity.
Testing 101: Three Rules for Testing at Ombu Labs 
Testing 101: Three Rules for Testing at Ombu Labs Ombu Labs, The Lean Software Boutique In this presentation we talk about three rules that we follow every week to deliver high quality code. We prefer to write tests in this order: Integration tests first, unit tests later.
We don't do TDD religiously but it is a good idea when you're facing a very complex problem.
Think about your code as a black box and think about all the possible inputs and outputs, all the possible paths that a user might take, all the possible ranges that the user may enter.
Don't test only the happy path, keep in mind the odd cases.
Peer Review Guidelines
Peer Review GuidelinesOmbu Labs, The Lean Software Boutique A few guidelines for peer reviews at Ombu Labs. Be nice, be constructive, suggest alternatives, start discussions, use Git branches, Github pull requests and keep it lean.
Make sure that the pull requests solve a concrete problem today. You can always refactor your solution later. Do not design for the future.
Keep it simple stupid and learn from the comments in your pull requests.
Recycling at Ombu Labs
Recycling at Ombu LabsOmbu Labs, The Lean Software Boutique At Ombu Labs we decided to start recycling to improve the environment and as a contribution to our community.
This presentation has some basic tips on what needs to be recycle.
Guide to Services & Technology at Ombu Labs
Guide to Services & Technology at Ombu LabsOmbu Labs, The Lean Software Boutique At Ombu Labs, The Lean Software Boutique, we like to use these services. They help us build lean software, that is easy to maintain and scale.
We like to use: Github, Code Climate, Heroku, Rails, Ruby, Sinatra, Cuba, Solano CI, Intercom, Google Ad Words, Google Analytics, Twitter, Facebook, Freckle and Slack!
Ad
Recently uploaded (20)
Technology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data AnalyticsInData Labs At InData Labs, we have been keeping an ear to the ground, looking out for AI-enabled digital transformation trends coming our way in 2025. Our report will provide a look into the technology landscape of the future, including:
-Artificial Intelligence Market Overview
-Strategies for AI Adoption in 2025
-Anticipated drivers of AI adoption and transformative technologies
-Benefits of AI and Big data for your business
-Tips on how to prepare your business for innovation
-AI and data privacy: Strategies for securing data privacy in AI models, etc.
Download your free copy nowand implement the key findings to improve your business.
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungenpanagenda Webinar Recording: https://www.panagenda.com/webinars/hcl-nomad-web-best-practices-und-verwaltung-von-multiuser-umgebungen/
HCL Nomad Web wird als die nächste Generation des HCL Notes-Clients gefeiert und bietet zahlreiche Vorteile, wie die Beseitigung des Bedarfs an Paketierung, Verteilung und Installation. Nomad Web-Client-Updates werden “automatisch” im Hintergrund installiert, was den administrativen Aufwand im Vergleich zu traditionellen HCL Notes-Clients erheblich reduziert. Allerdings stellt die Fehlerbehebung in Nomad Web im Vergleich zum Notes-Client einzigartige Herausforderungen dar.
Begleiten Sie Christoph und Marc, während sie demonstrieren, wie der Fehlerbehebungsprozess in HCL Nomad Web vereinfacht werden kann, um eine reibungslose und effiziente Benutzererfahrung zu gewährleisten.
In diesem Webinar werden wir effektive Strategien zur Diagnose und Lösung häufiger Probleme in HCL Nomad Web untersuchen, einschließlich
- Zugriff auf die Konsole
- Auffinden und Interpretieren von Protokolldateien
- Zugriff auf den Datenordner im Cache des Browsers (unter Verwendung von OPFS)
- Verständnis der Unterschiede zwischen Einzel- und Mehrbenutzerszenarien
- Nutzung der Client Clocking-Funktion
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell With expertise in data architecture, performance tracking, and revenue forecasting, Andrew Marnell plays a vital role in aligning business strategies with data insights. Andrew Marnell’s ability to lead cross-functional teams ensures businesses achieve sustainable growth and operational excellence.
Drupalcamp Finland – Measuring Front-end Energy Consumption
Drupalcamp Finland – Measuring Front-end Energy ConsumptionExove How to measure web front-end energy consumption using Firefox Profiler. Presented in DrupalCamp Finland on April 25th, 2025.
Heap, Types of Heap, Insertion and Deletion
Heap, Types of Heap, Insertion and DeletionJaydeep Kale This pdf will explain what is heap, its type, insertion and deletion in heap and Heap sort
Quantum Computing Quick Research Guide by Arthur Morgan
Quantum Computing Quick Research Guide by Arthur MorganArthur Morgan This is a Quick Research Guide (QRG).
QRGs include the following:
- A brief, high-level overview of the QRG topic.
- A milestone timeline for the QRG topic.
- Links to various free online resource materials to provide a deeper dive into the QRG topic.
- Conclusion and a recommendation for at least two books available in the SJPL system on the QRG topic.
QRGs planned for the series:
- Artificial Intelligence QRG
- Quantum Computing QRG
- Big Data Analytics QRG
- Spacecraft Guidance, Navigation & Control QRG (coming 2026)
- UK Home Computing & The Birth of ARM QRG (coming 2027)
Any questions or comments?
- Please contact Arthur Morgan at [email protected].
100% human made.
Complete Guide to Advanced Logistics Management Software in Riyadh.pdf
Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company Explore the benefits and features of advanced logistics management software for businesses in Riyadh. This guide delves into the latest technologies, from real-time tracking and route optimization to warehouse management and inventory control, helping businesses streamline their logistics operations and reduce costs. Learn how implementing the right software solution can enhance efficiency, improve customer satisfaction, and provide a competitive edge in the growing logistics sector of Riyadh.
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv IEDM 2024 Tutorial2
Generative Artificial Intelligence (GenAI) in Business
Generative Artificial Intelligence (GenAI) in BusinessDr. Tathagat Varma My talk for the Indian School of Business (ISB) Emerging Leaders Program Cohort 9. In this talk, I discussed key issues around adoption of GenAI in business - benefits, opportunities and limitations. I also discussed how my research on Theory of Cognitive Chasms helps address some of these issues
Mobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi ArabiaSteve Jonas EmizenTech is a globally recognized software development company, proudly serving businesses since 2013. With over 11+ years of industry experience and a team of 200+ skilled professionals, we have successfully delivered 1200+ projects across various sectors. As a leading Mobile App Development Company In Saudi Arabia we offer end-to-end solutions for iOS, Android, and cross-platform applications. Our apps are known for their user-friendly interfaces, scalability, high performance, and strong security features. We tailor each mobile application to meet the unique needs of different industries, ensuring a seamless user experience. EmizenTech is committed to turning your vision into a powerful digital product that drives growth, innovation, and long-term success in the competitive mobile landscape of Saudi Arabia.
Procurement Insights Cost To Value Guide.pptx
Procurement Insights Cost To Value Guide.pptxJon Hansen Procurement Insights integrated Historic Procurement Industry Archives, serves as a powerful complement — not a competitor — to other procurement industry firms. It fills critical gaps in depth, agility, and contextual insight that most traditional analyst and association models overlook.
Learn more about this value- driven proprietary service offering here.
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroUiPathCommunity This session is designed to equip developers with the skills needed to build mission-critical, end-to-end processes that seamlessly orchestrate agents, people, and robots.
📕 Here's what you can expect:
- Modeling: Build end-to-end processes using BPMN.
- Implementing: Integrate agentic tasks, RPA, APIs, and advanced decisioning into processes.
- Operating: Control process instances with rewind, replay, pause, and stop functions.
- Monitoring: Use dashboards and embedded analytics for real-time insights into process instances.
This webinar is a must-attend for developers looking to enhance their agentic automation skills and orchestrate robust, mission-critical processes.
👨🏫 Speaker:
Andrei Vintila, Principal Product Manager @UiPath
This session streamed live on April 29, 2025, 16:00 CET.
Check out all our upcoming Dev Dives sessions at https://community.uipath.com/dev-dives-automation-developer-2025/.
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfRHCSA Guru Introduction to LPIC-1 Exam - overview, exam details, price and job opportunities
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxAnoop Ashok In today's fast-paced retail environment, efficiency is key. Every minute counts, and every penny matters. One tool that can significantly boost your store's efficiency is a well-executed planogram. These visual merchandising blueprints not only enhance store layouts but also save time and money in the process.
How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?Daniel Lehner 𝙄𝙨 𝘼𝙄 𝙟𝙪𝙨𝙩 𝙝𝙮𝙥𝙚? 𝙊𝙧 𝙞𝙨 𝙞𝙩 𝙩𝙝𝙚 𝙜𝙖𝙢𝙚 𝙘𝙝𝙖𝙣𝙜𝙚𝙧 𝙮𝙤𝙪𝙧 𝙗𝙪𝙨𝙞𝙣𝙚𝙨𝙨 𝙣𝙚𝙚𝙙𝙨?
Everyone’s talking about AI but is anyone really using it to create real value?
Most companies want to leverage AI. Few know 𝗵𝗼𝘄.
✅ What exactly should you ask to find real AI opportunities?
✅ Which AI techniques actually fit your business?
✅ Is your data even ready for AI?
If you’re not sure, you’re not alone. This is a condensed version of the slides I presented at a Linkedin webinar for Tecnovy on 28.04.2025.
TrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business ConsultingTrs Labs Hybrid Growth Mandate Model with TrsLabs
Strategic Investments, Inorganic Growth, Business Model Pivoting are critical activities that business don't do/change everyday. In cases like this, it may benefit your business to choose a temporary external consultant.
An unbiased plan driven by clearcut deliverables, market dynamics and without the influence of your internal office equations empower business leaders to make right choices.
Getting things done within a budget within a timeframe is key to Growing Business - No matter whether you are a start-up or a big company
Talk to us & Unlock the competitive advantage
How analogue intelligence complements AI
How analogue intelligence complements AIPaul Rowe
Artificial Intelligence is providing benefits in many areas of work within the heritage sector, from image analysis, to ideas generation, and new research tools. However, it is more critical than ever for people, with analogue intelligence, to ensure the integrity and ethical use of AI. Including real people can improve the use of AI by identifying potential biases, cross-checking results, refining workflows, and providing contextual relevance to AI-driven results.
News about the impact of AI often paints a rosy picture. In practice, there are many potential pitfalls. This presentation discusses these issues and looks at the role of analogue intelligence and analogue interfaces in providing the best results to our audiences. How do we deal with factually incorrect results? How do we get content generated that better reflects the diversity of our communities? What roles are there for physical, in-person experiences in the digital world?
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded DevelopersToradex Toradex brings robust Linux support to SMARC (Smart Mobility Architecture), ensuring high performance and long-term reliability for embedded applications. Here’s how:
• Optimized Torizon OS & Yocto Support – Toradex provides Torizon OS, a Debian-based easy-to-use platform, and Yocto BSPs for customized Linux images on SMARC modules.
• Seamless Integration with i.MX 8M Plus and i.MX 95 – Toradex SMARC solutions leverage NXP’s i.MX 8 M Plus and i.MX 95 SoCs, delivering power efficiency and AI-ready performance.
• Secure and Reliable – With Secure Boot, over-the-air (OTA) updates, and LTS kernel support, Toradex ensures industrial-grade security and longevity.
• Containerized Workflows for AI & IoT – Support for Docker, ROS, and real-time Linux enables scalable AI, ML, and IoT applications.
• Strong Ecosystem & Developer Support – Toradex offers comprehensive documentation, developer tools, and dedicated support, accelerating time-to-market.
With Toradex’s Linux support for SMARC, developers get a scalable, secure, and high-performance solution for industrial, medical, and AI-driven applications.
Do you have a specific project or application in mind where you're considering SMARC? We can help with Free Compatibility Check and help you with quick time-to-market
For more information: https://www.toradex.com/computer-on-modules/smarc-arm-family
CSS3 Animations
- 1. CSS3 Animations Ombu Labs, January 2016
- 2. CSS3 animations allows animation of most HTML elements without using JavaScript or Flash! CSS3 Animations
- 3. @keyframes define the stages and styles of the animation.
- 4. ! @keyframes color { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} } ! @-webkit-keyframes color{/* styles */ } ! div { width: 100px; height: 100px; background-color: red; animation-name: color; -webkit-animation-name: color; animation-duration: 4s; -webkit-animation-duration: 4s; }
- 5. ! Animation Property Shorthand ! animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state]; For multiple animations ! .div { animation: slideIn 2s, rotate 1.75s; }