Waves Click effect inspired by Google's Material Design Waves on buttons Flat buttons (show source) Button A <a class="waves-effect waves-button">Button A</a><button class="waves-effect waves-button">Button B</button><input class="waves-effect waves-button" type="submit" value="Button C"><input class="waves-effect waves-button" type="button" value="Button D"> Float buttons (show source) <a class="waves-effect waves-button waves-float" style="background: #01BCFF;color:#fff"> Button A </a><button class="waves-effect waves-button waves-light waves-float" style="background: #1bb556;color: #fff;"> Button B </button><input class="waves-effect waves-button waves-float" style="background: #ff4f0f;color:#fff" type="submit" value="Button C"><input class="waves-effect waves-button waves-light waves-float" style="background: #666;color:#fff" type="button" value="Button D"> Waves on icons Plain Icons (show source) Colored Icons (show source) Waves on others DIVs (show source) Plain Box Colored Box Raised Box <! Styling
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. In other words, this is a starting point, not a self-contained black box of no-touchiness. If you want to use my reset styles, then feel free! Previous Versions v1.0 (200802) Acknowledgments Thanks to Paul Chaplin for the blockquote / q rules.
Image comparison slider with pure CSS As a few of you know, I have been spending a good part of this year writing a book for O’Reilly called “CSS Secrets” (preorder here!). I wanted to include a “secret” about the various uses of the resize property, as it’s one of my favorite underdogs, since it rarely gets any love. However, just mentioning the typical use case of improving the UX of text fields didn’t feel like enough of a secret at all. The whole purpose of the book is to get authors to think outside the box about what’s possible with CSS, not to recite widely known applications of CSS features. So I started brainstorming: What else could we do with it? Then I remembered Dudley’s awesome Before/After image slider from a while ago. The good parts: More semantic markup (2 images & 2 divs). Of course, few things come with no drawbacks. One big drawback is keyboard accessibility. Also, none of the two seems to work on mobile. And now if you’ll excuse me, I have a chapter to write
La technique du Reset CSS Le reset CSS est une technique qui consiste à réinitialiser à 0 la valeur de certains éléments HTML afin d'éviter une partie des différences d'affichage sur les divers navigateurs. Avant d'aller plus loin, rappelons que l'usage de cette technique est controversé. Si vous souhaitez l'utiliser, il est recommandé d'utiliser un Reset CSS évolué, comme celui proposé par Eric Meyer, et d'éviter l'utilisation du sélecteur universel (*). Le Reset CSS classique (déconseillé) Les navigateurs n'utilisent pas toujours les mêmes marges et padding par défaut pour les différents éléments HTML. Si on souhaite aller plus loin et gommer d'autres différences en remettant tout «à zéro», on peut aboutir au code suivant: Problèmes avec cette technique Le problème de cette technique, c'est qu'elle annule certains styles par défaut des navigateurs qui sont réellement utiles. Seulement voilà: le sélecteur universel * a pour avantage tout comme inconvénient de sélectionner sans distinction tous les éléments HTML.
Icons Filling Effect | Cody - Free HTML/CSS/JS resources An eye-catching filling effect for your icons, that can be used to make a simple page look cool and dynamic. Browser support ie Chrome Firefox Safari Opera 9+ Sometimes you just want to create something cool. Maybe for one of those pages – about us, our history etc – where you want to come up with something unique to support your brand. The inspiration: some of our users suggested us to take a look at Elliot Condon beautiful portfolio, and create something inspired by the filling effect of the vertical timeline. Creating the structure Before diving into the code, I’m gonna try to explain what’s behind this resource. This way you just need to place the illustrations on top of a colored section, then move them. Just to make sure this is 100% clear, I put together this quick animation to show you the animation process: That said, the structure is just an unordered list. Adding style The 2 colored boxes underneath have been created as ::before and ::after pseudo-elements of the body.
Une feuille de styles de base pour bien démarrer vos projets Avec cette astuce, je vous propose un outil et une méthodologie pour partir du bon pied lorsque vous attaquez les styles CSS d'un nouveau projet. Un outil? → une feuille de styles CSS qui corrige ou définit les styles des principaux éléments de vos pages. (Yay, du code à copier-coller!) Une méthodologie? → explorer ce code, se l'approprier, le modifier pour son projet. Quels objectifs? Utiliser une feuille de styles de base, quelle qu'elle soit, répond à deux objectifs principaux: Gommer certaines différences entre les styles par défaut des navigateurs. Notre feuille de styles de base Le code CSS suivant constitue la partie "reset" de la feuille de styles que nous utilisons chez Alsacréations pour nos projets professionnels. L'ensemble de ce projet de "framework CSS" minimaliste se nomme KNACSS est est disponible en libre téléchargement. Rappel : n'employez pas ce reset CSS sans avoir parcouru au minimum les indications laissées dans le code complet commenté. Où placer ces styles? Bonus
On Scroll Header Effects with CSS Transitions At the present time, eminent breeders try by methodical selection, with a distinct object in view, to make a new strain or sub-breed, superior to anything of the kind in the country. But, for our purpose, a form of selection, which may be called unconscious, and which results from every one trying to possess and breed from the best individual animals, is more important. Thus, a man who intends keeping pointers naturally tries to get as good dogs as he can, and afterwards breeds from his own best dogs, but he has no wish or expectation of permanently altering the breed. Nevertheless we may infer that this process, continued during centuries, would improve and modify any breed, in the same way as Bakewell, Collins, etc., by this very same process, only carried on more methodically, did greatly modify, even during their lifetimes, the forms and qualities of their cattle. Scroll down
Box-shadow generator Cet outil permet de contruire des effets CSS de type box-shadow effects, pour ajouter des effets d'ombrage à vos objets CSS. box-shadow generator HTML Content CSS Content JavaScript Content Étiquettes et contributeurs liés au document Contributeurs à cette page :kiux Dernière mise à jour par :kiux, CSScomb: Sorting CSS Properties, The Better Way
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in your own projects. In other words, this is a starting point, not a self-contained black box of no-touchiness. If you want to use my reset styles, then feel free! Previous Versions v1.0 (200802) Acknowledgments Thanks to Paul Chaplin for the blockquote / q rules.
Autoprefixer: A Postprocessor for Dealing with Vendor Prefixes in the Best Possible Way By Andrey Sitnik On The following is a guest post by Andrey Sitnik, the creator of the Autoprefixer tool, a "postprocessor" for handling vendor prefixes in CSS. Why use this instead of your preprocessor or another tool? Many reasons. Andrey will explain. Autoprefixer parses CSS files and adds vendor prefixes to CSS rules using the Can I Use database to determine which prefixes are needed. All you have to do is add it to your asset building tool (Grunt, for instance) and you can totally forget about CSS vendor prefixes. Autoprefixer uses a database with current browser popularity and properties support to apply prefixes for you: #The Problem We can, of course, write vendor CSS prefixes by hand, but it can be tedious and error-prone. We can use services like Prefixr and text editor plugins, but it is still exhausting to work with big blocks of repeating code. We can use mixin libraries with preproccesors like Compass for Sass or nib for Stylus. #Under the Hood compiles to: #Demo a { } . #What Next?
SwatchBooker Features Reads color swatches from: Adobe aco, acb, act, ase, acf, bcf, clrAutoCAD acb (unencrypted only!)ColorSchemer csCorel cpl, xml (X5)GIMP gplICC named colors profilesOpenOffice.org socQuarkXPress qcl (+cui)RAL bcsRIFF palScribus xmlVivaDesigner xmlXara jcw Reads gradient swatches from: Adobe grd, clrGIMP ggrOpenOffice.org sogScribus xml Reads pattern swatches from: Adobe patGIMP patOpenOffice.org sob, soh Gets online color swatches from: Writes Adobe aseGIMP gplHTMLOpenOffice.org socScribus xml Colors are managed: you can attach a ICC profile to a color. Supports multiple swatches from the same material. Swatch informations are localizable. Limitations Colors only. Drag and drop is possible only in the tree view. Adobe ASE writing supposes there is not more than 1 group level. Opening big palettes may temporarily freeze the editor. Requirements On Debian based distributions, you need the packages python-qt4 (>= 4.6) python-liblcms (>= 1.18) and python-imaging (>= 1.1.7-2). Terminology Material <?