Archive for the ‘Articles’ Category

Posted on February 22, 2010 - by alfecaesar

How to use @font-face

Using @font-face is very simple than using sifr, cufon and other text/font replacement method. All you have to do is to copy the sample code to your stylesheet:

@font-face {
  font-family: "HelveticaNeueLTStd67MediumConde";
  src: url(HelveticaNeueLTStd-MdCn.eot); /* IE */
  src: local('Helvetica Neue LT Std 67 Medium Condensed'), local('HelveticaNeueLTStd-MdCn'),
  url('fonts/HelveticaNeueLTStd-MdCn.woff') format('woff'), url('fonts/HelveticaNeueLTStd-MdCn.ttf') format('truetype');
}

h1{
  font-family: "HelveticaNeueLTStd67MediumConde"; /* you must enter the font name if you wish to use it */
  font-size: 25px;
}

That’s the code in declaring the @font-face. So all h1 will now have Helvetica Neue font.

Note:

For cross browser issue, not all browsers support font-face so in the meantime IE4+, Safari 3.1, Chrome, Firefox 3.1+ and Opera 10 can support @font-face method.

IE browsers uses another format so be sure to have the IE code inserted.

      src: url(HelveticaNeueLTStd-MdCn.eot); /* IE */

@font-face can use the local fonts so if the font is already in the computer, it will use the local font rather than using the uploaded font that will take time to load.

         src: local('Helvetica Neue LT Std 67 Medium Condensed'), local('HelveticaNeueLTStd-MdCn'),
  url('fonts/HelveticaNeueLTStd-MdCn.woff') format('woff'), url('fonts/HelveticaNeueLTStd-MdCn.ttf') format('truetype');

To convert you font to @face-font compatible font you can visit this link.

Posted on February 19, 2010 - by alfecaesar

Preloading Images Using Jquery

Here’s my code using a jQuery for preloading images.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" >
jQuery.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    jQuery("<img>").attr("src", arguments[i]);
  }
}
</script>
<script type="text/javascript" >
jQuery.preloadImages("image1.jpg", "image2.jpg","image3.jpg");
</script>

Try this!

Posted on December 7, 2009 - by alfecaesar

JullyMei Typography

JullyMei Typography by ~alfecaesar on deviantART

Posted on November 26, 2009 - by alfecaesar

Adding shadow in SIFR 3

Here’s a way on how to add a drop shadow for your SIFR 3, im not sure if this works for the lower versions. Use this code inside the sifr -config.js.

sIFR.activate(fontname);
sIFR.replace(fontname, {
  selector: 'h1.ph1',
  css: '.sIFR-root { color:#b81943; font-size:22px; }'
  ,filters: {
        DropShadow: {
           distance: 1
          ,color: '#000' //drop shadow color
          ,strength: 2
          ,alpha: .3  // for opacity
          ,blurX: 2
          ,blurY: 2
        }
      }
   ,wmode: 'transparent'
});

If you want to change the angle for the drop show, add this code to the filter:

,angle: 20

This is not difficult way but this works.

Try it!

Posted on November 26, 2009 - by alfecaesar

Summer Vector

One of my design in my deviantArt profile. Check this out.

summer by ~alfecaesar on deviantART

Posted on November 26, 2009 - by alfecaesar

Using Jquery noConflict()

By calling the jQuery.noConflict() function, you can avoid the $-Function error.

Here’s an example code on how to use this:

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script> // declare this 2 script
<script>
var $j = jQuery.noConflict();
$j(document).ready(function(){
     $j('body').intercept('click', {
              '#elementid' : function(){
                       $j('element2id').text('Hellow World');
               }
      });
});
</script>

Posted on November 11, 2009 - by alfecaesar

My First Blog Site

Hi!, Im Alfe Caesar Lagas, 20 years old. I am a web developer/programmer and web designer.

This is my first wordpress site. Thanks for WooThemes for the free template.

Thank you for viewing. Have a nice day!