CSS3
Get flash to fully experience Pearltrees
Experiments with background-clip: text | Codrops
With the CSS property "background-clip: text" (which is currently only supported in Webkit browsers), we can add a background image to a text element. Today we will experiment with it and create some fun examples by adding CSS3 transitions. View demo Download source With the CSS property “background-clip: text” (which is currently only supported in Webkit browsers), we can add a background image to a text element. Today we will experiment with it and create some fun examples by adding CSS3 transitions.
(UPDATE: I’ve posted a new article that covers CSS opacity syntax for all browsers .) This is a quick tip to demonstrate a way to work around the problem of child elements in your HTML inheriting the “alpha” settings of their parent. This tip is not necessarily recommended, because it creates extra markup and is a little bit messy. But I’m sure it could come in handy in a rare case, depending on the layout of the elements involved, the content, the type of site, etc.
CSS Opacity That Doesn’t Affect Child Elements | Impressive Webs
CSS has a pretty useful property called white-space that I’m guessing goes unnoticed among CSS beginners. You can probably live without this property for quite some time, but once you learn how to use it, it will come in very handy and you’ll find yourself going back to it over and over again. This article will attempt to describe, in a very practical, no-nonsense way, the different values for the CSS white-space property, and how each one can be used. I’ll do my best to avoid overly-technical jargon, but with this property, it’s not easy to explain without sounding overly-complex. Some HTML Background In (X)HTML, anytime you string together a bunch of spaces in your code, the actual page output in your browser will, by default, trim (or collapse) all those spaces down to a single space.
The CSS white-space Property Explained | Impressive Webs
CSS3 animation is pretty darn cool. It lets us give hardware accelerated life to our previously dull websites. However, there are some major pitfalls and practices you should be aware of – let’s dig in. The browser support for CSS3 animation is hotting up – Mozilla Firefox has joined WebKit in full support, and Internet Explorer 10 as well as Opera 12 have promised future support. This means we can start using them without fear today .
CSS3 Animations: the Hiccups and Bugs You’ll Want to Avoid | Webdesigntuts+
apps
Centering in the Unknown | CSS-Tricks
When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is. So what if you don't know anything? It's still kinda doable.With CSS animation now supported in both Firefox and Webkit browsers, there is no better time to give it a try. Regardless of its technical form, whether traditional, computer-generated 3-D, Flash or CSS, animation always follows the same basic principles. In this article, we will take our first steps with CSS animation and consider the main guidelines for creating animation with CSS. We’ll be working through an example, building up the animation using the principles of traditional animation. Finally, we’ll see some real-world usages.
The Guide To CSS Animation: Principles and Examples - Smashing Magazine
CSS3 is an enhanced version of the Cascading Style Sheets specification, and it comes with many enchanting features that revolutionize Web layout and design, as well as other advantages. But it has some disadvantages as well, and tackling them requires smarts. CSS3 is new on the market, so there is still a lot to improve.
20+ Enhancing CSS3 tools and generators | Webdesigner Depot
Bell: ‘Corruption on Steroids’ - Timelines - Los Angeles Times
The desert town of Hesperia incorporates and Robert Rizzo (right) becomes the town’s first city manager, earning a salary of $76,000. Rizzo drums up new revenue and flips pancakes at city functions.
I wanted to build a CSS timeline for the “About” section of my site while using some clean and simple markup. I wanted to avoid using images as much as possible, so I spent a few minutes prototyping some options and came up with a solution using unordered lists. The result is a simple and clean looking timeline with some very straight forward markup. In this article I’ll share my approach to creating a timeline out of CSS and HTML which results in a nice looking, simple timeline. Introduction First and foremost, is the solution I’m about to share with you the best solution?
Pure CSS Timeline – Notebook | MattBango.com
