显示标签为“HTML”的博文。显示所有博文
显示标签为“HTML”的博文。显示所有博文

10个高质量Icon图标资源网站

0 评论  

Copy From:http://softbbs.pconline.com.cn/9038608.html

如果你是一名Web前端设计师的话,那么在页面设计过程中,你肯定为找不到合适的修饰图标而郁闷过,当然,我也不例外,所以当我看到这个介绍高 质量Icon图标资源的文章时,就像是激流中突然抓住了一棵救命稻草一样,可能,这些高质量的Icon图标资源也会让你有同样的感受吧。

Vistaicons 按此在新窗口浏览图片 Iconspedia 按此在新窗口浏览图片 fasticon 按此在新窗口浏览图片 Iconarchive 按此在新窗口浏览图片 freeiconsdownload 按此在新窗口浏览图片 dryicons 按此在新窗口浏览图片 BestFreeIcons 按此在新窗口浏览图片 icondrawer 按此在新窗口浏览图片 feedicons 按此在新窗口浏览图片 freeiconsweb 按此在新窗口浏览图片

Syntax Highlighter

0 评论  

今天偶然看到一篇文章JavaFX Brush for Syntax Highlighter ,里面提到了在网页上对JavaFX的代码进行语法高亮,只需要一个JS文件就够了,看效果还挺不错的。其实以前也看到过很多网站都有Java的语法高亮,Google了一下,果然发现一个开源的语法高亮的东东,http://code.google.com/p/syntaxhighlighter/。看效果跟上面提到的那个JavaFx的还挺像,闲着也是闲着,就照着他的Guide把博客里面的一些代码加了语法高亮,具体步骤. 不过很讨厌的是语法高亮后的每一行都加上了li标签,这个是JavaScript动态加的,我改了模板,对语法高亮的li格式再定义了一下,还是显示li的图标。。。

25 Rounded Corners Techniques with CSS,25种不同的CSS圆角边框技术

0 评论  

【转】好久不写HTML了,记得以前写HTML的时候,对于圆角边框一直很耿耿于怀,那个时候觉得圆角边框实现起来挺难的,尤其是那种带阴影效果的圆角边框,很好看,但似乎很难实现,呵呵,今天又想起这个事情,搜索到一篇文章,列举了25种用CSS实现的圆角边框,挺唬人的。现整理如下(绿色部分是我的注释):

Rounded corners is one of the most popular and frequently requested CSS techniques even the father of internet Google also launch the rounded corners style markup with her Google Adsense and let users to custom their ads recently. Actually, there are a lot of methods and techniques to create rounded corners with Cascading Stylesheets. Some are quite simple just need pure CSS, and a part of them need 2 to 4 background corner images and Javascript. So i select some quality and usable rounded corners with CSS techniques for you to have the best choices.

Techniques

  • ThrashBox:

ThrashBox - create rounded-corner boxes with visual flare and the absolute minimal amount of semantically correct markup. http://www.vertexwerks.com/tests/sidebox/

(ThrashBox效果挺不错,Border很有立体感,不过因为要实现对较大尺寸的Border也支持,所以图片的尺寸也比较大)。

  • EvenMore:

Even More Rounded Corners With CSS - nice technique with fluid rounded corner dialogs and support for borders, alpha transparency throughout, gradients andpatterns.

Even More Rounded Corners With CSS

(Even More的这个在Firefox里面效果很炫,不过在IE6里面边角有白边,而且两者的速度都有问题,会有闪烁的感觉)

  • DomCorner:

DomCorners - a very simple technique for getting rounded corners. DomCorners

(DomCorner比较简洁,不过效果一般,且需要额外的JS文件。)

  • virtuelvis.com Rounded corners

virtuelvis.com Rounded corners in CSS - allow you to retrofit this to existing designs without altering any markup. Rounded corners in CSS

Virtuelvis在IE里面不行,这个最郁闷了。

  • TCCB

Transparent custom corners and borders version 2 - a technique for creating custom corners and borders with optional alpha transparency. Transparent custom corners and borders version 2

这个Corner在IE里面跟在FireFox里面效果差距有点大,在IE里没有阴影效果了,看来还是FireFox好,哈哈。

  • CSS Teaser Box with rounded corners

CSS Teaser Box with rounded corners - by Roger Johansson, the same author of Transparent custom corners and borders version 2. CSS Teaser Box

  • News List

News List - was designed to display links to recent news. news list

  • CSS Liquid Round Corners

CSS Liquid Round Corners - a re-usable rounded box, note that it needs total 6 images for wrap the corners. CSS Liquid Round Corners

  • Anti-aliased Nifty Corners

Anti-aliased Nifty Corners - based on Nifty Corners and modified by Steven Wittens. Anti-aliased Nifty Corners

  • Simple Box by tedd

Simple Box by tedd - another simple rounded corners. Simple Box by tedd

  • CSS and round corners

CSS and round corners making accessible menu tabs - decent rounded corners style menu tabs technique. CSS and round corners Making accessible menu tabs

  • CSS and round corners borders with curves

CSS and round corners borders with curves - make a rounded corners borders with curves. CSS and round corners Borders with curves

  • Airtight Corners

Airtight Corners - produce a box with rounded corners using only one image, and off-setting that image for each corner. Airtight Corners

  • Mountaintop Corners

Mountaintop Corners - easier way for creating decent rounded corners. Mountaintop Corners

  • Editsite Rounded Corners

Editsite Rounded Corners - need a javascript to create the corners. http://www.editsite.net/blog/rounded_corners.html

  • Create a rounded block or design with CSS and XHTML - easily create a rounded block
Create a rounded block or design with CSS and XHTML
  • Resizable box with freely stylable corners and surface - resizable rounded corners box.
Resizable box with freely stylable corners and surface

  • Smart Round Corners - a practical solution to uses small images for markup the corners.

    Smart Round Corners

  • Lean and Clean CSS boxes - need 2 images to wrap the header and box.

http://www.tjkdesign.com/articles/roundbox.asp

Broader Border Corners - a quick and easy recipe for turning those single-pixel borders. Broader Border Corners

Snazzy Borders - based on Nifty Corners By Alessandro Fulciniti Snazzy Borders

Rounded corners in CSS by Adam Kalsey - requires 4 corners images. Rounded corners in CSS by Adam Kalsey

curvyCorners - a free JavaScript program that will create on-the-fly rounded corners for any HTML DIV element, that look as good as any graphically created corners. curvyCorners

Nifty Corners - a solution based on CSS and Javascript to get rounded corners. Nifty Corners

quinncrowley.com - based upon a combination of pixy and Kalsey http://www.quinncrowley.com/rounded.htm

Rounded Corners Generators

Online rounded corners generators, Rocks! http://www.roundedcornr.com/ - the herald of rounded corners generator tool. http://www.roundedcornr.com/

http://www.spiffycorners.com/ - simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or Javascript. http://www.spiffycorners.com/

http://tools.sitepoint.com/spanky/ - an experimental technique for using only CSS to produce ’round-cornered content boxes’ with semantically pure markup. http://tools.sitepoint.com/spanky/

http://spiffybox.com/ - another project by the owner of Spiffy Corners. http://spiffybox.com/

太多了,哎,还是不整理了,就这样吧,下次用到了再挑个出来