css3
Get flash to fully experience Pearltrees
The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example. View demo Download source
Original Hover Effects with CSS3
Adobe announced a proposal for CSS Shaders at Adobe Max two days ago. This was backed by both Opera and Apple, and the spec will be developed by the FX Task Force at the W3C. For those of you who are not aware, the FX task force is an elite band of ninjas’s chosen from the ranks of the CSS and SVG Working Groups to work on specs common to both technologies. Their most notable work so far is perhaps the Filters Effects 1.0 spec , but they’re also working on a common model for Transforms and Animations. So what exactly is the CSS Shaders proposal, and how does it relate to the existing proposals and technologies? First I will introduce you to the required terminology (you can skip that section if you are already into computer graphics), then I will dig into the proposal and see what it can do.
What are CSS Shaders? - destroy/dstorey
Stylus
CSS needs a hero What if we could omit braces? body font: 12px Helvetica, Arial, sans-serif; a.button -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; How about semi-colons? body font: 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius: 5px -moz-border-radius: 5px border-radius: 5px Why stop there, drop the colons
CSS Transitions Module Level 3
Abstract CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration. Status of this document This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
CSS3 Fundametals: CSS 3 Transitions
This entry is part 10 of 16 in the CSS3 Mastery Session - Show All « Previous Next » As CSS3 rolls out around the web, it is bringing some interesting new presentational techniques along with it. Today, we’ll review the basics of using CSS3 transitions and animations to add an extra layer of polish.
CSS3 Dropdown Menu
While I was coding the Notepad theme , I've learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I've created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered. View Demo CSS3 Dropdown
The Ultimate Roundup of 55+ CSS3 Tutorials
CSS3 is something that will take web development into the next level, while modernizing the web and allowing web designers and developers to make their creativity a reality. CSS3 allows for web techniques such as: text shadows, rounded borders, animations, custom web fonts, and much more. In this collection, you’ll find 57 High Quality CSS3 Tutorials that help to stand out from the crowd, and make better designs using only CSS. 1. The Basics of CSS3
CSS3 Patterns Gallery
Browser support The patterns themselves should work on Firefox 3.6+ , Chrome , Safari 5.1 , Opera 11.10+ and IE10+ . However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients).Ultimate CSS Gradient Generator - ColorZilla.com
background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
By Chris Mills Introduction For as long as we can remember, we have used colour gradients on the Web to brighten things up, and add class to designs.
CSS3 linear gradients
The clearfix hack is a popular way to contain floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required. Demo: Micro clearfix hack
A new micro clearfix hack
Native These are the natively supported easing functions, built into WebKit. linear ease ease-in ease-out ease-in-out Custom
Morf.js - CSS3 Transitions with custom easing functions
Fluid Grids
Early last year, I worked on the redesign of a rather content-heavy website . Design requirements were fairly light: the client asked us to keep the organization’s existing logo and to improve the dense typography and increase legibility. So, early on in the design process, we spent a sizable amount of time planning a well-defined grid for a library of content modules.Install the Compass Stylesheet Authoring Framework | Compass Documentation
Installing Ruby Compass runs on any computer that has ruby installed . For more advanced users you may want to install rvm . Setting up the ruby environmentMediaqueries
CSS3
CSS3