天高云淡，让心情旅行。 注册 | 登陆
浏览模式: 标准 | 列表分类:CSS

CSS3 画的哆啦A梦

Submitted by koyoz on 2010, May 20, 23:45 PM

CSS3 画的哆啦A梦, 建议用Chrome看.

大小: 74.51 K 尺寸: 500 x 194 浏览: 44 次 点击打开新窗口浏览全图

看DEMO: http://koyoz.com/demo/css/doraemon_css3.html

原链接, 需要翻墙: http://blog-imgs-42-origin.fc2.com/s/h/o/shopdd/dora_css3.html

CSS | 评论:2 | 阅读:1221

CSS泡泡聊天效果.无需任何图片

Submitted by koyoz on 2010, March 29, 13:45 PM

以下效果,无需任何图片.

大小: 18.03 K 尺寸: 479 x 500 浏览: 20 次 点击打开新窗口浏览全图

只要能支持CSS2.1即可.部分效果需要CSS3支持.

利用Mozilla -moz- 特有属性, webkit的 -webkit- 特有属性.完成圆角和渐变的效果.

CSS3中的 border-radius 和 transform 完成特殊边角和渐变效果.

伪类 :after,:before 来制作无需html的突出小角. 不过IE是看不到什么效果了. 用Firefox和Chrome都能看到全效果.

看DEMO: http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html

原文链接: http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/

 

Tags: css

CSS | 评论:0 | 阅读:666

CSS3 Please

Submitted by koyoz on 2010, March 11, 13:08 PM

CSS3 Please 一个在线生成跨浏览器的CSS3代码的网站，支持的CSS 3属性有圆角、阴影、渐变、自定义字体 等。

点击属性值直接修改就可以及时预览。toggle rule on和toggle rule off按钮可以启用或禁用某个属性。

访问地址：http://css3please.com/

CSS | 评论:0 | 阅读:508

cursor 光标属性示例

Submitted by koyoz on 2010, February 10, 14:20 PM

cursor属性. 移动到方框上既可看到效果.

auto正常鼠标

crosshair十字鼠标

default默认鼠标

pointer手形鼠标

hand手形鼠标（IE可以，火狐不可以）

move移动鼠标

e-resize鼠标

ne-resize鼠标

nw-resize鼠标

n-resize鼠标

se-resize鼠标

sw-resize鼠标

s-resize鼠标

w-resize鼠标

text文字鼠标

wait等待鼠标

help求助鼠标

progress过程鼠标

not-allowed禁止鼠标

Tags: css

CSS | 评论:1 | 阅读:1006

[转]如何书写高效、可维护、组件化的CSS的演示文档

Submitted by koyoz on 2010, January 4, 14:06 PM

[译]Efficient, maintainable CSS
View more documents from jeannewoo.

Tags: css

CSS | 评论:0 | 阅读:874

很详细的CSS3手册

Submitted by koyoz on 2009, November 30, 10:25 AM

CSS3.0参考手册

包含 CSS3 新增属性和选择器. 还有兼容性列表和示例.

 大小: 16.69 K 尺寸: 500 x 311 浏览: 10 次 点击打开新窗口浏览全图

附件: css3.0参考手册.chm (380.53 K, 下载次数:100)

Tags: css, 手册

CSS | 评论:0 | 阅读:866

两套Reset CSS

Submitted by koyoz on 2009, March 4, 15:16 PM

两套 Reset CSS, 没什么好介绍的了,喜欢那套就看各自的爱好了

来自: http://developer.yahoo.com/yui/reset/

CSS代码
  1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {    
  2.     margin:0;   
  3.     padding:0;   
  4. }   
  5. table {   
  6.     border-collapse:collapse;   
  7.     border-spacing:0;   
  8. }   
  9. fieldset,img {    
  10.     border:0;   
  11. }   
  12. address,caption,cite,code,dfn,em,strong,th,var {   
  13.     font-style:normal;   
  14.     font-weight:normal;   
  15. }   
  16. ol,ul {   
  17.     list-style:none;   
  18. }   
  19. caption,th {   
  20.     text-align:left;   
  21. }   
  22. h1,h2,h3,h4,h5,h6 {   
  23.     font-size:100%;   
  24.     font-weight:normal;   
  25. }   
  26. q:before,q:after {   
  27.     content:'';   
  28. }   
  29. abbr,acronym { border:0;   
  30. }  

来自: http://meyerweb.com/eric/tools/css/reset/

CSS代码
  1. html, body, div, span, applet, object, iframe,   
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,   
  3. a, abbr, acronym, address, big, cite, code,   
  4. del, dfn, em, font, img, ins, kbd, q, s, samp,   
  5. small, strike, strong, sub, sup, tt, var,   
  6. b, u, i, center,   
  7. dl, dt, dd, ol, ul, li,   
  8. fieldset, form, label, legend,   
  9. table, caption, tbody, tfoot, thead, tr, th, td {   
  10.     margin: 0;   
  11.     padding: 0;   
  12.     border: 0;   
  13.     outline: 0;   
  14.     font-size: 100%;   
  15.     vertical-align: baselinebaseline;   
  16.     background: transparent;   
  17. }   
  18. body {   
  19.     line-height: 1;   
  20. }   
  21. ol, ul {   
  22.     list-style: none;   
  23. }   
  24. blockquote, q {   
  25.     quotes: none;   
  26. }   
  27. blockquote:before, blockquote:after,   
  28. q:before, q:after {   
  29.     content: '';   
  30.     content: none;   
  31. }   
  32.   
  33. /* remember to define focus styles! */  
  34. :focus {   
  35.     outline: 0;   
  36. }   
  37.   
  38. /* remember to highlight inserts somehow! */  
  39. ins {   
  40.     text-decoration: none;   
  41. }   
  42. del {   
  43.     text-decoration: line-through;   
  44. }   
  45.   
  46. /* tables still need 'cellspacing="0"' in the markup */  
  47. table {   
  48.     border-collapse: collapse;   
  49.     border-spacing: 0;   
  50. }  

Tags: css

CSS | 评论:2 | 阅读:1857

CSS中em和px单位的区别

Submitted by koyoz on 2009, February 11, 10:53 AM

作者:Kane

这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章，题目有点吓人，但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚px与em之间的关系和特点，看过以后确实收获很大。平时都是用px来定义字体，所以无法用浏览器字体放大的功能，而国外大多数网站都可以在IE下使用。因为

» 阅读全文

Tags: css, em, px

CSS | 评论:0 | 阅读:1695

记录总数:21123›