Daily Gadgets, Computer, and Electronics News » design

Zune 3

shiro — Fri, 12 Sep 2008 13:07:43 +0000

The newborn Zune 3 has cool hunting concept. This newborn Zune hit every the feature of Zune 80, with new features such as internet explorer, wifi marketplace, common sound apps, and much more feature. The New Zune 3 will be acquirable in 16 and 32 GB storage. This mp3 player phone have play/pause/and call button with the huffy construct like the “LG chocolate” But wait.. this newborn Zune is only a amend construct and not free yet.

(More) Button Maker

cosa — Sat, 30 Jul 2005 15:30:09 +0000

Another button maker service, this one has clearer and better interface. I used to use this service from Adam Kalsey, but might consider using that new service from BlogFlux.

Updated:
One more button maker as suggested by Scott-O-Rama. I’ve also create a screenshot of each service below, so you can compare them, and choose which one you like.

From left to right: BlogFux – Kalsey- Lucazappa.

Creating FireFox-styled Status Line with CSS

cosa — Wed, 01 Jun 2005 00:37:17 +0000

If you’re using FireFox, sometimes you’ll see a status message on the top of your currently opened page. That’s the status line. It contains important message related to the current browsing progress, for example, when a certain plugins is required and you don’t have it installed, or when a pop-up window is blocked automatically, or when the page trying to install something. In the right part of the status line, there’s a close button image, and when you click on it, the status line is gone. Cool, isn’t it? Now, let’s try to create the same status line effect in our website using CSS and JavaScript DOM.

First off, add the following CSS code inside your document HEAD section (between and tag)
[css]

[/css]
Below the above code, add the following JavaScript (still inside the HEAD section)
[js][/js]
Download this image and put it on your server.
(right click and choose “Save As”)
Now we’re ready ) If you want to display the status line, just add the following HTML code:
[html]
Put your message here

[/html]
It doesn’t matter where you put these code, it will automatically shifted into the top of the page.

The explanation is quite simple. We displayed the status line inside the DIV section where this DIV is positioned on the top left of the page (left: 0px and top: 0px) and full width (width: 100%). We also prepare a style-class for the close button image to float it on the right-side of the status line. With the JavaScript function, we handle the mouse click event by hiding the status line and restoring the document’s BODY padding style.

The sample result is below:

Have fun with CSS )

X-Ray Effect using CSS

cosa — Mon, 30 May 2005 14:58:36 +0000

Via Digg. Yet another Mozilla’s CSS magic. This one create an x-ray effect of a woman body. Still not convinced enough to throw away IE?

Some Images

cosa — Thu, 19 May 2005 17:25:40 +0000

Venice

Venice town-view drawn using MSPaint

Probably hard to believe, but the picture on the right was drawn (almost) completely using MS Paint! The artist said that it took about 500 hours to draw this Venice town view. Hmmm, about 21 days drawing. And if you even bother to ask, “Why MS Paint?” The reason is somewhat simple.

i did’nt know how to use softwares so i used the very basic mspaint to do it

The Muppets Attack

Star Wars image modification using Photoshop

And then, this one was made using Photoshop. A good modification of Star Wars Episode II poster. The picture is one of the entry for the Photoshop skill contest from Worth1000.com. You can find more interesting Star Wars image modification from their site (just click on the image), along with lots of photo and picture on their gallery section.

This picture reminds me of The Muppets Show. I haven’t seen this TV show again for ages. Really miss them a lot

Alexa

Alexa, a Spanish-Egyptian beautiful teen model.

The last picture, of course, was not drawn using either MSPaint and Photoshop. It was a photo of Alexa, an 18-years old teen model. More information and pictures (warning: contains nudity) is available on her site.

I don’t know why I should post this unrelevant photo here, but the first time I saw this, I really really want to post it. So there she goes :d

Your opinion please )

Fading Element Effect using CSS

cosa — Thu, 19 May 2005 03:03:17 +0000

In the previous CSS article, we set up a transparent element using CSS through -moz-opacity property (Mozilla’s specific) and opacity property (CSS3). Now let’s try to move another step ahead and learn how to create a cool fade in/out effect using opacity property.

We won’t use -moz-opacity property in this article since the latest version of Firefox (v1.0.4) seems already support opacity property, just like Mozila. So only opacity property will be used.

To create a fading effect, we will need a little help from JavaScript. We’ll use JS’ setTimeout() function and clearTimeout() function to perform the fade animation. All we need to do, in each ‘animation‘ sequence, we either increase (fade-in) or decrease (fade-out) the element’s (image) opacity value until we hit 1 (fade-in) or 0 (fade-out). Each animation is processed through fadeIn() and fadeOut() function (source code below), and the setTimeout() function is used to set when the next fadeIn/fadeOut function will be called. So when those functions is called multiple times sequently, we’ll obtain the fading effect.

Before we get to the source code, let’s see how the effect will looks like:

Fade Out

Fade In

Move your mouse over the box and the fade effect will begin. To stop or to restore the box to its original condition, mouse your omouse away from the box.

Here’s the source code for the JavaScript portion (copy-paste and save it as fade.js)

[js]var fadeInObj = null;
var fadeOutObj = null;

and this is the HTML portion for the sample above:
[html]

[/html]

To stop the animation, we call the JS’ clearTimeout() function. However, this function need to know which timeout object should be stop. So we declare the object everytime we call the setTimeout() function, and then pass this object as parameter for the clearTimeout() function (fadeInObj is the object for fade-in effect and fadeOutObj is for the fade-out).

Have fun! :d

Transparent Element using CSS

cosa — Mon, 16 May 2005 07:22:57 +0000

Let’s play with Mozilla’s CSS again. Now we’ll try to make a cool transparent element with -moz-opacity property. This property is also available in CSS3 specification with the name opacity. Using this property, you can control how solid your element is. The value is ranged from 0 (full-transparent) to 1 (solid). So, 0.5 value means the element is 50% transparent.

Watch the sample below:

All of the 4 boxes actually have the same color, red. What make each looks different is the -moz-opacity setting. Box #1 has 25% opacity (0.25), box #2 has 50% opacity (0.5), box #3 has 75% opacity (0.75), and the last box #4 has 100% opacity (1).

Here’s the code:
[css].bigBox {
background-color: black;
width: 100px;
height: 100px;
border: 1px solid #000;
margin: 0 5px 10px 0;
padding: 0;
float: left;
display: block;
}

.box1, .box2, .box3, .box4 {
background-color: red;
width: 50px;
height: 50px;
border: 0;
margin: 0;
padding: 0;
float: left;
text-align: center;
color: white;
}

.box1 {
-moz-opacity: 0.25;
opacity: 0.25;
}

.box2 {
-moz-opacity: 0.5;
opacity: 0.5;
}

.box3 {
-moz-opacity: 0.75;
opacity: 0.75;
}

.box4 {
-moz-opacity: 1;
opacity: 1;
}[/css]

[html]

[/html]

Try to combine this with element who has background image and you’ll surely get a nice effect. Hover will look good too. I already implement this in my comment list element. If you want to see it, just find any post in my blog that has lot of comments, and check out the comment box )

Don’t forget. This is Mozilla/Firefox spesific CSS. Sorry to IE users – get FireFox please )

Good luck :d

Use CSS to Change Highlighted Text Style

cosa — Sat, 14 May 2005 13:13:09 +0000

There are several interesting style on Mozilla’s specific CSS. One of the most interesting trick is changing the style of the text when user highlighted the text using -moz-selection property. Look below:

[css]::-moz-selection{
background-color: #ff0000;
color: #fff;
}[/css]

now when user selected or highlighted any text, the background color will change to red (#ff0000) and the text color is white (#fff). I used that style on this site so simply highlighted any text here and see the result )

Don’t forget that this is Mozilla’s specific CSS, so it won’t work on Internet Explorer. I hope this property will be included on CSS3 specification draft so more browser will support it.

CSS Reboot result

cosa — Wed, 04 May 2005 04:18:35 +0000

Check the result of the CSS Reboot. Many many interesting design outthere.

Using CSS to Setup Different Style for External Link

cosa — Sat, 30 Apr 2005 00:06:10 +0000

Just learn something cool this morning, how to set up a different style for external link on your site using CSS. I already use it on this site. Just take a look around. All links to external site now have an arrow character after the links, cool isn’t it? :d

Here’s how my CSS set up:

[css]a[href^="http"] {
color: #E58712;
}

a[href^="http"]:visited {
color: #E58712;
}

a[href^="http"]:hover,
a[href^="http"]:active {
color: #9BBB38;
}

a[href^="http"]:after {
color: #E58712;
content: “\21D7″;
}

a[href^="http://funponsel.com"]:after,
a[href^="http://www.funponsel.com"]:after {
content: “”;
}[/css]

The first 3 styles defined the normal behaviour of our link style (both internal and external):

[css]a[href^="http"] {
color: #E58712;
}

a[href^="http"]:visited {
color: #E58712;
}

a[href^="http"]:hover,
a[href^="http"]:active {
color: #9BBB38;
}

I then add the arrow using CSS3 unicode support. Look below:

[css]a[href^="http"]:after {
color: #E58712;
content: “\21D7″;
}[/css]

Above style will look at any tag which started with “http“. The CSS selector “after” adds the unicode content with the specified color. Now, by defining this site’s domain using href^=http://funponsel.com and href^=http://funponsel.com.com on the last 2 styles, both will override the default link style.

[css]a[href^="http://funponsel.com"]:after,
a[href^="http://www.funponsel.com"]:after {
content: “”;
}[/css]

In here, since I don’t want to show the arrow on internal link, I just set an empty content attribute.

Of course, you can also set up more different styles for different link. For example, to catch any link to Wikipedia:

[css]a[href^="http://en.wikipedia.org/wiki/"]:after,
a[href^="http://www.wikipedia.org/wiki/"]:after {

}[/css]

or for email link:

[css]a[href^="mailto:"]:after {

}[/css]

Have fun!

Since I changed my CSS a bit, you can see the picture below for the result of the style I wrote above.

Category links on the first line are an internal links, so they don’t have an arrow beside them. While the other links below are external, they have an arrow beside them.