Using jQuery for Background Image Animations After reading Dave Shea's article on CSS Sprites using jQuery to produce animation effects, I felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too. Changing the position of the background image felt to be the best approach to creating the type of effect we're looking for (and I'm not the first to think so: see the examples at the end of this article). jQuery is a great library for this type of task but out of the box, it can't animate background position properly because of the need to animate two values instead of just one (too bad not all browsers implemented the non-standard background-position-x and -y like Internet Explorer). You'll have to use the Background-Position plugin that is linked in the demo (the original plugin is no longer available on the jQuery site). Previous versions didn't support negative or decimal values properly. The HTML The Basic CSS The Image
7 Principles Of Clean And Optimized CSS Code | CSS Advertisement Some of you may remember the days when 30KB was the recommended maximum size of a web page, a value which included HTML, CSS, JavaScript, Flash, and images. I find with every new project with even the slightest bit of complexity, it’s not long before that 30 KB ideal is well out of my reach. With the popularity of CSS layouts and JavaScript-enriched web page experiences, it’s not uncommon, particularly for large sites, for the CSS files alone to jump well beyond that 30KB ceiling. But there are some principles to consider during and after you write your CSS to help keep it tight and optimized. Optimization isn’t just minimizing file size — it’s also about being organized, clutter-free, and efficient. 1. If you’re not already writing in shorthand, you’re late to the party. Margin, border, padding, background, font, list-style, and even outline are all properties that allow shorthand (and that’s not even an extensive list!). Examples of the font shorthand property. 2. 3. 4.
HTML code tutorials and reference Using CSS to Do Anything: 50+ Creative Examples and Tutorials Apr 21 2008 CSS can powerfully open the doors to a lot of rich and unique techniques. Today we are presenting a round-up of CSS coding, creative approaches and techniques. Definitely worth taking a very close look at! You can also take a look at other 2 articles in this series : So let’s get started and don’t forget to subscribe to our RSS-Feed to keep track on our next post in this series. Styling Lists The Amazing <li>- With a little CSS, the <li> becomes one of the most powerful and versatile tags in a web designer's arsenal. Better Ordered Lists (Using Simple PHP and CSS)- Here is an example where you ditch the traditional ordered list and create your own! Style Your Ordered List- Here is a quick CSS tutorial on how you can use the ordered list <ol> and paragraph <p> element to design a stylish numbered list. List Based Calendar- A simple way to add multiple views to a calendar, so you can view your events in a simple list, or in a month based calendar format. Live DemoView it Here Footers
gotoAndLearn() - Free video tutorials from Lee Brimelow on Adobe Flash Ordenación del CSS Ordenación del CSS 19 feb aNieto2k hace 1880 días en: CSS, Programacion, webdev Recuerdo que hace ya mucho tiempo hablamos con Daniel Mota sobre la cantidad de comentarios en nuestros CSS, pero aún podemos ser más meticulosos con estos ficheros. Podemos definir una ordenación básica que usemos para todos los elementos de nuestros CSS. En Aloe Studio han dividido las propiedades en una serie de secciones (bastánte obvias) que engloban las propiedades ordenadas: Display y flujoPosiciónDimensionesMargenes, Padding, Border,…TipografíaBackgroundOpacidad,Cursores,… De esta forma obtenemos un listado de propiedades ordenadas como esta: Al igual que en el artículo, nunca me ha gustado ordenar las propiedades CSS alfabéticamente, no le encontraba lógica a definir antes el border: antes que la posición. ¿Y tu? Actualización Para complementar la lectura, recomiendo echarle un vistazo a las buenas maneras propuestas por Deziner Folio, son bastánte obvias pero importantes de conocer.
CSS Class CSS Remix | A Fresh Blend of the Best-Designed Web 2.0 Sites HazUnaWeb.com. Tutoriales y manuales de diseño y programacion de paginas web. 53 CSS-Techniques You Couldn’t Live Without | CSS CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. CSS is important. Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time - of course, if you are able to find them in time. Let’s take a look at 53 CSS-based techniques here at Smashing Mag you should always have ready to hand if you develop web-sites. 1. 2. 3. 4. 5 Powerful Tips And Tricks For Print Style Sheets 5. Generated content was first introduced in the CSS2 specification. 7. 8. 9. 10. Stephen Shaw introduces a technique for perfect horizontal and vertical centering in CSS, at any width or height. 11. 12. 13. 14. 15. 16. The web is growing up.
10 plataformas innovadoras para aprender programación Si no aprendemos a programar, nos arriesgamos a ser programados... Programa o sé programado. -- Douglas Rushkoff Creo que a todos aquí nos queda claro que la educación formal, incluso la universitaria, está desfasada si no es que rebasada en su totalidad por Internet. Con esto me refiero a que la educación formal no aprovecha -y a veces ni siquiera (re)conoce- para su beneficio las herramientas técnicas y metodológicas que Internet no está legando. Hablo de herramientas que facilitan y potencian el aprendizaje en términos colaborativos, masivos, autónomos, innovadores, críticos, ágiles, evolutivos y usables. No es un asunto fácil seguirle el paso a la tecnología. 1. Bajo el lema "¿Qué quieres aprender hoy?" 2. Creo que no me equivoco al decir que la comunidad en pro del lenguaje Ruby tiene los tutoriales de aprendizaje de programación más lindos y divertidos de todos. 3. "Aprende lo que sea de quien sea, donde sea". 4. 5. De interfaz limpia y mensaje claro: Aprende a hacer código. 6. 7.
[Ask SM: CSS] Equal Spacing, CSS Font Replacement | CSS Advertisement This is our fourth installment of Ask SM, featuring reader questions about Web design, focusing on HTML, CSS and JavaScript. In this post we’ll cover how you can distribute the horizontal space between elements evenly, how you can achieve maximum sides on images; you’ll also learn best practices for CSS font replacement and answers to a couple of quickfire questions. If you have a question about CSS or JavaScript, feel free to reach me (Chris Coyier) via one of these methods: Send an email to ask [at] smashingmagazine [dot] com with your question.Post your question in our forum.Or, if you have a quick question, just tweet us @smashingmag or @chriscoyier. Please note: I will do what I can to answer questions, but I will certainly not be able to answer all of them. Distributing the horizontal space between elements evenly Antoine Nicolas writes: Do you know how to perfectly and dynamically distribute objects horizontally in a container using CSS? Let’s review the specific goals:
Cocoa Dev Central: C Language Tutorial for Cocoa Learn C for Cocoa This tutorial explains the parts of C you need to get started with Cocoa. We cover most concepts in a page or two instead of an entire chapter. Don't skim. Give your complete attention to each section. You should already know at least one scripting or programming language, including functions, variables and loops. This Cocoa Dev Central tutorial is written by Scott Stevenson Writing tutorials takes a ton of time and effort. Suggested amounts: Useful: $5 | Very Useful: $12 | Priceless: $21 Skills Check Make sure you understand the code below before continuing. function display_area_code ($code) { print ("$code "); } $area_codes[0] = 408; $area_codes[1] = 650; $area_codes[2] = 510; /* this is a comment */ $count = 3; for ($i = 0; $i < $count; $i++) display_area_code ($area_codes[$i]); This example has a function, a print statement, a comment, an array, variables, and a loop. A Sample C Program This is your first C program. Use GCC to Compile host% gcc test1.c -o test1 host% .