#Tutorial : Image Shape
Wednesday, 16 December 2015 @ 00:01
Hello guys!!
I'm going to share with you guys the code to change your image shape!!
This tutorial can use in many way
You an paste it in your blog template
Or you can use this code in your blog post
Blog Template
1.Open you blog template, change to Edit Html
2.Press Ctrl+F (Command+F for Mac user)
3.Find </style>
4.Put this code before </style>
img {-moz-border-radius: 1em 4em 1em 4em;border-radius: 1em 4em 1em 4em;}
Replace the code with these code
1.border-radius: 500px; opacity: 1; padding: 3px;
2.-moz-border-radius: 35px;border-radius: 35px;
3.-moz-border-radius: 25px 10px / 10px 25px;border-radius: 25px 10px / 10px 25px;
4.-moz-border-radius: 1em 4em 1em 4em;border-radius: 1em 4em 1em 4em;
5.-moz-border-radius-bottomright: 25px 50px;border-bottom-right-radius: 25px 50px;
6.-moz-border-radius-bottomright: 50px 25px;border-bottom-right-radius: 50px 25px;
7.moz-border-radius-bottomright: 50px;border-bottom-right-radius: 50px;
Blog post
Colour - Image Url(http://data.whicdn.com/images/212953422/large.jpg)
Colour - Image Size(150)
Dreamer Advice - You can change the image url and the image size, but be careful, don't change others or else won't success.
<img src="http://data.whicdn.com/images/212953422/large.jpg" style=" border-radius: 500px; opacity: 1; padding: 3px;width: 150px;">
<img src="http://data.whicdn.com/images/212953422/large.jpg" style="-moz-border-radius: 35px;border-radius: 35px;width: 150px;">
<img src="http://data.whicdn.com/images/212953422/large.jpg" style="-moz-border-radius: 25px 10px / 10px 25px;border-radius: 25px 10px / 10px 25px;width: 150px;">
<img src="http://data.whicdn.com/images/212953422/large.jpg" style="-moz-border-radius: 1em 4em 1em 4em;border-radius: 1em 4em 1em 4em;width: 150px;">
<img src="http://data.whicdn.com/images/212953422/large.jpg" style="-moz-border-radius-bottomright: 25px 50px;border-bottom-right-radius: 25px 50px;width: 150px;">
<img src="http://data.whicdn.com/images/212953422/large.jpg" style="-moz-border-radius-bottomright: 50px 25px;border-bottom-right-radius: 50px 25px;width: 150px;">
<img src="http://data.whicdn.com/images/212953422/large.jpg" style="-moz-border-radius-bottomright: 50px;border-bottom-right-radius: 50px;width: 150px;">
Mission Complete!!!