Konversi Em ke Pixel dan Point

January 22, 2019 | HTML, Technical Stuffs, Web Dev | , , ,

Beberapa waktu terakhir saya lebih banyak bermain di front end sehingga lebih sering bersinggungan dengan HTML, CSS, dan JavaScript.

Salah satu hal yang agak tricky adalah penggunaan satuan em, px (pixel), dan pt (point) saat menentukan lebar atau tinggi suatu obyek. Agar mudah diingat, berikut ini contekan yang saya gunakan:

PxEmPersen (%)Pt
6px0.375em37.5%5pt
7px0.438em43.8%5pt
8px0.5em50%6pt
9px0.563em56.3%7pt
10px0.625em62.5%8pt
11px0.688em68.8%8pt
12px0.75em75%9pt
13px0.813em81.3%10pt
14px0.875em87.5%11pt
15px0.938em93.8%11pt
16px1em100%12pt
17px1.063em106.3%13pt
18px1.125em112.5%14pt
19px1.188em118.8%14pt
20px1.25em125%15pt
21px1.313em131.3%16pt
22px1.375em137.5%17pt
23px1.438em143.8%17pt
24px1.5em150%18pt

Catatan ini berfungsi sebagai catatan pribadi agar lebih mudah saat ingin saya tengok lagi.

No comment


Animation for Google Adsense

December 6, 2007 | HTML

As you can see, I put some banner from Google Adsense in this blog. I always hate to wait until all the banners are displayed, so I wrote a short CSS code to give the banner a simple animation before the advertisement is fully loaded. It’s very easy to do such trick because Google Adsense (and other ads script, so far I know) using iframe to display their advertisements. So here we go the CSS script:

iframe{
background-image:url(img/wung.gif);
background-repeat:no-repeat;
background-position:50% 50%;
}

Simply change background-image:url(img/wung.gif); with any image you have. It will be nice to use a small but cool preloader image. Then set the background-position as you wish. My script above, will put the image on the center. Next-time, you will see the “loading” image before your ads are fully displayed, like following sample:

Sorry, only Firefox users can see the spinning image. I tried using IE and Opera but failed. I think there must be a little hack we can do to make the loading/spinning image displayed on other browsers.

I hope you like this little idea ^_^

5 comments


Using Safari Browser to Preview Your Web Design

December 17, 2006 | HTML

Say you have optimized your web for any browsers on earth, but you are not so lucky to buy a Mac and use its browser, Safari. There is some option you can do: Buy a Mac to get Safari, or borrow a Mac from a friend. And what will you do if you don’t have any friend having Mac?

You can try to view your web design using Safari with the help of Browser Camp, an online tool to emulate the look of your page using Safari browser and save its screenshot.

Another use is to save a shot of your design for your portfolios ^_*

3 comments