background preloader

Creative CSS3 Animation Menus

Creative CSS3 Animation Menus
Being in the mood for experimenting with CSS3, I'd like to show you some creative menu hover effects in today's tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We'll be exploring some different effects for the elements. View demo Download source Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. The icons used in the demos are actually a Web Symbols typeface that we’ll include with @font-face. The Markup The HTML structure for the menu will be an unordered list where each item is a link element that consists of an icon span and a content div that will contain the main title and the secondary title: The CSS Example 1

http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/

Related:  HTML & CSS

Full-Screen Pushing Navigation in CSS and jQuery A full page menu, that replaces the current content by pushing it off the screen. Browser support ie Chrome Firefox Safari Opera 9+ We recently came across the beautiful Hello Monday redesign. Original Hover Effects with CSS3 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 Please note that this will only work properly in modern browsers that support the CSS3 properties in use.

CSS3 Minimalistic Navigation Menu Martin Angelov As you have probably heard by now, CSS3 animations are a powerful tool, which enables you to create animations which run without the need of applying additional scripting to the page. What is even better, in the next generation of browsers we will have even more powerful tools, including 3D transformations (already present in Safari). But what difference does it make for us today? At the moment only three browsers give you the ability to animate CSS properties – Chrome, Safari and Opera, which together take up only a small part of the browser market.

A Collection of Page Transitions A showcase collection of various page transition effects using CSS animations. View demo Download source Today we’d like to share a collection of creative page transitions with you. We’ve put together a couple of animations that could be applied to “pages” for creating interesting navigation effects when revealing a new page.

Subtle Click Feedback Effects A set of subtle effects for click or touch interactions inspired by the visualization of screen taps in mobile app showcases. The effects are done with CSS animations mostly on pseudo-elements. View demo Download source Recently, many cool interaction effects have been created that follow Google Material Design principles somehow. One of the great little effects seen around is the ripple click effect, also called click waves. While these effects are based on the place you click or touch, the whole idea of providing a subtle feedback effect is really interesting.

CSS3 Loading Animation Loop Hi folks, this time we’re going to see and create three CSS3 animation loop, can be used in many fields, such as preloader for images with jQuery. I remember this animations are only visible in Firefox, Safari and Chrome. Let’s see how to create it. First Example CSS3 Loading Animation Loop In this first example, create only two div and thanks to the border-radius property, they will take the circle shape. For the CSS style is very simple, just play with the parameters for the graphic you want, as regards the animation simply use the transform:rotateproperty. Create Vimeo-like top navigation I really like the top navigation implemented on Vimeo.com. First time I saw it I wanted to recreate it. And this is exactly what I am going to do in this tutorial. Nifty Modal Window Effects A set of experimental modal window appearance effects with CSS transitions and animations. View demo Download source Today we want to share some ideas for modal window effects with you.

C XML Schema If you want yours listed here, please send an announcement to xmlschema-dev. Recent changes / news: 2010-01-05 generate bindings from XML Schema 2009-11-19 Python XML Schema Bindings 2008-01-06 Visual Schema 2007-12-12 Stylus Studio 2008 released 2007-11-13 CodeSynthesis XSD/e 2.0.0 released 2007-11-04 Saxon 9.0 2007-10-23 Liquid XML Studio 2008 2007-10-17 Intel XML Software 2007-09-20 XSD/e version 1.1.0 2007-09-17 XMLSpy/Altova 2007-09-03 Xerces-C++ 2.8.0 2007-08-22 LMX V3.4 2007-08-16 SchemaXpert 2007-08-01 CodeSynthesis XSD 3.0.0 2007-06-05 xchecker 2007-05-17 oNVDL 2007-05-08 oXygen XML version 8.2 2007-01-22 DocFlex/XSD 2006-11-28LINQ to XSD 2006-11-17SchemaAgent 2007 2006-10-18 XSDBench 2006-09-22XmlPad2006-09-21 ITCworks 2006-09-19 xnsdoc 1.2 - XML Schema documentation generator 2006-09-13BRICS Schematools 2006-09-07EditiX

How to Create (Animated) Text Fills A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG. View demo Download source I like to think that the future is already here. CSS3 Hover Effects Hello guys, this time I will show you other five examples of hover effects using different CSS properties compared to the old tutorial posted on Codrops. In summary, we seek the same method but we will act especially using the border property, as we shall see later that allows us to create very particular effects. Please note that this will only work properly in modern browsers that support the CSS3 properties in use.

Related:  WEBamrimann