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. 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!). CSS Shorthand means that instead of using different declarations for related properties… … you may use shorthand properties to combine those values like so: 2. 3.
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. 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 Forms and Form Elements Footers Image Sprite Navigation
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 Remix | A Fresh Blend of the Best-Designed Web 2.0 Sites 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. 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. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39.
[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. 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? Hi Antoine, this is a classic example of something that is fairly difficult to do in CSS but probably shouldn’t be. The HTML markup: The CSS:
Css Globe | Web Standards Magazine Design A Fresh Blog Theme On The 960 Grid | My Ink Blog CSS Frameworks Up until a couple of weeks ago I never really understood the fascination with using CSS frameworks in web design. They just seemed very limiting and boring. Then I used one. If you have been hesitant to give CSS frameworks a try for similar reasons, I suggest you at least give them a fair shake before you write them off completely. Introduction In this tutorial I’ll show you how to mock up a fresh looking blog theme in Photoshop that is designed to be used within the 960 framework. The Files In order to help you follow along and learn the techniques in more depth, below is the PSD file and a full size preview. Step 1 In some of my past Photoshop mockups and noticeably so for this project, Photoshop has a tendency to fade out colors like they’ve been through the wash too many times. We are going to use the 960 photoshop template that is provided in the download. Step 2 Step 3 Grab the logo you are going to use. Step 4 Step 5 Drop in some text into your search box. Step 6 Step 7
10 Best CSS Practices to Improve Your Code It’s really easy to find yourself wondering how your CSS got to be such a mess. Sometimes it’s the result of sloppy coding from the start, sometimes it’s because of multiple hacks and changes over time. Whatever the cause, it doesn’t have to be that way. Writing clean, super-manageable CSS is simple when you start off on the right foot and make your code easier to maintain and edit later on. Here are 11 tips for speeding up the process, writing CSS that is slimmer, faster and less likely to give you a headache. 1. Just like anything else, it pays to keep yourself organized. It will help you keep the cascading part of CSS in mind and sets your style sheet up to take advantage of style inheritance. Declare your most generic items first, then the not-so-generic and so on. Use a structure that works best for you while keeping future edits and other developers in mind. Resets and overridesLinks and typeMain layoutSecondary layout structuresForm elementsMiscellaneous 2. 3. 4. 5. 6. This: 7. 8. 9.
11 iPhone apps esenciales para diseñadores Si sois diseñadores y tenéis un iPhone, muchas veces habréis pensado que aplicaciones son las mejores para diseño y desarrollo web. Para no tener que irlas buscando por App Store, aquí os mostramos una excelente recopilación de aplicaciones para iPhone sobre diseño web y desarrollo que ayudará a más de uno y le ahorrará tiempo: 1. Loupe 2. 3. 4. 5. 6. 7. Igual que os presentamos una recopilación de referencias CSS, aquí tenéis la aplicación para iPhone. 8. 9. 10. 11. Vía | Designer-Daily
Free CSS Drop-Down Menu Framework - LWIS.NET Description Free CSS Drop-Down Menu Framework was first released back in June, 2008. Since then it has struck the audiences with its perfect cross browser performance and wide variety of drop-down menu transformations and themes. As the internet changes this project remains a steady advocate of purely CSS driven solutions. Modular, with themes. Frequently Asked Questions Q.Why are you using CSS property visibility and not display in order to reveal and hide drop-down menus? In my tests some versions of IE7 did not handle display property correctly. Now you will be able to manipulate your drop-downs with JavaScript (use animations, etc.). Q.How do I center the menu horizontally? There is no reliable cross browser solution to center those floating menu items. Please refer to the two available demo templates illustrating horizontal menu centering - MTV.com and Adobe themes. Q.I have a flash object below my drop-down menu and those drop-downs appear behind the flash. Q. A. Q. A.
CSS Differences in Internet Explorer 6, 7 and 8 « Smashing Magazine Advertisement One of the most bizarre statistical facts in relation to browser use has to be the virtual widespread numbers that currently exist in the use of Internet Explorer versions 6, 7 and 8. As of this writing, Internet Explorer holds about a 65% market share combined across all their currently used browsers. In the web development community, this number is much lower, showing about a 40% share. The interesting part of those statistics is that the numbers across IE6, IE7, and IE8 are very close, preventing a single Microsoft browser from dominating browser stats — contrary to what has been the trend in the past. Thanks to the many available JavaScript libraries, JavaScript testing across different browsers has become as close to perfect as the current situation will allow. This article will attempt to provide an exhaustive, easy-to-use reference for developers desiring to know the differences in CSS support for IE6, IE7 and IE8. This article does not discuss: Child Selectors Example
960 Grid System