Tag Archives: css3

A fancy box with rounded corners and drop shadow with CSS3 only. Really?

I have to admit that when I like the design of a website I check its CSS and HTML to see the code hoping to learn something new. I’m horrible at design and I cannot make a box even if I have it in front of me for 24 hours non stop but I love all kinds of tricks to make the content more appealing: rounded boxes, sexy quote marks, bubbles, everything.

What is really weird is that all these fancy design elements are usually cut as images and put as background-image for some DIV while the vast majority of them can be recreated with CSS. I admit, not all of them are simple but some do and today I’ll show you my latest experiment. I love a certain kind of box and I’m trying to make it using CSS3 only. After a little prayer to the CSS3 God let’s start.

If you’re not a patient person skip all this and go directly to the test page.
Continue reading

My own attempts to build CSS3 patterns

I was watching the other day the talk that Lea Verou gave at Fronteers 2011 (you can check the video on Fronteers Vimeo page) when she just proved that I don’t know CSS3 at all (I lived for a while with the sensation that I did know a little bit, I was wrong though).

One thing caught my attention: CSS3 patterns. She build some really crazy stuff there and I invite you to check more CSS3 patterns on her site, test the code and implement it in your future projects. Nothing is made with images, just pure CSS3 gradients and lots of brains.

Here’s how some of them look like:

CSS3patterns by Lea Verou
Continue reading

Possible new CSS features from Adobe

Inspired from the print world, people from Adobe and Microsoft are coming with new features that might (or might not) be embedded into future CSS specs. These new features – CSS Regions and CSS Exclusions – will allow text to flow into webpages pretty much like they do in newspapers and magazines.

You remember that the idea of text flowing into columns is another CSS3 proposal, CSS Multi-column Layout Module and web layouts imitating magazine layouts is CSS3 Paged Media Module

Let’s see some examples that Adobe implemented:

Content threads and shapes using CSS regions

Text could easily flow from one region to the other and we can also choose to imbricate regions or give them different widths, heights and positions in the layout (see picture below)

multiple content threads with CSS regions
content shaped like a heart with CSS regions
If you can set rectangular regions, why not come up with weird custom shapes?

Text will also flow from one region (shape in this case) to another.

The idea is super-cool and we waited for it for a while now, but I do wonder about its usability if we think about the way people are reading web content versus printed text (that might change the bottom-top L shaped reading order observed with eye tracking methods).

Content exclusion

text exclusion with CSS
The opposite idea is to exclude text from a certain region or regions. (rectangular or custom shape)

Possible real world implementations

adaptive design
Adobe came up with more complex examples (they work in their own version of WebKit based browser only since these features are still a draft and highly experimental).

Text can flow into custom shape areas and that will allow us create CSS accessible pie charts and complex layouts involving images and text that will behave well on devices with different screen sizes and resolutions.

Update: Stephen Hay talking about these features at Fronteers 2011

Stephen Hay | Go with the flow | Fronteers 2011 from Fronteers on Vimeo.

In this session, Stephen will introduce, discuss and give examples of CSS3 Regions.

Browsers have begun to introduce actual layout mechanisms like Flexible Box Layout and Grid/Template Layout. For this, we kneel humbly and are thankful. But while we’re at it, why settle for rudimentary layout tools when we can add content flow to the mix? CSS Regions attempts to bring the power of content flow from print to the Web. Think of Regions as Multi-column layout on adrenaline. Regions can be extremely powerful and useful on their own. When combined with other CSS3 modules they will give web designers and developers creative freedom which rivals that of printed media.

Using CSS3 to style forms written in HTML5

Styling a form is never an easy thing to do, but adding CSS3 on a HTML5 form is a task that shows a large variety of results when it comes to testing on different browsers. Check the test link.

When it comes to CSS3 not much can be done: but adding rounded corners, gradients and dropshadows is still more than nothing anf the overall aspect of the form is waaaaaaaaay better. But HTML5 is supported by few browsers (this HTML form only by Opera) and CSS3 also by few broswers – but different from the one supporting HTML5.

The result: impossible to see the result on one browser only: the rounded corners can be seen on Mozilla/Chrome/Safari and the HTML5 elements on Opera.

Internet Explorer? Better don’t ask. No support whatsoever.

So the results:

  1. Mozilla 3: rounded corners + / HTML 5 elements
    capture-2
  2. Chrome: rounded corners + (they look weird) / HTML 5 elements –
    chrome-screenshot
  3. Safari: rounded corners + / HTML 5 elements –
    capture-3
  4. Opera 9: rounded corners – / HTML 5 elements +
    capture-1
  5. IE (doesn’t matter which one): rounded corners – / HTML 5 elements –
    ie8-screenshot

It seems we have to wait a little longer till we can drop Javascript from styling the forms  🙁

UPDATE

Ric Ferrer sent us a screenshot with the behavior of Mobile Safari from his Ipod. Thank you 🙂

37555934

Check the Spanish version of this post:
Usando CSS3 para dar estilo a formularios escritos en HTML5