Subscribe to RSS feed

Posts tagged with "css3"

Animatable CSS properties in Opera 12

By Daniel Davistagawa. Tuesday, June 5, 2012 6:25:57 AM

, , , ...

CSS3 transitions and animations don't just provide eye-candy for fancy demos — they also improve usability and enhance the user experience (when used in the right places). Although still at an experimental stage and not meant for production sites yet, they are being used more and more on the web thanks to better and better browser support.

At Opera, our core developers, locked away in a basement somewhere in Norway with only brown cheese to survive on, have been working hard to make our support even better. Opera 12, currently in beta, introduces keyframe animation support as well as an increase in the number of properties you can animate.

Based on Oli Studholme's exhaustive list, here is a rundown of animatable CSS properties in Opera 12. As well as for reference, hopefully this list can also be used for inspiration to test and combine some of the more unusual animations and transitional effects.

Text properties

  • color
  • font-size
  • font-weight (not keywords)
  • letter-spacing
  • line-height
  • text-indent
  • text-shadow
  • vertical-align (not keywords)
  • word-spacing

Box properties

  • background-color
  • background-position
  • border-color
  • border-radius
  • border-spacing (horizontal only)
  • border-width
  • box-shadow
  • clip
  • column-gap
  • column-rule-color
  • column-rule-width
  • column-width
  • height, min-height, max-height
  • margin
  • opacity
  • outline-width
  • outline-offset
  • outline-color
  • padding
  • width, min-width, max-width

Positioning properties

  • bottom
  • top
  • left
  • right

Experimental properties

  • -o-transform
  • -o-transform-origin

And by the way, if you notice any discrepancies or strange behaviour with these in Opera 12, we'll give you a virtual hug if you report it in our bug wizard: https://bugs.opera.com/wizard/

2 comments

SXSWi: the aftermath roundup

By Chris Millschrismills. Tuesday, March 20, 2012 2:00:32 PM

, , , ...

The SXSWi 2012 festival is over, and the merry men and women of Opera have returned to their castles, caves and dungeons. We didn't have much of a chance during our visit to Austin to write intermediate reports and post interviews, as we were far too busy meeting great people, spreading the good word of Opera, and rocking out. So in lieu of what was promised in my previous post about SXSWi, here is a summary of our talks including links to slides and other resources associated with them, and some highlights.

SXSWi highlights

We really liked the following:

  • The choice of beer at The Gingerman
  • The free beer in the SXSWi tradeshow
  • Talking to so many Opera fans in the good old US of A.
  • The beer and food in the Ironworks (a pattern emerging here)
  • Having a chance to talk to so many talented developers and designers and spread the good word of open standards and best practices!
  • Checking out some awesome bands (I got my metal fix in Austin)

Opera talks FTW

Overall, our talks went really well — all of them seemed to have good turnouts, and good comments. In short, I think we kicked some ass at SXSWi! Below you will find talk summaries and links to resource for each talk.

Leaving Flatland: Getting Started with WebGL, featuring Luz Caballero

Luz and talk partner Nicolas Garcia Belmonte delivered a very interesting intro to WebGL, talking about what browsers support it, when you should use it, and what you can do with it. This was accompanied by some really cool visualization demos.

The State of Browser Developer Tools, featuring Mike Taylor

In this talk, the rock 'n' roll Mr Mike Taylor teamed up with representatives from other browser vendors to discuss new debugging features from browser vendors like Google, Opera and Firefox. I think he held his own nicely against the likes of Paul Irish and Brendan Eich, providing a witty and informative presence for Opera.

HTML5 and CSS3: Does Now Really Mean Now?, by Chris Mills

I was very pleased with the reception my talk got: I provided some tips for using HTML5 and CSS3 shiny, while keeping content accessible and usable in older browsers via polyfills, feature detection, and more. I raced through my talk pretty quickly, but the ample time I had for questions was productive, eliciting lots of useful questions and comments. I had around 200 positive tweets afterwards ;-)

Building Great Games in HTML5, by Erik Möller

Erik is a truly great programmer, and his work inside Opera on WebGL really shows off some of his knowledge from his past life in the games industry. In this talk, he shared some of his <canvas>, WebGL and COLLADA knowledge for creating web-based games, to a great reception.

Browser Wars V: The Angry Birds Era, featuring Charles McCathie Nevile

Chaals got together with the equivalent open standards divas from Mozilla, Microsoft and Google to talk about big issues of the day, such as DRM in browsers for video, the move towards supporting -webkit- prefixes in non-WebKit browsers, and the controversy of Google products such as DASH. It was fun and informative, but surprisingly less controversial than previous year's browser wars panels.

CSS.next: Current Experiments, CSS4 and the Future, featuring Divya Manian

The assembled team of CSS experts discussed where CSS is at now, how you can use some of the existing features to do great things, and where it will go in the future. This generated a lot of great discussion!

Lie to Me: CSS3 Demystified, by Håkon Wium Lie

Our CTO gave a presentation on CSS, looking at where it is going, some of the killer new features introduced in the CSS3 modules (such as web fonts and paged media), and historical context on how we got to where we are. It was delivered in a fun, lighthearted way that was accessible to non-CSS experts.

Feel free to ask us questions on Twitter, or comment on this post!

1 comment

HTML5 Please

By Divya Maniannimbupani. Tuesday, January 24, 2012 5:51:52 PM

,

Several months ago, Paul Irish and I got an idea to create a service that would give out recommendations on which HTML5 features to use and how to use them. Finally, yesterday, we pushed that site live: html5please.us.

The pressing problem for web developers has been to know which features are good to use, which are not. Most likely, they spend hours working on sites using some new features, only to be burnt in the process using features that are not performance-friendly, having incomplete support or using the wrong polyfill.

I spent a lot of time thinking of how to best implement this such that it would be easy to work with among contributors and also be easy to compile into a single site. Tim Branyen helped in much of the brainstorming and finally we came up with a node/backbone implementation that took a set of markdown posts and stitched them into a single HTML page. The node application also automatically tries to add a link to when can i use for each of the features. I also added another check to verify these links exist and if not, remove them before being published.

Thanks to Deepak Jois for writing the shell-script that allows easy addition of new features. Connor Montgomery, Peter Beverloo and Addy Osmani also helped significantly in making sure the content was relevant and correct.

Let us know what you think and also if you could, help in the effort.

11 comments

1 2 3 4 5 ... 8 Next »