background preloader

Our Solar System — An experiment with CSS3 border-radius, transf

Our Solar System — An experiment with CSS3 border-radius, transf

Román Cortés For the latest editon of Js1k contest (a contest to create something cool with only 1 kilobyte of Javascript), I’ve submitted an entry with a furry bee with springy antennae and my tie. Check it here. I’ve been pushing the limits of what is possible to render with canvas 2d. As a result, it renders at decent speed only in Chrome with a very fast computer. In case you don’t have one, check out this video capture: Rendering fur For rendering the fur, I’ve used the same method as I previously used in the Christmas Tree I made for a previous js1k edition. For this entry I’ve enhanced and reduced in code size the sprite generation method used in the Christmas Tree, also making it better suited for fur. Color palette Creating a nice color palette with the 1kb limitations of js1k is not an easy task. This piece of code is generating the palette, including the grays needed for the tie: ‘hsla(’+[(j&15)*8-x,(j&15)*6+x+’%',(j<17)*60+(j&15)*7+’%',1]+’)’ Point cloud rendering Clouds rendering - Center y

Mars may not be lifeless, say scientists 6 September 2010Last updated at 13:18 By Katia Moskvitch Science reporter, BBC News The Vikings probed the Martian soil back in 1976 Carbon-rich organic molecules, which serve as the building blocks of life, may be present on Mars after all, say scientists - challenging a widely-held notion of the Red Planet as barren. When Nasa's two Viking landers picked up and examined samples of Martian soil in 1976, scientists found no evidence for carbon-rich molecules or biology. But after the Phoenix Mars Lander discovered the chlorine-containing chemical perchlorate in the planet's "arctic" region in 2008, scientists decided to re-visit the issue. Continue reading the main story “Start Quote This doesn't say anything about the question of whether or not life has existed on Mars” End QuoteChris McKay Nasa's Ames Research Center They travelled to the Atacama Desert in Chile, where conditions are believed to be similar to those on Mars. Surprising result

curator's ǝpoɔ CSS3 Gradient Buttons Last week I talked about Cross-Browser CSS Gradient. Today I'm going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. What Is So Cool About These Buttons? Pure CSS: no image or Javascript is used. Preview The image below shows how the button will display in different browsers. Button States normal state = gradient with border and shadow styles. hover = darker gradient active = gradient is reversed, 1px down, and darker font color as well. General Styles For The Button The following code is the general styles for the .button class. For more details on border-radius, text-shadow, and box-shadow, read my article The Basics of CSS3. Color Gradient Styles The code below is the CSS styling for the orange button. How To Use My Buttons?

Trent Walton Kuiper Belt world measured in star pass 16 June 2010Last updated at 19:46 By Katia Moskvitch Science reporter, BBC News The Kuiper Belt is home to several dwarf planets, one of which is Pluto Astronomers say they have observed, for the first time, a distant icy world orbiting beyond Neptune as it passed briefly in front of a bright star. This "stellar occultation" occurs when a planetary body hides a star as it moves across the sky. A US-led team of 18 astronomy groups used the occasion to study KBO 55636 from the Kuiper Belt on the outskirts of the Solar System. They tell the journal Nature that the occultation lasted only 10 seconds. But this was enough time to determine the object's size and albedo, or reflectivity, the team said. The Kuiper Belt is a collection of space objects, remnants from the Solar System's formation. These objects lie beyond the orbit of the Solar System's most remote planet, Neptune. Space impact The Kuiper Belt is home to several dwarf planets, one of which is Pluto. High albedo

Solar System Scope Snazzy Hover Effects Using CSS With all these CSS3 effects and tutorials popping up every day that show all the new and wonderful things we can make happen, we sometimes forget about poor little old CSS2.1 and the great potential it still has. With very good browser support, we can do lots of cool things that we know will work in all major browsers. In this tutorial, I will be going over creating flexible advanced hover techniques using CSS2.1 properties. Here is a live demonstration of the effect we will be creating. Advanced hover states are quite simple When I first started learning CSS, the :hover pseudo-element was no more than a way to remove the underline on a text link. Since then, through experimentation, I have learnt that it is so much more powerful and it can create some really cool effects when used in conjunction with other CSS properties. The astute reader will see that this technique has great potential outside of what we discuss here, such as showing CSS tool tips when hovering over a hyperlink. <! Wrap up

Related: