Posts Tagged ‘css’
Drawing with CSS3
December 16, 2011 | 
Author The latest CSS specification (also known as CSS3) has introduced a set of new properties which allow the developer to implement a lot of interesting effects on a web page. It is now possible to have round corners, shadows or even create nice background patterns. Inspired by others who had done amazing things with CSS3 we wanted to give it a try ourselves in order to get some first hand exposure to the new properties and see how much effort was required to do a little experiment with CSS3. We decided to try to draw our company’s logo using only CSS3.
This is the original logo:
How can you create such an image?
When drawing something with CSS, you first need to slice your image in smaller pieces (usually rectangles) and then separately implement every part of the image with CSS. Then you just need to position the pieces correctly so that it forms an image.
For example, shapes can be rendered styling only a <div> element:
-> a circle
#circle {
background-color: red;
border-radius: 50%;
width: 100px;
height: 100px; /* if set to 200px it becomes an elipse for example */
}
-> one or multiple triangles
#triangle {
/* border-color: transparent transparent red transparent; /* red triangle*/
border-color: green blue red orange; /* multiple triangles*/
border-style: solid;
border-width: 100px;
width: 0px;
height: 0px;
}
-> outlines:
#outlines {
background-color: orange;
box-shadow: 0 0 0 10px red, 0 0 0 20px blue, 0 0 0 30px green, 0 0 0 40px silver;
width: 20px;
height: 20px;
}
-> multi-columns:
#columns {
/* vendor prefixes for gradients are required as currently no browser implements it without prefixes */
background: linear-gradient(0, orange 50%, green 50%);
background-size: 50px;
width: 200px;
height: 100px;
}
-> background patterns:
#patterns {
/* note vendor prefixes for gradients are required */
background: linear-gradient(45deg, silver 25%, orange 25%, orange 50%, silver 50%, silver 75%, orange 75%, orange);
background-size: 50px;
width: 200px;
height: 200px;
}
The image below displays the resulting drawings created with the above codes.
If you have a modern browser, thanks to Lea Verou‘s interactive CSS playground dabblet you can check on this page how it would be rendered in your browser (some additional shapes are included too) as well as edit the CSS.
Now that we have seen the kind of things that can be achieved with the new properties on a single <div> element, let’s go back to our logo. We initially thought that we could try to create a flexible CSS3 image that would render properly when the logo would be scaled to different sizes. We tried to use percentages to set all the sizes instead of pixels. Unfortunately, this did not work well as it turned out that browsers handle percentages differently. On this page you can find an image that shows how different browsers rendered differently the logo when implemented using percentages.
This is just an example of what can go wrong with different implementations of the standard and why it is important to test with different browsers to ensure that the user gets the same experience independently of the browser they are using.
If we stick to fixed sizes (in pixels) the result provides a consistent experience in all the browsers we tests. You can take a look at the result: the CSS3 LeaseWeb logo!
It took me a couple of hours to come up with the first structure and a couple more for the tweaking. With some CSS knowledge, a bit of patience and creativity you can draw amazing images with CSS3.
Tags: 
Developing a mobile web application with IUI
At LeaseWeb we have a hosting control panel called “Self Service Center” or SSC. We are starting to make our first steps into making the Self Service Center available on a mobile platform.
We have a couple of options on how to implement this:
• Build native applications for each mobile platform ( mainly Android & iOS )
• Build a mobile accessible website
We had to make a list of advantages and disadvantages of the 2 options:
We prefer to keep a single code stack, for maintenance reasons, and so we can make every feature immediately available in the mobile version. This is why we decided to make a proof-of-concept of a mobile accessible website.
The first problem we encountered was to find out how to implement this mobile website the best way possible in the Symfony framework. At first, we checked if this was possible by doing only CSS changes, so without touching the templates. It did not took us long to come to the conclusion that this was not enough and we had to revise all of the templates.
By looking up the API of the Symfony framework on a mobile device we saw that they had a mobile version of it on their website. We were very curious what technology they used and how they implemented it, so we started digging. We found out that they were using the IUI framework on their mobile API page and although it didn’t work flawlessly we were impressed with the way it worked.
So what is this IUI and how does it work?
With IUI you have to think of your webpage as 1 big HTML file which you keep adding content to. So you keep updating your current HTML with new adaptations through AJAX request. When you click a button / link the new page is loaded off-screen. When the screen is loaded it slides smoothly into your screen. The old screens are not unloaded so you can smoothly slide back to the previous screen using the back button in the upper left corner.
Figure 1 – The red box shows the area that is visible on the screen, the other pages can slide in.
Using this framework you can make any webpage feel like a native iPhone application. A single IUI web page can contain multiple related iPhone screens. This makes IUI map on the Symfony MVC framework quite nicely, because all the data of a single MVC view will not fit on one iPhone screen, but it might fit on multiple.
Also for backend developers it is really nice that you don’t have to design all the screen layouts. You can just follow the layout that is provided with the framework and your screens immediately look professional. Although we created an impressive proof-of-concept there were some problems we did encounter:
A broken back button
When you post a form with validation errors, the same page – containing the form – is loaded with the errors displayed next to the input fields. This new page has the same id as the old form causing the back functionality to be broken.
The IUI back functionality works using a “stack”. This stack contains the ids of the previously loaded pages and forms. When the page loads it adds the id to the stack. When a validation error has occurred the stack contains the wrong values, because the validated form and the original form have the same id.
The possible solutions we found are:
1) To fix this we can give the validated form a different id than the original form.
2) Show the (validation) errors on a new page or popup.
An iPhone like way to handle field validation error is to show popups containing the validation errors. This can be achieved in IUI using “Dialog” type forms. First we tried using JavaScript “alert” calls but we had trouble, because these pop-ups are blocking and it is hard to use them without modifying IUI internals.
Displaying flash messages
More or less the same problem occurs when displaying “flash” messages. “Flash” messages are messages often colored yellow, red or green (for warnings, errors and confirmations) and are set on top of the screen displaying the results of the last page load. In IUI the flash messages are not working properly because pages are not reloaded on “back button” navigation. In an iPhone application these messages typically show in a popup.
Conclusion
We think IUI is a good and easy way to convert your current website to a mobile website in a MVC framework. Problems we encountered are related to error and status messages that a typical web application shows inside (and on top of) forms. Unfortunately IUI does not seem prepared for showing these. We’ve found a workaround by showing these messages in “Dialog” type forms.
LeaseWeb Self Service Center – https://secure.leaseweb.com
IUI framework – http://www.iui-js.org/
Symfony framework - http://www.symfony-project.org