background preloader

Our Solar System — An experiment with CSS3 border-radius, transforms & animations.

Our Solar System — An experiment with CSS3 border-radius, transforms & animations.
Related:  astrologie

- A S T R O L A B O . com » 2 simulateurs du système solaire au format flash Loading ... Affiché 2&357 fois Merci à Toutiet pour le tuyau. La première est un simulateur du système solaire manipulable avec la souris. La seconde est une autre simulation du système solaire. Télécharger les 2 simulateurs de système solaire - swf (142) – 174 ko source

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. 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 The spring in the antennae and the tie are rendered with a point cloud rendering method. Clouds rendering This results in the 3d cloudscape in the background. - Center y

Les ombrages en CSS3 - Alsacréations Grâce à des propriétés telles que box-shadow, text-shadow et border-colors, les feuilles de style offrent la possibilité de créer des ombrages sur les différents éléments de votre page sans nécessiter d'image décorative et de découpes intempestives. Tout n'est pas rose puisque certains navigateurs à la traîne ne reconnaissent pas encore ces différentes propriétés et nécessitent des adaptations personnalisées. Faisons le tour du propriétaire... Box-shadow La propriété CSS box-shadow a été incluse dans le module "borders" de CSS3 et permet de générer une ombre portée sur n'importe quel élément HTML. Parmi les différentes valeurs utilisables, il est possible d'indiquer le décalage vertical et horizontal ainsi que la force du dégradé. En voici une illustration (Voir le résultat sur votre navigateur) : Syntaxe Compatibilité et utilisation concrète Seuls les navigateurs modernes, reconnaissent la propriété box-shadow. Adaptation pour Internet Explorer <9 Le filtre Shadow Le filtre Glow La syntaxe :

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ɔ Solar System Scope Trent Walton CSS3 : la transparence de couleur avec RGBa - Alsacréations Le module de couleurs de CSS3 introduit la notion de transparence dans les valeurs associées à une couleur, l'écriture RGBa. Cette composante de la couleur permet de jouer sur les effets d'opacité entre les différentes couches d'éléments HTML. Contrairement à ce que l'on peut croire, le principe de la transparence RGBa est radicalement différent de la propriété opacity (également CSS3 mais assez ancienne déjà) : cette dernière est une propriété qui s'applique à l'élément dans son intégralité (ainsi qu'à tous ses descendants) tandis que RGBa est une valeur qui s'applique à une propriété de l'élément sélectionné uniquement. De ce fait, RGBa est susceptible de s'appliquer à toutes les propriétés dont la valeur peut être une couleur : background-color, color, border-color, box-shadow, text-shadow, etc. Voici une illustration du principe de transparence de la couche Alpha (RGBa) (Voir le résultat (RGBa) sur votre navigateur) : Principe de la notation RGBa <div><h1>Joli titre</h1></div>

Related:  CSS3daf