Gyrobo

10 CSS Goodies Opera Needs

Sunday, 6. September 2009, 15:01:51

(10) box-shadow

Whether you're trying to create the illusion of depth or give your paragraphs a healthy glow, there are hundreds of reasons to use and love box-shadow!

Sometimes a single shadow can transform a borderline-average web site into an aesthetic masterpiece.

(9) Viewport Units

Sure, there's nothing eye-catching or glamorous about defining length in terms of a browser's viewport.

But scaling text to its window — without Javascript — is far more important to me than a thousand shadows vying for my attention.

(8) calc()

Behold, another revolutionary feature toiling in obscurity!

Defining length as a function of multiple units would change the very potential of web design.

Foundational changes like this are always remembered — ancient Rome is revered for its plumbers, not its gladiators.

(7) Giant Angry Bear

Purists argue that a giant angry bear has no place in a presentational language. Still, it remains in the spec, and other vendors have implemented (to varying degrees) this bloodthirsty monster.

Opera needs to add support just to keep up.

(6) Multiple Backgrounds

Many hacks exist solely to overcome the draconian limit of one background.

Why should developers strain and markup become bloated? Background images could — should — be divvied up and reused, reducing code and bandwidth.

This is about more than eye candy.

(5) Gradients

For too long, developers have been constricted to a palette of solid colors and images. I say it's time to whet our palates with a panoply of shimmering gradients!

Ravishing radials and luxurious linears make the most hardened developers swoon.

(4) 2D Transforms

Wouldn't it be great if browsers could replace image editors for simple tasks?

Do you want an image stretched? Rotated? Twisted out along a convoluted transformation matrix? If you answered “yes,” why stop at images?

The potential is staggering.

(3) Transitions

Cartographers agree: the quickest route from Point A to B is a straight line.

But when it comes to displayed content, sudden changes to a page can be... disorienting. Transitions show people exactly what is changing, and where.

(2) border-radius

Sharp edges are dangerous. Uninviting. Foreboding.

The most visually pleasing sites often use curves to lead the eye, welcoming us to their content. Border radii create those curves.

Imagine the opportunities for widget developers — with or without radii capping.

(1) Multi-column layout

In the world of newspapers, any waste of space is an unacceptable cost.

The web charges a similar toll for wasted horizontal space — the cost of scrolling, which visitors hate. Passionately.

It's a price we can no longer afford.

The Scribbles GalleryGood Times and Good Luck

Comments

1 2 3 Next »

Gyrobo # 7. September 2009, 14:37

"They're taking us for saps," quipped a counter-demonstrator. "I say their bark is worse than their bite!"

Neil Diño # 8. September 2009, 11:48

Gyrobo! Nice work. Thanks for visiting my blog. Hope you didn't take my comment wrongly, my friend.

Neil Diño # 8. September 2009, 13:04

How can people just read and not favorite your post? Let me be the first one.

Duane Mr. Smiley! ^^ # 8. September 2009, 17:23

starree # 9. September 2009, 02:10

I like the giant angry bear

lus # 9. September 2009, 09:34

I'm for the bear as well !

Gyrobo # 9. September 2009, 17:26

Thank you all for your compliments. Now my ego has enough mana to make it through the day.

Greg Smith # 9. September 2009, 18:38

I love reading everything you write mate, it's well constructed, original, intelligent and to the point.

Stuff like this is like GOLD, gold underpants even !

Good luck - you talented bastard, pistols at dawn ?

(I've not voted yet and I'm running out the door now (out of office till Saturday) But you know you can count on my vote for sure !)

Gyrobo # 9. September 2009, 22:16

Pistols at dawn! Why knot?

Katiinkaa # 10. September 2009, 01:33

I'm going to admit I have no idea about what most of that means, but it looks like you know what you're on about so I gave you a vote.

I DO understand your no. 1 point though. There is no space to waste in news.

Gyrobo # 10. September 2009, 02:17

Quite a few people I've spoken to have said my article was very technical, but I was really trying hard to make these topics approachable and avoid jargon.

I thought that people competing to write articles about web properties would want to read an article about web properties!

Maybe I read the right writing wrongly.

Nikko # 10. September 2009, 06:17

that is kind of technical, but i do get your point. i want news articles on the web to be like those in paper...

favorited too

Andrew James Forrest # 10. September 2009, 06:57

nice work i really like the way you set this out

SweetLinh # 10. September 2009, 15:14

I dont know much about technology but i admire your effort with your post.

Changing Woman # 10. September 2009, 16:58

gr8 work..!

Just I day go I were learning CSS through an on-line tutorial..

its a nice tutorial if anyone up here is into CSS

http://www.w3schools.com/Css/css_howto.asp

favored!

Gyrobo # 10. September 2009, 20:13

Thanks, everyone!

I only hope that if I don't win, the public support I've seen for multi-column text gets some traction going at Opera.

Graham Whittaker # 10. September 2009, 22:25

One more for the pot for you gyrobo. Nice work m8

Marco Romer # 11. September 2009, 02:13

Well, I am no professional and I didn´t think your article was too technical. It was clear enough to make the message simple. If every "geek" was able to write as well as you maybe there would be a lot more new "geeks" around.

I have to agree with most of your expectations on future releases of Opera. The multi-column is a must since I HATE to scroll down.

I´m not sure about the bears though... I prefer to see them roaming free than embedded in some kind of weird code! Long live the angry bears!

You get my vote and my wishes of good luck!

PS: I guess I just called you a geek, hope you don´t get mad at me. I am a geek myself if it evens things a little.

Gyrobo # 11. September 2009, 02:16

I'm actually quite happy to find sympathetic ears. Thanks, Graham and Marco!

leena # 11. September 2009, 03:46

Now we are talking!

I would also like to see a hugamongous never-ending supply of dummy tools to go with the list! There was a super site, Mandarin, and they wrote it all out for you! Sadly the woman died and you must search archives for the info. But, it was newspaper style CSS and html incorporating all of the above, with Opera in mind.

Someone needs to fill the void Gyrobo. *hint hint*

I sooo wanna do more with my page but I am totally in need of the dummy instructions

one gold star! (licked and stuck on your forehead

)

Greg Smith # 11. September 2009, 06:31

calc() - 'ancient Rome ... plumbers vs gladiators' - I like this too much ...

SweetLinh # 11. September 2009, 14:52

Thanks for supporting me. I give you my vote also. I love 9, 6,4,2 in your list. Wish that one day they would be real

Gyrobo # 11. September 2009, 16:54

@Lesswoodsend --

I've been partially maintaining the Wikipedia page on CSS property support, so you can (hopefully) easily find which multi-column properties have support among which browser. The Mozilla Developer Center has an article on the state of columnar support and its uses, but here's the gist:

Gecko supports "column-count", "column-gap", "column-width" and as of 1.9.1 (Firefox 3.5) "column-rule". These all have a proprietary -moz- prefix (i.e. -moz-column-gap).

Webkit supports the same properties, but with a -webkit- prefix, and also has support for the breaking properties and "columns" shorthand.

Personally, I wish the module would be updated so that "column-span" could use the intrinsic width of an element (fit-content). Maybe an "auto" value? Then the "1" value could become "none", indicating no spanning...

Now I know I'm getting too technical.

@Greg --

I also loved that line.

@Brokenheartvn --

Oh, they will be. One day.

leena # 11. September 2009, 17:42

hmm. do I need to be running Firefox to view that properly? I am using IE right now. I quit using Peregrine Beta when I was running into repeated crashes/lock-ups.

the wiki page would explain why elements were not working in what I wrote.

Gyrobo # 11. September 2009, 17:47

Internet Explorer doesn't support multi-column layout. The following code should generate a two-column text field in only Firefox and Safari/Chrome:

<style>
p.multi-col {

  /* Firefox */
  -moz-column-count: 2;

  /* Safari/Chrome */
  -webkit-column-count: 2;

  /* Browsers with full support for this property */
  column-count: 2;
}
</style>

<p >Text in here is spread out over two columns.</p>

Gyrobo # 11. September 2009, 17:51

You can use other properties to control the columns better. The last demo made sure there were two columns total, regardless of width. Now we'll do the opposite:

<style>
p.multi-col {

  /* Firefox */
  -moz-column-width: 100px;

  /* Safari/Chrome */
  -webkit-column-width: 100px;

  /* Browsers with full support for this property */
  column-width: 100px;
}
</style>

<p >
Text in here is spread out over one or more columns,
each with widths of 100px.
</p>

Gyrobo # 11. September 2009, 17:57

And of course "column-gap" controls the space between columns.

"column-rule" allows you to style the vertical bar directly between columns.

<style>
p.multi-col {

  /* Firefox */
  -moz-column-width: 100px;
  -moz-column-gap: 3em;
  -moz-column-rule: 2px solid blue;

  /* Safari/Chrome */
  -webkit-column-width: 100px;
  -webkit-column-gap: 3em;
  -webkit-column-rule: 2px solid blue;

  /* Browsers with full support for this property */
  column-width: 100px;
  column-gap: 3em;
  column-rule: 2px solid blue;
}
</style>

<p >
Text in here is spread out over one or more columns,
each with widths of 100px. There are 3em between columns,
with a solid blue bar 2px wide at the center.
</p>

MathewLAXs # 11. September 2009, 21:46

good job! but u dont get my vote sorry...........................................................jk!! lol

Gyrobo # 11. September 2009, 22:55

Gyrobo # 11. September 2009, 22:56

I hope that doesn't encourage future image embedding...

Duane Mr. Smiley! ^^ # 12. September 2009, 00:15

cool

MathewLAXs # 12. September 2009, 00:26

lol u get my vote

Greg Smith # 12. September 2009, 05:33

- Don't worry, I'm sure it won't ...

leena # 12. September 2009, 14:07

aha, but my biggest question is ... in the past I was told that cannot be used on a per-blog basis. It needed to be in the style sheet code. what I cannot understand is, does that not mean it will treat all blog then in that way? or can it be used on select blogs, and tweaked?

Gyrobo # 12. September 2009, 14:22

You can put those <style> tags into the template for a blog. It doesn't need to be in an external file.

But the template does change from blog to blog, so you will need to repeat the process for multiple blogs.

leena # 12. September 2009, 14:40

entering the style tag into the individual blog slowed page loading down considerably (5+ minutes if I remember). could that be because I used incorrect syntax too?

leena # 12. September 2009, 14:41

or perhaps too many ??

Gyrobo # 12. September 2009, 16:52

Did you insert the tag into the <head> element?

<head>

  <!-- Other code -->

  <style>
    /* CSS goes here */
  </style>

  <!-- Other code -->

</head>

Greg Smith # 13. September 2009, 04:27

ah... I wasn't using my <head>
silly me !
thx gyrobo

Bencharqui Hakam # 13. September 2009, 06:39

I agree with many of your points and favored your post

although I think if all these changes were to come to life, It would be better if the user had the choice on whether to use them or not,a lot of people out there use internet for basic utilities like and might get overwhelmed with the changes.

Check out my article and add to your favs if you enjoy it, cheers

http://my.opera.com/rowley8/blog/2009/09/11/destiny-calls

Winter # 13. September 2009, 09:16

hmm I agree

nice post and you have my vote ^^

please also support me at http://my.opera.com/winterdawn/blog/2009/09/13/to-catch-your-eye thanks!!!

Greg Smith # 13. September 2009, 12:09

- I agree too, maybe even three ... but 3's odd so... 4

leena # 13. September 2009, 13:43

Oh absolutely that goes without say

I would like to do something outside of the box though, so for me, it is interesting. Besides, is this not how we educate our young? one little thing at a time. think how Internet looked and what was available in our toolboxes just a few years ago. we could not put video or music players on our blogs, flash was so rare, and so on and so forth. little by little, if it is available, ppl will learn and streamline it further. and that is the point of this competition, no? Gyrobo is exposing us all to these ideas, and subconciously we are learning. by me asking more, he will explain it (hopefully) to a point of layman's terms so that we all understand these concepts. then put them to use, if we so desire. that said ....

help! (please?)
situation~ I am playing with my soon-to-be blog and would like to apply style tag of paragraph float right, left, and center. this way my text will be 3-columned. what do you see wrong with this? I cannot make this work:

("right" substituted subsequently with "center" and "left")

leena # 13. September 2009, 13:49

bah!

i forgot it would not show just pasting as is...

...do-over:

p style="float:right;width:33%;margin-left:1px;padding:1px;font-size:1.0em;margin:10px;"

leena # 13. September 2009, 13:53

em do I need a div tag too? or could it be the bullet graphics I am trying to use? in other words, this should appear as a list of three columns, and each line has a little flashing blinky bulletin mark. this is it:

[img=

Gyrobo # 13. September 2009, 14:11

To make three columns using floated paragraphs, use something like:


<head>

  <!-- Other code here -->

  <style>

  div.columns-container p {
    width: 33%;
    float: left;
  }

  </style>

  <!-- Other code here -->

</head>
<body>

<div >
  <p>Column 1</p>
  <p>Column 2</p>
  <p>Column 3</p>
</div>

</body>

You don't need the div tag, it's just a way to keep the columns separated from the rest of the page -- so there's no conflict with the width of any other element.

Also, remember to float left instead of right. If you float right, column 1 would end up on the far right, while column 3 would be on the far left.

leena # 13. September 2009, 14:40

apparently this is why ppl go to school for this... its not flying. Okay I do not want to threadjack, so I will pm this. Thank you

Gyrobo # 13. September 2009, 14:46

You need to be careful that you're using a strict doctype, or this code won't work in Internet Explorer due to the Box Model Bug.

Basically, if you're using a transitional doctype, or no doctype, the width includes an element's padding and border -- in Internet Explorer.

leena # 13. September 2009, 16:19

If I am to understand the Bug properly, then would that include defining (1) a box size for the bullet, and (2) a box size for the overall columns?

Gyrobo # 13. September 2009, 16:34

To give each item a bullet, you should use UL elements instead of paragraphs:


<head>

  <!-- Other code here -->

  <style>

  div.columns-container ul {
    padding: 0;
    width: 33%;
    float: left;
    color: #DC143C;
    font-size: 12pt;
  }

  strong {
    color: #FF1493;
    font-size: 14pt;
  }

  </style>

  <!-- Other code here -->

</head>
<body>

<strong>List Name</strong>
<div >
  <ul>
    <li>Word 1</li>
    <li>Word 2</li>
    <li>Word 3</li>
  </ul>
  <ul>
    <li>Word 4</li>
    <li>Word 5</li>
    <li>Word 6</li>
  </ul>
  <ul>
    <li>Word 8</li>
    <li>Word 9</li>
    <li>Word 10</li>
  </ul>
</div>

</body>

It's important to set the padding to 0, because by default a UL will have padding that will mess up the widths -- you'll have another case of the third column going onto the next line.

This is why multi-column layout would be such a nice thing to have!