font
Designing Chaturbate Bios - <font>
HTML Tag - Font
<font> HTML tag used to define and render style for text elements
On Chaturbate this HTML element is not popular among web designers but it can be useful as a block/container in certain situations.
| TAG | HTML MARKUP | DEFINES |
|---|---|---|
<font> |
<font color="red">...</font> |
HTML tag used to define and render style for text elements |
HTML MARKUP
font - can be used in conjunction with inline css and can hold other block elements
HTML Markup Code:
<font>
<font color="red">This element is using <font> tags</font>Will render:
This element is using <font> tags
<font style="display:block;width:70%;height:auto;margin:3px auto 12px auto;padding:10px;background-color:#f1f1f1;color:#036;font-size:1.7em;text-align:center;">This element is using <font> tags</font>Will render:
This element is using <font> tags
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 <font> HTML tag
Even if <font> HTML element is not popular it has value because it acts like a block element and block elements are easy to use in custom projects.
<font> tag and how to style them to look more appealing using inline-CSS
1. Other styling using inline-css
<font style="display:block;width:50%;height:auto;background-color:#f1f1f1;padding:10px;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;">This element is using <font> tags</font>Show:
This element is using <font> tags
2. Other styling using inline-css
<font style="display:block;width:50%;height:auto;background-color:#036;color:#fff;padding:10px;border:4px double yellow;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 7px #999;box-shadow:0 1px 7px #999;">This element is using <font> tags</font>Show:
This element is using <font> tags
3. Other styling using inline-css
<font style="display:block;width:70%;height:auto;background-color:#222;color:#fff;padding:10px;border:1px dotted orange;-webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.4)));">This element is using <font> tags</font>Show:
This element is using <font> tags
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 -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.4)));
4. Other styling using inline-css
<font style="display:block;width:70%;height:auto;background-color:#222;color:#fff;padding:10px;border:1px dotted orange;-webkit-box-shadow:0 1px 7px 12px #999;box-shadow:0 1px 7px #999;">This element is using <font> tags</font>Show:
This element is using <font> tags
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
<font style="display:block;width:80%;height:auto;background-color:orange;color:#fff;padding:20px 10px 30px;-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%);">This element is using <font> tags</font>Show:
This element is using <font> tags
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
<font style="display:block;width:90%;height:auto;background-color:#6c757d;color:#fff;padding:20px 10px 30px;text-align:center;-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%);">This element is using <font> tags</font>Show:
This element is using <font> tags
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%);
