background preloader

Beautiful UI styling with CSS3 text-shadow, box-shadow, and border-radius

Beautiful UI styling with CSS3 text-shadow, box-shadow, and border-radius
By Henrik Helmers Introduction Previous articles have covered the basics of CSS3 transitions and 2D transforms and CSS3 borders, backgrounds and box-shadows; refer to those articles if you need to read up on the basics of using these properties. This article takes things further, showing how to use these properties to create beautiful UI elements without the use of any images, JavaScript or Flash. Contents: Where can they be applied? Support for these CSS3 features was introduced in Opera 10.50, and you’ll also be able to rely on most of them in the latest versions of Firefox, Safari and Chrome. Of course, in the real web most of us are stuck having to support Internet Explorer, which doesn’t yet support any of these properties. For the Web at large, however, all is not lost. It is really a matter of who your target audience is, and providing an acceptable user experience to them. Take 1: Buttons One of the most obvious applications of these properties is to simplify button design. Summary Related:  iPad what's change and doesn't change?

How to create slick effects with CSS3 box-shadow Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop's Blending options. But now, since CSS3 "hit the charts", you don't need Adobe's design tool to add a drop shadow or an inner shadow to a box. Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore. View demo box-shadow property Thebox-shadow property allows you to add multiple shadows (outer or inner) on box elements. <shadow> = inset? Rocket science? Not at all, here's an quick example: box-shadow: 3px 3px 10px 5px #000; This CSS declaration will generate the following shadow: A positive value for the horizontal offset draws a shadow that is offset to the right of the box, a negative length to the left.The second length is the vertical offset. The above theory it's just a small amount, if you want to read more, than be my guest and check the W3C specs. Enough theory, let's see some stuff! Add depth to your body Reference URL Drop shadows Quick tips

"Les utilisateurs d'iPad ont des réflexes d'internautes, pas de La spécialiste de l'ergonomie de Benchmark Group livre ses premières impressions sur le dernier né d'Apple. Pour elle, si l'outil est simple et agréable, il n'est pas révolutionnaire. JDN. Quelle était votre première impression lors de votre découverte de l'iPad ? Laure Sauvage. Est-ce le terminal numérique que la presse attendait ? Il permet de faire un journal multimédia et apporte beaucoup de confort par rapport à un support papier plus austère. Quelle place peut prendre l'ipad dans notre quotidien, au milieu des autres terminaux dont nous sommes déjà équipés ? L'iPad propose des services déjà existants.

CSS tutorial - Using borders to produce angled shapes This is a suppliment to the tutorial, and is here only for illustrative purposes. It is not part of the main tutorial. These examples will not work in Netscape 4 or WebTV, because they do not allow you to define individual borders, or Escape because it does not handle borders correctly. Internet explorer 4 and 5 may have trouble with some of the examples due to their problems with the box model. Note that these examples are based on you using the default 'Moosified' style for this page, where the background colour of the body is #f6f6f6. If you use the other styles, the shapes may not work correctly. Thick borders A div element with a border If all four borders are defined as being thick, they should be tapered into each other: border-top: 20px solid red; border-bottom: 20px solid #fc0; border-left: 20px solid blue; border-right: 20px solid green; MultiColour Square All of these examples are done using a <div> element, with no contents: The lack of contents makes all points sharp. Down arrow

Simple Table CSS3 Premium Pixels is an excellent design resource run Orman Clarke. He publishes slick photoshop files every few days, including this Simple Table design. For a little challenge I decided to turn his Photoshop file into actual code using CSS3 and a bit of JQuery. The goal was to have a cross browser compatible version that looked good in Chrome, Firefox, IE8, IE7, and IE6. Firefox and Webkit browsers each have their own quirks when implementing CSS3 techniques. This post explains how border radiuses are rendered differently and suggested the best solution was to round the interior elements that background colors were applied to in additional to the parent element. Internet Explorer (7,6) didn’t want to recognize background colors on row elements (tr) at all, so backgrounds were classed for the respective td’s and th’s instead. JQuery I used jquery to do the zebra striping. The CSS The CSS should be pretty straightforward, but be warned about CSS resets. Markup And, finally, the markup:

What the iPad is Missing (No, it’s not a Camera) I’m not an iPad naysayer. I forked over $700 on the first day of pre-ordering and my iPad hasn’t left my side, day or night, since it arrived on Monday. I’m with those who see the device and its new approach to computing as an exciting step forward, especially for media delivery. Yet it’s exactly that part of media consumption, reading , that reveals what’s missing on the iPad: good typography. Signs that type took a backseat in the iPad’s development were clear back in January when Steve Jobs demoed the device, revealing just four uninspired and uninformed font options in iBooks. Disappointing, but not surprising. The string of odd missteps began with the release of Mac OS X. A lack of Lucida italic could be considered a mild irritant, but Apple’s typographic neglect in OS X ran deeper. Then came the iPhone, its fantastic display with a high pixel-density enabled legible type at small sizes. The iPad represents a new opportunity to reverse this trend. 1. 2. 3. 4. 5. 6. 7. 8.

CSS Triangle You can make them with a single div. It's nice to have classes for each direction possibility. The idea is a box with zero width and height. Examples Dave Everitt writes in: For an equilateral triangle it's worth pointing out that the height is 86.6% of the width so (border-left-width + border-right-width) * 0.866% = border-bottom-width CSS Font and Text Style Wizard CSS Font and Text Style Wizard Welcome to the CSS Font and Text Style Wizard, brought to you due to the popularity of the HTML and CSS Table Border Style Wizard. Use this wizard to experiment with font and text styles and generate sample CSS style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page. It is cross-browser compatible with Firefox, Netscape, Internet Explorer, and other modern browsers. Font and Text Style Notes Font Family For font-family, you can specify an actual font name, like "Courier New" in the custom field. Units When you use specify lengths in CSS, you should generally use the relative units appropriate to the property. Browser Support This page does not work in Opera 8 or IE5 for the Mac. Vertical Alignment The vertical alignment property is a bit difficult to grasp, and is sometimes classified as a positioning property. Misc More CSS Wizards Recommended Books Dynamic HTML: The Definitive Reference (2nd Edition)

A Popular Misconception Though I opted for a 3G-enabled iPad that won’t be delivered until later in the month, I was able to get my hands on a Wi-Fi-only model today, one of two devices that we bought at the office. In my limited use so far it feels terrific, though until I’m actually in possession of an iPad I can call my very own, it’ll be still too early to decide how much I like or dislike it. Without really being able to customize a machine like this for my needs — installing my preferred apps and loading my personal data onto it — it feels a little bit like a model home; attractive enough, but not really cozy just yet. In playing with iPad-optimized apps, I’m watching with particular interest to see how content publishers are approaching the platform. The Good, the Bad and the Hard-to-Use I can’t decide whether I’m distressed or excited about what experiments like this represent. What little interactivity there is on offer is minimal at best. I should be fair here, though.

Bulletproof @font-face syntax Let me introduce you to the best way to do your @font-face definitions: This is the Fontspring @font-face syntax. I’ll circle back to why this is the best possible solution but let’s first review the other techniques’ weaknesses. Of course, the problem at the center of this is that IE needs an .eot font, and the other browsers must take a .ttf or .otf. May 12th, 2010. Okay, let’s see what we got here… Conditional comments (via) Ugh. Double declarations (via) The problem here is that, as Andrea points out, IE will actually download the .otf file. Because after all, IE doesn’t understand the format hint, right? GraublauWeb.otf’)%20format(‘opentype Oops, looks like someone forgot a ? Mo’ Bulletproofer (via) Richard Fink proposed this alternate syntax actually as a response to this post, but I’ve included it back here. The local reference Much more concise and clean. The other benefit.. if it just so happens that a user actually has your custom font installed, this’ll save them the download. Demo

Related: