HOME | DD

Description
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.

Description
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.