Rob Allison Recreates the Mario Mushroom in CSS
Posted on March 29, 2010 in Pushing The Envelope
Folks are havin’ lots of fun with border-radius these days. Rob Allison has done the mushroom from Mario Bros.
I have one problem with his post though. He didn’t test the latest version of Opera, 10.5, which supports border-radius fully now. I think it’s the first browser to do so (without a vendor prefix). Is that correct? It renders his mushroom perfectly and the feature image for this post is the result.
Comments
Topics
- 3D
- :target pseudo-class
- @font-face
- accessibility
- animation
- audio
- backface visibility
- background clip
- background gradient
- background size
- backgrounds
- bokeh
- border
- border image
- border radius
- border width
- box shadow
- box sizing
- browser
- C
- C++
- canvas
- CoffeeScript
- CSS
- CSS3
- cube
- d3.js
- emulator
- filter
- Firefox
- flip
- game
- Gecko
- gradient
- HTML
- HTML5
- HTTP
- IE9
- JavaScript
- jQuery
- JSON
- keyframes
- linux
- local storage
- maps
- matrix
- Modernizer
- MooTools
- mozWriteAudio
- Ndless
- node.js
- Ogg
- opacity
- OpenLayers
- perspective
- pixel font
- position
- PostGIS
- preserve-3d
- pseudo-element
- Python
- radial gradient
- Raphael
- RGBA
- rocket
- rotate
- scale
- selection
- skew
- socket.io
- SVG
- text
- text fill color
- text overflow ellipsis
- text-shadow
- text-shaow
- three.js
- TI-Nspire
- TileCache
- trandsform
- transform
- transform-style
- transition
- translate
- typeface
- Verdana
- video
- visualisation
- web sockets
- web workers
- WebGL
- WebKit
- Wiimote
- x86
- XHTML
- z-index
People
- Aleksandar Rodic
- Alex Girón
- Alex Leone
- Alex Wolkov
- Almer
- Andreas Jacob
- Andrew Hoyer
- Andrew Kelly
- Anthony Calzadilla
- Barry Silverman
- Ben Joffe
- Bertrand Fan
- Brian Silverman
- Cameron Daigle
- Chris Coyier
- Daniel Kurdoghlian
- Daniel Rapp
- David DeSandro
- David Nufer
- David Truong
- David Walsh
- Divya Manian
- Earle Castledine
- Eirik Brandtzæg
- Fabrice Bellard
- Fabricio Zuardi
- Franz Enzenhofer
- Gerwin Janssen
- Giacomo Bartoli
- Gil Megidish
- Gordon Brander
- James Edwards
- Janko Jovanovic
- Joe Huckaby
- Jonas Wagner
- Joshua Jones
- Kilian Valkhof
- Kris Triplett
- Lea Verou
- Lucian Marin
- Marco Kuiper
- Martins Upitis
- Mathias Bynens
- Mathias Karstädt
- Mathieu Henri
- Maurice Svay
- Michela Chiucini
- Microsoft
- Mocanu Calin
- Mrakoplaz
- Natalie Downe
- Neven Mrgan
- Nicholas Erho
- Paul Chaplin
- Paul Hayes
- Paul Irish
- Paul Lewis
- Paul Rouget
- Radu Chelariu
- Random Davis
- Ricardo Cabello
- Rob Allison
- Rob Hawkes
- Román Cortés
- Russell Heimlich
- Ryan Florence
- Sawyer Hollenshead
- Sean Christmann
- Sean Martell
- Simon Willison
- Simurai
- Steve Dennis
- Stu Nicholls
- Thomas Sturm
- Tim de Koning
- Timo Huovinen
- Toby Pitman
- Tom Beddard
- Tom Robinson
- Tomomi Imura
- Trent Walton
- Tyler Gaw
- Vadim Gerasimov
- Vadim Ogievetsky
- Zachary Johnson
- Zoltan Hawryluk
March 29, 2010 at 3:57 pm
Thanks for posting :)
I’ll have to check out my version of Opera! I only use it for testing, so it may be out of date. I like the sound of border radius without the vendor prefix! I’m sick of writing the same lines over and over.
Something I’ve started using is the CSS3 Generator, made by Randy Jensen.
http://css3generator.com/
That speeds the process up a bit.
March 29, 2010 at 8:15 pm
Hi Rob, you’re welcome. I don’t know what platform you use, but unfortunately Opera 10.5 is currently only available on Windows. Mac soon hopefully.
The CSS3 generator looks way cool, and far too useful for this site :). But, I’m due to write some content for the SitePoint Tech Times today so thanks for the story idea!