img
Designing Chaturbate Bios - <img>
HTML Tag - Image
<img> HTML tag, defines image elements
On Chaturbate this HTML element is used often, by default, <img> elements are considered blocks
| TAG | HTML MARKUP | DEFINES |
|---|---|---|
<img> |
<img src="..."/> |
HTML tag used to define and render image element |
HTML MARKUP
img - can be used in conjunction with inline css and it is not recommended to hold other block elements
HTML Markup Code:
<img>
<img src="image-path/cdcoffee.png">Will render:
<img src="image-path/cdcoffee.png" style="display:block;width:330px;height:auto;background-color:#222;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 6px 7px -4px #999;box-shadow:0 6px 7px -4px #999;">Will render:
Code Snippets
Test markup codes and see how your browser is rendering them. Use button to see how to use the source editor and rendering tool
Markup Code Box
Default button, on click, removes the markup code from light-blue box
Render Box
That's how it looks rendered in browser. Optionally you can Save as PDF
Markup Codes using <img> HTML tag
Images/graphic elements have a powerful visual impact and you should take advantage of this known fact.
<img> tag and how to style them to look more appealing using inline-CSS
1. Other styling using inline-css
<img src="image-path/cdcoffee.png" style="display:block;width:330px;height:auto;background-color:#f1f1f1;border:4px double #036;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 6px 7px -4px #999;box-shadow:0 6px 7px -4px #999;">Show:
2. Other styling using inline-css
<img src="image-path/cdcoffee.png" style="display:block;width:330px;height:auto;background-color:#222;border:4px double yellow;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 6px 7px -4px #999;box-shadow:0 6px 7px -4px #999;">Show:
3. Other styling using inline-css
<img src="image-path/cdcoffee.png" style="display:block;width:330px;height:auto;border:4px double #ccc;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 6px 7px -4px #999;box-shadow:0 6px 7px -4px #999;-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.6)));">Show:
Box reflect css, inline-css accepted by Chaturbate platform
As you can see, css can work its magic and can be applied to other HTML elements too.
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.6)));
4. Other styling using inline-css
<img src="image-path/cdcoffee.png" style="display:block;width:330px;height:auto;background-color:#f1f1f1;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 7px #999;box-shadow:0 1px 7px #999;">Show:
Box shadow css, inline-css accepted by Chaturbate platform
-webkit-box-shadow:0 1px 7px 12px #999;box-shadow:0 1px 7px #999;
5. Other styling using inline-css
<img src="image-path/cdcoffee.png" style="display:block;width:330px;height:auto;background-color:#222;-webkit-border-radius:8px 8px 35px 35px;border-radius:8px 8px 35px 35px;padding:0 0 22px;-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 75% 90%, 73% 100%, 62% 90%, 0 90%);clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 75% 90%, 73% 100%, 62% 90%, 0 90%);">Show:
Clip path css, inline-css accepted by Chaturbate platform
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 75% 90%, 73% 100%, 62% 90%, 0 90%);clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 75% 90%, 73% 100%, 62% 90%, 0 90%);
5. Other styling using inline-css
<img src="image-path/cdcoffee.png" style="display:block;width:330px;height:auto;background-color:#09F;-webkit-clip-path: polygon(90% 0, 100% 50%, 91% 100%, 0% 100%, 14% 49%, 0% 0%);clip-path: polygon(90% 0, 100% 50%, 91% 100%, 0% 100%, 14% 49%, 0% 0%);">Show:
Clip path css, inline-css accepted by Chaturbate platform
-webkit-clip-path: polygon(90% 0, 100% 50%, 91% 100%, 0% 100%, 14% 49%, 0% 0%);clip-path: polygon(90% 0, 100% 50%, 91% 100%, 0% 100%, 14% 49%, 0% 0%);
