Automatic Garbage Creation

10 CSS Goodies Opera Needs

Sunday, September 6, 2009 3:01:51 PM

(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

Gyrobo Monday, September 7, 2009 2:37:39 PM

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

Duaneborri Tuesday, September 8, 2009 5:23:13 PM

cool

starree Wednesday, September 9, 2009 2:10:38 AM

I like the giant angry bear

lusciupyptc Wednesday, September 9, 2009 9:34:29 AM

I'm for the bear as well !

Gyrobo Wednesday, September 9, 2009 5:26:16 PM

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

Greg Smithgregsmithsays Wednesday, September 9, 2009 6:38:16 PM

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 Wednesday, September 9, 2009 10:16:28 PM

Pistols at dawn! Why knot? smile

Gyrobo Thursday, September 10, 2009 2:17:05 AM

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.

Nikkodarkhitsugaya Thursday, September 10, 2009 6:17:03 AM

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 wink

Andrew James Forrestandyjungle Thursday, September 10, 2009 6:57:09 AM

nice work i really like the way you set this out

Linhbrokenheartvn Thursday, September 10, 2009 3:14:43 PM

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

Changing WomanChanging_woman Thursday, September 10, 2009 4:58:23 PM

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 Thursday, September 10, 2009 8:13:38 PM

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.

Marco Romerromer6 Friday, September 11, 2009 2:13:44 AM

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! smile

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. wink

Gyrobo Friday, September 11, 2009 2:16:53 AM

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

leenalesswoodsend Friday, September 11, 2009 3:46:00 AM

Now we are talking! http://files.myopera.com/lesswoodsend/Smilies/kao_anis_129.gif - 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 sad

star one gold star! (licked and stuck on your forehead rolleyes )

Greg Smithgregsmithsays Friday, September 11, 2009 6:31:55 AM

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

Linhbrokenheartvn Friday, September 11, 2009 2:52:10 PM

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 yes up

Gyrobo Friday, September 11, 2009 4:54:05 PM

@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. smile

@Brokenheartvn --

Oh, they will be. One day. bigsmile

leenalesswoodsend Friday, September 11, 2009 5:42:59 PM

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 Friday, September 11, 2009 5:47:45 PM

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 class="multi-col">Text in here is spread out over two columns.</p>

Gyrobo Friday, September 11, 2009 5:51:18 PM

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 class="multi-col">
Text in here is spread out over one or more columns,
each with widths of 100px.
</p>

Gyrobo Friday, September 11, 2009 5:57:21 PM

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 class="multi-col">
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>

Matt AKA Ironicsupermathew Friday, September 11, 2009 9:46:47 PM

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

Gyrobo Friday, September 11, 2009 10:55:46 PM

http://i34.tinypic.com/54inpu.jpg -

Gyrobo Friday, September 11, 2009 10:56:48 PM

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

Duaneborri Saturday, September 12, 2009 12:15:19 AM

cool yes

Matt AKA Ironicsupermathew Saturday, September 12, 2009 12:26:36 AM

lol u get my vote

Greg Smithgregsmithsays Saturday, September 12, 2009 5:33:25 AM

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

http://www.tijuana.fr/wp-content/uploads/2009/05/roflmao.jpg -

leenalesswoodsend Saturday, September 12, 2009 2:07:21 PM

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 Saturday, September 12, 2009 2:22:08 PM

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.

leenalesswoodsend Saturday, September 12, 2009 2:40:24 PM

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?

leenalesswoodsend Saturday, September 12, 2009 2:41:48 PM

or perhaps too many ??

Gyrobo Saturday, September 12, 2009 4:52:50 PM

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

<head>

  

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

  

</head>

Greg Smithgregsmithsays Sunday, September 13, 2009 4:27:56 AM

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

Bencharqui Hakamrowley8 Sunday, September 13, 2009 6:39:41 AM

I agree with many of your points and favored your post smile 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

Winterwinterdawn Sunday, September 13, 2009 9:16:23 AM

hmm I agree bigsmile 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!!! bigsmile

Greg Smithgregsmithsays Sunday, September 13, 2009 12:09:15 PM

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


leenalesswoodsend Sunday, September 13, 2009 1:43:47 PM

Oh absolutely that goes without say up 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")

leenalesswoodsend Sunday, September 13, 2009 1:49:59 PM

bah! mad i forgot it would not show just pasting as is... doh ...do-over:

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

leenalesswoodsend Sunday, September 13, 2009 1:53:21 PM

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=http://files.myopera.com/lesswoodsend/Smilies/blinky%5B1%5D.gif -

Gyrobo Sunday, September 13, 2009 2:11:00 PM

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

  

  <style>

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

  </style>

  

</head>
<body>

<div class="columns-container">
  <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. smile

leenalesswoodsend Sunday, September 13, 2009 2:40:41 PM

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 smile

Gyrobo Sunday, September 13, 2009 2:46:10 PM

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.

leenalesswoodsend Sunday, September 13, 2009 4:19:43 PM

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? confused

Gyrobo Sunday, September 13, 2009 4:34:15 PM

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

  

  <style>

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

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

  </style>

  

</head>
<body>

<strong>List Name</strong>
<div class="columns-container">
  <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! p

Greg Smithgregsmithsays Sunday, September 13, 2009 4:47:32 PM

Nice ! Sometimes HOVERING IFRAMES get tricky but this is handy too 
<style type="text/css">
   #FRAME5 {position:absolute;
        left: 310px;
        top: 1758px;
        width: 166px;
        height: 93px;
        z-index: 100
       }
</style>


And then
<div id="FRAME5">
<iframe name="FRAME5"  width="166" height="93" src="cb.htm" frameborder="0" scrolling="no"></iframe>
</div>
Works nicely for HOVERING IFRAMES generally

leenalesswoodsend Sunday, September 13, 2009 5:39:34 PM

at the risk of sounding ignorant...
still clueless worried

leenalesswoodsend Sunday, September 13, 2009 5:48:56 PM

this would be much easier so you can see what I am trying to accomplish smile

Gyrobo Sunday, September 13, 2009 6:06:00 PM

Leena, you'd probably be interested in list-style as a way to format your bullets.

Greg, you're right. I was just thinking about using absolute positioning to build some columns. It can't be any worse than hacking around some floats. smile

1 2 3 Next »

Showing comments 1 - 50 of 111.

Write a comment

New comments have been disabled for this post.