How to Create a Beautiful Icon with CSS3. Today, I'd like to show you a neat trick.
We'll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element. The Game Plan Create a square boxRound the edgesUse pseudo elements to create a curled cornerCreate the illusion of text with a striped gradient Let's get started! Step 1: Create a Box We'll begin by adding our single HTML element: an anchor tag. Let's set the somewhat arbitrary dimensions for our icon. Note that, above, we're setting a positioning context in order to work with pseudo elements shortly.
Next, let's add some shine using CSS box shadows. So Far, We Have: Step 2: Rounded Corners Next, we need to create a rounded corner effect. By passing four values, we can specify the top, right, bottom, and left radii, accordingly. Which Gives Us... Step 3: One Curled Corner To create the illusion of a curled corner, we'll use generated content, or pseudo elements. First, add content :before our icon. Tada! Step 4: Adding Lines. Géolocalisation en HTML5. Tutoriel issu de ma présentation à la KiwiParty 2011.
La géolocalisation fait partie des API gravitant autour de HTML5 (Geolocation API Specification) et des nouvelles fonctionnalités introduites par la mobilité. Ses usages sont nombreux et souvent corrélés avec des bases de données de renseignements géographiques : Plans/cartes, calculs de position et d'itinéraires Renseignements locaux en mobilité (points d'intérêts proches) Résultats contextualisés sur les moteurs de recherche Méta-informations jointes aux photos/vidéos De quelles informations a-t-on besoin pour se géolocaliser ?
Dans l'espace, trois coordonnées sont nécessaires : Une quatrième coordonnée peut être prise en compte pour les puristes : le temps. L'API donne aussi accès lorsqu'il y a déplacement à la vitesse et à la direction (en ° par rapport au nord géographique). De quels moyens dispose un navigateur pour se géolocaliser ? Disponibilité de l'API ? L'API repose sur l'objet geolocation membre de navigator. Confidentialité <! Animation Using CSS Transforms < CSS. Tweet363 Shares Share0 Tweets37 Comments The examples on this page will work now in Firefox, Safari, Chrome, Opera and Internet Explorer 10.
In older browsers you will see either no effects, or the transforms taking place without any animation. The animations presented below involve setting up a transformation to take place in response to a mouseover or other event. Then, rather than applying the effect instantly, we assign a transition timing function which causes the transformation to take place incrementally over a set time period. There are also other kinds of animation available, including @keyframes for perpetual motion, and requestAnimationFrame which gives complete control over the timing and path.
Firefox and Opera now support these transforms with an almost identical syntax - just replace -webkit- with -moz- or -o- in the examples below. Internet Explorer 10 supports transitions with no prefix. To support all modern browsers, the following styles should be used for transitions: Box-shadow, one of CSS3′s best new features. Home / CSS3 Previews / Box-shadow, one of CSS3’s best new features The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.
Browser support is growing of late with Mozilla (Firefox), Webkit (Safari/Chrome/Konqueror), Opera and the IE9 Platform Preview all offering a decent implementation of the spec, although Mozilla and Webkit still require their respective -moz- and -webkit- prefixes (note Mozilla Firefox 4.0+ no longer requires the -moz- prefix). Here’s a basic example: Firefox, Safari/Chrome, Opera and IE9 users should see a grey fading shadow under this box. In theory, the code for this is straightforward: But for the moment, as with many other ‘experimental’ CSS3 properties, you’ll need to use the following prefixes to support Mozilla and Webkit: How it Works The Syntax: