front end

/Tag:front end

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. Continue reading “Creating Rounded Edges With CSS3” »

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

Text Drop Shadows With CSS3

A few years back i worked at a digital agency where one of the guys on the team loved to look at pages and exclaim “its almost there it just needs a drop shadow and we are done”. For years now if you wanted to make some text look “a little bit fancy”, you found yourself starting up Photoshop, typing the text out then applying the “drop shadow” effect saving the images and then embedding in your page as. CSS3 simplifies this process with the introduction of the text-shadow property which allows the easy placement of a drop shadow effect onto standard text within an element. It is supported in all modern versions of the major browsers except Internet Explorer (hardly a massive surprise there though). The text-shadow property is used within an element description in the following format: text-shadow: horizontal-shadow vertical-shadow blur colour; Continue reading “Text Drop Shadows With CSS3” »

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