background preloader

CSS3 text-shadow, box-shadow, and border-radius

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. This last line highlights the real beauty of CSS3 — many of its features are designed to save you time otherwise spent creating and updating graphics in Photoshop. It makes techniques such as drop shadows and animated UI elements accessible to web developers and designers without scripting smarts or mad Photoshop skills. 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. For the Web at large, however, all is not lost. Take 1: Buttons Box 1: Surf’s up Related:  iPad what's change and doesn't change?

12 Excellent CSS3 Button and Menu Techniques | Tutorials 1139 shares 20 Fresh CSS3 Tutorials The design industry is probably one of the fastest changing and growing. Designers have to keep their eyes on everything, including new trends in visual design, as well as interaction technologies like jQuery, HTML5, and CSS3. Designers are using these technologies to express more creativity in design production and make user experience richer. In this… Read More 559 shares Developing Streamlined and Efficient CSS Styles CSS can be compared to the sculptor’s tool set when crafting a sculpture.

"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.

Dynamic Drive CSS Layouts- CSS Frames CSS Frames Layouts New (Dec 26th, 06'): The following are a collection of CSS Frames layouts, where select columns or rows inside the layout remain static even when the page is scrolled, mimicking a frames like behavior. Page 1 of 2 pages 1 2 > This is a two columns liquid layout with the left column being static, always in view. This is a two columns liquid layout with the right column being static, always in view. This is a two rows liquid layout with the top row being static, always in view. This is a two rows liquid layout with the bottom row being static, always in view. This is a three columns liquid layout with the leftmost and rightmost columns being static, always in view. This is a mixed columns and rows layout (two main columns, later split into two rows), with the leftmost column and top row being static, always in view. This is a mixed columns and rows layout (two main columns, later split into two rows), with the leftmost column and bottom row being static, always in view.

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. The possibilities for reviving the magazine and newspaper industries are exciting and real. 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. 1.

Skin your Chrome Inspector Update: As of version 33, the Chrome Team have changed Custom User Stylesheets and there is a new API for DevTools themes to use. ~ Paul Irish Developing Themes: If you’d like to develop a theme, follow the guide in the sample-devtools-theme-extension. Using Themes: If you’d like to use a theme:Open and Enable Developer Tools experiments. Open developer tools settings, select Experiments tab, and check Allow Custom UI Themes. Install any theme, you can search for “devtools theme” on the Chrome Web Store. Ever want to change the look of your Google Chrome Web Inspector? With this knowledge, I acquired the help of my good friend Wes Bos. Mac: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css PC: C:UsersYourUsernameAppDataLocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css Ubuntu (Chromium): ~/.config/chromium/Default/User StyleSheets/Custom.css Update: Some people have made some great skins.

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. One that has gotten a fair amount of exposure is the Popular Science app, a digital version of the longstanding print magazine that has put forward an ambitious, visually rich attempt at embracing the things that only a tablet device can do.

Top 10 CSS 3 forms tutorials HTML5 & CSS3 form HTML5 introduced useful new form elements as such as sliders, numeric spinners and date pickers. This tutorial will show you how to create a form with HTML5, and make it look really cool with CSS3. A great way to get started in both CSS3 and HTML5.» View tutorial CSS3 form without images and JavaScript This tutorial is in French, but the result looks so good that I simply shouldn’t include it on that list. Stylish Contact Form with HTML5 & CSS3 I really love what British web developer Chris Spooner creates. Beautiful CSS3 Search Form Most search forms (Including the one I use on this site!) Prettier Web Form with CSS 3 This pretty simple tutorial will show you how you can create a form using some basic CSS3 properties, such as box-shadow.» Slick CSS3 Login Form Once again, a simple tutorial to create a simple form using CSS3 but absolutely no images.» Glowform: Amazing CSS3 form Wow! Clean and Stylish CSS3 Form This form is simple, clean and stylish.

WIRED on iPad: Just like a Paper Tiger… by Oliver Reichenstein First, the paper magazine was crammed into the little iPad frame. In the form of a PNG slide show. To compensate for the lack of interactive logic, this pretty package was provided with a fruity navigation. In the end it was spiced with in-app links, plucked with a couple of movies, and salted with audio files (“interactive”). Then it was off to marketing. Update: I updated most of the examples to show the difference between InDesign and iPad. Good pictures speak for themselves. One or Two Columns? The iPad portrait mode allows for a nice column width with enough white space left and right. Let’s make this clear once and for all: at the current surface and resolution of the iPad, multi column layouts for long screen texts are sentimental nonsense. If you can’t see the beauty of screen-optimized typography that focuses on readability, instead of old standards based on lead and paper limits, at least make sure that you have enough gutter between the columns.

CSS3 support in Internet Explorer 6, 7, and 8 What is it? IE-CSS3 is a script to provide Internet Explorer support for some new styles available in the upcoming CSS3 standard. How it works If you're viewing this page in Internet Explorer, some of the elements have been rebuilt by the script in Vector Markup Language (VML), an IE-specific vector drawing language. How to use it Just add CSS styles as you normally would, but include one new line: Issues and Workarounds You would expect URLs in behavior: url(...) to be relative to the current directory as they are in a background-image: url(...) style for example, but instead Microsoft decided to ignore standards here and make them relative to the docroot instead. You will probably run into issues with z-index, especially if embedding one IE-CSS3 enabled element inside of another. Set the z-index of the IE-CSS3 element to a number larger than its surrounding elements. Sometimes an IE-CSS3 element will show up at a slightly different position than the original, untouched element.

Related: