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

Inspiration for Custom Select Elements | Demo 7 Pick your color #588c75#b0c47f#f3e395#f3ae73#da645a#79a38f#c1d099#f5eaaa#f5be8f#e1837b#9bbaab#d1dcb2#f9eec0#f7cda9#e8a19b#bdd1c8#e1e7cd#faf4d4#fbdfc9#f1c1bd If you enjoyed this demo you might also like: Multi-Level Menu Drop-Down List Effects 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!

Quantity Queries for CSS Don’t you just hate documentaries that don’t deliver? They have enticing names like In Search of the Giant Squid, and tease you with shots of murky underwater shapes and excited scientists pointing far out to sea. You settle down to watch, eyes narrowed with suspicion, thinking, “I better see some squid or I’m writing an angry letter to the network.” Article Continues Below Sure enough, 90 minutes of interviews with bored-looking fishermen later, the presenter is forced to conclude, “No… no, we didn’t find any big squids. But maybe one day [majestic orchestral flourish].” I wouldn’t do that to you, friends. Dynamic content#section1 Responsive web design is primarily concerned with one variable: space. The @media query is the darling of responsive web design because it allows us to insert “breakpoints” wherever one layout strategy ceases to be viable and another should succeed it. In this article, I will be outlining a technique to make CSS quantity-aware using specially formed selectors.

Elastic Progress If you enjoyed this demo you might also like: CSS3 Border-Image Explained One of the more powerful new CSS properties, border-image is also one of the best supported, with the exception of (all together now) IE10 and earlier. It is, unfortunately, also one of the most obtuse and difficult to understand. The explanation of how border-image works is perhaps best illustrated graphically. First, let's break down any border into its components: let's imagine an ormolu picture frame, divided up into nine tiles using two horizontal and two vertical lines. In the illustration to the right I've labeled the vertical divider lines V1 and V2, with H1 and H2 for the horizontal. Rather than allowing you to specify a separate image for each part of a border, border-image insists that you create one image, with all the parts in place, and then slice that image up using CSS values that map to the positions of these lines. Let's imagine that we're playing Battleship, and reference each tile created by our divisor lines. border-image: url(image) H1 V2 H2 V1 img.frame {

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.

Stampede Blog - Responsive Bootstrap Push Menu Tutorial Getting bored with the current responsive Bootstrap menu? Or you simply don't want to use Bootstrap 3 dropdown menu on mobile because the menu is just too tall? Bootstrap 3 Mobile Menu Well, why don't you try to use push menu for mobile instead? Bootstrap 3 Mobile Push Menu For this responsive bootstrap push menu tutorial, I'm using Takien's jPushMenu. Before jumping to the tutorial, why don't you check out these demos for Left Overlay, Left Push, RightOverlay, or Right Push? Responsive Bootstrap Push Menu - HTML Here I am using default Bootstrap Navbar with additional classes for push menu to work. Based on the above html, added classes can be found on line 05 (toggle-menu menu-left push-body) and line 15 (cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left). Responsive Bootstrap Push Menu - CSS This is using Takien's jPushMenu.css with some modifications. Responsive Bootstrap Push Menu - Javascript Nothing fancy here, and should be self-explanatory. UPDATE Bootstrap v3.3.0 UPDATE: iOS Fixed

Tab Styles Inspiration Previous Demo Back to the Codrops Article Re-created from Vintage Productions Technique from Slanted tabs with CSS 3D transforms by Lea Verou If you enjoyed this demo you might also like: Arrow Navigation Styles Dot Navigation Styles Coder's Block Blog / Checkbox Trickery with CSS Checkboxes are great. Combine them with the right CSS and you can pull off some really neat tricks. This article aims to showcase some of the creative things you can do with checkboxes. Read on and keep in mind that the demos in this article use no JavaScript. The Basic Formula It all starts with the HTML. Nothing tricky there. Why not display: none? Hiding <input> makes it easier for us to do our own thing. We’re using a combination of the :checked pseudo-class and the + adjacent sibling selector to say “when the checkbox is checked, find the <label> right after it and apply awesome styles”. Alright, let’s see it in action. The best part is, they’re still checkboxes. Hiding/Showing Content So far it’s been all about styling <label>, but we can go beyond that. The :checked pseudo-class works on radio buttons the same as checkboxes. The radio button indicators are rendered within <label> using a combination of ::before (for the outer ring) and ::after (for the green dot). Folder Tree

David DeSandro Project Parfait (Beta) - PSD CSS Extraction, Measurements and Image Optimization Service for the Web Stylie. A graphical CSS animation tool. Stylie is a fun tool for easily creating complex web animations. Quickly design your animation graphically, grab the generated code and go! Watch this screencast for a tutorial. The Stylie Workflow When you open the app, you will see a little ball moving from left to right. Keyframe editing You can add, remove and edit keyframes. "rX," "rY" and "rZ" refer to the three rotation axes, and "s" refers to the scale value. You can tweak individual keyframe properties by pressing the "up" and "down" arrow keys when focusing on a property's text input. Group selection You can select multiple keyframe crosshairs for simultaneous editing by holding the Shift key on your keyboard and clicking the crosshairs. Motion control In addition to the standard easing curves, you can define your own custom curves in the "Motion" tab. Playback control There is a scrubber in the bottom left of the screen. Exporting your animation CSS animations Rekapi animations Saving your animation Keyframe editing with Mantra Author

Drag and Drop Interaction Ideas Some ideas for drag and drop interactions in a UI. The idea is to show a droppable area that stands for certain actions after an element is being dragged. View demo Download source Sometimes we wonder how to pack all those possible actions into a UI. From buttons to drop-downs to menus—there are certainly many possibilities. The demos are just some experimental ideas of how these kind of interactions can be imagined. Please note that this is highly experimental and we only tested it in the latest browser versions. Have a look at a GIF of one of the demos: We hope you enjoyed this experiment and find it inspirational!

Blueprint: Multi-Level Menu A simple multi-level menu with delayed item animations and an optional breadcrumb navigation and back button. View demo Download source Today’s Blueprint is a simple menu with multiple levels. The icons used in the demo are from the Organic Food icon set by Wojciech Zasina and the Feather icon set by Cole Bemis. Please note that we are using a couple of modern CSS properties, so only modern browsers are supported. Browser Support:ChromeSupportedFirefoxSupportedInternet ExplorerSupported from version 10+SafariSupportedOperaSupported The HTML The CSS