CSS中的RGBa色彩
![]()
RGBa是一种在CSS中声明包含透明效果的颜色的方法,它的语法是这样的:
|
|
div { background: rgba(200, 54, 54, 0.5); } |
它允许我们为元素添加透明色。或许我们习惯了使用”opacity“,它很简单易用,但是,opacity会使所有的子元素都变成透明的,而且很难去解决这个问题。
![]()
RGBa是一种在CSS中声明包含透明效果的颜色的方法,它的语法是这样的:
|
|
div { background: rgba(200, 54, 54, 0.5); } |
它允许我们为元素添加透明色。或许我们习惯了使用”opacity“,它很简单易用,但是,opacity会使所有的子元素都变成透明的,而且很难去解决这个问题。
![]()
这是一个HTML5新功能的演示文档,几乎包括HTML5所有激动人心的新功能的简介和DEMO。
IE系列浏览器无法浏览,firefox、opera等浏览器只能使用部分功能,如果想100%演示成功,请使用最新版的“谷歌浏览器(Google Chrome)”,建议使用最新版。
More »
![]()
毫无疑问,一个合理的布局和结构是最好选择。这不仅是因为你的布局在不同浏览器见表现不同,而且还因为的CSS有很多方法来布局你的每个元素。今天,我们希望与你们分享一些避免在创建CSS布局时容易遇到的错误的技巧。
在今天的设计中,排版常常被忽视,特别是被网页设计师忽视。这真是件遗憾的事情因为CSS可以做很多事情来控制我们的排版。也就是说,我们被局限于某些“网络安全”排版,但是我们不应该限制我们自己的创造性。本文整理了一些用于在网页上排版的CSS技巧。
CSS提供了font属性,它允许我们在我们的页面中调整文字。这是一系列的关于语法和如何使用CSS调整文字的概述。
使用font-size可以修改你的文字的大小。
1 2 3 |
font-size: 1.2em; font-size: 12px; font-size: 10pt; |
PS:关于font-size,推荐一下码头写的《http://www.css88.com/archives/821》
该属性用来改变你的文字的粗细(比如bold, bolder)
出版商: Oreilly | ISBN: 0596805780 | 2010年1月 | PDF | 192页 | 2.8 Mb
It’s a fact: if you know HTML, CSS, and JavaScript, you already have the tools you need to develop your own iPhone apps. With this book, you’ll learn how to use these open source web technologies to design and build apps for the iPhone and iPod Touch on the platform of your choice-without using Objective-C or Cocoa.
最近一直在帮YelpClone做定制模板。
今天闲来无事上了QZONE看看,看到那些头像(他们叫portrait,不过我们平时做开发都叫avatar)圆角就像去解剖一下看看他的做法。
TX的前端还是挺牛的,大量运用了CSS Sprite,今天就说说他们圆角头像的做法吧。
研究过代码后发现他们圆角其实是一个图片:http://qzonestyle.tc.qq.com/ac/qzone_v5/skin_img/21/portrait_round.png
有兴趣的下载下来看看,嘿嘿,注意背景千万别是白色,不然你什么都看不到了。
如果你的背景是黑色的话,可以看到如下:
![]()
这个明显是想运用CSS Sprite技术做圆角的遮盖嘛。
我以前的做法是把四个角的图片单独弄下来,然后做成position:absolute; top:-1; left:-1; (左上),以此类推做出四个角,好处是能自动适应宽度。可以用四个图片,但也可以用CSS sprite整合成一张图片,不过这样一来好像很违背标准的感觉。于是感觉TX的遮蔽式圆角头像还不错。代码大概是这样的:
这里省时间和空间就不用标准方法写了,属性都强加在标签后面了,呵呵。
<div style="position:relative; width:100px; height:100px;"> <span style="background:url(portrait_round.png) 0 -181px; width:100px; height:100px; position:absolute"></span> <img src="red_concise/images/add-cart.gif" width="100" height="100" /> </div>
原来思路也差不多,遮蔽的部分是absolute浮在外层relative的DIV的上面。这招也不错,以后我再开发类似的东东会借鉴的,毕竟弄四个角挺麻烦的。
转载自:http://ued.taobao.com/blog/2009/12/17/html5_css3/
互联网的发展总是在不断地催生新技术的产生,而HTML5和CSS3是最近一直被讨论的热门话题,对于每个互联网开发者尤其是前端开发者而言,都充满了好奇与渴望。那么HTML5和CSS3究竟有哪些让我们眼前一亮的东西呢?我在WebRebuild北京交流会和珍珠奶茶帮上给大家分享了《揭秘 HTML5和CSS3》,PPT在这里:
http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8
HTML 5草案的前身名为Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的HTML工作团队。在2008年1月22日,第一份正式草案发布。 HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同,HTML 5并非仅仅用来表示Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。那么我们来看一下HTML5的技术概览有哪些:
在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。
你在写HTML代码(包括所有标签、属性、引用、大括号等)上花费多少时间?如果你的编辑器有代码提示功能,你编写的时候就会容易些,但即便如此你还是要手动敲入很多代码。
设计师常常使用一些独特的字体效果和页面效果,阴影是其中一个,它可以让页面中的文字和元素具有立体的效果,从而被突出出来。比如对于文字阴影,传统的方法可能需要将文字切出来,直接使用图片,如果考虑SEO和网站性能,还可能会使用CSS Sprites等技术将图片整合:
Css Nuggets 是一个CSS3指导的趣味性的ppt,建议前端开发人士学习研究。
Recent Replies / 最新回复