Creating Rounded Edges With CSS3

Rounded corners are often lauded in the design world, UX / UI people claim rounded edges are easier on the eyes and makes information easier to process by our brains. A few years back it used to be a pain to achieve this effect though. With a developer having to use multiple rules in their style sheets to achieve compatibility over the major browsers. Luckily times have changed and a developer can easily round the corners of their designs with the use of the CSS3 border-radius property. To use the border-radius property in its most simplest form, you simply need to add it to your elements definition and specify the length of the rounded edge in pixels e.g #myElement {            margin: auto;            height: 200px;            width: 200px;            border: 1px solid #0000FF;            padding: 5px 5px 5px 5px;            border-radius: 10px; } The above use of the property will simply round all for corners of the elements with the id “myElement” to a length of 10 pixels. See example. […]

By |July 12th, 2012|CSS, web development|0 Comments

Display & Visibility CSS Differences

Today I ran into some issues with hidden elements and the visibility CSS attribute on a project I was working on. The elements were not visible but they were still taking up space in the layout. Which started me wondering what exactly is the difference between the display and visibility properties in CSS? To the [...]

By |June 20th, 2012|web development|0 Comments