20 Useful Resources for Learning about CSS3 - Six Revisions
http://sixrevisions.com/css/20-useful-resources-for-learning-about-css3/

Though W3C’s CSS3 specifications aren’t finalized yet, modern web browsers such as Mozilla Firefox, Opera, and WebKit-based browsers already have full or partial support for them.

Like the title says

αチャンネル

Too bad it doesn't work in shitty IE..

RGBa is a way to declare a color in CSS that includes alpha transparency support. Since IE supports conditional stylesheets, we can bust out those and a proprietary Microsoft CSS filter to accomplish the same result.

Many exciting new functions and features are being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image,

Rounded corners, drop shadows etc

This article presents 5 CSS3 techniques which can dramatically get you a stunning user interfaces and how to achieve almost the same effects using jQuery for browsers that are not compatible yet with CSS3 new features.

Not surprisingly, there was a lot of community feedback asking for better layout mechanisms. Actually, people were asking for any decent layout mechanism at all, which CSS has historically lacked. Floats mostly work, but they’re a hack and can be annoyingly fragile even when you ignore old-browser bugs. Positioning works in limited cases, but does not handle web-oriented layout at all well.

ERic Meyers grundsätzliche Gedanke über ein Layoutsystem für Webseiten.

Eric Meyer elaborates on why we need a better layout mechanism for web content (whether it be via CSS or not). We know we shouldn't use tables for layout. Floats are a hack, positioning is flawed, and <code>display:table-cell</code> is no better than using a table itself. But Eric explains here why table <em>behavior</em> works moderately well for layout: <blockquote>... this is why the old “only use tables for layout” argument keeps coming up over and over: strip away the overheated rhetoric and obvious link-baiting, and you find the core of a real need. Because as powerful as CSS can be, table cells do certain things very easily that CSS makes very, very hard. Cells stretch vertically, keeping equal heights as a matter of their intrinsic nature. They stay out of each others’ way, while still being allowed to sit next to each other and use any sizing dimensions. They tie their layout to their parent elements, and vice versa.</blockquote>

Turning a bunch of divs or list items or whatever into table-role boxes is no better than just using table markup in the first place, and it’s arguably worse. Using element names other than table and td to create layout tables, and then claiming it’s not using tables for layout, borders on self-deception.

メモ。

HTML も CSS も、すっかり動向を追わなくなって久しい。たぶん今書こうと思ったら相当忘れてるんだろうなぁ…。まだ進化するのですかー

次世代Web標準の簡単なまとめ

俄然HTMLが面白くなってきた！

With version three of CSS, many exciting features will be implemented. CSS3 leads to greater flexibility and makes it much easier to recreate previously complex effects.

De lo nuevo que se pede hacer con CSS3 que ya se puede ver en los navegadores actualizados... pero de aquí a que IE actualice para esto, y lo que es peor, de aquí a que mis clientes actualicen su IE6 :(

Interesting breakdown of some cool CSS approaches.

css3対応ブラウザ限定技

css-template-layout -

The project aims at providing web designers with a way to use the W3's CSS Template Layout Module today. As a jQuery plug-in, the script parses a given set of CSS rules and displays the content as indicated in the specification. Options include the ability to select the CSS parsed, as well as an optional prefix to use for the CSS rules. Specifying a prefix allows style rules that are interoperable with a possible future browser implementations.

The project aims at providing web designers with a way to use the W3's CSS Template Layout Module today. As a jQuery plug-in, the script parses a given set of CSS rules and displays the content as indicated in the specification.

avaScript (jQuery) implementation of the CSS Template Layout Module

Gradientifier

Smashing Magazine

Many cool things can be done with the next standard for web design

by Smashing Magazine

A nice overview from Smashing Mag about using CSS3 features.

Great reference for implementing CSS3

rounded corners mostly, with jquery

A roundup of 7 CSS3 techniques that will be available in FF 3.5.

How can @font-face be used with currently implemented CSS selectors to create engaging, nuanced and more mature typography? Let's find out.

Como el SifR pero sin él... con Firefox 3.5

@font-face: The Potential of Web Typography

Firefox 3.5 is out. And the more users download it, the more designers will be able to take advantage of the @font-face CSS rule. How can @font-face be used with currently implemented CSS selectors to create engaging, nuanced and more mature typography? Let's find out.

Version 0.9 is the initial public release of Modernizr. It includes tests for a variety of CSS 3 features and an HTML 5 element styling enabler.

Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that!

Modernizr — это небольшая простая Javascript-библиотека, которая поможет получить ответ на вопрос поддерживает ли браузер пользователя такие технологии как: HTML5 Canvas rgba() hsla() border-image border-radius box-shadow Множественные фоновые изображения Прозрачность CSS-анимацию Столбцы Градиенты Отражения CSS-трансформацию CSS-перехды

In-depth tutorial from NetTuts on combining existing HTML5 and CSS3 to create a slick web-design.

CSS3 Cheat Sheet(PDF)

Smashing Magazine

Web designers around the world are extremely excited about the power of CSS3 and the creative freedom it offers. With that in mind, we’ve rounded up 29 resources for you to learn more.

Carsonified

I’m happy to announce the latest project I’ve been working on: A jQuery plug-in to provide support for the CSS Template Layout Module. For those of you unfamiliar with this specification, it provides a relatively easy way to make a table-like layout using CSS. Until recently it was known as the “CSS Advanced Layout Module”. The spec is still a “working draft”, so it can still change significantly. But while that status hasn’t stopped browsers from implementing other CSS3 modules, so far none have tried implementing this one. Inspired by Eric Meyer’s Call for a layout system as well as his suggestion that many CSS features can be made to work using JavaScript, I went to work. Why wait for browsers to implement something when we can have JavaScript take care of it today? The advantages to using this system include: * Source independence, so there’s lots of possibilities with the same markup * All the benefits of a table-like design without the drawbacks * Instant overvie

CSS3 Template Layout

A jQuery plug-in to provide support for the CSS Template Layout Module.

HTML 5 and CSS 3 are quickly gaining popularity, revealing their collective power with some exciting new design possibilities.

Web designers can do some pretty cool stuff with HTML 4 and CSS 2.1. We can structure our documents logically and create information-rich sites without relying on archaic, table-based layouts. We can style our web pages with beauty and detail without resorting to inline <font> and <br> tags. Indeed, our current design methods have taken us far beyond the hellish era of browser wars, proprietary protocols, and those hideous flashing, scrolling, and blinking web pages.

** Posted using Viigo: Mobile RSS, Sports, Current Events and more **

Forget About Photoshop: 5 CSS Hacks to Help You Stop Using Images - Cherrysave - http://www.cherrysave.com/web-design/forget-about-photoshop-five-css-hacks-to-help-you-stop-using-images/

Web designers: You are now free to design.

Thankfully, many of the popular browsers of today support the ability to rotate HTML elements. Even better? We can make it work in Internet Explorer (back to version 5.5 even).

One of the CSS3 properties designers have been longing the most for is undoubtedly the border-radius property. With CSS3 border-radius property it’s possible to create the so popular rectangles with rounded corners exclusively via CSS - no images needed. Cross-browser compatibility CSS3 aren’t supported by all browsers yet. The border-radius property is supported by Firefox (since version 3.0), Safari (since version 3.1) and Chrome (since the first version), but it’s not supported by Internet Explorer or Opera (it should be implemented in Opera 10). Since CSS3 aren’t standard yet, you must add prefixes to border-radius in order to work with the browsers that support it. If you want to work it with Firefox, you must write -moz-border-radius in the CSS; if you want it to work with Safari/Chrome, it’s -webkit-border-radius. Note that although Firefox, Safari and Chrome support this property, they do so in slightly different modalities.

css3でどんなことができるか

i love those kind of poeple

An essential reading. From Smashing Magazine, as usual... :-D

70 Must-Have CSS3 and HTML5 Tutorials and Resources - Open Source Resources for Web Developers

Neat

Uma maneira bastante simples de rotacionar textos usando apenas CSS.

text rotation with CSS

You can pretty easily put in text rotation code for any browser. Well, the three major ones, anyway.

And pretty soon, you'll be able to do everything from Silverlight/XAML in CSS3 and HTML5. Wow.

Woah! 3d with CSS.

Fscking cool

Webkit based browsers support CSS 3D transforms. via liammcmurray

CSS is the second-most-important thing you can master when it comes to web design, right after HTML. And the capabilities of CSS can be staggering (especially with the new CSS3 standard already making appearances in some browsers). If you can imagine it, it’s likely someone has already figured out how to do it with CSS.

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!

.

Webkit is one of the few - if only - browser engines that really embraces advanced CSS3 effects. Unfortunately, this presents somewhat of a double-edged

EDT 667

scroll

amazing solution for scrollbar (scrollpane) in Jquery

This is very simple using jSrcollPane, a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style.

In this post I want to illustrate some useful guidelines about how to implement a well organized CSS code structure in view of introduction of HTML 5 markup language. They are not general rules but simple suggestions you can follow in order to improve the readability, manageability, and general organization of CSS code. These suggestions are especially useful if you have to work on complex CSS files that otherwise can be difficult to manage. I prefer to separate CSS code in three distinct sections: a first section that contains general HTML tags; a second section that contains structure tags; a last section with custom classes.

More and more we see people using horizontal sliding panels on their websites. And they usually look very nice! Some will put a contact or login form in there, others will put some information about them and their website, or even things like a tag cloud or social networking buttons. Horizontal sliding panels are great for many situations, but like everything else, they’re not always ideal. It depends on the project. To see what I mean by ‘horizontal sliding panel‘, go have a look at my other site Design-Newz, and click on the ‘want more‘ button that’s on the right above the navigation bar.

Fonts are a huge part of design (as we all know). Text on the web needs to be much more dynamic than in any other media. We have solutions like Cufón, sIFR, etc. but perhaps one of the better options is using @font-face in CSS.

What is @font-face? @font-face is a CSS rule that lets web designers link to a font that visitors may not have installed. Using this, we can get around the problem of web-safe fonts as well as prevent creating additional dependencies in other methods such as Cufón, sIFR, etc.

CSS3で影と回転をつけ、ホバー時にz-indexをコントロール。／via コリス：http://coliss.com/articles/build-websites/operation/css/css3-create-a-pure-css-photo-gallery.html

Use webkit to rotate/title images

Minimising the CSS required for cross browser @font-face.

With all these CSS3 enhancements going on it's not hard to get confused. We're still trying to fond the best way of doing things. This is apparently the most bulletproof way of including the @font-face rule for IE and modern browsers.

This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS. However, it is not cropping in a real sense of the

These techniques can be very helpful if you need to keep images at a certain size, i.e. thumbnails in the news section or something similar. Being able to use CSS to control which portion of image to display is a great bonus.

These are some time savers!

truques e dicas css

We've all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn't be limited to these old techniques when there's a new age

The future of CSS is arriving fast, and many tools, languages, and solutions have been developed that make CSS a job not just for Web

js-powered css, acid3, etc. browser tests and results

Recent tests 12:13 p.m. Other acid3 100 12:13 p.m. Firefox 3.5 richtext 117/149 12:13 p.m. Firefox 3.5 selectors 99.3% 12:13 p.m. Firefox 3.5 acid3 93 12:13 p.m. Chrome 4.0.206 network 9/11 12:13 p.m. Firefox 3.5 network 9/11 12:12 p.m. Konqueror 4.3 richtext 0/149 12:12 p.m. Konqueror 4.3 selectors 0% 12:12 p.m. Firefox 3.0.14 richtext 117/149 12:11 p.m. Konqueror 4.3 acid3 89 Browserscope is a community-driven project for profiling web browsers. The goals are to foster innovation by tracking browser functionality and to be a resource for web developers. Gathering test results from users "in the wild" is the most important and useful feature of Browserscope - and you can participate!

Browserscope is a community-driven project for profiling web browsers. The goals are to foster innovation by tracking browser functionality and to be a resource for web developers.

While @font-face may not work in all browsers, I think it’s still one of the best solution available today. Of course not all type foundries will let us embed their fonts on our webpages. There are solutions like Typekit which look very promising but today we’ll simply go over the @font-face CSS property and check out some typefaces you can use with @font-face :)

iphone dev. environment/resource

Design Mobile Apps (cross platform)

Online dev environment for creating HTML5/CSS3/JS-based apps for smartphones. iPhone now, "Pre and BBerry coming"

a free, collaborative, web-based, open-source mobile development environment where developers can easily create smartphone applications using standard web technologies (such as HTML 5, CSS, and Javascript) and distribute them as stand-alone applications to app stores.

Object-oriented CSS, at its core, is simply writing cleaner, DRYer CSS. It's not a different language: still the same old CSS we all know and love. It's just a paradigm shift. Really, object-oriented CSS is a few simple patterns and best practices.

It sounds like an oxymoron, or at least an impossibility, doesn't it? How can a static language that's really more like markup than programming be

Objektorientiertes CSS in Verbindung mit HTML5. Das interessante an diesem Artikel ist das recht gute Beispiel eines HTML5 Dokument Aufbaus.

http://html5shiv.googlecode.com

Embedding fonts into your website

それにしてもFxの扱いがどんどんIE化しているような気さえする今日この頃。諸行無常ですな～

Safari and Chrome do well, Firefox OK, and IE/Opera stink up the place. Should have displayed this data in a single chart.

Say goodbye to the browser-specific properties and hacks cluttering your files and say hello to lean, mean CSS. With eCSStender, when you write the rules, browsers pay attention.

script for modernizing and extending css

View Source Tutorial: Sticky Notes With HTML5 and CSS3

five characteristics of modern CSS websites: * Progressively enhanced, * Adaptive to diverse users, * Modular, * Efficient, * Typographically rich. In part 2 of this article, coming soon, we’ll go over the techniques and tools that will help you implement these important characteristics on your CSS-based Web pages.

Using Rounded Corners with CSS3 |

Rounded corners have been included in the CSS3 specification. Here's how you can use them today in most modern browsers. A few years back, rounded

Utilizar bordes redondeados con CSS3.

By Elliot Jay Stocks When Johno first asked me to write about Typekit, I jumped at the chance. I’d received a beta invite to try out the service about a week before, but deadlines had got in the way of actually getting round to it. Now I had the

i love typography, the typography and fonts blog

Typekit

La mejor colección de tutoriales acerca de bordes redondeados.

You know CSS, but do you know how to optimize it? I have gathered a list of CSS optimization and CSS File size reduction tips and tricks that will help you writing a more effective and efficient CSS code.

もうこっそり使ってもいいと思う。

500 Internal Server Error

Galeria de Imagens com jQuery

using RGBA color

Excellent tutorial and tips on webdesign in general

Everyone has been going on about how we should use CSS3 more and all of the possibilities and flexibility that come with it, but that we should still consider IE6 and other troubling browsers.

Help you discocer the best

Using descriptive class names and CSS3 properties like gradients and box shadows, we create a set of scalable button styles for links and buttons.

Awesome Buttons

Buttons, more buttons and navigation menu's.

(no description)

Advanced CSS だけでクリック時の効果も。

buttons radioativos

Share this on del.icio.usDigg this!Share this on RedditBuzz up!Stumble upon something good? Share it on StumbleUponShare this on TechnoratiShare this on MixxSubmit this to DesignFloatShare this on FacebookTweet This!Submit this to Script & StyleShare this on DevmarksRelated PostsBeautiful Gradient Effects On Web design – Research: Part 22 in 1 – Stunning 3D Ice Text Effect [...]

recently there are some famous blogs, like Abduzeedo and Mashable, that are using a fixed toolbar on the bottom of the page with useful button for the sharing.

"Nice And Simple Toolbar For Your Website With CSS3 And jQuery" http://j.mp/5oMaQQ

In this tutorial we'll learn how to build a nice toolbar for our website using some CSS3 properties and basic jQuery techniques.

There are plenty of drop-down menus using javascript and CSS already available, but most of them are either too basic (with CSS) or too complicated (with Javascript). That’s why I publish this drop down menu solution which is using CSS only, but it has a smooth drop effect and the css sprites that changes the toggle icon jQuery-likely. Honestly, this is the most completed menu solution using CSS which comes along with awesome effects.

CSS3 maakt #D view mogelijk!

The advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.

Do not attempt w/o exp designer present!

Stronger, Better, Faster Design with CSS3 (via smashingmag) - In our last article about CSS3, Pushing Your Buttons With Practical CSS3, we talked about using new CSS3...

Analog is a company of friends who make web sites. It’s a co-operative where imagination, design, and engineering thrive; good people doing good work.

Andrei and company (via Mager)

How to make labels inline!

24 ways: CSS Animations

More hot CSS animation action. Thank you Tim Van Damme.

Very nice example: Building a loading/activity indicator.

games flash fun online

What You Need To Know

A Look at Some of the New Selectors Introduced in CSS3

Shadows and CSS3

Text Shadows

I’m currently working on a design that uses text-shadow and box-shadow, with RGBA in place to create the shadow color. I wanted to tweet about this technique because it’s simple and awesome, but to my surprise I couldn’t find a good, quick tutorial that covered the use of both text and box-shadow, along with RGBA. So I decided to create one.

how to use CSS3 to create drop shadows

Nice.

jQueryを使うことでCSSの記述が簡単になったり、できることが増えるということを実例を挙げて紹介。

CSS-Tricks fame, recently gave an excellent presentation on how to extend CSS using jQuery. I remember seeing this wonderful presentation floating around recently but hadn’t been aware of who the author was until now. I would like to apologize to every one of my readers, including Chris, for posting this article up without any reference to the slides author – my original online source didn’t include any mention of him (or any author for that matter) so I had rather foolishly gone ahead with the use of them without investing more time into researching who put them up

extender css con la ayuda de jquery

webdesign css design tips browser

https://browserlab.adobe.com/index.html# Excellent site to test a site in diff browsers

The CSS3 Gradient Generator was created as showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS. CSS gradients generate an image result, meaning the result of a CSS gradient can be used anywhere an image can be used, be it a background-image, mask,border, or list item bullet.

The CSS3 Webkit Gradient Generator is a showcase for the power of CSS webkit gradients. It also provides a simple graphical user interface for working with CSS webkit gradients, allowing a user preview real time what their gradient will look like and provide the code for the gradient they generated.

List of tutorials and cheat-sheets for leaning CSS3.

overlap blue and red text using css

No images. Just CSS & CSS3. All major browsers support the technique. Love it.

article about progressive enhancement using css3 colours could be used for anna's website

covers Multiple Backgrounds, Background Sizing, Border Images, Rounded Corners, Drop Shadows, Text Shadows, Alternate Row Styles, Opacity & Transparency, Custom Fonts, Custom Text-Highlight Styles, Multi-Column Content Display, Box Sizing, RGBa Colors and Transparency, Word Wrap, Resizable Elements, CSS Transitions, CSS Color Gradients, Rotating Elements

Metoda na css3 w IE

ie-css3.js allows Internet Explorer to identify CSS3 pseudo selectors and render any style rules defined with them. Simply include the script in your pages and start using these selectors in your style sheets — they'll work in IE... Honest...!

Typography is often overlooked in todays design specifically by web developers. It really is a shame because CSS gives us so much control over our type. That being said, we our limited to certain “web safe” typefaces but that shouldn’t decrease our creativity. Here are a few CSS tips for typography on the web.

Despite people's expectation of change and movement on the screen, CSS and HTML have few controls that allow you to design interactivity, and those that exist

For web developers and designers, it can be difficult to memorize the syntax for multiple programming languages and frameworks, especially since they are always

For web developers and designers, it can be difficult to memorize the syntax for multiple programming languages and frameworks, especially since they are always evolving and growing. This is where cheat sheets come in handy. Most cheat sheets are designed to be printer friendly, so you can have them laying around on your desk as quick reference cards. Here is a collection of useful cheat sheets specifically for front end web development that will help you with HTML, JavaScript, and CSS.

30 Cutting Edge Examples Of CSS Navigation | Graphic and Web Design Blog -Resources And Tutorials - http://www.1stwebdesigner.com/inspiration/cutting-edge-examples-css-navigation/

Great demo of some key CSS3 effects.

css3 is crazy

Great tutorial for a 1 page portfolio with HTML5 & CSS3 features.

This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers.

Goede uitleg van @font-face en met overzicht van browsersupport

CSS3 is coming. Although the browser support of CSS 3 is still very limited, many designers across the globe experiment with new powerful features of the language, using graceful degradation for users with older browsers and using the new possibilites of CSS3 for users with modern browsers.

50 Brilliant CSS3/JavaScript Coding Techniques

By http://bit.ly/Tweets2Delicious

pure css ui elements - buttons, input fields etc.

bordas com mais de uma cor, vários backgrounds em uma mesma div, bordas arredondadas

10 ways to make Internet Explorer act like a modern browser

Uma introdução bem legal ao CSS3.

In this tutorial we are making sweet AJAX-powered tabs with CSS3 and the newly released version 1.4 of jQuery

Sweet AJAX Tabs With jQuery 1.4 & CSS3 – Tutorialzine - http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/

onglet et navigation

Web Designers' Browser Support Checklist

By http://bit.ly/Tweets2Delicious

Six Questions: Eric Meyer on CSS3 December 9th, 2008 by Jacob Gube | 58 Comments | Stumble It! Delicious Eric A. Meyer knows a thing or two about standards-based CSS and HTML development. He’s a distinguished expert on CSS and HTML, an author of numerous books on CSS, co-founder of An Event Apart, a coveted guest speaker, a member of the A List Apart crew, and founder of Complex Spiral Consulting (I could go on – but I think you get the picture).

Six Questions

Quite an interesting article on CSS3 with Eric Meyer: http://is.gd/aWAO

An Awesome CSS3 Lightbox Gallery Drag the pics around to share them

This is a behavior htc file for Internet explorer to make CSS property " border-radius " work on all browsers. At present, all major browsers other than IE shows curved corner by adding 4 lines of css

htc file for Internet explorer to make CSS property " border-radius " work on all browsers

A non-image based solution to make rounded corners work in IE

Rounded corner HTML elements using CSS3 This is a behavior htc file for Internet explorer to make CSS property " border-radius " work on all browsers. At present, all major browsers other than IE shows curved corner by adding 4 lines of css

Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!

Multiple Backgrounds and CSS Gradients - Snook.ca - http://snook.ca/archives/html_and_css/multiple-bg-css-gradients

Choosing The Best CSS Framework: A Complete Guide | DevSnippets | HTML 5

of reasons to use a CSS Fr

Framework para HTML5 y CSS3

Forgotten CSS selectors

Well, the market share of IE 6 is now finally at a level where we as developers can say that a site “supporting” IE 6 does not mean “looking pixel perfect”. Fortunately more and more clients understand this as well. IE 7 has been out for well over three years and IE 9 is on the horizon, so I think it’s time to revive those CSS selectors that you never got to use just because IE 6 doesn’t understand them.

In this post we will explore the property border-radius and how it can be used to create circles, semi-cricles and quarter-circles. It also has the potential to produce some terrific designs using just CSS – no images.

iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ

More examples fo CSS3 from Web Design Wall.

The CSS3 trend is getting more and more popular. In fact CSS3 new features open a lot of new possibilities. Check out my previous post on "CSS3 Animation Demos" to see the things that you can do with it. However, don’t get too excited so soon because it is not fully supported by all browsers yet. But this doesn’t mean you shouldn’t use it at all. So, when should you use CSS3 new features? Well, continue on this post to see some excellent examples.

CSS3サンプル

Speckyboy

In May last year we published an article entitled 22 CSS Button Styling Tutorials and Techniques, it proved to be pretty popular, and the most amazing thing about that post is that none of the tutorials even touch on the subject of CSS3.. What a difference a year makes!

You Can Use CSS3 Right Now | Design Informer - http://designinformer.com/use-css3-now/

CSS3で何ができるの？　という時にみておきたいサイト集

CSS3でいったい何ができるのか、どのように記述するのかなど、ベーシックなものから実践的なテクニックまでサンプルやコードなど実装例が掲載されているサイトを紹介します。

Sexy Buttons can be created using either <a> or <button> elements by adding class="sexybutton" and wrapping the text in double <span>s:

Click this button right now! Submit <button>

Ventanas desplegables

clock

Süper saat uygulaması.

Jon Combe | Code | HTML clocks using JavaScript and CSS rotation - http://joncom.be/code/css-clocks/

Gradient coloring

-Nettuts+

Thanks to advanced CSS properties, such as gradients and shadows, it's now quite easy to turn a dull web form into something beautiful - with minimal effort. I'll show you how in today's tutorial!

There has been an increasing and sincere interest in typography on the web over the last few years. Most websites rely on text to convey their messages, so it’s not a surprise that text is treated with utmost care. In this article, we’ll look at some useful techniques and clever effects that use the power of style sheets and some features of the upcoming CSS Text Level 3 specification, which should give Web designers finer control over text.

Browse: Home / Development / 50 Awesome Animations made with CSS3

Border Radius syntax for CSS3, WebKit and Mozilla.

Today we are making a HTML5 web template, using some of the new features brought by CSS3 and jQuery,

Here we are using the new version of HTML - the fundamental language of the web, to make a web template, using some of the new features brought by CSS3 and jQuery with the scrollTo plug-in.

WebKit browsers paved the way with CSS based gradients. Now Firefox 3.6 is out and is supporting them as well, which makes using them for progressive enhancement all the more appealing. More good news, CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images) so that browsers that don’t support them just use the image instead. But wait… if you need to use an image anyway, why bother with declaring the gradient with CSS? That is kind of how I felt for a long time, but there is one important aspect that makes it worth it: browsers that support them don’t load the image fallback. One less HTTP Request = all the faster your site will load.

CSS transform (in Firefox 3.5+ and Webkit-based browsers) has a whole bunch of interesting functions, such as rotation, translation, scaling and skewing. To learn more about the different functions, check out the Mozilla developer center overview of CSS transform. After playing around with chaining different transforms and seeing the effect, I found out something interesting:

Webtint.net is a website for web developers and designers, providing tips, tutorials, resources and inspiration.

灵活的盒模型

El modelo de cajas flexibles en CSS.

Inspected Element goes further with more examples of how to "simulate realism" with some clever CSS3 effects for images, buttons, and more.

Examples of simulating realism using CSS3 techniques, examples inc. polaroid photos and animated DVD cases.

Balões

Don't work in IE6, though...

Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

I love this, it renders beautifully in Safari 4 and is an IE fail!

This is a handy tool for generating CSS from the emerging CSS3 modules that you can use right now in modern browsers – includes tools to do web fonts, box shadows, text shadows, rounded corners, etc. (info from Joe)

Bom auxilio pro CSS3

RT @standardistas: Problems recalling your border-radius, box-shadow and other CSS3 selectors? CSS3 Generator has you covered: http://j. ...

5 Advanced CSS Pseudo Classes that will Save your Day

As it says on the tin.

By http://bit.ly/Tweets2Delicious

Take a look and explore the code for an insight into the future of the internet. Be warned, however, few display properly in Internet Explorer. Here comes the 25 websites built using HTML5

We'll be looking at a few of the essential things you need to know about CSS3. With all of these new features, it's important to place emphasis on the most important ones to get you up to speed.

RT @joelmoss: Why is IE 9 advertising that it fails the Acid 3 test? http://bit.ly/cFT0E4 (via @rbates)

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z ? ! . Q U I C K B R O W N F O X J U M P

Curtis is the name I’ve given for a family of geometric sans-serif fonts currently in development. Other incarnations exist as Fontstructions: Curtis Heavy and Curtis Pixel 14. This version takes form in CSS. All shapes are rendered by the browser, using a combination of background color, border width, border radius, and a heavily reliance on absolute/relative positioning. You can get a better idea of how the letters were formed with the Inspect display option.

css font

Tutoriais para usar o CSS 3 agora

CSS3はゆっくり、しかし、確実に主流のウェブデザインにこっそり入っていますが、小線量でますます多くのデザイナーがそれを使用していますが、確かに、それははずみがついています。 本当にウェブデザインのためのおもしろい時間です。 数週間前では、私たちはCreating ButtonsがCSS3ボールをただ回転させ始めるように20CSS3 TutorialsとTechniquesと呼ばれる記事を発表して、今回、CSS3が提供する素晴らしい新しい資産を利用する何らかのメニューとナビゲーションのテクニックに焦点を合わせます。 念頭で剥き出してください。だいたいこれらのチュートリアルが荒野の用法のために書かれていなくて、それらが、より実験的です、何に関するデモンストレーションがあることができるかということであることは、達成されて、近い将来、使用されるでしょう。 これらのチュートリアルからのデモのすべてが完全によくChromeとSafari(それにしても小さい方の食い違いで)、Firefoxで2、3の(特に3.6にひどく見えさえするZurbs OS X Dock)との戦いをします、そして、IEはかなり驚いたことにデモの大部分を予想より良くしました。

CSS3 is slowly but surely creeping into mainstream web design, more and more designers are using it, albeit in small doses, but it is certainly gathering momentum. It is an exciting time for web design. A few weeks back we published an article called 20 CSS3 Tutorials and Techniques for Creating Buttons, just to start the CSS3 ball rolling, this time around we focus on some menu and navigation techniques that make use of the wonderful new properties that CSS3 offers.

menus de navegação com css3

There aren't many articles covering incompatibilities, or CSS differences in Firefox alone — and for good reason. Firefox has always done an excellent

By http://bit.ly/Tweets2Delicious

Good article on Firefox CSS bugs

:last-child, :first-child etc etc

Pseudo class selectors CSS selectors with a colon preceding them. You are probably very familiar with a few of them. Like hover: a:hover { /* Yep, hover is

3d Html Eleman Yapımı

A couple weeks ago, I created a screencast that demonstrated how to build a three-level navigation menu. In a response email, one of our readers requested a

A couple weeks ago, I created a screencast that demonstrated how to build a three-level navigation menu. In a response email, one of our readers requested a tutorial on how to build a lava-lamp style menu. Luckily, it’s quite a simple task, especially when using a JavaScript library. We’ll build one from scratch today.

RT @tweetlicius: HTML5 Rocks My Socks Off | Three Styles - http://bit.ly/aBKw9p

Cool collapsing column trick

Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. They are a clever and engaging mechanism for packing a lot of information in a small space.

An accordion grid created using CSS & Jquery

HTML5 Website Layout Tutorials and Inspiration | AcrisDesign - http://acrisdesign.com/2010/03/html5-website-layout-tutorials-and-inspiration/

50 Excellent Tutorials for Web Development Using CSS3 | Dzinepress - http://www.dzinepress.com/2010/03/50-excellent-tutorials-for-web-development-using-css3/

CSS3 techniques

sweet magical slider behind the menuitems with jquery

How to reference fonts on the server

Some tips for implementing @font-face with your CSSes

with rounded CSS3 corners

Page de démo présentant des menus déroulants créés uniquement avec un fichier CSS 3 (sans javascript)

This post brings to a head a lot of my thoughts and feelings with regard to CSS3 and the way the W3C is developing it. It does not aim to look at specific topics in detail, but to step back and question some fundamental issues that I feel need to be addressed.

my thoughts a

Como aplicar sombras con CSS en TODOS los navegadores web.

"One of the most common CSS effects is using shadows in various ways. Before, we needed to resort to images, but now we can offer this to all major web browser with CSS!"

éditeur HTML5, CSS3 et javascript avec jQuery en ligne permet l'export des codes générés

In this tutorial we are using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect.

iPodに最適化したサイト集。

Finally getting round to taking a look at Sly. Well, not much to it. It's light, it's fast and very easy to use.

Awesome tool for applying some still-proprietary CSS3 styles to browsers that support them.

Webkit browsers have very different syntax for gradients.

Free interactive tool to quickly code CSS3 gradients.

Have you seen David Desandro's site? It's pretty slick. His footer is especially fun: The technique is clever in it's simplicity. Let's take a

Nifty text shadow effect with CSS3

RT @1stwebdesigner Amazing CSS3 Techniques You Can't live Without | Graphic and Web Design Blog http://bit.ly/atbglh

RT @tweetmeme Amazing CSS3 Techniques You Can't live Without | Graphic and Web Design Blog http://bit.ly/atbglh

"Creating a Realistic Looking Button with CSS3" /by @jayair http://j.mp/dilGpV #css #css3 #ux #webdesign

programações legais

About CSS attribute selectors.

advanced selectors

Script para forzar a Internet Explorer a soportar algunas propiedades de CSS3 /cc @chulini @cabrera @wiredlain

Cómo hacer gradientes usando CSS3 que funcionen en Firefox, Safari, Chrome e Internet Explorer

gradiente por CSS em todos os browsers

Informacion sobre imagenes con Css:hover

With all these CSS3 effects and tutorials popping up every day that show all the new and wonderful things we can make happen, we sometimes forget about poor little old CSS2.1 and the great potential it still has. With very good browser support, we can do lots of cool things that we know will work in all major browsers. In this tutorial, I will be going over creating flexible advanced hover techniques using CSS2.1 properties.

improve-your-css-skills-with-pure-css-ui-components

一些常见CSS

มาดูตัวอย่างการเล่เฉดสีสวยๆ ใน CSS3 กัน

Gradients - Webkit only..

HTML5 & CSS3 Readiness http://html5readiness.com/ #html #browser #css3

A Visualization of how ready different parts of HTML5/CSS3 are for day to day use

hover { text-decoration: none; } .button:active { position: relative; top: 1px;

This is one of the best CSS tips/habits list to use, for sure.

Different Stylesheets for Differently Sized Browser Windows

なんとなく・・・

便利なCSSのTips 集。目新しいものはありませんが、実践で役に立ちそうなものばかりです。

使える小技

lista

.

The #CSS3 Flexible Box Model (Mozilla Hacks) - http://is.gd/bICzI

With all the cool things that surround Javascript (especially with jQuery) its easy to forget that it’s possible to push pure CSS (with a touch of HTML) into an all singing and all dancing interactive site, with absolutely no scripting at all. The pure CSS techniques, outlined in this article, are neither new nor are they ground-breaking. What they do offer is CSS solutions to what would typically and traditionally be associated with Javascript, and as a demonstration that they do exist and could be quite easily used. Having said all that, we are in no way saying that these techniques are in anyway better than there Javscript equivalent, just an optional alternative and as a proof of concept. In this article we have concentrated on showing as many varied CSS techniques that cover the full spectrum of web site interactivity, thus we have intentionally minimized the number of pure CSS navigation methods, of which there are literally hundreds.

css

Splendid HTML5 app for 3D molecule modeling.

Knowing the importance of HTML standards, we are making a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines.

Cábulas

HTML5 is giving web designers and developers new capabilities that were things of fantasy with previous versions of HTML. Web pages will now be more semantic with the use of structure specific tags. Visual elements like rounded corners are now built in, and so is the ability to create drag and drop interactivity. Even though HTML5 is not fully supported in major browsers, there are those that are pushing forward and experimenting with its new features. In an effort to encourage you to do the same and to prepare you for the future, we’ve rounded up 15 useful HTML5 tutorials and cheat sheets.

filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

In this “Ultimate Collection of HTML5 and CSS3 Resources“, you will find articles and tutorials covered on different websites. Demos and examples are also included in this list. I tried my best to collect all useful and related information to put at one place. Still if you find something missing, kindly share it in the comments below.

html 5 css3

Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies

Ah, how exactly this matches what I wonder on a daily basis...

den stora frågan med html5 är när vi kan använda alla features. http://caniuse.com/ ger delvis svaren... #w2e – Martin Belak (belak) http://twitter.com/belak/statuses/13320170763

HTML5 has definitely become a trend alongside its lil’ brother CSS3 because of their functions and utilities which makes them the next best thing in web design. Better even than Flash, maybe, in some situations. Being the next best thing will not determine you to use it, but the fact that it introduces and enhances a wide range of features including form controls, APIs, multimedia, structure, and semantics will do. The most important thing for you to know is that you can’t learn it just by reading, you have to work with it, step by step, using these new techniques from the tutorials that I’m bringing you here and by the time HTML5 and CSS3 properties will be supported on every browser you’ll be a rockstar coder.

at W3Avenue.com

Tips, Tricks and Techniques | W3Avenue

navigation for my company

I've been using/abusing many of these but how do they differ from "filter:alpha(opacity=50)" etc? http://css-infos.net/properties/webkit.php

-webkit- reference

isnet

☆☆☆☆☆

Cómo aparece nuestra web en diferentes navegadores y tamaños. Sólo tenemos que indicar la url, el dispositivo y el tamaño, mostrando un popup con el resultado.

The ProtoFluid App Facilitates web app testing on various screen sizes, orientations and browsers. Lets you design for CSS3 compliant (mobile) browsers using Media Queries. Particularly suited to the early development of fluid layout based web applications. Use all your favourite web browser development tools (Firebug etc.) This approach is particularly relevant considering the upcoming tablet tsunami. Encourages modern design flexibility. No browser sniffing or user agent strings here!

web

かわった見せ方

The @font-face is commonly referred to as a new CSS3 feature, but has actually been around for some years. The only problem was there weren’t any browsers to support it (apart from IE’s obscure EOT methods), so it sat collecting dust at the back of the CSS2 specification. Recently however, browsers have started implementing support for the @font-face rule. First came Safari (3.1), then Firefox (3.5), Opera (10) and Chrome (4.0). So now, any @font-face implementation will be available for a large chunk of your visitors. What’s more, if you insist on IE support you can even get everything working with a quick fumble around with Microsoft’s WEFT tool.

14 tutoriais CSS3 para facilitar nossa vida

http://designlovr.com/30-beautiful-and-free-fonts-you-can-use-with-font-face

ThinkVitamin - Carsonified's blog about the web

Sexy Interactions with CSS Transitions - http://bit.ly/bCPGgl – Smashing Magazine (smashingmag) http://twitter.com/smashingmag/statuses/13978117016

Sexy Interactions with CSS Transitions http://bit.ly/bCPGgl

Create Beautiful #CSS3 Typography http://bit.ly/bBvNbd

It has been suggested that beautiful and usable websites are created on a foundation of beautiful and usable typography. I’ve even read an article that suggests that the web is actually comprised of 95% typography. I’m not convinced that there is any empirical evidence for this figure, but I think that the point is a good one. And, that makes typography a pretty important element that you will want to look at very carefully.

このプロパティはどのバージョンのCSSで使える？！が一覧できる

CSS対応一覧表

13 CSS techniques for creating JavaScript-like interactions

13 Pure CSS Techniques for Creating JavaScript-like Interactions

Today we will create a stunning full page photo wall gallery. The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture. When clicking on the full image, the thumbs panel slide back from the bottom. This effect will give the impression that we are stacking the panels on top of each other every time we change the mode. In the full picture view we add some nice transition effect when we browse through the photos.

Today we will create a stunning full page photo wall gallery. The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture. When clicking on the full image, the thumbs panel slide back from the bottom. This effect will give the impression that we are stacking the panels on top of each other every time we change the mode. In the full picture view we add some nice transition effect when we browse through the photos. In addition, we will use a function for resizing the full image, adapting it to the size of the screen. So, when the screen get’s resized, our image will adapt automatically!

Galería de fotos html+jQuery.

http://fonts.googleapis.com/css?family=Tangerine

In our earlier article about Web design trends for 2010 we covered the strong influence of print design techniques, keypress navigation, horizontal layouts, rich...

Tendencias del diseño web para 2010, metáforas de la realidad y adaptación a CSS3

Web Design Trends 2010

Another JavaScript library for dealing with the video support shenanigans across browsers.

looks like a nice player.

Video JS is a javascript-based video player that uses the HTML5 video functionality built into advanced browsers. In general, the benefit of using an HTML5 player is a consistent look between browsers.

html examples

Collecting examples of creative, innovative, and unexpected use of emerging web technologies such as HTML5 and CSS3.

These demos are showing of CSS transitions, transforms (2D and 3D) and animations.

#Dynamic #Page / Replacing Content #jquery http://j.mp/bX66a9

great CSS tutorials

Annotated link http://www.diigo.com/bookmark/http%3A%2F%2Fcss-tricks.com%2Fdynamic-page-replacing-content

Dynamic

Let’s say you wanted to make a website where clicking buttons in the nav would dynamically load some content. Kind of like the organic tabs thing, only the content is loaded dynamically. Say something like this: There is no excuse for the navigation of a website to be completely broken without JavaScript enabled. So the best approach here is just to create these pages and the navigation as plain ol’ semantic HTML. You know, like it’s 2001. The navigation links to the files that contain that content, and are fully formed functional pages on their own.

Cambio de secciones con efecto fade in/out

Scrolling layer for WebKit Mobile.

TouchScroll, a scrolling layer for WebKit mobile

スライダー　slider

ボタンジェネレータ

角丸の実装方法が書かれている

ディレクターとして把握しておいた方が良いHTML/CSS関連のお話とのこと。良い記事です。

Apple, and the WebKit team, have recently proposed two different additions to CSS: CSS Transitions and CSS Animations.

Apple, and the WebKit team, have recently proposed two different additions to CSS: CSS Transitions and CSS Animations. The two specifications are confusingly named - and it's hard to tell what the difference is between them at first glance. However, to put it simply: CSS Transitions are easy to use, while CSS Animations are made for programmers. CSS Transitions CSS Transitions provide you with the ability to force CSS property changing to occur smoothly over a period of time, rather than immediately and coarsely.

Mozilla evangelist Chris Blizzard voiced his concern about the issue in a recent blog entry. He characterizes Apple's HTML5 showcase as a misguided marketing stunt and explains why it is detrimental to the browser ecosystem. He says that the browser block on the demos is a "F**k You" to the people who make and run other standards-compliant browsers. He also voices some criticism of Google, which he says has made similar mistakes in promoting its Native Client technology and other nonstandard features.

You’ll need to download Safari to view this demo.

Ethan Marcotte schreibt auf A List Apart über verantwortungsvolles Web-Design und seinen Versuch eines Flexible Grids. Umfrangreich, aber lesenswert.

from Event Apart Boston

About creating flexible web layouts that adapt to screen size.

An excellent article by Ethan Marcotte that's very relevant for designing for mobile devices and flexibility ...

CSS Three — Connecting The Dots - Smashing Magazine http://ow.ly/1Wvgv

sweet css tips n tricks

CSS3で何ができるのか？基本的な説明と例。

Free Web Resources Everyday - WebResourcesDepot

If you didn't already, it is a good idea to warm your hands on HTML5 and CSS3 as they offer so much. Here are 10+ free HTML5-CSS3 website templates to help you get inspired and started:

View the examples below and learn how to use web standards such as HTML5, CSS3, and JavaScript to deliver rich experiences in your website.

cool HTML 5 effect

Appleによる、 HTML5とCSS3とJavaScriptでこれだけのリッチなものが作れるというデモ集。Safariでしか動きません。でもiPad用（あるいは iPhone用）のコンテンツなら、今すぐこういったものが作れるということですよね。

An experiment with CSS3 border-radius, transforms & animations. Love it.

Попробуйте открыть это и в Internet Explorer 8 — у него свое видение нашей солнечной системы :)

A Solar System infoviz using CSS3 features: border-radius, transforms & animations.

Une belle réalisation en CSS3 Impressionnant...

Making an iPad HTML5 App & making it really fast

"Images show things down immensely - get rid of them"

Drag and drop your truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts in the left hand side module and it will be added to the list.

Quickly test those new fonts

Works only in Firefox

Notificação estilo alert

jQuery & CSS3

HTML5 and CSS3 are really revolutionizing the worlds of web development and web design, because they are bringing so many new features to work with to the fields. I have been spending much of my time working with both HTML5 and CSS3 in order to learn more about the two, and have learned that you can do everything from animation to rounded corners to amazing effects and fonts to easy offline line capabilities. In this post, I tried to collect some great tools that can help you to master these new features of both HTML5 and CSS3, by putting together an ultimate list of tools. Even though many of these features are not fully supported yet, as web developers and designers we should always be thinking about the future! I hope you find these tools helpful! Enjoy!

An awesome list of tutorials for HTML5 and CSS3

Herramientas CSS3 y HTML5, algunas bien bizarras

#HTML5 Showcase: 48 Potential #Flash-Killing Demos http://j.mp/dujksP

Great books to look into for the HTML 5. Caution though! What may change in the future?

a list of eleven books that will be released in 2010 that focus on HTML5 and CSS3

Over the past year, new techniques and tricks involving HTML5 and CSS3 enhancements have been shared on a number of websites, giving developers new

Schöne Schrift in Webkit-Browsern. Endlich.

Tim erklärt bei Maxvoltar wie man mit einem CSS-Befehl für Webkit Schriften schöner rendern lassen kann. Aktuell funktioniert das in Chrome und den Webkit-Nightlies.

I’m not a big fan of the default text rendering in WebKit, in my opinion, it’s too heavy. There used to be a workaround where setting text-shadow would make the text thinner, but updating to Snow Leopard rendered that useless. Then someone found another hack (using -webkit-text-stroke) that seemed to work nicely, but it wasn’t usable on text-heavy pages, causing performance issues when scrolling.

Kick-ass CSS3 Support in IE6, 7, and 8 http://bit.ly/bSS2Zs #css3

Compatibilidad CSS3 para Internet Explorer con un fichero htc

I would really like to go thru this tutorial! It has some really neat features, but what I worry about is that this method of creating content does not lend itself to deep understanding on the part of the reader according to much of the recent research. The hyperlinks could be construed as distracting -- would be worth looking at though.

Semantic CSS3 Lightboxes - http://sixrevisions.com/css/semantic-css3-lightboxes/

ทำ from เลื่อนซ้ายขวา

Today we are going to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images.

jQuery Form

mobile-google inspired floating toolbar

ボタンから挑戦するのがいいかも。

provide

Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required.

fallback for multiple bg, border support. nice.

Build a HTML5/CSS3 Website Layout Without Images – Part 1 | Onextrapixel - Showcasing Web Treats Without A Hitch - http://www.onextrapixel.com/2010/06/02/build-a-html5-css3-website-layout-without-images%E2%80%93part-1/

fonts.comの使い方

TypekitやFontspringなどに続き、オンラインフォントショップFonts.comが、ウェブフォントサービス Fonts.com Web Fonts を開始しました。クラウド型フォント埋め込みサービスです。現在はβ版となっており、登録制でサービスを利用することができます。 他のサービスに比べて、とにかくすごいのが有名書体を数多く取り扱うLinotype、Monotype、ITCの3社のフォントを使うことができるという点。 Frutiger、Univers、DIN、Gill Sans、Serpentine、VAG Rounded、…あの書体、この書体何でもあります！現在は2,000書体以上が使えますが、今後もどんどん増えていく模様。これまで画像等でしか実現できなかったことが、CSS (+ Javascript)で実現できるようになりました。IEは4から対応しています。 そして何よりも注目なのが、英語以外にも中国語や韓国語、そして日本語にも対応してる点です。β版では平成明朝、平成角ゴシック、平成丸ゴシックの 3書体6ウェイトが用意されていますが、今後どのような書体が追加されていくのでしょうか。こちらも楽しみです。

I’m what you would consider a bit of a GitHub fanboy. We all know that GitHub is the perfect place to store repositories of open source code, but I think my love of GitHub goes beyond that. GitHub seems to understand that most repo sites are usually boring so they’ve spiced their site up with some catchy CSS and great JavaScript features. One tiny piece of the GitHub design I love are the basic buttons. Lets examine how we can create our own GitHub-style buttons with a bit of HTML, CSS, and JavaScript.

CSS3で表示できるボタンを作成することができる

jo is a lightweight JavaScript framework designed for HTML5 apps. jo does * Embrace JavaScript's object model and loosely typed nature * Leverage CSS3 to handle as much of the pretty presentation and animation as possible * Provide a consistent and modular event model between objects * Wrap DOM and device-specific events into a cohesive gesture system * Insulate developers from different persistent storage solutions * Play nicely with other libraries like PhoneGap jo doesn't * Use a lot of resources * Depend on other frameworks * Have a lot of browser dependent code * Require detailed knowledge of the DOM * Force you to deeper into its framework than you want to go * Use $ and other arcane looking symbols in place of proper identifiers Author Dave Balmer: davebalmer.wordpress.com, follow @balmer on Twitter, or email dbalmerjr@gmail.com Downloads Available from GitHub as a git repo or a zip file. Philosophy If you want to jam an exi

Why and how to create Microsoft Office Minibar with jQuery and CSS3 http://ow.ly/17BKaZ – Javascript News (del_javascript) http://twitter.com/del_javascript/statuses/15377993283

Smashing Magazine

Nice round up of all the best trick including a great 3D tower effect

Thus, we’re going to look at how using the evolving CSS standard can enhance some lovely cross-browser tooltips.

not too much new stuff but a nice explanation

Sencha Touch is the world's first app framework built specifically to leverage HTML5, CSS3, and Javascript for the highest level of power, flexibility, and optimization.

Sencha Touch allows you to develop web apps that look and feel native on Apple iOS and Google Android touchscreen devices.

一个 web 框架

Alloy is a UI metaframework that provides a consistent and simple API for building web applications across all three levels of the browser: structure, style and behavior.

Alloy UI - metaframework for HTML5, CSS, and JS http://alloy.liferay.com/

HTML5 & CSS3 frameworks http://bit.ly/aIbs8J – fgrmt (fgrmt) http://twitter.com/fgrmt/statuses/16498114549

HTML5 And CSS3 Frameworks is what can make your job easier with structuring and presenting content on the World Wide Web. Features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears are being incorporated in HTML5. Although the full recommendation of HTML5 is very far away (2022), but browsers are being making there moves already. As a designer myself I really am watching closely on developments, articles on HTML5 and CSS3, and today I would like to present the frameworks for HTML5 and CSS3.

かっこいい

JavaScript、HTML5、 CSSの投稿共有コミュニティサイト

How to send html email that is optimized for mobile email clients.

Web Fonts用のAPIをGoogleが用意。

Google Font Directory provides high-quality web fonts that you can include in your pages using the Google Font API.

RT @tweedlebop: CSS animated Fail Whale: http://www.subcide.com/experiments/fail-whale/

steve dennis made the twitter whale only with css

CSSで作られたアニメーションするFail Whale（Chrome/Safari専用）

Works well on Palm Pre.

If you’re using a Webkit browser (Safari or Chrome), it should also be animated using the webkit-animation CSS functions. If you are viewing in IE8 or below, well, this isn’t an experiment for you.

CSS Twitter Whale

css

How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery - http://bit.ly/dgoSRM – Smashing Magazine (smashingmag) http://twitter.com/smashingmag/statuses/15767323261

In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down

dropdown menu with gradient bg

HMTL5になった事で、html5doctor.com のリセットスタイル（v1.4.1）を使っています。 また、フォントサイズは、YUIのv2.8.1を使っております。

使う

これきた。

【HTML5】新規でサイトを作るのに使えそうなの一式

HTML5入門セット。

Introducing a script (eCSStender) that deals with CSS3 and translates it to expressions that older browsers can handle. May be a nice thing to use.

Is a library the solution? Will be useful for a while though.

HTML5 Starter Pack by Radu Chelariu | Sickdesigner.com - http://sickdesigner.com/resources/HTML5-starter-pack/index.html

CSS3で角丸グラデジェネレーター

I’ve been wanting a fluid layout on this site for about 5 years. I had a brief redesign back in 2005 where I flirted with it for a few months, but it was soon switched back to fixed as I couldn’t get it right. Last year, I discovered CSS media queries while working on the internal pages of the Opera Browser, and tried to implement it here. It was half-assed and was removed, again after a few months. It took Ethan Marcotte’s excellent article for A List Apart Responsive Web Design to motivate me to do it properly, as well as know HOW to do it properly. I don’t think I’ve read anything as exciting and inspirational for a long time. So I started from scratch, working on the basic skeleton of the layout, getting the various resolution dependant layouts in place, before re-implementing the design (making a few changes long the way of course). So now, you’ll see the layout and type size change depending on the available width.

RT @deliciouspb: #HTML5 presentation http://bit.ly/bTL9Uz

Good overview of HTML5 and the possibilities.

A collection of links to amazing css3 image gallery code on the web @speckyboy.com

10 Pure CSS3 Image Galleries and Sliders

แก้โค้ดในบราวเซอร์

Targeting the iPhone 4 Retina Display with CSS3 Media Queries - WaltPad

One area of Web design that is going to become more important in the coming years is high DPI

the iPhone 4 Retina Display with CSS3 Media Queries

iOS icons made in pure css. http://is.gd/d8TI2 no images involved.

"11 iOS icons made in only CSS, no images whatsoever."

In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most image behind all the stack with a slick animation.

Improved handling of kerning pairs and ligatures in modern browsers using the text-rendering: optimizeLegibility; declaration.

Improved handling of kerning pairs and ligatures in modern browsers using the text-rendering: optimizeLegibility

It's all about a declaration. Try: text-rendering: optimizeLegibility; and you're done.

CSS statement supported by Webkit and Firefox.

Shut up ! Only CSS ! That is ridiculous

http://hacks.mozilla.org/2010/06/css3-calc/

CSS 로 크기 따위 계산하기..

これが使えるようになればだいぶ便利になるな

Firefox 4: CSS3 calc()

La trasparenza nel web design

How is it done? Let's take a gander at four different ways. Each of them handling the illusion in a different way, and each completely appropriate depending on

On the heels of some of our recent findings regarding the state of CSS in email, I reckoned it was high time to shake things up a bit. So here goes - CSS3 in

On the heels of some of our recent findings regarding the state of CSS in email, I reckoned it was high time to shake things up a bit. So here goes – CSS3 in email lives. Ok, so I’m sorry if I made you drop your toast, there. I know you’re thinking, “But… It’s still largely experimental… In the browser, to boot!” Yes, CSS3 support is even more fickle amongst a swag of email clients that can’t even get CSS2 right. But that doesn’t mean that it’s too soon to touch any of it. In this article, I’ll go through two properties you can use in your email templates, alongside some practical examples. So, brush off your toast and let’s get down to business.

In this article, I’ll go through two properties you can use in your email templates, alongside some practical examples.

CSS3 no e-mail marketing

CSS3 Rounded Image With jQuery

The moment you first lay eyes on the iPhone 4's new Retina display, you are ruined. No other display will ever make you happy. Not unless it, too, is a Retina display. You start seeing pixels everywhere. My beloved MacBook Pro's screen? Pixels. The iPad I bought a few months ago and couldn't leave aside? Pixels.

Aral suggests some techniques to target the new super amazing display. The methods include media queries, javascript, svg and a few other sneaky techniques.

Cool blog/site about mobile dev and design and stuff

iPhone 4 でイメージを美しく表示させるためのコーディング方法

If you want your applications and web sites to look beautiful on the iPhone 4's new retina screen, you're going to have to create high-resolution versions of your bitmaps and/or use vectors.

inspiration concepts for web design

Présentation HTML5

RT @css3watcher: RT @brunobertolini: RT @yogodoshi: CSS3 Best Practices http://www.impressivewebs.com/css3-best-practices/

Early best practices for CSS3

Get CSS3 or HTML code for custom font/text layouts.

Cool!

With TypeFolly you can create, save and export your type projects. All projects can be saved in our database or exported as compliant css / html.

Webで書体を自由に選べる時代も近いのだなと思った。

How to create a very cool 3D barchart with CSS3.

free fonts are awesome (links to more free fonts @ the bottom)

In this post we have collected 25 of the best completely FREE headline fonts that could be easily used with @fontface property and all packaged with a web-font license.

25 Completely Free Fonts Perfect for @fontface - Speckyboy Design Magazine - http://speckyboy.com/2010/07/04/25-completely-free-fonts-perfect-for-fontface/

HTML5 Canvas Experiments - http://bit.ly/bV1cSv – Smashing Magazine (smashingmag) http://twitter.com/smashingmag/statuses/17881844213

Experimentos increíbles con canvas

A vertically fluid layout using CSS.

It results in a layout that stretches both horizontally and vertically to the browser viewport. It includes a vertical navigation bar where button heights also stretch. It works in FF, Safari, Chrome, Opera, and IE 6-8 ++++

Create properly scaling backgrounds.

Good use of background cover property and @media queries

Instead of using one fixed background size, a better solution would be to scale the image to make it fit within different window sizes. Unfortunately, CSS 2.1 has no means of scaling background images. There are a couple of workarounds, however these all rely on the HTML img element (instead of CSS backgrounds). They also use absolute positioning for layering and tables or scripting to enable resizing. Additionally, not all of these techniques preserve the image’s ratio, which results in unrealistically stretched backgrounds.

Demo of HTML5 via a set of "slides". Requires HTML5 enabled browser ...

A demonstration of the new effects of HTML5

RT @doxaras: HTML5Rocks in a nutshell http://is.gd/ddSLr

:after :before

I found this very interesting - Bill.

CSS Media Queries & Using Available Space | CSS-Tricks - http://css-tricks.com/css-media-queries/

different stylesheets depending on browser window size

"CSS Media Queries & Using Available Space" by @chriscoyier #tech #webdev http://bit.ly/cacu4y – Elijah Manor (elijahmanor) http://twitter.com/elijahmanor/statuses/17875536154

Showing and hiding content with pure CSS3

using :focus pseudo-class

from Opera Developer Community

show/hide without using JS

By http://bit.ly/Tweets2Delicious

Modern websites and applications are more dynamic than old style web pages, with several pieces of well-placed JavaScript providing smoother content updates, more intuitive user feedback and more responsive controls. One very common feature is the expanding/collapsing or shown/hidden box, whether this is a tabbed interface, a content "tray" on the side that can be slid out and then put away again, or a complex tree menu with expanding/collapsing sub-menus. Generally, these features are implemented via JavaScript, however using CSS3 it is possible to create such content using only HTML and CSS — no JavaScript required. In this article I'll show you how this works, including a few examples to get you started.

No images whatsoever. That's right. Nothing but carefully crafted markup and slightly over-the-top CSS.

problems of browser specific css

A really good article about how CSS evolved and how it should have evolved. Pretty good read and I agree with the conclusion.

Great article by Eric Meyer on the need of vendor-prefixed CSS properties.

Prefix or Posthack /by @meyerweb via @alistapart http://j.mp/cSR0ty #css #css3 #webdesign

No images whatsoever. That's right. Nothing but carefully crafted markup and slightly over-the-top CSS.

Building stylish contact forms typically requires the use of images (and maybe some JavaScript) to create something that looks professional. However, with CSS3 it’s now much easier to create some nice effects that don’t require the use of any images, yet can still look clean and stylish. In this tutorial we’re going to look at a range of different CSS3 effects – in particular, we’ll be creating background gradients, adding shadows to elements, applying some rounded corners, and adding a couple of simple animation effects.

So the next time you find yourself grumbling about declaring the same thing four times, once for each browser, remember that the pain is temporary. It’s a little like a vaccine—the shot hurts now, true, but it’s really not that bad in comparison to the disease it prevents.

problems of browser specific css

A really good article about how CSS evolved and how it should have evolved. Pretty good read and I agree with the conclusion.

Great article by Eric Meyer on the need of vendor-prefixed CSS properties.

No images whatsoever. That's right. Nothing but carefully crafted markup and slightly over-the-top CSS.

Create A Clean and Stylish CSS3 Contact Form

So the next time you find yourself grumbling about declaring the same thing four times, once for each browser, remember that the pain is temporary. It’s a little like a vaccine—the shot hurts now, true, but it’s really not that bad in comparison to the disease it prevents.

problems of browser specific css

A really good article about how CSS evolved and how it should have evolved. Pretty good read and I agree with the conclusion.

Great article by Eric Meyer on the need of vendor-prefixed CSS properties.

No images whatsoever. That's right. Nothing but carefully crafted markup and slightly over-the-top CSS.

12 Valuable CSS Cheat Sheet For Upcoming Web Designers

cábulas

12 Valuable CSS Cheat Sheet For Upcoming Web Designers

10 Awesome CSS3 Techniques You’ll Want To Start Using

Some nice CSS effects - rounded corners etc.

웹 개발자와 디자이너에게 도움이 될 10가지 CSS3 테크닉 모음

This is cool collection of most wanted, usefull tutorials and articles by CSS3. In this article you find out how make cool CSS3 Gradient Buttons, Sliding or bouncing Navigation without JavaScript, Slide effect menu with the Apple-Style and much more.

35 Fresh CSS3 Articles & Tutorials / CSS / Splashnology - Web Design ...

Coleccion de tutoriales de css3

huh: http://matthewjamestaylor.com/blog/css3-starbursts #css #dev #yam

woow!!

starbursts

CSS3 Starbursts - http://bit.ly/dsJaLF By @mattjamestaylor (via @ImpressiveWebs) – W3Avenue (w3avenue) http://twitter.com/w3avenue/statuses/16070010555

CSS3按钮教程

25 tutoriales y técnicas esenciales para HTML5

Loq se puede hacer con el CSS3

CSS3 Design Contest and encouraged designers to experiment and get creative with CSS3. As expected, we have received many creative and original submissions. To choose the winners of the contest, we considered the originality of the technique or approach and its uniqueness. The idea mattered more than the execution

CSS3 Design Contest Results - Smashing Magazine

25 Essential HTML5 Tutorials and Techniques | Template Monster Blog - http://blog.templatemonster.com/2010/06/16/25-html5-tutorials-techniques/

zman

大量CSS3应用

We are always close to the latest technologies – you know that, so today let’s cover some more info on the new fundamental markup language for the web – HTML5 that you all love so much. When saying about HTML5, developers mean the new semantic structural tags, API specs like canvas or offline storage, new inline semantic tags, etc. HTML5, in fact, is aimed at creating a comprehensive markup language for front-end development, able to provide qualitative information on the different elements of the page. But to help make some sense of what’s new and essential in HTML5, you could review some helpful and indispensable HTML5 tutorials that go over many of the major HTML5 aspects and new standards.

We are always close to the latest technologies – you know that, so today let’s cover some more info on the new fundamental markup language for the web – HTML5 that you all love so much. When saying about HTML5, developers mean the new semantic structural tags, API specs like canvas or offline storage, new inline semantic tags, etc. HTML5, in fact, is aimed at creating a comprehensive markup language for front-end development, able to provide qualitative information on the different elements of the page. But to help make some sense of what’s new and essential in HTML5, you could review some helpful and indispensable HTML5 tutorials that go over many of the major HTML5 aspects and new standards.

"I ♥ BLUR - Once again, I got distracted experimenting with CSS3. ;-) So far I just knew how to make text look blurry by adding a lot of text-shadows like in this example by David. But it’s more a glow, because the text still stays in front. But what if you wanna turn text into smoke? Luckily you can set the text-fill-color to transparent and that gives your text a really nice smoky blur. color: transparent; text-shadow: #fff 0 0 100px;"

I ♥ BLUR - Once again, I got distracted experimenting with CSS3. ;-) So far I just knew how to make text look blurry by adding a lot of text-shadows like in this example by David. But it’s more a glow, because the text still stays in front. But what if you wanna turn text into smoke? Luckily you can set the text-fill-color to transparent and that gives your text a really nice smoky blur.

color: transparent; text-shadow: #fff 0 0 100px;

Text blur using CSS - amazingly simple.

the future is webapps

40 excellents tutoriels sur le développement web utilisant HTML5 et CSS3

สร้าง Websote ด้วย html5/css3 โดยไม่ใช้ภาพเลย #ตอนที่ 2

Great 2-page tutorial on building a website with html5 and css3 without images - http://bit.ly/dfxqfs + http://bit.ly/a25AES #html5 #css3 – quplo (quplo) http://twitter.com/quplo/statuses/17854147116

Quick Tip: Multiple Borders with Simple CSS | Nettuts+

This is only relevant in the latest (as of April 2010) FireFox, Safari, and Chrome, and is not something you'd want to rely on in a production site. :target is

demo links are broken, use css-tricks version instead

シンプルなhtmlで二重枠線にする方法。使える。

Quick Tip: Multiple Borders with Simple CSS | Nettuts+

Cool drop shadows, wrapped.

[CSS]実例から学ぶCSS3の効果的な使い方

10 Best And Useful CSS Tutorials For Web Designers

Every designer want to improve their knowledge in web designing by learning new skills in CSS.

10 buenos y útiles tutoriales CSS para diseñadores.

Every designer want to improve their knowledge in web designing by learning new skills in CSS. So, this time we are here compiling a list of best CSS tutorials that helps you to gain knowledge in CSS. I am sure these tutorials will help you to create some awesome designs.

In this article I’ll explain how, with a few CSS rules, you can create an iPhone version of your site using CSS3, that will work now. We’ll have a look at a very simple example and I’ll also discuss the process of adding a small screen device stylesheet to my own site to show how easily we can add stylesheets for mobile devices to existing websites.

แนะนำการใช้งาน CSS3: border-image

border-image

"Understanding border-image" by @norabrowndesign #tech #webdev http://bit.ly/biPK3W – Elijah Manor (elijahmanor) http://twitter.com/elijahmanor/statuses/19081952827

The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that’s your thing) with a single div and a single image. In this article I explain how the border-image shorthand property works in today’s browsers.

Understanding border-image in CSS - http://bit.ly/9Labq3 – Smashing Magazine (smashingmag) http://twitter.com/smashingmag/statuses/19337550450

CSS3

20+ Free CSS3 Code Generators

Bulletproof CSS3 media queries

How to get around media queries and older browsers (>IE9, >FF3.5, >S3, >07). Uses conditional comments and js to load appropriate style sheets. Seems kludgy, but no better solution known and will work in a pinch.

CSS3 media queries are very handy to target various devices with various monitor (screen) size. With the help of the CSS3 media queries we can have site optimized for iPhone and other mobile devices, with the same solution we can have site optimized for iPad and all other tablets . This CSS solution will be much more cheaper than building new mobile web site something like http://m.somewebsite.com or http://ipad.somewebsite.com . Can we start using the CSS3 media queries today? Yes we can!

idea for soccer site

Web Designers Desk

ココを押えておけばCSS3がだいたい分かるツール集 | 日刊ウェブログ式 http://bit.ly/bIDWgE #css #web – CSSニュース (css_j) http://twitter.com/css_j/statuses/18953972944

Awesome Bubble Navigation with jQuery

interactive explanations

CSS3 Experiments and Demos

CSS3 demos

10 interesting #CSS3 experiments and demos http://dld.bz/nM3k