来谈谈：利用CSS3将你的网站计划推向将来
层叠样式表（CascadingStyleSheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。网页制造poluoluo文章简介：利用CSS3将你的网站计划推向将来.
ThereareexcitingnewfeaturesinthepipelineforCascadingStyleSheetsthatwillallowforanexplosionofcreativityinWebdesign.ThesefeaturesincludeCSSstylingrulesthatarebeingreleasedwiththeupcomingCSS3specification.Realistically,youwon’tbeabletousetheseonyoureverydayclientprojectsforanotherfewyears,butfordesignblogsandwebsitesaimedattheWebdesigncommunity,thesefeaturescanhelpyoupushtheboundariesofmodernWebdesigntoday,addingthatextraspicetoyourdesignandhelpingtheindustrymoveforward.
Herearefivetechniquessnatchedfromthefuturethatyoucanputintopracticeinyourwebsitedesignstoday.
1.BorderRadius
ProbablythemostcommonCSS3featurecurrentlybeingusedisborder-radius.StandardHTMLblockelementsaresquare-shapedwith90-degreecorners.TheCSS3stylingruleallowsroundedcornerstobeset.
viewplaincopytoclipboardprint?
[*]-moz-border-radius:20px;
[*]-webkit-border-radius:20px;
[*]border-radius:20px;
-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;Border-radiuscanalsobeusedtotargetindividualcorners,althoughthesyntaxfor-moz-and-webkit-isslightlydifferent:
viewplaincopytoclipboardprint?
[*]-moz-border-radius-topleft:20px;
[*]-moz-border-radius-topright:20px;
[*]-moz-border-radius-bottomleft:10px;
[*]-moz-border-radius-bottomright:10px;
[*]-webkit-border-top-right-radius:20px;
[*]-webkit-border-top-left-radius:20px;
[*]-webkit-border-bottom-left-radius:10px;
[*]-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:20px;-moz-border-radius-topright:20px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;-webkit-border-top-right-radius:20px;-webkit-border-top-left-radius:20px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;SupportedinFirefox,SafariandChrome.
Asusedby:Twitter.
Seealso:
[*]W3CWorkingDraft
[*]Border-radiusonCSS3.info
[*]TheArtofWeb
2.BorderImage
Border-image,asthenamesuggests,allowsanimagefiletobeusedastheborderofanobject.Theimageisfirstcreatedinrelationtoeachsideofanobject,whereeachsideoftheimagecorrespondstoasideoftheHTMLobject.Thisisthenimplementedwiththefollowingsyntax:
viewplaincopytoclipboardprint?
[*]border:5pxsolid#cccccc;
[*]-webkit-border-image:url(/images/border-image.png)5repeat;
[*]-moz-border-image:url(/images/border-image.png)5repeat;
[*]border-image:url(/images/border-image.png)5repeat;
border:5pxsolid#cccccc;-webkit-border-image:url(/images/border-image.png)5repeat;-moz-border-image:url(/images/border-image.png)5repeat;border-image:url(/images/border-image.png)5repeat;The{border:5px}attributespecifiestheoverallwidthoftheborder,andtheneachborder-imageruletargetstheimagefileandtellsthebrowserhowmuchoftheimagetousetofillupthat5pxborderarea.
Borderimagescanalsobespecifiedonaper-sidebasis,allowingforseparateimagestobeusedoneachofthefoursidesaswellasthefourcorners:
viewplaincopytoclipboardprint?
[*]border-bottom-right-image
[*]border-bottom-image
[*]border-bottom-left-image
[*]border-left-image
[*]border-top-left-image
[*]border-top-image
[*]border-top-right-image
[*]border-right-image
border-bottom-right-imageborder-bottom-imageborder-bottom-left-imageborder-left-imageborder-top-left-imageborder-top-imageborder-top-right-imageborder-right-imageSupportedinFirefox3.1,SafariandChrome.
Asusedby:Blog.SpoonGraphics.
Seealso:
[*]W3CWorkingDraft
[*]Border-imageonCSS3.info
[*]Border-imageinFirefox
3.BoxShadowandTextShadow
Dropshadows:don’tyoujustlovethem?!Theycansoeasilymakeorbreakadesign.Now,withCSS3,youdon’tevenneedPhotoshop!Theusagewe’veseensofarhasreallyaddedtothedesign,agoodexamplebeingthisyear’s24Wayswebsite.
viewplaincopytoclipboardprint?
[*]-webkit-box-shadow:10px10px25px#ccc;
[*]-moz-box-shadow:10px10px25px#ccc;
[*]box-shadow:10px10px25px#ccc;
-webkit-box-shadow:10px10px25px#ccc;-moz-box-shadow:10px10px25px#ccc;box-shadow:10px10px25px#ccc;Thefirsttwoattributesdeterminetheoffsetoftheshadowinrelationtotheelement,inthiscase,10pixelsonthexandyaxis.Thethirdattributesetsthelevelofblurrinessoftheshadow.Andfinally,theshadowcolorisset.
Also,thetext-shadowattributeisavailableforuseontextualcontent:
viewplaincopytoclipboardprint?
[*]text-shadow:2px2px5px#ccc;
text-shadow:2px2px5px#ccc;SupportedinFirefox3.1,Safari,Chrome(box-shadowonly)andOpera(text-shadowonly).
Asusedby:24Ways.
Seealso:
[*]W3CWorkingDraft
[*]Box-shadowonCSS3.info
[*]W3CWorkingDraft
[*]Text-shadowonCSS3.info
4.EasyTransparencywithRGBAandOpacity
TheuseofPNGfilesinWebdesignhasmadetransparencyakeydesignfeature.Now,analphavalueoropacityrulecanbespecifieddirectlyintheCSS.
viewplaincopytoclipboardprint?
[*]rgba(200,54,54,0.5);
[*]/*example:*/
[*]background:rgba(200,54,54,0.5);
[*]/*or*/
[*]color:rgba(200,54,54,0.5);
rgba(200,54,54,0.5);/*example:*/background:rgba(200,54,54,0.5);/*or*/color:rgba(200,54,54,0.5);Thefirstthreenumbersrefertothered,greenandbluecolorchannels,andthefinalvaluereferstothealphachannelthatproducesthetransparencyeffect.
Alternatively,withtheopacityrule,thecolorcanbespecifiedasusual,withtheopacityvaluesetasaseparaterule:
viewplaincopytoclipboardprint?
[*]color:#000;
[*]opacity:0.5;
color:#000;opacity:0.5;SupportedinFirefox,Safari,Chrome,Opera(opacity)andIE7(opacity,withfixes).
Asusedby:24Ways(RGBA).
Seealso:
[*]W3CWorkingDraft
[*]RGBAonCSS3.info
[*]PureCSSOpacity
5.CustomWebFontswith@Font-Face
TherehasalwaysbeenasetofsafefontsthatcanbeusedontheWeb,asyouknow:Arial,Helvetica,Verdana,Georgia,ComicSans(ahem…),etc.Nowthe@font-faceCSS3ruleallowsfontstobecalledfromanonlinedirectoryandusedtodisplaytextinawholenewlight.Thisdoesbringupissuesofcopyright,sothereareonlyahandfulofspecificfontsthatcanbeusedfor@font-faceembedding.
Thestylingisputintopracticelikeso:
viewplaincopytoclipboardprint?
[*]@font-face{
[*]font-family:Anivers;
[*]src:url(/images/Anivers.otf)format(opentype);
[*]}
@font-face{font-family:Anivers;src:url(/images/Anivers.otf)format(opentype);}Therestofthefontfamily,containingsecondaryoptions,isthencalledasusual:
viewplaincopytoclipboardprint?
[*]h1{font-family:‘Anivers’,Helvetica,Sans-Serif;
h1{font-family:‘Anivers’,Helvetica,Sans-Serif;SupportedinFirefox3.1,Safari,Opera10andIE7(withlotsoffixes:ifyouarebraveenough,youcanmakefont-faceworkinIE(thanksforheadsup,JonTan))
Asusedby:TapTapTap.
Seealso:
[*]Fontsavailableforfont-faceembedding
[*]Font-faceinIE,makingWebfontswork
[*]Webfonts,thenextbigthing-AListApart
AlthoughCSS3isstillunderdevelopment,theruleslistedherearesupportedbysomebrowsersrightnow.Safariinparticularhasextensivesupportforthesenewfeatures.Unfortunately,despitebeingatop-qualitybrowser,Safarihasarelativelylownumberofusers,soitisprobablynotworthwhileaddingextrafeaturessolelyforthisgroupofusers.ButwithApple’sMaccomputersmakingtheirwayintoeverydaylife,Safari’susageislikelytocontinuallyincrease.
Firefox,ontheotherhand,nowhasaconsiderablylargeuserbase.What’smore,thesoon-to-be-releasedFirefox3.1hasaddedsupportforarangeofCSS3features.AssumingthatmostusersofFirefoxwillupdatetheirbrowsers,therewillsoonbealargegroupofuserswithsupportforthesenewstylingrules.
GoogleChromewasreleasedthisyear.BasedontheWebKitengine,thisbrowserhasmuchofthesamesupportasSafari.WhileSafarimakesupagoodproportionofMacusers,Chromehasburstontothescene,makingupadecentproportionofWindowsusers.
Percentage-wise,theW3’sbrowserstatisticsindicatethat,asofNovember2008,44.2%ofW3School’susersacrosstheWebwerebrowsingwithFirefox,3.1%withChromeand2.7%withSafari.Thatmeansalmost50%ofallInternetusersshouldbeabletoviewthesefeatures.WithintheWebdesigncommunityinparticular,whichismuchmoreconsciousofbrowserchoice,therangeofuserswithCSS3supportismuchhigher,at73.6%(accordingtothestatsatBlog.SpoonGraphics).
6.Thedownside
Yourwebsitemaynowhavearangeoffancynewdesignfeatures,butthereareafewnegativestotakeintoconsideration:
[*]InternetExplorer:46%ofInternetuserswon’tseethesefeatures,sodon’tusethemasacrucialpartofthedesignofyourwebsite.Makesurethatsecondaryoptionsareinplace,suchasastandardborderinplaceofborder-imageandanormalfontinplaceof@font-face.PleasenoticethatInternetExplorersupports@font-facewithEOT(moredetails)sincev4(thanksforheadsup,JonTan).
[*]Invalidstylesheets:TheseCSS3featureshavenotbeenreleasedasafinalspecification.Theyarecurrentlyimplementedwithtagsthattargetdifferentbrowsers.Thiscaninvalidateyourstylesheet.
[*]ExtraCSSmarkup:Followingthelastpoint,havingtoaddadifferenttagforeachbrowsertospecifythesamerule,aswellasincludethestandardruleforthefinalCSSspecification,addsalotofextracodetoyourCSSmarkup.
[*]Potentiallyhorrificusage:JustasisdonewithtraditionalPhotoshopfilters,theuseofthesenewstylingfeaturescouldresultinsomeeye-wrenchingdesigns.Dropshadowsinparticularringwarningbellsforus;we’renotlookingforwardtoseeingtheMarketingDepartment’schoiceswiththatone!
样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet)的家喻户晓。 学Dreamweaver技术的过程其实是一个增加信心的过程。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
页:
[1]