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. Inside the view insert an element with the class mask that will be responsible for our effects driven by CSS3 and inside it we will put a title, description and a link to the full image.
Original Hover Effects with CSS3 | Codrops
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
border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments body font 12px Helvetica, Arial, sans-serif a.button border-radius(5px) How about transparent mixins? border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments body font 12px Helvetica, Arial, sans-serif a.button border-radius 5px If you want an expressive css language for nodejs with these features or the features listed below, head over to GitHub for more information.
stylus: Expressive, robust, feature-rich CSS language built for Node.js - The Changelog - Open Source moves fast. Keep up.
This isn’t the first time we’ve covered the latest fresh and new creation from LearnBoost . Stylus is an expressive, dynamic, robust CSS pre-processor for Node.js. If you are familiar with Sass.js , Sass or Less.js … Stylus is kind of similar, but from what we’ve heard from TJ Holowaychuk they’ve taken it pretty far in a new direction.As easy as copy-paste While it takes more to explain it than to actually do it, you're then ready to copy your code to clipboard and paste it straight in your favorite text editor or IDE.
Gradient App for OS X | The Missing Link between Web Designers and Colors
labcss - create & experiment
labcss was created to help people who don't know CSS very well, and who don't want to spend the whole day searching the internet and refreshing the browser to make their elements look exactly how they want. labcss allows to play around with HTML and see the results directly on the screen, with the ability to tweak each and every one of the CSS properties available. The preview pane allows selections of all elements. If the document's stylesheet contains a CSS section which can be used to select the element clicked, a CSS property tab opens up to the left, which allows modifying the CSS properties of the elements. When properties are changed, the CSS is replaced in the code editor itself.
CSS Transitions Module Level 3
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/. Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.
CSS3 Fundametals: CSS 3 Transitions | Nettuts+
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. We’ve added the css property, -webkit-transition.
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. One Gradient Image is Used
CSS3 Patterns Gallery
Submission guidelines If you have a new pattern to submit, please send a pull request . However, please bear in mind that I can't accept all submissions, sorry for that.Ultimate CSS Gradient Generator - ColorZilla.com
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+ */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. If you want to create a fantastic looking button, panel, gauge, progress bar or other UI feature, a gradient is the way to go.
CSS3 linear gradients - Dev.Opera
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. The “micro clearfix” method is suitable for modern browsers and builds upon Thierry Koblentz’s “clearfix reloaded” , which introduced the use of both the :before and :after pseudo-elements.
A new micro clearfix hack – Nicolas Gallagher
Internally the custom easing function for the transition is faked using CSS animations. Here is the code that is produced on the fly for the most recent "transition".
Morf.js - CSS3 Transitions with custom easing functions
The 1KB CSS Grid by Tyler Tate :: A simple, lightweight approach
Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex . Looking for a simple, lightweight approach that doesn't require a PhD? Meet The 1KB CSS Grid. » Though simple, The 1KB CSS Grid packs the punch of a heavyweight. Nested rows?Mediaqueries
CSS3
CSS3