css

TwitterFacebook
Get flash to fully experience Pearltrees
For years we used pixels to lay out web pages. Then, not so long ago, we were dabbling with ems to make our pages elastic . Now, in 2011, most of us are adopting a responsive approach and using fluid grids and percentages. These methods seem to have all happened sequentially, with us each time dropping the last. I’ve decided, though, that the best builds use aspects of all previous methods; fixed, elastic and fluid. Using percentages…

Measuring and sizing UIs, 2011-style — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts

http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style/
http://www.impressivewebs.com/space-round-css3-background/ If you’ve seen the code for CSS3 border images then you’re probably familiar with the space and round values for the border-image-repeat property. Well, in the CSS3 spec, the well-known background-repeat property now includes those two new values (in addition to repeat , repeat-x , repeat-y , and no-repeat — all of which most CSS developers will be thoroughly familiar with). So what’s happening here? Well, the clear difference between the previous example and this one is the fact that the background image is not being cut off at the element’s boundary — either vertically or horizontally. A value of space causes the image to be ‘spaced’ out evenly across the width and height of the element, to ensure it’s not being cut off.

CSS3′s ‘space’ and ‘round’ Values for background-repeat | Impressive Webs

http://www.impressivewebs.com/attribute-selectors/ The main reason CSS attribute selectors have been avoided up to this point is their complete lack of support in IE6. But since IE6′s market share is continuing to slowly but steadily decline, it’s becoming safer to use them. I’m not going to go through the basics of CSS attribute selectors and their syntax. There are some pretty good resources explaining them, which I’ll link to at the bottom of this post. So if you don’t have at least some grasp of what this CSS feature is all about, please check those out first. This article will go a little further and focus on some interesting facts and bugs surrounding attribute selectors that you may not have known.

Things Worth Noting About CSS Attribute Selectors | Impressive Webs

http://www.impressivewebs.com/center-multiple-divs/ At some point, you may have a situation where you want to center multiple elements (maybe elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center. There really should be a similar simple way to center multiple elements evenly spaced. It would be nice if CSS had a property called “box-align” which you could set to “center” then the child elements would be centered evenly within their parent.

Center Multiple DIVs with CSS | Impressive Webs

Centered Menu Basic Example Below you should see four horizontally centered tabs in this column of text, the second tab is set as active. Try resizing your browser window and change the size of the page text to see how the menus always remain centered and clickable. How the centering method works http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

Beautiful Horizontally Centered Menus/Tabs/List. No CSS hacks. Full cross-browser.