Rounded Corner CSS for All Browsers

On June 21, 2011, in Web, by Bikas

Hi to all… I know this has been posted lot many times on other blogs and forums too, still I think its very useful so posting once again 😛

This will be useful in almost all the browsers, including IE 6, 7 & 8 (IE 9 supports CSS3 and eventually corner radius css).

Lets say, we need a div with a radius of 10px. We will write a class (lets give the name roundedcorner-box).

For Firefox, Safari,  Chrome and Opera 10.5 we will write the following css –

.roundedcorner-box {
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      -khtml-border-radius: 10px;
      border-radius: 10px;
 }

For IE 6, 7 and 8 just include the following javascript file in the header section in your site using the following code :

<script type="text/JavaScript" src="curvycorners.js"></script>

Download Curvy Corners js file

You can also download the js file from http://code.google.com/p/curvycorners/downloads/list

Will post some more refinements for corner radius in next post… 😉

Enjoy…

When we are using CSS @font-face for WordPress, we usually don’t get the desired result that we may be expecting while we are using Mozilla Firefox.

Firefox 3.5 supported TrueType and OpenType fonts. In Firefox 3.6 support for a new font format – the Web Open Font Format, or WOFF is been added. You can use this font format to work for WordPress if you are using Firefox.

You can convert you fonts to woff format from http://www.fontsquirrel.com/fontface/generator

After you get your font coverted use the following code to import your fonts for all browsers.

@font-face {
  font-family: GentiumTest;
  src: url(fonts/GenR102.woff) format("woff"),
       url(fonts/GenR102.ttf) format("truetype"),
       url(fonts/GenR102.eot) format("embedded opentype");
}

Continue reading »

Tagged with:
 

embeding fonts – answer

On October 7, 2010, in Web, by Bikas

At present embedding font css is supported by Mozilla 3.5 and 3.6.

The format must be as follows:

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

The fonts supported must be TrueType and OpenType fonts or WOFF for mozilla.

  • Internet Explorer only supports EOT
  • Mozilla browsers support OTF and TTF
  • Safari and Opera support OTF, TTF and SVG
  • Chrome supports TTF and SVG

For more details you can visit https://developer.mozilla.org/en/CSS/@font-face

There are other ways also by which you can use fonts of your taste to match your layout design. One of them is Cufon font. There are others too but most of them are paid.

Hope this will resolve your problem.

Faculty Required

On October 5, 2010, in Vacancies, Web, by Bikas

Field of teaching: Web

Skill sets required:  HTML, CSS, Dreamweaver, Flash
Knowledge of Photoshop and Javascript will be a plus.

Prior experience will be a plus. Freshers may also apply.
Salary not a constrain for the right candidate.

Number of positions: 1

Contact Person: Gauri Shankar Singh
Phone No.: 9437184375
email: mediapixelindia@gmail.com
Tagged with: