随笔分类 - CSS
1
摘要：Here is a compilation of 47 jaw-dropping CSS3 animation demos. They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as Javascript alternatives. Most of them are simply to look cool. In order to veiw these effects, you need a w...
阅读全文
摘要：想要制作一些很酷的头部效果并且不使用图片文件嘛？可以尝试一下 CSS3 里面的 @font-face。
代码如下： @font-face { font-family: qianduanNet; src: url("SketchRockwell.ttf");
} .fontFace{ font-family: qianduanNet; font-size: 3.2em; letter-spacing: 1px; text-align: center;
} 但这需要你去下载字体，相对而言 Google Font Directory 就方便太多了。只可惜目前不支持中文。
不过简单
阅读全文
摘要：腾讯微博开放平台提供了一些官方微博应用，供开发者借鉴和利用，其中包括： 一键转播——嵌入一键转播到你的网站里，访客便能将网页信息直接传播至腾讯微博。分享资讯的同时，用户通过来源链接可进入你的网站，从而提升访问流量。 2.微博秀——使用微博秀，将生成的代码放置到你的博客、网站或是其它支持html代码的位置，就能向网页访问者展示你在腾讯微博的最新广播和听众。 3.微博广播站——使用微博广播站，将生成的代码放置到你的博客、网站或其他支持html代码的位置，不仅可以展示你的最新20条广播，登录腾讯微博后，你还可以直接在这里写微博，让更多人了解和收听你。 4.微博签名档——使用微博...
阅读全文
摘要：懒得翻译了。将就看下 *-*
Posted by Henry Jones
Shaken Grid This theme is perfect for you if you’re in need of a gallery/portfolio website or if you just want a website with a unique grid layout that not many websites have taken full advantage of yet. “Shaken Grid” uses the jQuery Masonry plugin which “arr...
阅读全文
摘要：Last week we kicked off our “Best of 2010″ series by showing you the best free WordPress themes released in the past year. This week the focus is on fonts. There were a ton of remarkable free fonts put out in 2010, so it was very difficult picking our favorites. Nevertheless, we did it and here t...
阅读全文
摘要：从开始做 b3log 到现在共做了6套皮肤，其中有3套因为种种原因已经废弃。
目前还剩以下3套
1. 经典淡蓝 2.i-nove
仿自：http://demo.neoease.com 3. tree house
仿自：http://www.thepixel.com/blog 已废弃的3套仿自以下地址：
1. 简约风格
http://blog.csdn.net/Vanessa219/archive/2009/10/28/4736873.aspx 2. 简约艺术
http://blog.csdn.net/DL88250 3.草绿风格
http://blog.csdn.net/Va...
阅读全文
摘要：Quirks 模式是指 Web 浏览器保持向后兼容的一种技术，它可兼容只适用于旧版浏览器中的网页，从而不适用标准模式中的 W3C 严格解释和 IETF 标准。概述 web 网页的结构和外观被两中标准化语言共同描述：HTML，web 中用来设计的标记语言，它描述了网页的内容和结构；CSS，广义样式表语言，用于指定各种媒体中的页面应该如何被渲染（屏幕显示的视觉样式，当打印页面时使用的打印样式，使用屏幕阅读器阅读网页的听觉样式等）。但是，大多数旧的 Web 浏览器要么没有完全实现这些语言的规范，要么基于之前的最终标准来开发（例如：在2001年发布的用于 Macintosh 平台的 Mic...
阅读全文
摘要：如果能在自己的网页中使用自定义的标签是不是很酷呢，比如用你的网站的域名、用你的网名、用你所爱的人的名字来定义HTML标签并内嵌到网页中，本文就介绍一下这方面的内容。 首先需要在<html>标签中进行这样的申明： <html xmlns:vanessa>，xmlns即xml name space的缩写，是HTML标记的命名空间属性:一般其声明在元素开始标记的地方。只要在这里申明了我要使用的vanessa这一自定义标签，语法分析器 就会认识这个标签并赋予我定义的属性了。 下面我们来定义一下这个标签所要使用的属性了，在<style></style>标签
阅读全文
摘要：在自己所做过的项目中还没有使用过颇为流传的 CSS Reset，就发现了下面这篇文章。其实有时候不需要去技术跟风，只需了解一下便可。那些东西有一定的道理，但不一定适合。就像 CSS Sprite，用的有感觉了，就知道什么地方该用，什么地方不该用。如果每处都用，那就成了滥用了。个人在平常项目中用到的最多的也就是下面这个* { margin: 0px; padding: 0px;}觉得没有必要用 CSS Reset，个人感觉有点画蛇添足了。IE 6 没特殊要求，基本上是放弃了。因此几个像素的大小并无太大影响，用户毕竟不可能开着2个以上浏览器同时查看一个页面吧。只要看上去精致，该对齐的能对齐了就 O
阅读全文
摘要：由 愚人码头 撰写 http://www.css88.com/archives/2418在丸子主编的帮助下终于找到了各浏览器的默认CSS。只要是由于今天解决了一个特殊的问题，依靠的就是看各浏览器的默认CSS，然后重置它，所以很多时候浏览器的默认css还是很有用的。各浏览器的默认CSS可以在这里http://www.iecss.com/找到，贪心一下，把这些样式都保存了一份：IE6(下载)IE7(下载)IE8(下载)IE9(下载)Firefox 3.6.3(下载)Webkit (r57042) (下载)Opera 10.51(下载)当然我们还可以找到更老的一些浏览器默认样...
阅读全文
摘要：Smashing Magazine 为了激发 Web 设计者对 CSS3 的兴趣，上月组织了一次 CSS3 设计赛，最终有 5 位设计师获奖，获奖作品体现了 CSS3 技巧的原创性与独特性，同时展示了 CSS3 的强大的功能，这些作品基于纯 CSS3 技术，并不借助 JavaScript 或其它技术。第一名: CSS3 图表 CSS3 Charts [ 预览 | 下载 ]该设计试验了 CSS3 在图表方面的应用，不借助任何 JavaScript 和图片。用到了 CSS3 强大的选择器功能：nth-child 和 :target，同时用到了过渡，渐变等技术，由来自美国的 Sean Oh 设计。第
阅读全文
摘要：对于设计人员和开发人员来说，CSS一直是web设计过程中重要的一部分，随着CSS3的出现以及越来越多的浏览器对它的支持，设计师们有了 更多的选择。用纯CSS也可以实现各种各样很酷的效果了，甚至是动画。虽然有些效果不能跨浏览器（甚至是支持CSS3的浏览器）运行，有些只是展示并没什么实际 用途， 但仅用CSS实现出的这些效果似乎没什么可以挑剔的。这里有5个使用CSS3实现的常见效果，你可以马上动手试试看。1. CSS3按钮你可以创建一些大小、颜色不同的元素（如按钮）,而不用每次都准备一个背景图片。 ZURB上有教你创建CSS3按钮的详细文章，有兴趣可以去看看。利用RGBA做出的阴影效果真的很棒！2
阅读全文
摘要：Author: 李丽媛Date: 2010/6/2Email: lly219#gmail.com1CSS 优化方案1.1使用CSS 优化工具a)online CSS Optimizer；b)CSS Formatter and Optimizer。解决方案：选取以上一个工具进行进行优化。1.2清理 CSS在我们写样式的时候，页面的CSS在经历几个版本的修改之后，可能有些样式已经用不到了，或许将某些样式 更名了而原来的忘了删除，总之页面中可能存在着一些无用的样式。这些无用的浪费了一些服务器空间和带宽消耗，也会增大我们的维护成本。a)Dust-Me selector；b)Page Speed；c)C
阅读全文
摘要：在网页设计css中，经常用到字体，而字体大小的设置单位，常用的有2种：px、pt。这两个有什么区别呢？ 先搞清基本概念：px就是表示pixel，像素，是屏幕上显示数据的最基本的点；而pt就是point，是印刷行业常用单位，等于1/72英寸。 这样很明白，px是一个点，它不是自然界的长度单位，谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，“点”的大小是会“变”的，也称为“相对长度”。 pt全称为point，但中文不叫“点”，查金山词霸可以看到，确切的说法是一个专用的印刷单位“磅”，大小为1/72英寸...
阅读全文
摘要：作者:李丽媛邮箱：lly219@gmail.com日期：2009-1-12前言（自说自话）从初识CSS到现在已经5个年头了。大多是断断续续的，可是近一年来接触颇多，甚有一些些体会。第一次接触只知道font，color，background，margin，padding等基本知识，乃至连margin、padding都分不清个所以然。在第一次Web大作业中知道了有“div+css template”,为了交差，从哪个时候就开始收集模板，看到各种各样的模板，不由惊叹他人的配色能力，创作技巧以及丰富的想象力。于是从图书馆借了一堆PS，配色，广告之类的书，当时没看出个所以然，只是觉得纸质和印刷都很好，要
阅读全文
摘要：作者:李丽媛邮箱：lly219@gmail.com日期：2009-1-61.css 3 的圆角属性： -moz-border-radius: -webkit-border-radius: 参数有4个时：上左的圆角大小，上右的圆角大小，下右的圆角大小，下左的圆角大小 参数有3个时：上左的圆角大小，上右的圆角大小和下左的圆角大小，下右的圆角大小 参数有2个时：上左的圆角大小和下右的圆角大小，上右的圆角大小和下左的圆角大小 参数有1个时：四个圆角的大小 除此之外还可以使用： -moz-border-radius-topright: -moz-border-radius-topleft: -mo...
阅读全文
摘要：译自：你需要知道的CSS3 动画技术译自：What You Need To Know About Behavioral CSS 转自：http://www.qianduan.net/what-you-need-to-know-about-behavioral-css.html译序：本文译自Smashingmagazine，但是原文讲述的内容有些浅，也不是很完整，前端观察在翻译的前提下，增加了更多的更系统的内容。如有不足之处，欢迎指正补充。随着网络的发展，浏览器具有更强的渲染更高级代码的能力，我们正逐步实现跨越所有平台和浏览器的目标。我们不但可以要花费更少的时间来确保我们的盒模型在IE6中看起来
阅读全文
摘要：灵感类2.Web design library 1.Deviantart Deviantart是互联网站最大的艺术展示站点之一。你可以在这里找到好灵感。 WebDesign Library是一个提供设计研究平台的资源站点，覆盖了大量的理论知识和实战方面的信息。3. Stylevault Stylevault.net 是一个设计展示站点，设计师可以在上面展示才华的同时其他人也可从中获益。4. Behance Behance 是找灵感的好去处，因为他们的设计更加专业。5. The design inspiration The Design Inspiration 是一群整日寻求...
阅读全文
摘要：實例如下：制作步骤：1.选择AnotherEon001皮肤2.把以下复制到自定义CSS样式body{ background:#F7F7F7 url(http://hi.csdn.net/attachment/200911/7/2190_1257596077JTZF.jpg) repeat scroll left top; color:#5A554E;}a:hover {color:#516C00;text-decoration:none;}a {color:#516C00;text-decoration:underline;}#csdnblog_allwrap {background:tran
阅读全文
摘要：在border， margin， padding中，不同的浏览器解析的时候heigh得到的值总是不一样。border的话，在使用w3c html 4.0.1标准后都不算在高度里面，也就是说你的height=height。否则IE6， 7， 8里面height=height-上下border，FF却不会。padding的话，在使用w3c html 4.0.1标准后都不算在高度里面，也就是说你的height=height。否则IE6， 7， 8里面heigh=height-上下padding，FF却不会。margin的话，不论是否使用w3c html 4.0.1标准后都不算在高度里面,也就是说你的
阅读全文
1
