Daily Gadgets, Computer, and Electronics News » css

Ten More CSS Tricks You May Not Know

cosa — Wed, 07 Sep 2005 23:00:58 +0000

Three month ago, I posted a link to a very good article about CSS, “Ten CSS Tricks You May Not Know“. This article covers ten interesting CSS tricks that most web designer should know. Last week, Trenton Moss, the author of the article, published the sequel, “Ten More CSS Tricks You May Now Know“.

As the title said, this article gives you ten more handy CSS tricks. For myself, I found out that the 3rd and the 4th tricks are quite useful.

AdSense Font Style

cosa — Wed, 24 Aug 2005 16:37:20 +0000

I’m sure most of you already know about this, so I guess I dedicated this post to anyone who fairly new to Google AdSense :p

If you really want to make AdSense ads blended more with your site / blog, why don’t you change your site’s font style to match AdSense font style? No guarantee that this will bring more CTR, though. But for myself, I’m using this AdSense font style to create my own alternate ads (PSA’s replacement). See screenshot below.

Looks good, doesn’t it? And the result is almost the same as the real AdSense ads. So eventhough there’s no AdSense ads, it won’t display PSA, instead, it will display my own ads that looks like AdSense ads. Want the code for this alternate ads? Contact me )

Now back to our topic. Here’s the font style for AdSense ads:

Title text:

font: bold 11px arial, sans-serif; text-decoration:underline; color:#000000;

Description text:

font: normal 11px/14px arial, sans-serif; text-decoration:none; color:#000000;

URL text:

font: normal 11px arial, sans-serif; text-decoration:none; color:#000000;

Google own ads text:

font: normal 11px arial, sans-serif; text-decoration:underline; color:#000000;

You can change the color for Title, Description, and URL text to match your AdSense ads color scheme. For Google own ads, the color is the background color of your ads. Usually, people use the Title style as their h3 tag style, and the Description style as their P tag style. Well, it’s all your choice now :p

How to Combine Photoshop and CSS to Make a Great Website

cosa — Thu, 11 Aug 2005 01:34:32 +0000

A very good article from SitePoint which will teach you how to create a CSS-based web page from the scratch, starting from a blank Photoshop canvas. The article is written by Corrie Haffly, a lead designer and developer for PixelMill.

Get Cooking with Photoshop and CSS – 3 Low-fat Recipes

Are you a CSS guru… but a layout and graphics newbie? Or are you a whiz at making great Websites using tables, but feel lost with this whole CSS thing? Perhaps you’re a little bit of bothâ€¦ or are trying to be! You may have gone through lots of Photoshop or Fireworks tutorials, and pored over even more CSS tutorials, but how do you combine great graphics, layouts, and CSS to produce an outstanding Website?

[ Read Article ]

Firefox Glitch

cosa — Tue, 09 Aug 2005 14:38:29 +0000

Found this weird behaviour today when I was going to add a link using WordPress Links Manager. A problem with Firefox’es or Mozilla’s CSS?

Ten CSS Tricks You May Not Know

cosa — Thu, 09 Jun 2005 16:32:11 +0000

Out of these 10 CSS tricks, I only didn’t know about #7. How many did you already know?

Oh, you don’t know what CSS is? The complete CSS tutorial might give you a helping tutorial about CSS.

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?

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.