Perfect Full Page Background Image Learn Development at Frontend Masters This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Fills entire page with image, no white spaceScales image as neededRetains image proportions (aspect ratio)Image is centered on pageDoes not cause scrollbarsAs cross-browser compatible as possibleIsn’t some fancy shenanigans like Flash Image above credited to this site. Awesome, Easy, Progressive CSS3 Way We can do this purely through CSS thanks to the background-size property now in CSS3. Works in: Safari 3+Chrome Whatever+IE 9+Opera 10+ (Opera 9.5 supported background-size but not the keywords)Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version) View Demo But careful, reader Pierre Orsander said they tried this and had some problems with links on the page going dead. Enjoy
精选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 Sprite Generator | Project Fondue 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. 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? When I first converted bluerobot.com to a CSS-based layout (18 FEB 2001), the design suffered from the FOUC phenomenon. Is it all in my HEAD? A Note
CSSTidy Professional Frontend Engineering Video Screencasts #130: First Moments with Grunt There are all these tasks that we need to do as front end developers. Concatenate and compress our files. Run our preprocessors. Optimize images. Run tests. #127: Basics of JavaScript Templating A template is a chunk of HTML that you need to inject onto the page. #126: Using Modernizr Should Modernizr be part of every modern web project? #124: A Modern Web Designer’s Workflow This is a presentation I gave at conferences in late 2012 and early 2013. It talks … #121: The Right CMS is a Customized One The perfect CMS to suite the needs of any non-trivial content-oriented website does not come out-of-the-box. #119: Let’s Answer Forum Posts! In this screencast we live answer more forums posts with no planning whatsoever. #117: Let’s Attempt To Do a “Pull Request” I’ve never in my life submitted a “Pull Request” on GitHub. #115: Don’t Overthink It Grids Even if the layout of a site is simple as a main content area on the left and a sidebar on the right, that’s a grid.
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.’ 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. So this would give us a document where text in the navigation and side bar is displayed at 10px, the main content is 12px and the footer is 9px. 16 x 0.625 = 10 And so it goes on. And that’s it.
HOW TO: Get Started with Less Framework The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace's hosting solutions here. For the past few years, CSS grid systems have become increasingly popular with web designers. Thanks to efforts like Nathan Smith's 960.gs, designing with a grid is less complicated, and better looking sites can be crafted with ease. One of my favorite CSS grid systems of late is Less Framework. In May 2010, Ethan Marcotte's "Responsive Web Design" helped spur a movement of building websites designed to fluidly adapt to various platforms and device sizes — think mobile optimized sites and tablet-specific layouts — without the need for an entirely different design or special URL. Less Framework is, in my opinion, one of the best ways for web developers without lots of experience in designing responsive websites (or media queries in general) to take advantage of this new trend. Knowing the Basics Guides and Templates Less-Ready Themes
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. 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). Introduction At-rules Selectors Element Selectors Attribute Selectors Combinators Pseudo-classes
Less Framework 4 I called Less Framework "a CSS grid system for designing adaptive websites". It was basically a fixed-width grid that adapted to a couple of then popular screen widths by shedding some of its columns. It also had matching typographic presets to go with it, built with a modular scale based on the golden ratio. The resources it was originally published with are still available on GitHub. Contrary to how most CSS frameworks work, Less Framework simply provided a set of code comments and visual templates, instead of having predefined classes to control the layout with. This is how I still work today and definitely a method I advocate. /* Default Layout: 992px. Less Framework was popular in the early days of responsive design. Eventually, I moved on from fixed-width grid systems and worked on a fully fluid-width one, in the form of Golden Grid System. Less Framework's popularity was helped by the following contributions and the lovely people behind them (dead links crossed off):
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. 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 Thanks to Paul Chaplin for the blockquote / q rules.