aside {
border:2px solid gray;
border-top-right-radius:20px;
border-bottom-left-radius:20px;
}
Theresultissoeasytoachieveandreallyeffective,asyoucanseeinFigure10.11.
Figure 10.11. Mixing up corner styles in the one box
Havingtalkedaboutvendorprefixes,youmightbeaskingwhytherearenone
showinginthepreviousexample.Asitturnsout,allthelatestbrowsersnowsupport
border-radius
withouttheneedforvendorprefixes,andtheyallusethesame
syntax.Sothethreelinesaboveareperfectlyokaybythemselves,unlessyouknow
(orthink)thatsomevisitorstoyoursitearestillusingolderbrowsers,inwhichcase
youmightwanttoaddinthevendorprefixversionstoo.
Personally,I’mhappytodropthemforthisexample,andthat’spreciselywhatthe
browserswouldlikeyoutodoovertime.
Feelfreetoplayaroundwiththevalues—tryapplying
border-radius
todifferent
elementsandseehowitaffectsthem.Itevenworksonimages.Ifwechangedthe
CSSabovetoapplytothe
img
elementratherthanthe
aside
,thehomepageimage
wouldlooklikeFigure10.12.
Build Your Own Website The Right Way Using HTML & CSS
394
Pdf bookmarks - 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 in pdf files; how to create bookmarks in pdf file
Pdf bookmarks - 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
add bookmarks to pdf reader; bookmark page in pdf
Figure 10.12. The 
border-radius
property applied to an image
The Details in the Shadows
Asawebdeveloper,it’sverycommontoreceivewebpagemockupsfeaturinglots
ofroundedcornersfromdesigners.Nowweknowthattherearewaystoachieve
thiswithsomesimpleCSS,butthere’sanotherfeatureofsuchmockupsthat’salways
beentrickytodealwith—thedropshadow.InagraphicspackagesuchasPhotoshop,
applyingadropshadowisasupremelyeasytask,butmakingitworkonawebpage
hasalwaysbeendifficult.
Inthepast,it’smeanthavingtocreateimageswiththedropshadowaspartofthe
image,buteventhishasitslimits—suchaswhathappenswhenthebrowserwindow
isresized.Doestheshadowpartoftheimagemovetoapositiononthepagewhere
theeffectnolongerworks?Thankfully,there’sawaytoachieveapropershadow
effectwithCSS,andthepropertyiscalled
box-shadow
.
Agoodpagetodemonstrateitonisthephotogallery.We’llapplysomeextra
roundedcornereffectsusing
border-radius
whilewe’reatittoo.ThenewCSS3
stylesarehighlightedinbold:
figure img {
border: 15px solid white;
border-radius:10px;
box-shadow:2px 2px 5px gray;
margin-bottom:10px; /* added just to give the shadow some 
breathing space */
}
395
Enhancing the Site with HTML5 and CSS3
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
convert word pdf bookmarks; create pdf bookmarks online
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 add bookmarks to pdf files; export pdf bookmarks to excel
AndinFigure10.13,theeffectiscleartosee.
Figure 10.13. The 
box-shadow
property takes care of drop shadows
Howisthisdone?The
box-shadow
propertytakesfourvaluestomakeitwork,and
theyare(inorder):
1.theoffsetalongthexaxis
2.theoffsetalongtheyaxis
3.theamountofblurontheshadow
4.thecoloroftheshadow
Inourexample,wehaveashadowthat’stwopixelstotherightandtwopixelsbelow
theimage,withafive-pixelblurandcoloredgray.Let’stryadifferentsetofvalues,
andyou’llseehoweasyitistochange:
box-shadow:10px 10px 20px black;
WhichgivesusFigure10.14.
Build Your Own Website The Right Way Using HTML & CSS
396
VB.NET PDF File Split Library: Split, seperate PDF into multiple
Demo Code in VB.NET. The following VB.NET codes explain how to split a PDF file into multiple ones by PDF bookmarks or outlines.
how to create bookmark in pdf automatically; how to add bookmarks on pdf
C# PDF File Compress Library: Compress reduce PDF size in C#.net
NET framework. Remove bookmarks, annotations, watermark, page labels and article threads from PDF while compressing. C# class demo
add bookmarks to pdf preview; bookmarks pdf reader
Figure 10.14. A larger offset gives a deeper effect to the drop shadow
It’sevenpossibletoapplymultiple
box-shadow
stooneelement—yousimplyplace
acommabetweeneachsetoffourvalues.Forexample,youcouldapplyashadow
bottom-rightandtop-leftbyusingamixtureofpositiveandnegativexandyvalues,
likeso:
box-shadow:2px 2px 15px black, -2px -2px 15px black;
Theeffectisthatofanouterglowratherthanadropshadow,andit’sparticularly
effectiveonelementssuchasbuttonsonforms.Figure10.15showshowitlooks
onourgalleryimages.
397
Enhancing the Site with HTML5 and CSS3
.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;
bookmark pdf in preview; pdf bookmark
XDoc.Word for .NET, Advanced .NET Word Processing Features
& rotation; Outlines, bookmarks, & thumbnail display; Integrated annotation; More about Web Viewer ▶. Conversion. Word Create. Create Word from PDF; Create Word
convert excel to pdf with bookmarks; add bookmarks to pdf
Figure 10.15. A glow effect generated by clever use of the 
box-shadow
But what about the vendor prefixes?
Inthepreviousexamples,Ididn’tshowthevendorprefixversions.Atthetime
ofwriting,allbutoneofthemodernbrowsersworkedwiththeproperbox-shadow
property.OnlymyversionofSafari(version5)refusedtoapplythestyles,soit
wasnecessarytodoubleupwiththeWebKitvendorprefix,forexample:
-webkit-box-shadow:2px 2px 15px black, -2px -2px 15px black;
box-shadow:2px 2px 15px black, -2px -2px 15px black;
From 
box-shadow
to 
text-shadow
Justasourfriendsfromtheworldofwebdesignliketoprovidemockupswithdrop
shadowsunderpanels,blocks,andsoon,theyoftenusesimilartechniqueswith
textelements.Well,wouldn’tyouknowit,CSS3hasitsownwayofdoingthattoo.
Sayhellotothe
text-shadow
property!
Now,formyfirsttrick,I’mgoingtomakeanelementlookugly,justtoproveapoint.
Howaboutthe
h2
headingonourprojectsite?Thatshoulddoit!
In
style1.css
,addthefollowing(it’snotimportantwhereyouplaceit):
Build Your Own Website The Right Way Using HTML & CSS
398
XDoc.Excel for .NET, Comprehensive .NET Excel Imaging Features
zooming & rotation; Outlines, bookmarks, & thumbnail display; Integrated annotation; More about Web Viewer ▶. Excel Convert. Convert Excel to PDF; Convert Excel
excel print to pdf with bookmarks; creating bookmarks in pdf documents
XDoc.PowerPoint for .NET, All Mature Features Introductions
& rotation; Outlines, bookmarks, & thumbnail display; Integrated annotation; More about Web Viewer ▶. PowerPoint Convert. Convert PowerPoint to PDF; Convert
excel pdf bookmarks; how to bookmark a pdf file
h2 {
text-shadow:5px 5px 2px gray;
}
Thensaveitandhavealookatthesite.Doesitlookawful?Good!Well,kindof.
It’sgoodthatitworked,butit’sproofthatthe
text-shadow
propertycaneasilybe
abused,creatinguglytextthat’softendifficulttoread,asFigure10.16shows.
Figure 10.16. When 
text-shadow
s diminish your web page’s overall look
Inmyexperience,
text-shadow
worksbestwhenyouapplysmallvaluestothex
andyoffsets,asmallamountofblur,andacomplementarycolor(thesyntaxisac-
tuallythesameasitisfor
box-shadow
).Then,whenit’sappliedtotextonbuttons
andthelike,itgivestheeffectofmakingthetextappearchiseledorembossed.
Wecanuseasubtle
text shadow
onthenavigationtexttobringitoutagainstthe
darkbluebackground.In
style1.css
,findthesectionthatdealswiththenavigation
styles(lookforthenewHTML5
nav
selector).Nowaddinthefollowing:
nav a {
text-shadow:1px 1px 2px white, -1px -1px 2px white;
text-decoration:none;
}
Savethestylesheet,andthentakealookatthepageinthebrowser.(NotethatIre-
movedtheunderlineusing
text-decoration: none
onpurpose,astheunderline
partalsoreceivesashadow—abitofanoverkill).Doesyourpagelooksimilarto
Figure10.17?
399
Enhancing the Site with HTML5 and CSS3
Figure 10.17. Subtle use of 
text-shadow
applies a glowing effect
WeneedtoaddinonemorepieceofCSS—toswitchtheshadowoffwhenhovering
overthelink.Currentlyontheprojectsite,thehovercolorforthetextiswhite,the
sameasthe
text-shadow
color.If
text-shadow
islefton,itmakesthehovered-over
textlookfuzzy,asinFigure10.18.
Figure 10.18. The “hover glow” effect: hardly user-friendly!
Here’sthesimplefix(andtheresultcanbeseeninFigure10.19):
nav a {
text-shadow:1px 1px 2px white, -1px -1px 2px white; 
text-decoration:none;
}
nav a:hover, nav a:focus {
text-shadow: none;
}
Figure 10.19. The glow effect is removed from the hover, making the text readable
Build Your Own Website The Right Way Using HTML & CSS
400
We Don’t Serve Your Type Around Here!
Along-standingproblemoftheWebhasbeenaboutdisplayingtextinmoreinter-
estingtypefacesthantheusualdefaults:TimesNewRoman,Arial,Verdana,and
Helvetica.Thereareonlysomanyfontsinstalledoncomputersthatyoucanabso-
lutelyrelyon.And,sure,youcantrytomakethetextmoreinterestingbyvarying
sizes,boldness,linespacing(the
line-height
CSSproperty),andthespacebetween
letters(the
letter-spacing
CSSproperty),butthatonlygoessofar.
Manyresorttothehorriblesolutionofcreatinganimagewithyourchosenfont,
andthenputtingthatonthesiteinsteadofrealtext.Thatway,youguaranteethat
everyonewillseethecorrecttypeface.Butit’spoorinsomanyways,including
beinginflexible,beingaheavierdownload,andposingpotentialaccessibility
problems.
Fortunately,it’snowpossibletoembedfontsinawebpage,justaseasilyasyou
canplaceimagesonyourpages,orlinktoexternalstylesheets.It’smadepossible
bythe
@font-face
constructinCSS,whichallowsyoutolinktoafont,giveitan
easynametoremember,andthenusethenameinyourstylesheet,applyingthat
fonttowhateveryouchoose.Forexample,ifIhadafontcalled“monkeyfeatures”
thatI’dmademyself,Icouldembeditonmysite;Icouldevengiveitanabbreviated
name(“mf”),makingiteasierandquickertorefertoanywhereintheCSSfile:
@font-face {
font-family: mf;
src: url(/fonts/monkey-features.ttf);
}
...
h1 {
font-family: mf, arial, sans-serif
}
Itdoescomeataslightcost,however;namelythesizeofthedownload.Depending
onthefontfile,itmaymeanaslightlylargerinitialdownloadforpeoplevisiting
yoursite.
Therearemanywaysthatyoucanembedfonts,including:
401
Enhancing the Site with HTML5 and CSS3
utilizingadedicatedfontservicelikeTypekit
14
orFontdeck,
15
whichchargefor
theservicebutprovidearichsetofresources
creatingyourownfontsetssuitablefortheWebusingFontSquirrel
16
usingoneofthefreeready-madefontkitsfromFontSquirrelorGoogleWeb
Fonts
17
Theseserviceshavereallytakenoff,thankstowidespreadbrowsersupport,along
withvariouslegalissueshavingbeenresolved.(Fontsaresubjecttolicensingcon-
ditions,alwaysaproblemarea—theownersdidn’twanttheirfontsbeingdownloaded
freely.)Thebeautyoftheseservicesisthattheyhidealotofthevariousworkarounds
thathavebuiltupovertime,makingitpossibletoprovidethesamefonttonumerous
browsers.
We’llshowjusthoweasyitistoembedafontbyusingGoogle’soffering.
Google Web Fonts
We’llperformasimpletask:useGoogle’srepositoryoffontstochangeall
h2
headings
onthesite.Thestepsareveryeasytofollow:
1.Headovertohttp://www.google.com/webfonts.
2.Scrollupanddownuntilyoufindasuitablefont.Decorativefontsmightbe
tempting,butrememberthatpeoplestillneedtoreadthem!I’vepickedafairly
sensiblefontfornow,Candal,seeninFigure10.20.
3.Asyouhoveroverit,you’readvisedto“Clicktoembed.”Sodowhatthegood
peopleatGooglesuggestandclickaway!
14
http://typekit.com/
15
http://fontdeck.com/
16
FontSquirrel’sfontgeneratorcanbefoundathttp://www.fontsquirrel.com/fontface/generator,but
you’llneedtoconfirmthatthefontyouwanttouse—whichyousupplybywayofupload—isonethat
youhavetherightstouse.
17
http://www.google.com/webfonts
Build Your Own Website The Right Way Using HTML & CSS
402
Figure 10.20. Candal—a sensible font from Google’s library
4.You’llthenbepresentedwithapreviewwindow,asinFigure10.21.Ifyoulike
whatyousee,selectthe
Use this font
tab.
Figure 10.21. Previews of how the font will present on the page
403
Enhancing the Site with HTML5 and CSS3
Documents you may be interested
Documents you may be interested