Untitled-1

StratusApp website competition

by Jeff Broderick Pro Jun 3, 2011
in StratusApp
Stratusapp

2 Attachments

6 buckets
help 10 rebounds
Tweet
5,921 views
http://drbl.in/bqso
Icon-colordrop

Tags

  1. 41
  2. 16
  3. 6
  4. 4
  5. 1
  6. 1

61 Responses (page 1 of 3)

  1. Pro Untitled-1 Jeff Broderick

    So, I finally got around to coming up with a simple website design for StratusApp.

    I thought I would open this up to everyone and try to make a fun little contest for this. The person who converts this PSD to CSS/HTML/Javascript (static only) most creatively and closest to the PSD will win $100 (maybe more depending on how cool it is) and a link at the bottom of this site.

    Things that will sway me in picking a winner:
    - As much CSS/HTML use as possible (screw IE)
    - Simple/subtle transitions/animations
    - If I can tell you had fun with it and tried something new

    No hard deadline but sooner is better.

    Please leave a comment here with a link to the site so everyone can enjoy it too! If you can't comment sent it to me via twitter. :D

    Thanks and have fun!!

    likes

    12 months ago

  2. Pro 23232 Benjamin Nathan

    If I was better in CSS I'd enter! Great job on the icon, btw. :)

    12 months ago

  3. Avatar2 Anthony Garand

    Do we have a deadline?

    12 months ago

  4. Pro Untitled-1 Jeff Broderick

    @Anthony Updated description. Thanks!

    12 months ago

  5. Square-big Manolo Sañudo

    Don't think I'll be able to get all those pop ups to work… hahaha Oh well…

    12 months ago

  6. Pic four (square) Andy Macdonald

    Is there going to be an issue with the new iCloud icon? http://www.macrumors.com/2011/06/02/icloud-icon-revealed-apple-posts-icloud-banner-at-wwdc/

    12 months ago

  7. Pro Untitled-1 Jeff Broderick

    No idea. I made this a while ago. Well before iCloud was announced or rumored: http://dribbble.com/shots/125155-Stratus-iPhone-Icon

    likes

    12 months ago

  8. Avatar2 Anthony Garand

    There's only so many ways to make a cloud ;)

    likes

    12 months ago

  9. Pro James seymour-lock James Seymour-Lock

    I have half an hour spare, Might have a play around.

    12 months ago

  10. 01 Joshua Titus

    this should be interesting

    12 months ago

  11. Pro Dvq-logo Matthew Skiles

    I'm in!

    12 months ago

  12. Pro Photo_on_2009-09-09_at_09 Wills Bithrey

    Im so doing this after my exams are over - Thanks Jeff :D!

    12 months ago

  13. Pro Josh_hemsley Josh Hemsley

    I'll throw in the code to my 2am half-assed-forgot-the-tooltips attempt, if anyone wants to use it to jumpstart your entry. Sample & download: http://twitter.com/joshhemsley/statuses/76585394325569536

    likes

    12 months ago

  14. Hp

    Stratusapp_teaser StratusApp Intro Anima... Hope you like it... 100% HTML5 Stratus App Intro By Hudson Peralta: http://designedby.me/stratusapp/ June 03, 2011

    Rebound

    StratusApp Intro Animated In HTML5

    by Hudson-Peralta

    Hope you like it... 100% HTML5

    Stratus App Intro By Hudson Peralta:
    http://designedby.me/stratusapp/

    12 months ago

  15. Avatar

    Screen_shot_2011-06-03_at_7 StratusApp Website Com... My entry for the @brdrck's StratusApp website competition, 100% hand-coded, viewable at http://dennistang.net/stratus/. I attempted to remake as many graphi... June 03, 2011

    Rebound

    StratusApp Website Competition Entry

    by Dennis Tang

    My entry for the @brdrck's StratusApp website competition, 100% hand-coded, viewable at http://dennistang.net/stratus/.

    I attempted to remake as many graphic assets as I could in CSS3, with the exception of the icon, glyphs, and tooltips (does anyone know how to have the triangle share the border with the rest of the tooltip?), with box-shadows galore, used for inner glow as well! CSS3 animations were generously used, and there's a modal video player for Vimeo which only requires changing the video URL!

    99% of it is HTML5/CSS3 with the exception of a tiny bit of JavaScript for the video player!

    Hope you guys like it!

    12 months ago

  16. Img_0314

    Stratus_teaser StratusApp contest entry Alright, so here's my entry for the contest. I used absolutely no JavaScript — CSS3 animations only. It works in Firefox, Safari/Chrome and Opera. Live vers... June 04, 2011

    Rebound

    StratusApp contest entry

    by Galen Gidman

    Alright, so here's my entry for the contest. I used absolutely no JavaScript — CSS3 animations only. It works in Firefox, Safari/Chrome and Opera.

    Live version →
    Download →

    Totally had a great time with this — great contest idea!

    12 months ago

  17. Pro Me Brian Benitez

    Dang, dude. All these entries are sick!

    likes

    12 months ago

  18. Joe-profile

    3-images_teaser 3 Images, rest is CSS/... My shot at this. It's not perfect, there's some work that could be done and cleaned up, but I commented my code: http://grinnbarrett.net/stratus/ Of course... June 04, 2011

    Rebound

    3 Images, rest is CSS/HTML - Rebound of Stratus App

    by Joe Barrett

    My shot at this. It's not perfect, there's some work that could be done and cleaned up, but I commented my code:

    http://grinnbarrett.net/stratus/

    Of course best experienced in Chrome and Safari (Chrome has smoother animations that I prefer). A little different than some of the others, and I tried to make it as little markup as possible. I might update it a little more, but it would only be tweaking the animations probably.

    As you can see with the title, I used 3 images and then CSS to create everything else, even the big shadow underneath the icon. I went at this as a challenge in how much of the design could be written in CSS. I have egregious use of ::before and ::after to create elements as you'll see. And yes if you notice, my "triangle" with continuous border is in all CSS. I have one extra span that I didn't want to add, but just took a shortcut right now. If anything it could be built upon. I'm open to any suggestions to making it better or take a crack yourself - http://jsfiddle.net/3arrett/cfdNS/1/

    Now, if only I could have made the Twitter bird shape in CSS....

    12 months ago

  19. 01 Joshua Titus

    all entries are awesome so far. good luck guys.

    likes

    12 months ago

  20. Flannelplaid

    Cm_capture_1_teaser Stratus Markup Competi... My entry for Jeff's Stratus markup competition. Was glad no one took my idea of a blinking status light yet ^__^ However, the blinking light only works in w... June 05, 2011

    Rebound

    Stratus Markup Competition Entry

    by Collin Henderson

    My entry for Jeff's Stratus markup competition. Was glad no one took my idea of a blinking status light yet ^__^

    However, the blinking light only works in webkit browsers.

    Live: http://labs.syropia.net/Stratus/

    UPDATE: Added a nice little entrance animation as well :)

    12 months ago

  21. Pro Unbenannt-3 Dominik Schmidt

    If I am coding in CSS3, is it ok? Because of cross-browser compatibility?

    12 months ago

  22. Newprofilepic2

    Stratusappsnap_teaser The Stratus App This is my take on the Stratus App landing page. I decided to change the layout a bit from the original, mainly the Download button. I've also tested it in t... June 05, 2011

    Rebound

    The Stratus App

    by John Tidey

    This is my take on the Stratus App landing page. I decided to change the layout a bit from the original, mainly the Download button. I've also tested it in the five main browsers and on the Iphone. Live version: http://johntidey.tumblr.com/StratusApp

    12 months ago

  23. E470ac005fc011e1b9f1123138140926_7

    Safari_teaser StratusApp Website Com... My entry for Jeff's Stratus app competition. 100% hand-coded ! And I used 0 line of javascript. It's fully compatible with IE9, Firefox, Chrome, Opera &... June 05, 2011

    Rebound

    StratusApp Website Competition Entry

    by Victor Coulon

    My entry for Jeff's Stratus app competition.
    100% hand-coded ! And I used 0 line of javascript.
    It's fully compatible with IE9, Firefox, Chrome, Opera & Safari.
    Hope you like it !
    (Better in webkit with some animations on launch.)
    http://lab.victorcoulon.fr/freelance/stratusapp

    12 months ago

  24. Untitled-1

    Arriving_teaser Arriving Working on a new page for StratusApp. Was inspired by the fine guys at Cultured Code. What do you think? June 06, 2011

    Rebound

    Arriving

    by Jeff Broderick

    Working on a new page for StratusApp. Was inspired by the fine guys at Cultured Code. What do you think?

    12 months ago

  25. Pro Newavhead Pasquale D'Silva

    Wow, spec work...

    likes

    12 months ago

keyboard shortcuts: ← previous shot → next shot L or F like