Previews. The resize property in CSS3. Home / CSS3 Previews / The resize property in CSS3 Always wanted to be able to resize elements in a site? Done dirty hacks for it? CSS3 offers the solution in it’s CSS3 User interface section: the resize property. It allows you to specify if a box is resizable. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. The code for this is very simple: Now it supports resize: both; like the box above, but also resize: horizontal; and resize: vertical;. And the vertical one. with a max-height and a min-height:
Multi-column layout. Home / CSS3 Previews / Multi-column layout W3C offers a new way to arrange text “news-paper wise”, in columns. Multi-column layout is actually a module on its own. It allows a webdeveloper to let text be fitted into columns, in two ways: by defining a width for each column, or by defining a number of columns. The first would be done by column-width, the latter by column-count. To create a space between the columns, you need to specify a width for column-gap.
Multi-column layout is currently only supported in Mozilla based browsers and Safari 3, who have prefixed the properties with respectively -moz- and -webkit-. -moz-column-width: 13em; -webkit-column-width: 13em; -moz-column-gap: 1em; -webkit-column-gap: 1em; Which results in the following: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
The next example is done with column-count, and has the following code: Which in turn results in the following: Cras urna metus, aliquam sed, condimentum eget, pellentesque scelerisque, massa. Text-overflow. Home / CSS3 Previews / Text-overflow Sometimes text will have to be clipped. For instance when it overflows the element’s box. When this happens, you want to leave a visual “hint” to the user that text has been clipped. This is were the text-overflow-props come in. Support for these features is very limited at the moment, WebKit only supports the short-hand text-overflow, and even that is only partly implemented. text-overflow: ellipsis-word; and text-overflow: inherit; don’t work yet. The following two divs contains the following text: “Lorem ipsum dolor sit amet, consectetur”.
Lorem ipsum dolor sit amet, consectetur text-overflow: ellipsis-word; , when implemented, should look like this: Lorem ipsum dolor sit… Note that the current version of the spec does NOT contain text-overflow. Word-wrap.