Click here to Skip to main content
Click here to Skip to main content
Articles » Multimedia » GDI+ » Applications » Downloads
 
Add your own
alternative version
Go to top

A Professional HTML Renderer You Will Use

, 29 Jan 2009
100% managed code that draws HTML on any device
HtmlDemo.002.zip
System.Drawing.Html.dll
Html Demo.exe
HtmlDemo.zip
System.Drawing.Html.dll
Html Demo.exe
System.Drawing.Html.002.zip
System.Drawing.Html
Html Demo
bin
Debug
Html Demo.exe
Html Demo.vshost.exe
HtmlDemo.zip
System.Drawing.Html.dll
Html Demo.csproj.user
Properties
Settings.settings
Resources
comment16.gif
delete16.gif
delete32.gif
exclamation32.png
favorites32.png
font32.png
formula32.png
image32.png
method16.gif
paly32.png
property16.gif
property32.png
refreshdocument32.png
web_pallete.gif
Window.gif
Samples
System.Drawing.Html.suo
System.Drawing.Html
bin
Debug
System.Drawing.Html.dll
System.Drawing.Html.vshost.exe
Properties
Settings.settings
System.Drawing.Html.zip
Html Demo.exe
Html Demo.vshost.exe
System.Drawing.Html.dll
Html Demo.csproj.user
Settings.settings
comment16.gif
delete16.gif
delete32.gif
exclamation32.png
favorites32.png
font32.png
formula32.png
image32.png
method16.gif
paly32.png
property16.gif
property32.png
refreshdocument32.png
web_pallete.gif
Window.gif
System.Drawing.Html.suo
System.Drawing.Html.dll
System.Drawing.Html.vshost.exe
Settings.settings
<html>
	<head>
		<title>Non standard features</title>
		<link rel="Stylesheet" href="property:Html_Demo.Bridge.StyleSheet" />
		<style>
		  .g1, .g2, .g3, .g4, .g5  { background-color:red; background-gradient:yellow; }
		  .g1  { background-gradient-angle:0; }
		  .g2  { background-gradient-angle:45; }
		  .g3  { background-gradient-angle:90; }
		  .g4  { background-gradient-angle:135; }
		  .g5  { background-gradient-angle:180; }
		  
		  .c1, .c2, .c3, .c4, .c5 { background-color:olive; border:0px; color:white; vertical-align:middle; }
		  .c1  { corner-radius:0px }
		  .c2  { corner-radius:10px }
		  .c3  { corner-radius:0px 10px 10px 0px }
		  .c4  { corner-radius:25px }
		  .c5  { corner-radius:10px; border:outset #BBBB00 2px; }
		  
		  td   { text-align:center; }
		</style>
	</head>
	<body>
	<h1>Non standard features</h1>
	<blockquote>
	<p>There are some non-standard features that you may already discovered about the renderer core engine.</p>
	<h2>Graphic features</h2>
	<p>I have always wanted the W3C to add this features to the CSS spec (And so far, not there yet :)</p>
	<ul>
	 <li><b>Gradients on backgrounds</b></li>
	 <li><b>Rounded corners</b></li>
	</ul>
	<p>And I think many many web designers would agree. Is it so hard or what?.</p>
	<h3>Background Gradients</h3>
	
	<p>It is a simple two color linear gradient, achieved by the adding of two CSS properties:</p>
	
	<ol>
	<li><code>background-gradient: (#Color)</code> Second color of the gradient background, the first one is given by <code>background-color</code>. Not inherited.</li>
	<li><code>background-gradient-angle: (number)</code> Angle (in degrees, clockwise) of the gradient. Not inherited. Initial value:90</li>
	</ol>
	<b>Some examples</b>
	<!-- Gradients table -->
	<table width="300px">
	<tr>
	<td class="g1"><p></p><p></p></td><td class="g2"></td><td class="g3"></td><td class="g4"></td><td class="g5"></td>
	</tr>
	<tr>
	<td>0 degrees</td><td>45 degrees</td><td>90 degrees</td><td>135 degrees</td><td>180 degrees</td>
	</tr>
	</table>
	
	<h3>Rounded corners</h3>
	
	<p>As you may already know, CSS is based on a <a href="http://www.w3.org/TR/CSS21/box.html">Box Model</a>, where every box has it's own set of properties. Since we are talking abound <b>boxes</b>, why not to make them with rounded corners, almost every website you visit nowadays makes use of rounded corners, where a not very nice trick with images and tables must be used.</p>
	<p>In this renderer, the rounded corners are achieved by adding this CSS properties:</p>
	<ul>
	<li><code>corner-ne-radius: (length)</code> Indicates the radius of the north-east corner. Not ineritted</li>
	<li><code>corner-se-radius: (length)</code> Indicates the radius of the south-east corner. Not ineritted</li>
	<li><code>corner-sw-radius: (length)</code> Indicates the radius of the south-west corner. Not ineritted</li>
	<li><code>corner-nw-radius: (length)</code> Indicates the radius of the north-west corner. Not ineritted</li>
	<li><code>corner-radius: (length){1,4}</code> Shorthand for the other corner properties. Not ineritted</li>
	</ul>
	<!-- Corners table -->
	<b>Some examples</b>
	<table width="320px" cellspacing="10">
	<tr>
	<td width=1 style="border:0px"><p></p><p></p></td><td class="c1">c1</td><td class="c2">c2</td><td class="c3">c3</td><td class="c4">c4</td><td class="c5">c5</td>
	</tr>
	</table>
	<pre>.c1, .c2, .c3, .c4, .c5 { background-color:olive; border:0px; color:white; vertical-align:middle; }
.c1  { corner-radius:0px }
.c2  { corner-radius:10px }
.c3  { corner-radius:0px 10px 10px 0px }
.c4  { corner-radius:25px }
.c5  { corner-radius:10px; border:outset #bb0 2px; }</pre>
	</blockquote>
	</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The BSD License

Share

About the Author

Jose Menendez Póo
Team Leader
Mexico Mexico
I'm in game programming now: https://itunes.apple.com/us/app/ugly-aliens-training-center/id859271884?ls=1&mt=8
 
Jose Manuel Menéndez Poó
 
- I've been programming Windows and Web apps since 1997.
- My greatest concern nowadays is user interface usability.
 
Questions and stuff by twitter: @menendezpoo
 
Blog
menendezpoo.com

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 30 Jan 2009
Article Copyright 2009 by Jose Menendez Póo
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid