Skip navigation.

Posts tagged with "test"

CSS Test: My 1st JavaScript + transparency

Thursday, 13. October 2005, 20:23:14

, ,

CSS transparency test: here

This idea came from the CSS fixed position. I needed a "follow mouse y coordinate" script and I'm no good in JavaScript, I tried to write one myself and gave up when found out that I could tweaked a script from javascriptkit worked. (It's becoming a bad habit!)


These are the different transparency rules I have found:

/* standard css opacity rule: */

                     opacity: 0.5

/* for Gecko Browsers: */

                 -moz-opacity:0.5

/*  for Konquerer and Safari: */

               -khtml-opacity:0.5

/*  for IE:  */

         filter:alpha(opacity=50)


Most browsers won't understand the standard rule for transparency : opacity:0.5.(yet? I hope)
The problem: Either the hightlight block follows the cursor and you won't be able click on a link so it has to be a bit above or below.

This test has been tested it in Firefox, Opera and Safari, dosn't work in Mac IE which is normal. But I don't know if it will work for other browsers in Windows. If it doesn't work please let me know, comments are welcome.


Here's the test: CSS3 and Javascript screen reader test




2 comments

CSS test n*2:Outset and Headers

Sunday, 9. October 2005, 10:39:56

, , , ...

Div, Headers n' borders


Headers inside a DIV with borders set to thin outset grey/gray(both work).
Notice how each browser render header width very differently. These are the smallest window width I could get without cutting out the content.


Firefox 1.0.7:



This is the only one where top bottom paddings are different. Huge right padding.

Internet explorer Mac 5.2.3:



Top bottom padding are equal. No margin above H1. Borders look solid.

Safari 1.3.1:



Top bottom padding are equal. Big right padding


Opera 8.5:



Top bottom padding are equal. H1 and H2 have more margin-bottom than Firefox, H6 has no margin-bottom.

No comments

CSS test n*1 -Inside tags: DIVS

Monday, 5. September 2005, 21:46:17

, , ,

Comparing different tags, -no paddings, no margins:
compare the yellow aeras...


div
Done in Firefox

1 comment

1 2 Next »

Showing posts 1 - 3 of 4.

Download Opera, the fastest and most secure browser

Opera resource

Opera Labs

  • Powered by Opera Widgets, Web applications take ce ...

    Today, we are bringing Opera Widgets for desktop to center stage, empowering application developers so they can take full advantage of the Web and its associated technologies to build full-fledged desktop applications.

  • Introducing Opera Fingertouch

    Today we introduce Fingertouch, a technology designed to make interacting with the Web easier and simpler on touchscreen devices. Opera Fingertouch provides visual feedback when you hit a Web link, and assists you when you come across multiple links or other selectable elements in close proximity to ...

  • Technology preview: Gears-enabled Opera Mobile 9.5

    We’re happy to announce our Opera Mobile 9.5 technology preview with support for Gears, a Google open source project that enables more powerful web applications. Besides this Opera Mobile 9.5 technology preview, Gears is currently available for Firefox 1.5+, IE 6.0+, Internet Explorer Mobile 4.01+ ...

  • Carakan

    Over the past few months, a small team of developers and testers have been working on implementing a new ECMAScript/JavaScript engine for Opera. When Opera's current ECMAScript engine, called Futhark, was first released in a public version, it was the fastest engine on the market. That engine was de ...

  • Video, 3D canvas and File I/O: Repeat!

    We've done it again! This article gives you the low down on our all new Opera desktop build with support for the HTML 5 video element, 3D canvas, and the File I/O API. Find out what it contains, and download builds for Windows, Mac and UNIX!