Web Programming: Curved boxes in CSS

Updates!!!

..Now IE ?? .. As IE is not a good browser to work with css, we need to make it so. Here, you need to use a nice css hack

Curved boxes are straight forward to do in CSS. Here’s a quick tutorial of how to achieve curved boxes in CSS and what’s to come in CSS 3…

The CSS:

  1. .curved {
  2. -moz-border-radius:10px;
  3. -webkit-border-radius:10px;
  4. behavior:url(border-radius.htc);
  5. }

The HTML:

<div>Curvd div</div>

The explanation :

Do you really want an explanation for this simple 3 line css ?. I don’t think so. Ofcourse if you need, I can.

Browsers :

All browsers :)

Download

Quoted from: htmlremix.com

What we want to achieve

Here’s a graphic of the final product – a box with curved edges that will expand if the text is enlarged.

Curved box in CSS

To start with we will make the graphics in Photoshop.

Curved boxes – Making the graphics

Open Photoshop and choose the rounded rectangle tool (shortcut of U on the keyboard). Decide on the size and colour of your rectangle and then draw a rectangle. You can make the curve bigger or smaller by changing the size of the radius.

Cut the curve out just below the last pixel of the curve. You can make the bottom curve quickly and easily by going to Image > Rotate Canvas > 180 º CW

Cutting the curve in  Photoshop

The markup

In order to create a cross-browser friendly box we need to attach the image to HTML elements. This method requires at least two elements inside the div. In this case we use the h2 and p tags and apply a background image to each through the CSS.

Our markup looks like this

<div class="curved-box">
  <h2>This is a curved box</h2>
  <p>This text will resize and not break the box.</p>
</div>

Applying the CSS

We add the curves through the CSS by accessing the elements and applying a background image. The top one is applied to the h2 and the bottom to the p tag. Make sure the background to the div is the same colour too.

.curved-box
    {
    width: 298px;
    margin: 10px;
    background-color: #c3d0d4;
}

.curved-box h2
    {
    background: #c3d0d4 url(../images/curve_top.png) no-repeat left top;
    color: #f4fbfd;
    padding: 10px 15px 5px 15px;
}

.curved-box p
    {
    background: #c3d0d4 url(../images/curve_bottom.png) no-repeat left bottom;
    margin: 0px;
    padding: 5px 15px 10px 15px;
    text-align: left;
}

Using this code the text will resize without breaking the box.

Have a look at the code in action in the example.

Browser support: IE5+, Netscape 6+, Firefox 1+, Safari 1+, Opera 7+, Flock, Camino

CSS3 will make it even easier

Once CSS3 is finally agreed it will be even easier to curve the edges of boxes. “Border-radius” will curve the corner of the box. For now browser support is not great and indeed browsers have their own proprietary properties:

-webkit-border-radius: 10px; /* Safari prototype */
-moz-border-radius: 10px; /* Gecko browsers */
border-radius: 10px; /* Everything else - limited support at the moment */

Currently supported in Camino 1+, Firefox 1+, NOT IE. The code degrades gracefully so if it is not supported there will be no curves but it will still render. Check out the example to see it in action.

source: http://shapeshed.com

Advertisements

Politik: Fuad Bawazier, Di Zaman Pak Harto, Pegawai Pajak Tak Seberani Gayus

Bekas Dirjen Pajak era Orde Baru Fuad Bawazier menilai, kasus penggelapan pajak oleh pegawai Ditjen Pajak golongan III A Gayus Tambunaan bisa terjadi karena penggelapan itu dilakukan secara berjamaah. Menurut Fuad, modus seperti itu tidak terjadi pada masa Orde Baru. Berikut petikan wawancara Rakyat Merdeka dengan Fuad Bawazier:

Apakah perilaku mafia pajak saat ini masih sama dengan pada masa Pak Harto?
Pada masa Pak Harto, tidak ada pegawai pajak yang seberani dia (Gayus Tambunan). Mafia pajak pada masa 10 tahun terakhir, sejak masa reformasi hingga kini, saya yakin jauh lebih berani korupsi dibanding pada masa Pak Harto.

Meski pun sekarang ada KPK, tapi mereka tetap lebih pintar bersumbunyi dari KPK. Mereka lebih pintar mencari celah.

Meski kini ada KPK?
Iya, karena para mafia pajak saat ini lebih berhati-hati dan lebih pintar.

Lebih pintar bagaimana?
Salah satu contoh, kini mereka memakai jasa makelar pajak. Sehingga modus operandinya lebih complicated, lebih sulit dilacak karena dilakukan secara tidak langsung, memakai jasa makelar, perantara.

Karena itu, transaksinya menjadi seolah-olah transaksi profesional. Penggunaan jasa makelar ini, sebetulnya adalah salah satu bentuk kehati-hatian para koruptor.

Bagaimana dengan berbagai program Departemen Keuangan terkait reformasi birokrasi?
Pemerintah memang seperti itu, ngomong melakukan gebrakan ini itu. Dikiranya kebocoran duit negara berhenti, oh tidak. Saya yakin, kebocoran duit negara jauh lebih dahsyat di masa Reformasi dibanding masa Orde Baru. Saya yakin itu.

Pada masa sekarang, bolong-bolongnya dimana, kok anda mengatakan penggelapan pajak masih terjadi?
Dalam hal pajak, semakin dikerjasamakan dengan kepolisian dan kejaksaan, maka semakin bocor, semakin nggak beres.

Kenapa bisa begitu?
Karena yang bisa masuk penjara semakin banyak, karena itu mereka menjadi makin tidak takut. Karena semakin banyak instansi yang dilibatkan, maka korupsinya menjadi korupsi berjamaah. Karena korupsinya berjamaah, maka makin mereka tidak takut. Polisi sudah terlibat, jadi aman. Jaksa sudah terlibat, jadi aman.

Jadi salah langkah melibatkan kepolisian dan kejaksaan mengurus pajak?

Ya salah langkah. Seharusnya, bukan kepolisian dan kejaksaan yang dilibatkan, melainkan BPK. Seharusnya BPK dibiarkan masuk ke pajak. Selama ini ‘kan orang-orang Ditjen Pajak menolak dan ketakutan BPK masuk ke pajak. Dari dulu mereka menolak BPK masuk ke pajak. Harusnya BPK dibiarkan masuk, biar orang-orang pajak ketakutan untuk main-main karena pasti diperiksa BPK. Wajib pajak juga akan pikir-pikir untuk main-main kalau BPK masuk, karena tak mau file-nya juga diperiksa BPK. Jadi kalau BPK masuk, orang-orang pajaknya takut, wajib pajak juga takut.

Kalau BPK ikut main?
Ya nggak mungkin, karena orang-orang pajak akan berteriak kalau BPK main. Masih lebih baik membiarkan BPK masuk, daripada mengundang kepolisian dan kejaksaan. Lebih parah polisi dan jaksa mainnya. Selain itu, juga lebih nggak logis, lebih nggak nyambung.

Untuk kasus Gayus, penjelasan sederhananya bagaimana kok bisa Gayus nilep duit Rp24 miliar lebih?
Misalkan, dari transaksi keberatan pajak. Kan ada jumlah pajak yang diperseterukan antara wajib pajak dengan orang pajak. Angkanya bisa sampai ratusan miliar rupiah. Nah, kalau kemudian perseteruan ini melalui proses keberatan dan atau banding perpajakan, para calo-calo ini bisa bermain. Mereka bisa mengatur agar putusan keberatannya memenangkan wajib pajak sehingga dia nggak perlu bayar pajak ratusan miliar, cukup beberapa miliar saja. Nah, sebagian sisanya itulah yang dibagi-bagi oleh para markus yang terdiri dari orang-orang pajak, konsulen pajak maupun orang luar lagi.

Jadi dalam kasus Gayus ini, atasannya pasti ikut main?
Oh iya, banyak yang terlibat. Mungkin yang diterima Gayus hanya Rp25miliar. Tapi yang diterima atasannya, hakim pajak, ada puluhan miliar lagi. Duit Rp25 miliar itu ‘kan hanya bagiannya si Gayus. Belum lagi bagian atasannya, para hakim pajak dan lain-lain.http://www.rakyatmerdeka.co.id/wan/h…Seberani-Gayus

makin kesini makin pintar mereka…makin dikejar makin pintar ngumpetnya….hehhe

source: modesta @ http://www.kaskus.us/

Web Programming: Code Syntax Highlight Plugin for FCKeditor

Introduction

This is a dialog-based plugin to handle formatting of source code for FCKeditor 2.5.x. It WON’T work with the new CKEditor (yet). It makes use of the SyntaxHighlighter 2.0.xjavascript library available to download from Alex Gorbatchev’s project page (the older version 1.5.1 version is available from Google Code).

The plugin primiarily edits a <pre> tag with some custom attributes. Its mainly aimed at users editing blogs or content management systems where there is a requirement to format programming languages on a website that is being edited using FCKEditor.

The plugin will not format the code in FCKEditor – the SyntaxHighlighter javascript library dynamically generates a lot of formatted HTML at runtime, which would cause problems in FCKEditor.

Skip straight to the good bits

Can’t be bothered reading all this? View the online demo or download the plugin and go play with it yourself.

So what do I get then?

Correctly installed, the plugin is in the form of a tabbed dialogue box that looks like this:

Syntax Highlighter dialogue

Version history:

Huge thanks goes to Sergey Gurevich who wrote the updated code for the FCKEditor plugin to handle the latest version of the SyntaxHighlighter code and submitted useful bug fixes.

  • v2.1.0 [23 May 2009]
    – Plugin version information now being displayed
    – Line highlighting feature added
    DownloadDemo
  • v2.0.1 [22 March 2009]
    Minor bug fix where semi-colons were sometimes positioned in the wrong place when no advanced options were selected
    Download
  • v2.0 [2 March 2009]
    Latest version supporting SyntaxHighlighter 2.0.x
  • v1.0.2 [2 March 2009]
    Bug fixes, final release supporting the older SyntaxHighlighter 1.5.1
    Note the instructions below are for the newer version of the library and makes references to syntaxhighlight2 a lot, this version uses syntaxhighlight. The documentation in the download will be more accurate.
    Download.| Demo
  • v1.0.1 [10 Feb 2009].
  • v1.0 [30 Nov 2008]. First version.

Known bugs:

Occasionally the dialogue box does not pickup the <pre> element to be edited in Firefox. It only seems to happen when a user clicks inside the <pre> tag with the mouse but doesn’t actually move or interact with the cursor.
Fixed in version 1.0.2 – Thanks to Sergey Gurevich

Installation

1. Copying the files

Extract the contents of the zip in your plugins directory, so it ends up like this:
Folder structure

Note: Version 2 of the plugin must be extracted to a directory named ‘syntaxhighlighter2‘. The older plugin for the earlier version of the library must go in a folder named ‘syntaxhighlighter‘. The file fckplugin.js references this directory when the plugin initialises.

2. Adding it to FCKeditor

Now add in your fckconfig.js or custom js configuration file the following line (remember its javascript we are dealing with so everything is case sensitive!):

FCKConfig.Plugins.Add( 'syntaxhighlight2', 'en') ;

3. Adding it to the toolbarset

Add the button ‘SyntaxHighLight2’ button to your toolbarset:

FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','SyntaxHighLight2','-','About']
] ;

4. Configure the plugin

The plugin will work ‘out of the box’, but you can configure a default language using theSyntaxHighlight2LangDefault parameter:

FCKConfig.SyntaxHighlight2LangDefault = 'csharp' ;

The full list of languages and corresponding codes are:

    • c++ – C++
    • csharp – C#
    • css – CSS
    • delphi – Delphi
    • java – Java
    • jscript – Java Script
    • php – PHP
    • python – Python
    • ruby – Ruby
    • sql – SQL
    • vb – VB.NET
    • xhtml – XML/HTML

In FCKEditor <pre> blocks aren’t really formatted by default. I suggest editing yourfck_editorarea.css (or equivalant if you are using a custom CSS file) to something that highlights code blocks better. eg:

pre
{
background-color: #fff;
font-family: "Consolas" , "Courier New" ,Courier,mono,serif;
font-size: 12px;
color: blue;
padding: 5px;
border: 1px dashed blue;
}

Configuring SyntaxHighlighter.

You must have SyntaxHighlighter installed and working to display properly formatted code. FCKEditor does not need it, but for code to be properly formatted on your website you must have it configurated correctly. For SyntaxHighlighter2 Alex Gorbatchev’s sitehas loads of excellent information (he wrote it after all!), for the old version 1.5.1 library, the project wiki here is a good resouce, or this blog post might also be useful.

5. Use it

Now clear your browser cache (this stage is important!) and reload the editor, the new button Insert code snippet button should be ready to use.

6. Future updates

There’s some additional functionality I might add at a later date:

  • Preview tab using the SyntaxHighlighter library
  • More configuration options, eg, available languages, path to SyntaxHighlighter files
  • Dynamically adding a <pre> formatting style to the editor by default

7. And finally…

Thanks goes to Alex Gorbatchev for creating Syntax Highlighter!.

source: http://psykoptic.com