Posts Tagged ‘css3’

It Rains Projects & Challenges

Wednesday, January 19th, 2011

Have you ever heard about this proverb “It Rains Cats & Dogs”?

Well, it means that it’s raining really really heavily.

As for us, it’s rather “It Rains Projects & Challenges” at the moment.

Why?

Because projects don’t stop coming at the moment! We don’t know how it’s happening but since the beginning of 2011, we just don’t stop getting projects that come everyday – moreover, they are all quality projects.

But along with these projects, also come great challenges.  We’ve been tested by a lot of challenges this January.  And they’ve only proven that as a team, we work very solidly and we are very proud of this fact.

Of course, internet and digital business is something intangible, because it’s immaterial, incorporeal, and our works, that can’t be seen in real life, exists on the virtual world, and to build them we invest so much time, so much efforts – but we’re happy even though right now, a simple luxury in life such as going home at 6 PM sharp is now becoming a scarce event happening once in a blue moon!

You wanna take a little peek inside our world? Be our guest…

1. Flash Projects with Impossible Deadlines

We’ve been getting some big projects with super-tight deadlines since the 1st of January.  They involve one of Jakarta’s biggest community welfare companies, a great international brand of personal care, one of Indonesia’s biggest telecommunication provider and – crossing fingers – one of the world’s biggest fast-food chain restaurants soon.

And they’ve come to us for one same reason: they need a great-looking, neatly programmed, solid website within an impossible delay.

Us? We say, nothing is impossible and so far, we’re in tight race with the deadlines and even though next week, January’s last week is gonna be uberbusy, we’re still smiling and saying, “Hello, challenge! Nice to see you!”

2. Bigger Projects, Greater Responsibility

Yes, it’s like the tree philosophy.  The taller a tree is, the stronger blows the wind.  With bigger projects that come to us, comes greater responsibility.

Are we assuming? Yes we are.  We know that we’re not perfect, but we’re doing our best to meet the expectations of each and every client we get.

3. You’re a small team! How could you keep up with all of that?

The secret is good time management and nothing else.  All our clients are equal in priority, so we have to fit them into time slots to ensure that everything gets done in time.

Will tell you more about the upcoming projects soon!

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , ,
Posted in Life in the Office, Our Current Projects | Comments Off

Inside CSS3 – Rounded Corners made easy

Thursday, September 2nd, 2010

Having developed website for almost 10 years, I have known a lot of evolutions in terms of web design. A few years back, one of the biggest frustrations was appearing when you had to make rounded corners to some elements of your website. In 2000, a time where all websites were made using the old-school <table> tag, rounded corners were done using cells. But now, with CSS3, doing rounded corners is a piece of cake. To see the evolution of HTML rounded corners, let’s compare three distinct ways of generating rounded corners.

Solution 1 – Using Table + Images

Below is an example of box using table. The corners are actually made using four 10px*10px images (bl_s1.gif, br_s1.gif, tl_s1.gif, tr_s1.gif)

<table style="background:#9c0" width="400" height="60" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="10" width="10"><img width="10" height="10" alt="Top Left" src="/gfx/corners/tl_s1.gif" /></td>
    <td></td>
    <td height="10" width="10"><img width="10" height="10" alt="Top Right" src="/gfx/corners/tr_s1.gif" /></td>
    </tr>
  <tr>
    <td>&nbsp;</td>
    <td valign="top" >Rounded Corners using Table + Images</td>
    <td height="10" width="10">&nbsp;</td>
  </tr>
  <tr>
    <td height="10" width="10"><img width="10" height="10" alt="Bottom Left" src="/gfx/corners/bl_s1.gif" /></td>
    <td></td>
    <td height="10" width="10"><img width="10" height="10" alt="Bottom Right" src="/gfx/corners/br_s1.gif" /></td>
  </tr>
</table>

Result :

Top Left Top Right
Rounded Corners using Table + Images
Bottom Left Bottom Right

Solution 2 – Using Div + Images (relative / absolute CSS positioning)

This second solution is more recent, but still fastidious. It uses 1 <div> tag for the content (it has relative position), and 4 <img> tags for the corners (they have absolute position). This solution works well on modern browsers, but can produces unexpected results on some older ones. To accomplish that, we need to have to put the following css code in the <head> of the document :

<style type="text/css">
#box{width:380px; height:60px; padding:10px; position:relative}
#box img{position:absolute}
img#tl{left:0; top:0}
img#tr{right:0; top:0}
img#bl{left:0; bottom:0}
img#br{right:0; bottom:0}
</style>

Then display the box by putting the following code this time in the <body> of the document :

<div id="box"">
  <img id="tl" width="10" height="10" alt="Top Left" src="/gfx/corners/tl_s1.gif" />
  <img id="tr" width="10" height="10" alt="Top Right" src="/gfx/corners/tr_s1.gif" />
  <img id="bl" width="10" height="10" alt="Bottom Left" src="/gfx/corners/bl_s1.gif" />
  <img id="br" width="10" height="10" alt="Bottom Right" src="/gfx/corners/br_s1.gif" />
 Rounded Corners using Div + Images
</div>

Result :

Top LeftTop RightBottom LeftBottom RightRounded Corners using Div + Images

Solution 3 – Using CSS3 border-radius property

Extremely simple to implement and not using image, this solution will change your life – really.
To make a nice rounded corner box, put the code below in the head of your document :

<style type="text/css">
#box{
width:380px;
background:#9c0;
height:60px;
padding:10px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background:#9c0
}
</style>

Then, in the <body> of your document :

<div id="box"">
  Rounded Corners using CSS3 border-radius property
</div>

Result :

Rounded Corners using CSS3 border-radius property

As you can see, this solution just makes everything easier. The only annoying thing is that in order to have the border radius displayed on all modern browsers, you must set the border-radius property three times, using border-radius, -moz-border-radius, and -webkit-border-radius. Old browsers will just have the box displayed withut any rounded corners.

Tags: , , , , , , , , , , , , , , ,
Posted in IdeBaik Widgets | No Comments »