deviant art

Deviant Login
Buy Art Buy adCast Buy Premium Membership
Shop		  Join deviantART for FREE Take the Tour
[x]
Browse More Like This
Download Image
PNG, 500×231 more ▶

More from ~blindbartemais

Featured in Groups:

:iconwindowsreimagined: #WindowsReimagined
Start From a New Beginning :iconhtmlcreations: #HTMLCreations
Power to the web :iconmoderntech: #ModernTech
Unique technology

Details

June 7, 2012
11.3 KB
500×231
Link
Thumb

Statistics

Comments: 7
Favourites: 20 [who?]


Views: 1,367 (1 today)
Downloads: 97 (0 today)

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution 3.0 License.
[x]
:iconblindbartemais:
This submission is actually a release, not just a concept.

I was tasked with recreating a concept/design into reality, a concept created a couple years ago and still used now.
Based on Metro and given to you as a Gift wrapped in heavenly CSS3 for learning and usage.

Hope you all enjoy my line of creating a Metro Chat Bubble using CSS3 step by step.

Step 1: using CSS3 to recreate the element objects,first a banner,this banner I designed for a website using only CSS3 without any images, then to use it now to recreate a Metro Bubble using Elements and Object Design in CSS3.
Link:[link]

Step 2: create the first actual Metro Bubble using the same idea and logic, but change positioning and color and adding another element to help format it properly.
Link:[link]

Step 3: Create multiple bubbles with actual style, by first adding a element container for each bubble, then creating a second property and adjusting each element class attached to each property, then giving each a style.
Link:[link]

Step 4: Create the text layout with each persons avatar styled on the sides to help give it more Authentic and Realistic Metro Bubbles.
Link:[link]

Step 5: Last we add the remaining touches on the font/element sizing styles, background styles and more chat bubbles :).
Link:coming soon

License: you may use the design/code in the lessons here for any project however you may not re-submit my tutorials themselves in any way shape or form, only the work/design.
Add a Comment:
 
Preview   Add Comment
:iconmpa4hu:
~Mpa4Hu Nov 21, 2012
Hello, excellent work
I wanted to ask permission about using/editing this bubbles for my website where I want to have chat. of course I'm gonna add credits in the special page
Reply
:iconblindbartemais:
~blindbartemais Nov 29, 2012  Professional Interface Designer
Thanks and of course : ) infact I'm much interested in seeing it when its done and used.
Reply
:iconja0s:
~Ja0s Aug 21, 2012
¿Se puede usar esto para cambiar los comentarios en wordpress?
Reply
:iconblindbartemais:
~blindbartemais Aug 24, 2012  Professional Interface Designer
i'm not 100% sure on what you said as I am not fluent in spanish however google translate didn't work either. but I am assuming that you mean can this be used with comments component on wordpress. and yes why yes it can. it can be used with anything if you understand how to set it up properly. I've tested it with several CMS's like Wordpress and Drupal and etc.
Reply
:iconntim007:
=ntim007 Jun 7, 2012
Great work !!!!
Reply
:iconlink6155:
~link6155 Jun 7, 2012  Hobbyist Interface Designer
nice work as always blindbartemais!
Reply
:iconblindbartemais:
~blindbartemais Jun 7, 2012  Professional Interface Designer
it always nice when you comment, thanks :L
Reply
Add a Comment:
 
Preview   Add Comment
©2013 deviantART. All rights reserved
About Us | Contact Us | Developers | Careers | Site Tour | Help & FAQ Advertise | Premium Membership Etiquette | Privacy Policy | Terms of Service | Copyright Policy