c# pdf viewer open source : Bookmarks pdf documents Library control class asp.net web page azure ajax DevPro%20HTML5%20PDF2-part1490

Chapter Three: HTML5 Is in Style: 
Working with CSS3 and HTML5
Use HTML5 with new CSS3 features to optimize user experience on your web-
site 
By Michael Palermo and Daniel Egan
If you peer into the HTML5 specifications, you’ll find plenty of documentation on HTML5, the fifth 
major installment of HTML. And if you nose around the latest tweets, blogs, and articles, you’ll dis-
cover many references to HTML5 as a platform. Among the associated technologies that are often 
assumed when HTML5 is referenced is Cascading Style Sheets (CSS). In this article, we’ll cover many 
of the enhancements to the latest version of CSS (version 3) and explain how CSS3 ties into HTML5.
Obviously, most web developers today are acquainted with CSS, so our focus will remain primarily 
on the popular new features in CSS3. To showcase those CSS3 features, we’ll use a simple HTML5 
document from a file named default.htm, shown in Figure 1, containing markup that highlights typical 
usage scenarios found in many websites today.Figure 2 shows the final rendering of this page.
Figure 1: An HTML5 default.htm page
<!doctype html> 
<html lang=”en”> 
<head> 
<meta charset=”utf-8” /> 
<title>CSS3 Demos</title> 
<link rel=”stylesheet” href=”styles/reset.css” /> 
<link rel=”stylesheet” href=”styles/core.css” /> 
<link rel=”stylesheet” href=”styles/css3.css” /> 
<script src=”scripts/modernizr.js” type=”text/javascript”> 
</script> 
</head> 
20
Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5
Bookmarks pdf documents - add, remove, update PDF bookmarks in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your C# Project with Rapid PDF Internal Navigation Via Bookmark and Outline
bookmarks pdf reader; adding bookmarks to a pdf
Bookmarks pdf documents - VB.NET PDF bookmark library: add, remove, update PDF bookmarks in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your VB.NET Project with Rapid PDF Internal Navigation Via Bookmark and Outline
how to bookmark a pdf file in acrobat; bookmark pdf in preview
<body> 
<header> 
<h1>HTML5 &amp; CSS3</h1> 
</header> 
<nav> 
<ul> 
<li class=”selected”><a href=”#”>Home</a></li> 
<li><a href=”#”>Demos</a></li> 
<li><a href=”#”>About</a></li> 
<li><a href=”#”>Contact</a></li> 
<li class=”subscribe”><a href=”#”>RSS</a></li> 
</ul> 
</nav> 
<aside id=”banner”> 
<header> 
<h2>Demo Site</h2> 
</header> 
<p class=”upsideDown”>Your world, upside-down</p> 
<figure class=”headingPhoto”> 
<img src=”images/devconsocial.jpg” 
alt=”devconnections social” /> 
<figcaption>The conversation begins here</figcaption> 
</figure> 
</aside> 
<section id=”content”> 
<section id=”blogs”> 
<article class=”blogPost”> 
<header> 
h2>HTML5 is in Style!</h2> 
<p>Posted by 
<a href=”http://www.palermo4.com”>Michael Palermo</a> 
<a href=”http://twitter.com/palermo4/”>@palermo4</a></p> 
</header> 
<div> 
<figure id=”figureAd”> 
<img src=”images/ad.jpg” alt=”ad” /> 
<figcaption>The next event!</figcaption> 
</figure> 
<p> The purpose of this sample web page is to showcase the features of CSS3 
with HTML5. Consider the list below of the topics that will be demonstrated: 
</p> 
<ul> 
Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5 
21
C# PDF File Compress Library: Compress reduce PDF size in C#.net
Remove bookmarks, annotations, watermark, page labels and article PDF document has been widely used by and organizations to distribute and view documents.
create bookmark pdf; display bookmarks in pdf
VB.NET PDF File Split Library: Split, seperate PDF into multiple
PDF files or they can separate source PDF file to smaller PDF documents by every explain how to split a PDF file into multiple ones by PDF bookmarks or outlines
adding bookmarks to pdf reader; bookmarks pdf
<li>Table Display</li> 
<li>Fonts</li> 
<li>Rounded Corners</li> 
<li>Color Techniques</li> 
<li>Box Shadows</li> 
<li>Transforms</li> 
<li>Media Queries</li> 
</ul> 
<p> Once you start down the path of developing HTML5 with CSS3, you will not 
want to develop or design for the web without it!        </p> 
</div> 
</article> 
</section> 
<aside id=”sidebar”> 
<section> 
<header> 
<h3>Why HTML5?</h3> 
</header> 
<ul> 
<li><a href=”#”>Less is More</a></li> 
<li><a href=”#”>It’s All Semantics</a></li> 
<li><a href=”#”>Hear is Another Reason</a></li> 
<li><a href=”#”>Lights, Camera, Video!</a></li> 
<li><a href=”#”>The Web is Your Canvas</a></li> 
<li><a href=”#”>More Storage</a></li> 
<li><a href=”#”>Better Script</a></li> 
</ul> 
</section> 
<section> 
<header> 
<h3>Your Thoughts?</h3> 
</header> 
<p contenteditable=”true”> 
[replace with your feedback!] 
</p> 
<input type=”button” value=”Submit” /> 
</section> 
</aside> 
</section> 
<footer> 
<p>Copyright &copy; 2011.  Please don’t steal stuff, etc.</p> 
</footer> 
</body> 
</html>
22
Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5
XDoc.PowerPoint for .NET, All Mature Features Introductions
NET WinForms; Outstanding rendering of PowerPoint documents; zooming & rotation; Outlines, bookmarks, & thumbnail Convert PowerPoint to PDF; Convert PowerPoint to
creating bookmarks pdf files; export pdf bookmarks
XDoc.Excel for .NET, Comprehensive .NET Excel Imaging Features
in .NET WinForms; Outstanding rendering of Excel documents; navigation, zooming & rotation; Outlines, bookmarks, & thumbnail Convert Excel to PDF; Convert Excel to
bookmarks pdf documents; export pdf bookmarks to text
Figure 2: The final rendering of the default.htm page
Let’s first observe HTML5’s relationship with CSS. The document in Figure 1 references three CSS files:
<link rel=”stylesheet” href=”styles/reset.css” /> 
<link rel=”stylesheet” href=”styles/core.css” /> 
<link rel=”stylesheet” href=”styles/css3.css” /> 
The first link is to the reset.css file. Typically, web designers provide a master or reset type of CSS file 
to equalize the defaults across all browsers. In this example, we are using the reset.css file made pub-
licly available by CSS guru Eric Meyer. The next link is to core.css, which contains CSS features up to 
version 2.1. The final link is to css3.css (see Figure 3). This file contains features exclusive to CSS3. By 
separating CSS into multiple files, we can show how easy it is to distinguish CSS features from one 
another. However, all the CSS used in this example could have easily been rolled into one complete 
file as well.
Figure 3: Css3.css
@charset ‘utf-8’; 
@font-face { 
font-family             : ‘TitleFont’; 
src                     : url(‘michroma.woff’) format(‘woff’); 
font-weight             : bold; 
font-style              : normal; 
h1, h2 { 
font-family             : ‘TitleFont’; 
Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5 
23
.NET PDF SDK - Description of All PDF Processing Control Feastures
Fully featured PDF Viewer in HTML5; Outstanding rendering of PDF documents; Full page navigation, zooming & rotation; Outlines, bookmarks, & thumbnail display;
creating bookmarks in pdf files; bookmarks pdf file
XDoc.Word for .NET, Advanced .NET Word Processing Features
in .NET WinForms; Outstanding rendering of Word documents; navigation, zooming & rotation; Outlines, bookmarks, & thumbnail Create Word from PDF; Create Word from
create bookmarks in pdf from excel; add bookmarks to pdf file
#sidebar section { 
border-radius           : 11px; 
-webkit-border-radius   : 11px; 
-moz-border-radius      : 11px; 
-o-border-radius        : 11px; 
#banner, #banner img { 
border-radius           : 22px; 
-webkit-border-radius   : 22px; 
-moz-border-radius      : 22px; 
-o-border-radius        : 22px; 
#banner figcaption 
border-radius           : 0 0 22px 22px; 
-webkit-border-radius   : 0 0 22px 22px; 
-moz-border-radius      : 0 0 22px 22px; 
-o-border-radius        : 0 0 22px 22px; 
background-color        : rgba(0,0,0,0.4); 
#content { 
display                 : table; 
#blogs, #sidebar { 
display                 : table-cell; 
#figureAd { 
box-shadow              : 11px 11px 11px #777; 
-webkit-box-shadow      : 11px 11px 11px #777; 
-moz-box-shadow         : 11px 11px 11px #777; 
-o-box-shadow           : 11px 11px 11px #777; 
#figureAd:hover { 
transform               : scale(1.5) rotate(-10deg); 
-ms-transform           : scale(1.5) rotate(-10deg); 
-webkit-transform       : scale(1.5) rotate(-10deg); 
-moz-transform          : scale(1.5) rotate(-10deg); 
-o-transform            : scale(1.5) rotate(-10deg); 
.upsideDown:hover { 
transform               : rotate(180deg); 
-ms-transform           : rotate(180deg); 
24
Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5
VB.NET PDF File Compress Library: Compress reduce PDF size in vb.
document file. Remove bookmarks, annotations, watermark, page labels and article threads from PDF while compressing. Also a preview
copy pdf bookmarks to another pdf; how to bookmark a page in pdf document
C# PDF File Split Library: Split, seperate PDF into multiple files
Split PDF file by top level bookmarks. The following C# codes explain how to split a PDF file into multiple ones by PDF bookmarks or outlines.
how to create bookmarks in pdf file; adding bookmarks to pdf document
-webkit-transform       : rotate(180deg); 
-moz-transform          : rotate(180deg); 
-o-transform            : rotate(180deg); 
@media (max-width: 1000px) 
nav ul li a { 
margin-right        : 0px; 
#content  
margin-top          : 50px; 
margin-left         : 15px; 
display             : inherit; 
#blogs, #sidebar { 
display             : inherit; 
#banner  { 
display             : none; 
}
You may have noticed the <script> tag reference to modernizr.js below the <link> tags in the default.
htm page in Figure 2. Publicly available at www.modernizr.com, the Modernizr JavaScript library lets 
us design for the future using HTML5 and CSS3 without sacrificing control over experience in older 
browsers. We immediately benefit from this file by simply referencing it.
Using Tables to Define Layouts
How many of us recall using <table> tags to create web page layouts? Don’t worry. This old method is 
not what we’re talking about in this section. In CSS3, we can define a table-like layout without using 
<table> tags. For example, in Figure 4, look at the layout for the content portion of default.htm.
Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5 
25
Figure 4: Layout for the content portion of default.htm
The old approach, using <table> tags, would probably look something like what you see in Figure 5.
Figure 5: HTML5 table layout
<!-- content element surrounds table --> 
<table> 
<tr> 
<td><!-- blogs in first column --></td> 
<td><!-- sidebar in second column --></td> 
</tr> 
</table>
The CSS3 way of doing things is much easier. Here’s how we get a simple two-column layout in the 
css3.css file:
#content    {display : table;} 
#blogs, #sidebar {display : table-cell;}
The <section> tag that has an ID of content is defined visually as a table. The two child tags with 
IDs of blogs and sidebar are defined in the CSS file as table-cell, causing each to render visually as a 
column in the table.
Fancy Fonts Made Easy
Bringing unique fonts to web pages has always been a challenge. To introduce a nonstandard font, 
developers often had to use images. In CSS3, this is no longer the case. CSS3 allows us to welcome 
new fonts to our web pages by using the @font-face definition. Consider the following definition, as 
found in the css3.css file:
@font-face { 
font-family             : ‘TitleFont’; 
src                     : url(‘michroma.woff’) format(‘woff’); 
font-weight             : bold; 
font-style              : normal;
The @font-face definition first establishes what the friendly name of the font will be by using the 
font-family property. In our example, we named the font “TitleFont.” The src property requires the 
URL of the .woff file that contains the desired font. You can find custom .woff selections at sites such 
as www.fontsquirrel.com. The other properties define default behaviors for weight and style. 
When serving a web page that uses custom fonts, the web server must be configured to understand 
the .woff extension and its MIME type. For Microsoft IIS, this can be accomplished by updating the 
web.config file, as we have done in Figure 6.
Figure 6: The web.config file
26
Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5
<configuration> 
<system.webServer> 
<staticContent>
<mimeMap fileExtension=”.woff” mimeType=”application/x-woff” /> 
</staticContent> 
</system.webServer> 
</configuration>
The @font-face definition makes the font available only within the web page. We need to define the 
location in which we want the font to be used; we do this by referring to the friendly name elsewhere 
in the CSS file. In our example, this is how to use the custom font:
h1, h2 {font-family         : ‘TitleFont’;} 
In this example, the custom font that has the friendly name of TitleFont will be applied to all <h1> 
and <h2> tags in the HTML.
Corners, Shadows, and Colors
Although it is true that the little things sometimes matter the most, it is also true that the little feature 
requests often cause the most fuss. Rounded corners, color enhancements, and box shadows are 
all features that have usually required meticulous tweaking with using images and JavaScript. Once 
again, CSS3 comes to our rescue. 
Let’s see how simple it is to apply rounded corners using CSS3. In the sidebar sections of default.htm, 
let’s apply a rounded corner as follows:
#sidebar section {border-radius                 : 11px;} 
The border-radius property defines the radius as either a unit value or a percentage value. The 
example here eliminates the need to explicitly specify the radius for each corner. So that’s it. Well 
sort of. To support older browsers or other browsers, vendor-prefixed versions should also be applied. 
Here is the example again, this time with support for Mozilla, WebKit, and Opera: 
#sidebar section { 
border-radius           : 11px; 
-webkit-border-radius   : 11px; 
-moz-border-radius      : 11px; 
-o-border-radius        : 11px;
Don’t let the duplication bother you too much. If the browser doesn’t understand a property, that 
property is ignored. And if repetition feels wrong to you, welcome to the world of multiple-browser 
support.
Now let’s look at an example of applying the rounded effect to just some of the corners. Here, we 
want only the bottom-right and bottom-left corners to be rounded:
#banner figcaption 
Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5 
27
border-radius           : 0 0 22px 22px; 
-webkit-border-radius   : 0 0 22px 22px; 
-moz-border-radius      : 0 0 22px 22px; 
-o-border-radius        : 0 0 22px 22px; 
}
Shadow effects are just as easy to implement. The following example adds a shadow to the <figure> 
tag that has an ID of “figureAd”:
#figureAd { 
box-shadow              : 11px 11px 11px #777; 
-webkit-box-shadow      : 11px 11px 11px #777; 
-moz-box-shadow         : 11px 11px 11px #777; 
-o-box-shadow           : 11px 11px 11px #777; 
}
Like the border-radius property, vendor prefixes are added to support multiple browsers. The values for 
the property indicate the depth of the horizontal shadow, the depth of the vertical shadow, the depth 
of the blur effect, and the color of the shadow, in that order. The first two values are required. If nega-
tive values are supplied, the shadow goes in the opposite direction.
Color effects are also fairly simple to add. Consider the convention of dimming a photo when it is not 
the main attraction. In the past, we had to create a duplicate of the photo and add the dimming effect 
with image-editing software. With CSS3, we can define this effect without a modified version of the 
original image. Here is an example of applying a dimming effect to the <figcaption> tag associated 
with an <img> tag:
#banner figcaption 
/* other definitions removed for brevity */ 
background-color        : rgba(0,0,0,0.4); 
}
The rgba value uses four arguments. The first three define red, green, and blue (RGB) intensities with 
a value range of 0 through 255. The remaining value determines opacity, where 1.0 is opaque and 
0 is completely transparent. Since the RGB values are all 0 in our example, the color is black, and 
the remaining value indicates 40-percent opacity. The effect is a grayish see-through layer above the 
image. The <figcaption> tag is absolutely positioned over the <img> in the core.css file. To cover the 
entire image with this effect, simply make <figcaption> the same dimensions as the image.
Transformations
In CSS3, transformations take the user experience to the next level. Let’s consider just two transfor-
mations: scale and rotate. The scale transformation causes any UI element to shrink or grow when a 
user hovers over it. Suppose we want a portion of a page to pop out and rotate somewhat when we 
hover over it. We can apply the scale transformation to make it grow and the rotate transformation to 
28
Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5
provide a rotation effect. In the following example, we want to see the <figure> tag that has the ID of 
figureAd grow by 150 percent. We also want to see this tag rotate counter-clockwise by 10 degrees:
#figureAd:hover { 
transform               : scale(1.5) rotate(-10deg); 
-ms-transform           : scale(1.5) rotate(-10deg); 
-webkit-transform       : scale(1.5) rotate(-10deg); 
-moz-transform          : scale(1.5) rotate(-10deg); 
-o-transform            : scale(1.5) rotate(-10deg); 
}
The vendor prefixes are all displayed in this example. Did you notice the -ms- prefix? While CSS3 
transformations are under development, each browser will continue to have its own implementation. 
The first property that contains no prefix is there for future compatibility. Figure 7
a
shows the UI ele-
ment before the user hovers the mouse over it; Figure 7
b
shows the element after hovering over it.
Figure 7a: UI element before hover
Figure 7b: UI element after hover
Media Queries
When using CSS, not only do we factor in the various browsers—as if that wasn’t enough to worry 
about—we also have to consider various devices, such as mobile phones. With large and small screen 
Chapter Three: HTML5 Is in Style: Working with CSS3 and HTML5 
29
Documents you may be interested
Documents you may be interested