Random CSS generator with evolution. @ Learning is bateru Posted by Larry Battle on January 28, 2011 Hey Guys, What if you could just write HTML and have the CSS generate itself? Well, this question have been bugging me for while, so I decided to program it. Method: The method in which I did so what the following. I’m think if I applied statistics to see which traces are favorable over all the selected offspring, then the resulting offspring would come out to being more to want the user wants. Issues: Works with Chrome, Firefox and OperaLayout needs some fixing up. Demo: Random CSS generator with evolution Feedback: So what do you think? Be Sociable, Share! Larry Battle Hello, I'm Larry Battle and I love to program, fix problems and discover new technologies. More Posts - Website Follow Me:
50 New Useful CSS Techniques, Tools and Tutorials - Smashing Magazine Advertisement Over the last years we’ve got a pretty good understanding of what CSS does, how it works and how we can use it for our layouts, typography and visual presentation of the content. However, there are still some attributes that are not so well-known; also, CSS3 offers us new possibilities and tools that need to be understood, learned and then applied in the right context to the right effect. In this round-up we present fresh useful articles about less-known CSS 2.1 and CSS3 properties as well as an overview of recently published CSS techniques, tools and tips for designers and web-developers. Learn About Obscure CSS Properties The Little Known font-size-adjust PropertyEver wanted to use fallback fonts on your CSS with different aspect ratios without them looking huge (or tiny)? Demystifying CSS At-Rules CSS at-rules (or @rules) are so-named because they utilize the ‘@’-character. The space combinator Combinators are an overlooked part of CSS development. Useful CSS Techniques
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools CSS frameworks are a Gods send. They speed up development, ensure usability, meet all W3C standards, compatabile across most browsers and a hell of a lot more. Sounds marvelous doesn’t it. Why doesn’t everybody use them? Well, for the novice developer, frameworks, may be a little bit tricky to get there head around? The Blueprint CSS Framework Toolbox “Blueprint is a CSS framework, which aims to cut down on your development time. What does Blueprint offer? A CSS reset that eliminates the discrepancies across browsers.A solid grid that can support the most complex of layouts.Typography based on expert principles that predate the web.Form styles for great looking user interfaces.Print styles for making any webpage ready for paper.Plugins for buttons, tabs and sprites.Tools, editors, and templates for every step in your workflow. The Blueprint CSS Framework Files The framework has a few files you should check out. Compressed files (these go in the HTML): Source files: Scripts: Other:
CSS3 properties exposed | css3files.com CSS Sprites, What is it and How to use it? You’ve probably heard about CSS sprites, but do you know what they really are and why you should use them? A simple answer is that a sprite is a composition of multiple smaller images into one large image. See the thumbnail of this post for an example. It might sound a little counterproductive to create a larger image, because it might take longer to download it right? CSS Sprites – How It Works Image Courtesy: Image Shack Whenever a user comes to your site, the browser has to load each and single one of the images, unless they are already downloaded. If you’re sitting on a low latency network, say 50ms, and the web page has 20 images and other external files, it will take a minimum of 20*50*2 = 2 seconds of additional time to load the page, not counting the image size. Most browsers are capable of downloading multiple resources at a time. That’s not much, but when you include the download speed, it goes up to at least half a second. You’d think 20 images is a lot, but is it really? Apple
Modernizr - Détectez si vos visiteurs supportent le CSS3 et HTML5 Modernizr est une librairie Javascript permettant de tester le navigateur de vos visiteurs et de déterminer quelles sont les propriétés CSS3 et HTML5 qu'il est capable de supporter. Ainsi, avec quelques instructions CSS, vous aurez la possibilité d'utiliser les dernières propriétés CSS3 sur les navigateurs modernes, et proposer une solution alternative aux aux plus anciens. Au chargement de la page, un objet javascript est créé. font-facecanvasbalises audio et videoborder-radiusBackgrounds multipleslocalStorageEtc. En jouant avec les classes CSS, vous pourrez créer des conditions directement dans votre feuille de style, exemple: 02. 03. 04. 05. 06. 07. 08. 09. 2..no-audio #audio { 3. display: none; 5..audio #audio button { 2.if (Modernizr.audio) { Simple et pratique ! Site Officiel
CSS 3 selectors explained In September and October of 2005 I published a series of articles that explained the selectors that are available in CSS 2.1. A quick summary is that most of the selectors described in those articles can be used now in modern browsers like Mozilla/Firefox, Safari, and Opera. We just need to wait for Internet Explorer to catch up before we can start using the full power of CSS 2.1 selectors. The good news is that Internet Explorer will catch up, at least to some extent, with the release of version 7. If we look a little further ahead, there are even more powerful selectors waiting to be implemented and used in CSS 3. Many of the CSS 3 selectors have already been implemented in modern browsers, but in general support is far too patchy for developers to rely on these new selectors. In this article, the specification I am referring to is the Selectors W3C Working Draft 15 December 2005. I am not going to explain the basics of how CSS selectors in general work here. The :target pseudo-class
Five Useful Interactive CSS/jQuery Techniques Deconstructed - Smashing Magazine Advertisement With the wide variety of CSS3 and JavaScript techniques available today, it’s easier than ever to create unique interactive websites that delight visitors and provide a more engaging user experience. In this article, we’ll walk through five interactive techniques that you can start using right now. We’ll cover: Besides learning how to accomplish these specific tasks, you’ll also master a variety of useful CSS and jQuery tricks that you can leverage when creating your own interactive techniques. The solutions presented here are certainly not perfect, so any thoughts, ideas and suggestions on how you would solve these design problems would be very appreciated. So, let’s dive in and start building more exciting websites! 1. The footer of David DeSandro’s website uses extruded text that animates on mouseover. View the demo First let’s set up some text (the code is copied from the original site): <span class="extruded">Extrude Me</span> Styling the Hover State Animating the Transition
101 CSS Techniques Of All Time- Part 1 - Noupe Design Blog Jan 13 2008 CSS has fundamentally changed web design, it has provided designers with a set of properties that can be tweaked to make various techniques to make your pages just look right. Today we are presenting a round-up of 101 CSS techniques designers use all the time. Definitely worth taking a very close look at! This is just the first series , the second part will be coming soon, stay tuned and Enjoy! CSS Sprites CSS sprites save HTTP requests by using CSS positioning to selectively display composite background images. CSS Sprites: Image Slicing’s Kiss of Death- Say goodbye to old-school slicing and dicing when creating image maps, buttons, and navigation menus. CSS Rounded Corners Rounded corners is one of the most popular and frequently requested CSS techniques. Even More Rounded Corners With CSS- Single-image, PNG-based, fluid rounded corner dialogs with support for borders, alpha transparency throughout, gradients, patterns and whatever else you could want. Sliding Doors Homepage
CSS3 Rounded Image With jQuery The other day I was trying to style CSS3 border-radius to image element and I realized that Firefox doesn't display border-radius on images. Then I figured a way to work around it — wrap a span tag around with the original image as a background-image. Thanks to Darcy Clarke for the jQuery code which does the magic tag wrapping automatically. View Demo Rounded Images Goal My goal to use the CSS3 border-radius and box-shadow feature to make the image element look like the screenshot below. Problem The problem is none of the modern browsers display rounded corners image the way I want it. The CSS Trick The trick is very simple: wrap a span tag around the image element. Final Solution With jQuery To make things easier, we can use jQuery to automatically wrap a span tag around the image. The jQuery code below will find any element with ".rounded-img" or "rounded-img2" (in my case, it is the image element) and wrap it with a span tag. Sample Usage I hope you will find this trick useful. Credits