Professional Frontend Engineering. CSSer.name - 为web标准化而努力- Powered by SupeSite. 15个帮你搞定CSS的资源 - 幸福收藏夹. In the Woods - powered by FeedBurner. 精选15个国外CSS框架_cnBeta 视点·观察. 框架就是一个你可以用于你的网站项目的基本的概念上的结构体。 Css框架通常只是一些css文件的集合，这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。 比如： typography.css 基本排版规则 grid.css 基于网格的布局 layout.css 通常的布局 form.css for 表单样式 general.css 更多通用规则 《 推荐12款可用于前端开发的免费文本编辑器 》 《 Web前端开发必备手册下载 》 《 推荐20个让你学习并精通CSS的网站 》 《 300+Jquery, CSS, MooTools 和 JS的导航菜单资源 》 1. 960 Grid System 960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果，基于960像素的页面宽度。
2. 这个项目的目的是提供一组经过良好测试的模块化的CSS文件，能够用于网站的快速设计。 3. Dirk Jesse的强大的(X)HTML/CSS框架为许多的简单或更复杂的网站项目提供完整的默认模板包。 4. 基本的YUI网格CSS提供4种预设的页宽、6种预设模板和再分为2、3、4卷的区块的功能。 有国外作者曾指出YUI Grids CSS中最值得学习的网格布局CSS写法: 5. Logic CSS 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和PHP程序组成的集合。 6. CleverCSS是一个用于css的受Python启发的小型的标记语言，它可用于以整洁的和结构化的方式创建一个样式表。 7. Elements 是一个实用的CSS框架。 8. Blueprint 是一个 ，它的目的是减少你的css开发时间。 9. 是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。 10. Emastic 是一个CSS框架，它有连续的任务：探索陌生的新世界，寻找新生活和新的网站空间，大胆的去CSS框架尚未到达的领域。 11. . * 只能调用单个样式文件 * 主样式需要取得CSS认证(WCAG 1.0)； * 跨浏览器兼容性—包括Internet Explorer (IE) 5.x for Mac； * IE Hacks使用独立文件； * 快速创建模板； * 少量注释/实例演示，可以节省时间来理解。
12. 13. 14. ESWAT正在重新整理。 15. CSS Decorative Gallery. Did you like my previous CSS tutorial on how to create gradient text effects? I'm using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect.
It is very easy and flexible — see my demos with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex). View Demo Gallery Download Demo ZIP What Are The Benefits Of This CSS Trick? Saves Time — You don't have to manually create the decorative template in Photoshop and export the individual image. Basic Concept (see demo) You need to insert an extra <span> tag within the <div> tag, with which we'll apply a background image to create the overlaying effect. Then in the CSS, the key point you have to remember is: specify the div element to position:relative and the span element to position:absolute. IE PNG Hack Look and Feel. 使用CSS为图片添加更多趣味的5种方法 | 彬Go. 2008年50个最佳CSS设计欣赏. Flash of Unstyled Content (FOUC) What is a FOUC? Some pages that use the CSS @import rule experience a curious display quirk in the Windows version of MS Internet Explorer: a momentary flash of unstyled page content. The unimaginative creature that I am, I call this phenomenon Flash of Unstyled Content or FOUC for short.
Because this quirk seems to affect only MS Internet Explorer, we're tempted to conclude that IE is just plain wrong. I am not going to jump to that conclusion. It is unclear to me whether or not a FOUC afflicted user agent is in disagreement with any W3C recommendation. How do I see a FOUC? First, you will need to be using IE for Windows (version 5 or above). Now, this is very important. Load the page that you want to test into an IE5+/Win browser window. Please note that some factors, like a slow PC or proximity to network equipment with caching capabilities, may reduce the chance that you'll witness the flash of unstyled content display quirk. What's the backstory? Is it all in my HEAD? How can I help? 14个可以节省你时间的CSS工具. How to size text using ems | clagnut/blog. Text for the screen is sized with CSS in terms of pixels, ems or keywords. As most of us know, sizing with pixels is easy: get your selector and give it a font-size – no more thought required.
Sizing with keywords is more complicated and requires a few workarounds, but you’re in luck as the techniques are well documented. That leaves ems. At this point people often leg it. ‘Ems are too inconsistent,’ they say, ‘they’re too hard; they never work.’ Well that may be the received wisdom, but if ever the was a case of FUD then this is it. Why ems? If the world were an ideal place, we’d all use pixels. Keyword-based text sizing will allow all browsers to resize text so this is a possibility, but I don’t find it gives me the precision that pixels would give me. Get on with it OK let’s dive into ems. This takes 16px down to 10px, which apart from being less huge is a nice round number. And so to the final tweak and the bit folks seem to find most tricky: dealing with nested elements. Update: CSS Compatibility and Internet Explorer.
The document is archived and information here might be outdated With each new release of Windows Internet Explorer, support for the World Wide Web Consortium (W3C) Cascading Style Sheets (CSS) standard has steadily improved. Internet Explorer 6 was the first fully CSS, Level 1-compliant version of Internet Explorer. Internet Explorer 8 is fully compliant with the CSS, Level 2 Revision 1 (CSS 2.1) specification and supports some features of CSS Level 3 (CSS3). Internet Explorer 9 adds even more support for many CSS3 modules. Note It is important to remember that many CSS3 modules are still in the Working Draft or Last Call stages.
Until they reach the Candidate Recommendation stage, they could change significantly. If your Web site targets browsers that include earlier versions of Internet Explorer, you want to know the level of CSS compliance for those versions. Note CSS features that are new to Internet Explorer 8 will only work when your page is rendered in IE8 mode (or higher). Lists. CSS Tools: Reset CSS. The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example.
I don't particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on. In other words, this is a starting point, not a self-contained black box of no-touchiness. If you want to use my reset styles, then feel free! Previous Versions v1.0 (200802) Acknowledgments. CSS Gradient Text Effect. Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash).
All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how. View Demos Download Demo ZIP Benefits This is pure CSS trick, no Javascript or Flash. How does this work? The trick is very simple. The HTML markups <h1><span></span>CSS Gradient Text</h1> The CSS That's it! Make it work on IE6 Since IE6 doesn't render PNG-24 properly, the following hack is required in order to display the transparent PNG (add anywhere in between the <head> tag): This is why we hate IE 6!
jQuery prepend version (for semantic lovers) More samples Want to make Web 2.0 glossy text? Pattern / Texture. Bizmagic - Perth Website Design - Graphic Design. Tanfa - CSS design, style & fun » musing over the possibilit. CSS Frameworks + CSS Reset: Design From Scratch | CSS | Smashing. Advertisement You don’t have to write the same CSS-code or (X)HTML-Markup over and over again. Whatever project you’re starting to work with, at some point you have to define classes and IDs you’ve already defined in your previous web-projects. To avoid unnecessary mistakes you might want to start not from a blank file, but from an almost “perfect” scratch. The latter might contain some basic definitions you’d write in your code anyway. And this is where CSS Frameworks and CSS Reset are becoming important. Let’s take a look at the idea behind CSS Frameworks, their advantages and disadvantages, most popular CSS frameworks and dozens of default-stylesheets you can use designing a new web-site from scratch.
This article partially covers tools and techniques which use Grids. What is a CSS Framework? A framework is a basic (usually abstract) conceptual structure which you can use as a “scratch” for your web-projects. Advantages of CSS Frameworks Disadvantages of CSS Frameworks CSS Frameworks. Ntent with Style: A CSS Framework. CSS Text Wrapper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede. Donec iaculis, purus at porta tristique, pede nisi rhoncus pede, non nonummy augue nunc in tortor.
Nunc gravida, nisl ac tempor rutrum, risus odio pharetra eros, eu feugiat diam nisi sit amet sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis neque at odio laoreet convallis. Suspendisse rhoncus dolor ac magna. Cssdoc - Trac. Data Tables and Cascading Style Sheets Gallery. What is this about? The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results. Every once in a while there are emails on discussion lists asking for nicely designed tables and they are prone to go off-topic and ending in a holy war why tables are bad and why you shouldn't use them.
Basically the thread/email that gave me the idea was this request on the evolt list. Well, there are legitimate uses for tables, for tabular data they are the best solution, as - properly marked up - they structure the data for the visual user and make it easy to follow for blind visitors or those using user agents without table rendering. There are some good tutorials on styling tables on the web already, but a showcase site was missing, so here you go. Table and CSS tutorials May the following off-site resources give you wisdom and inspiration: Most blatantly stolen from Laura L.
Thirteen Simple Rules for Speeding Up Your Web Site. The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 35 best practices divided into 7 categories. Minimize HTTP Requests tag: content 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc.
Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages. One way to reduce the number of components in the page is to simplify the page's design. Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. CSS Sprites are the preferred method for reducing the number of image requests.
Image maps combine multiple images into a single image. Inline images use the data: URL scheme to embed the image data in the actual page. Tag: css. CSS Dock Menu. Whats Its Color: An image coloring solution feedback utility. Veerle's blog 2.0 - Webdesign - XHTML CSS | Graphic Design. Loupe.js (now with IE 6/7 support)
<form name="lst" id="lst" method="post" action=".. loupe.js 2.0 allows you to add photorealistic loupes (magnifier) to images on your webpages. The design is changeable by use of an image editing program. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari, Chrome and IE6+.
On older browsers, it'll degrade and your visitors won't notice a thing. Glossy.js (now with IE 6/7 support) <form name="lst" id="lst" method="post" action=".. glossy.js 1.8 allows you to add corners and shading and shadow to images on your webpages (alternatively: corner.js). It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+.
On older browsers, it'll degrade and your visitors won't notice a thing.CVI-lab: Get a fast impression of the effects and their illustration qualities. Shows some of the things glossy.js does. 6 images with class = "glossy iradius50" cvi_glossy_lib.js supports additional appearances. Empty gif with class = "glossy ibgcolor00aa00 igradient00aaaa horizontal noshadow" 3 images with class = "glossy" Images used are copyrighted and are used for demonstration only. Instant.js (now with IE 6/7 support)
<form name="lst" id="lst" method="post" action=".. instant.js 2.4 allows you to add an instant picture effect (including tilt) to images on your webpages (alternatively: slided.js or filmed.js). It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.CVI-lab: Get a fast impression of the effects and their illustration qualities. Shows some of the things instant.js does. First image with class = "instant itiltleft icolorFFFCE9 ishadow40 historical", next image with class = "instant nocorner itxtalt" and next two images with class = "instant itxtalt". Images used are copyrighted and are used for demonstration only. Download instant.js and include it into your webpage. // only if you want to use the annotation feature...
Corner.js (now with IE 6/7 support) <form name="lst" id="lst" method="post" action=".. corner.js 2.1 allows you to add corners (and also shading and shadow) to images on your webpages (alternatively: glossy.js). It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.CVI-lab: Get a fast impression of the effects and their illustration qualities. Shows some of the things corner.js does. class = "corner ishade50" class = "corner ishadow20" class = "corner ishade50 ishadow20" class = "corner ishadow40 inverse" class = "corner iradius16" class ="corner iradius24 ishadow33 inverse" class ="corner iradius20 ishadow33" class ="corner iradius8 ishade75 ishadow33" class ="corner iradius16 ishade66 ishadow30" class ="corner iradius32 ishade50 ishadow25" class ="corner iradius48 ishade33" If you want flexibility, use "cvi_corner_lib.js" instead of "corner.js".
Set defaults using Javascript. 20 个优秀 CSS 网站（6 月精选） - Nicky's blog. 20 个优秀 CSS 网站（5 月精选） - Nicky's blog. 一种新颖的导航结构 - Nicky's blog. CSS 压缩与优化工具 - Nicky's blog. CSSTidy. Web.Frontend :: IE 中的 html 元素 :: March :: 2007. 74 CSS Gallery Roundup | technology | nuff-respec.com. Applying CSS to forms.