background preloader

Hover.css - A collection of CSS3 powered hover effects

Hover.css - A collection of CSS3 powered hover effects
All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place. Licenses Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. Personal/Open Source For personal/open source use, Hover.css is made available under a MIT license: Use in unlimited personal applications Your application can't be sold Your modifications remain open-source Free updates Read full license Commercial For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses. Commercial License Purchase | Read full license Extended Commercial License

Creative Gooey Effects A set of examples that use a gooey SVG filter for creating a variety of different effects for all kinds of website components. View demo Download source Today we are going to show how to use SVG Filters to apply a gooey-like effect to HTML elements. We’ll first cover some basics of the technique and then we’ll demonstrate several creative use cases for common website elements, like menus, apps, selections, paginations and more. Please note that this effect is experimental and is only supported by modern browsers. Let’s first dive into SVG Filters and understand how to apply them. SVG Filters With SVG Filters we can modify a given source graphic with an operation (or more) and create an altered result. feBlendfeColorMatrixfeComponentTransferfeCompositefeConvolveMatrixfeDiffuseLightingfeDisplacementMapfeFloodfeGaussianBlurfeImagefeMergefeMorphologyfeOffsetfeSpecularLightingfeTilefeTurbulencefeDistantLightfePointLightfeSpotLight The result looks as follows: SVG Filters for HTML And we’re done!

55 - CSS3 Animation Effects Demos I created 55 CSS3 animation demos for your website/blog etc. Using CSS3 keyframe property, you can create cool animation effects without using any JavaScript frameworks, CSS3 & HTML5 is helping to solve many web problems in a simple way. For any help visit my website : Related: Elastic Progress If you enjoyed this demo you might also like:

110 CSS Menu Collection of HTML and CSS menu with little JavaScript: accordion, circular, dropdown, fullscreen, horizontal, mobile, off-canvas, side, toggle and sliding. Demo and download code (*zip). Update of November 2016 collection. Slide Accordion Menu Slide accordion menu with HTML, CSS and JavaScript. Swanky Pure CSS Drop Down Menu Pure CSS drop down menu. Accordion Menu Simple accordion menu with HTML, CSS and JavaScript. Accordion Drop Down Menu HTML, CSS accordion menu with jQuery. Side Accordion Menu HTML, CSS, jQuery sidebar accordion menu. Vertical Accordion Menu Using jQuery And CSS3 A sleek vertical accordion menu for your next website/app. Only CSS3 Dropdown Menu CSS3 dropdown menu with vibrating effects. Flat Vertical Navigation A simple flat vertical navigation with multi animated drop down menu. A simple flat vertical navigation with a simple dropdown menu. Circular Menu Rotating circular menu. Rings Navigation Concept Circular Navigation Concept Simple Radial Menu Pure CSS 3D Radial Menu

Timing issues when animating with CSS3 Transitions at Mike Chambers I have been playing around a lot lately with motion graphics created using HTML5 and / or CSS3. One of my favorite new features is CSS Transitions, which makes it super simple to animate element properties between two states. However, I ran into a gotcha the other day, and wanted to make a quick blog post in case anyone else runs into it in the future. Basically, if you change a property that a CSS Transition is monitoring in the same script loop that you add the element to the DOM, the CSS Transition will not take affect. Here is an example that shows the issue, as well as how to fix it. <! First the relevant styles for the CSS Transition: Notice how when you click the example the cirlce just appears on the right, instead of appearing on the left, and then animating to the right as it should. Here is the relevant code that creates the div and updates it position: View / Download Code The solution, is to delay changing the properties that you want to animate by a short time interval.

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.