I love CSS because you can make all kinds of
stylish stuff with it and it's so easy.
This time, I've tried some candy-like title design thus using round pastel colored shapes. The word "candy" is one span element including span child elemtsof each alphabet with different id's.
So how do you make the round shapes?
One way is to create seperate div elements and define height, width and other details for each element. But there is an easier solution to make same sized shapes. The answer is the CSS property flex.
Write display:flex in the parent element (id="candy") flex:some number in the child elements. This number defines the width of the element. It's annoying but to make this property compatible with other browsers you need the prefixes -webkit-flex for Google and Safary, -ms-flex for IE. I hope that we will not need these prefixes someday!
This time, I've tried some candy-like title design thus using round pastel colored shapes. The word "candy" is one span element including span child elemtsof each alphabet with different id's.
So how do you make the round shapes?
One way is to create seperate div elements and define height, width and other details for each element. But there is an easier solution to make same sized shapes. The answer is the CSS property flex.
Write display:flex in the parent element (id="candy") flex:some number in the child elements. This number defines the width of the element. It's annoying but to make this property compatible with other browsers you need the prefixes -webkit-flex for Google and Safary, -ms-flex for IE. I hope that we will not need these prefixes someday!
No comments:
Post a Comment