ShopDreamUp AI ArtDreamUp
Deviation Actions
Suggested Deviants
Suggested Collections
You Might Like…
Featured in Groups
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.
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.
Image size
500x231px 11.28 KB
Comments7
Join the community to add your comment. Already a deviant? Log In
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
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