仓酷云
标题:
来谈谈：利用CSS3将你的网站计划推向将来
[打印本页]
作者:
若相依
时间:
2015-1-15 23:55
标题:
来谈谈：利用CSS3将你的网站计划推向将来
层叠样式表（CascadingStyleSheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。
网页制造poluoluo文章简介：利用CSS3将你的网站计划推向将来.
ThereareexcitingnewfeaturesinthepipelineforCascadingStyleSheetsthatwillallowforanexplosionofcreativityinWebdesign.ThesefeaturesincludeCSSstylingrulesthatarebeingreleasedwiththeupcoming
CSS3specification
.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-image
复制代码
SupportedinFirefox3.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(with
lots
offixes: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.Thatmeansalmost
50%ofallInternetusers
shouldbeabletoviewthesefeatures.WithintheWebdesigncommunityinparticular,whichismuchmoreconsciousofbrowserchoice,therangeofuserswithCSS3supportismuchhigher,at
73.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!
样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。
作者:
变相怪杰
时间:
2015-1-17 23:50
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet)的家喻户晓。
作者:
若天明
时间:
2015-1-25 16:36
学Dreamweaver技术的过程其实是一个增加信心的过程。
作者:
愤怒的大鸟
时间:
2015-2-3 11:43
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
作者:
精灵巫婆
时间:
2015-2-8 21:41
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
作者:
飘灵儿
时间:
2015-2-26 11:40
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
作者:
飘飘悠悠
时间:
2015-3-8 14:41
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。
作者:
蒙在股里
时间:
2015-3-16 03:36
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。
作者:
只想知道
时间:
2015-3-22 20:10
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
欢迎光临 仓酷云 (http://ckuyun.com/)
Powered by Discuz! X3.2