Animaciones CSS3 avanzadas
He estado impaciente para darme la libertad de investigar y escribir algo más avanzado utilizando CSS3 y animaciones, ya que el soporte de ciertas propiedades están más extendidas y si las comenzamos a utilizar en nuestros proyectos podemos forzar un poco la adaptación de estos nuevos estándares. Mi idea no es utilizarlas aún al 100%, sino que entregando una alternativa para navegadores menos avanzados en estas propiedades (existen algunos frameworks que lo están permitiendo, ver enlaces al final). En este artículo les mostraré un par de propiedades que pueden marcar la diferencia ente lo que pensabas conocer sobre CSS y lo que se pretende sea la capacidad nativa de los browsers de permitirnos interacciones mucho más ricas y lo mejor, y más rápidas. * He intentado sin buenos frutos hacer andar por lo menos un par de ejemplos en IE9 y no hay caso, seguiré investigando Transiciones 4+ & Mobile Ver ejemplo 1 Ver ejemplo 2 Transformaciones 3D Ver ejemplo 3 Ver ejemplo 4 Ver ejemplo 4.1 Ver ejemplo 5
Automatic jQuery site subscription lightbox
I’ve had many of you email me asking for a tutorial that shows how to create the subscription lightbox that activates for the first time you visit the site, and I’ve finally got around to writing it up. Getting Started You’ll need to include the jQuery library as well as the Colorbox lightbox JS and CSS which are included in the download below. The JS Code Once the page loads we check to see if the cookie exists and hasn’t expired. The HTML Here’s the HTML for the lightbox. <a href="#" class="open_popup">Click here to open the popup</a><!
Apple CoverFlow Design with CoverScroll jQuery Plugin
Cover Flow is an animated, three dimensional graphical user interface integrated within iTunes, the Macintosh Finder, and other Apple Inc. products for visually flipping through snapshots of documents, website bookmarks, album artwork, or photographs. Cover Flow is browsed using the on-screen scrollbar, mouse wheel, gestures, or by selecting a file from a list, which flips through the pages to bring the associated image into view. Here we have CoverScroll jQuery plugin, which is a CSS3 variant of the Apple’s CoverFlow design pattern. It’s very handy if you would like to showcase some pictures in this way. Requirements: jQuery Framework Demo: License: License Free
untitled
Source code: Documentation: Introduction Constructive Solid Geometry (CSG) is a modeling technique that uses Boolean operations like union and intersection to combine 3D solids. This library implements CSG operations on meshes elegantly and concisely using BSP trees, and is meant to serve as an easily understandable implementation of the algorithm. All edge cases involving overlapping coplanar polygons in both solids are correctly handled. Example usage: Operations This library provides three CSG operations: union, subtract, and intersect. The solids a and b above were generated with the following code: Combined CSG Example Below is a solid constructed from a combination of operations: The solids above were generated with the following code: Try it! Edit the code below to construct your own solids.
JavaScript language a- z cheat sheet
Here is an A - Z list of some Javascript idioms and patterns. The idea is to convey in simple terms some features of the actual Javascript language (rather than how it can interact with DOM). Enjoy... Array Literals An array literal can be defined using a comma separated list in square brackets. Arrays in javascript have a wide selection methods including push() and pop(). In the example above, the chanceCivilisationCallback callback function is invoked by peakOil. Configuration Object Instead of passing around a bunch of related properties... Use a configuration object The use of a configuration object makes it makes it easier to write clean APIs that don't need to take a huge long list of parameters. Note: The closure is the object literal returned from annoymous function. Constructor Functions (Built in) There are no classes in Javascript but there are construtor functions which use the new keyword syntax similar to the class based object creation in Java or other languages. Then...
19 tips y trucos para CSS
El CSS es la manera más perfecta de ponerle estilos y efectos a tus diseños web, y ahora con CSS3 trae más posibilidades de afectar y mejorar tus diseños. Es por eso que aquí te traigo algunos tips y trucos para CSS, para que puedas implementarlos fácilmente en tu diseño web. Cambiar el color de la selección de texto Cuando seleccionas un texto por defecto el texto se convierte en color blanco y el fondo en color azul, pero que pasa si quieres que esto sea diferente en tu web. Demostración Letra capital Con este código puedes hacer que la primera letra de un párrafo sea más grande que las demás: Demostración Enlaces que gradualmente se desvanecen Con este código harás que cuando un usuario ponga el cursor encima de un enlace (en este caso el enlace del título), éste se desvanezca: Demostración Rotar una imagen Este Código CSS te permite rotar una imagen los grados que gustes: Demostración Mover 1px el enlace al hacer clic Demostración CSS3 Media Queries [/css] Demostración Animar una lista de enlaces
jQuery for Designers - Tutorials and screencasts
Lynda com Training - jQuery Projects: Creating an Interactive Map with Chris Converse | Download Free Ebook Video Training
Lynda com Training – jQuery Projects: Creating an Interactive Map with Chris Converse QUASAR | Genre: E-Learning In jQuery Projects: Creating an Interactive Map, Chris Converse shows how to design and create a rich interactive map for a web site using the open-source scripting library jQuery. The course covers creating web-optimized images using the slicing tools in Photoshop, implementing the HTML and CSS to assemble an infographic page layout, and adding interactivity with javascript and jQuery’s fast and concise code library. Exercise files are included with the course. Topics include: * Preparing web graphics * Preparing the base container * Manipulating links with CSS * Adding a drop-down menu * Downloading jQuery and adding interactivity to a project * Creating city details * Overriding click events of anchor tags with jQuery * Enhancing the design with CSS3 [There is hidden content which is only available for our VIP member]. Password default : shytex Related Ebook Video Training
jQuery Fundamentals
jQuery Fundamentals is designed to get you comfortable working through common problems you'll be called upon to solve using jQuery. To get the most out of this site, you'll want to read the content and try the various interactive examples. Each chapter will cover a concept and give you a chance to try example code related to the concept. We highly recommend using this site with the Chrome browser or another browser that supports modern JavaScript features and includes good developer tools. Using the built-in editor Most pages on this site include a built-in editor where you can try out code. Trying the examples Each chapter of jQuery Fundamentals includes example code that demonstrates the concepts being discussed. Let's get to it!
