HTML - L'URL mailto: L'URL mailto: permet de générer un nouveau mail sans que l'utilisateur n'ait à saisir l'adresse du destinataire. Tous les sites web utilisent ce type de lien : Pour m'écrire : san@antonio.net Le code : <A HREF="mailto:san@antonio.net">san@antonio.net</A> On peut aussi ajouter quelques champs à ce mail : adresses en copie, adresses en copie cachée, sujet du mail et même le contenu du mail ! Pour m'écrire : san@antonio.net Cela a été possible grâce à la syntaxe suivante (à saisir sur une seule ligne) : mailto:san@antonio.net ? Notez bien la présence du caractère ?
CSS3 Patterns Gallery Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients). Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation. Submission guidelines If you have a new pattern to submit, please send a pull request. Does it present a new technique? Windows : une faille 0day rendue publique par un ingénieur de chez Google Microsoft, comme la grande majorité des entreprises travaillant dans le logiciel, préfère que les failles de sécurité lui soient communiquées de manière confidentielle. Tavis Ormandy, ingénieur chez Google, ne l’a pas entendu de cette oreille et a choisi la voie de la démonstration publique pour révéler une brèche de type 0-day, valable dans Windows 7 et 8. Décision radicale et agacement De nombreux chercheurs en sécurité et développeurs trouvent régulièrement des failles de sécurité dans les produits qu’ils utilisent. Visiblement lassé de devoir passer par les services compétents chez Microsoft, l’ingénieur Tavis Ormandy, de chez Google, a choisi récemment de passer par la voie publique. La faille en elle-même ne semble pas spécifiquement dangereuse. Chacun son interprétation de la responsabilité Le point important est finalement la méthode choisie pour révéler la faille. Tout le monde n’est évidemment pas de cet avis. Vincent Hermann
La transparence de couleur avec RGBa en CSS3 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>
12 Excellent CSS3 Button and Menu Techniques | Tutorials 1139 shares 20 Fresh CSS3 Tutorials The design industry is probably one of the fastest changing and growing. Designers have to keep their eyes on everything, including new trends in visual design, as well as interaction technologies like jQuery, HTML5, and CSS3. Designers are using these technologies to express more creativity in design production and make user experience richer. Read More 559 shares Developing Streamlined and Efficient CSS Styles CSS can be compared to the sculptor’s tool set when crafting a sculpture.
La RATP abandonne son projet de péage à reconnaissance faciale Cherchant une alternative plus moderne à l'actuel Pass Navigo qui utilise la technologie NFC, la RATP planchait sur un concept de péage exploitant la reconnaissance faciale des usagers parisiens. Le groupe sentant la polémique monter opère un retour en arrière, abandonnant ce projet. En novembre dernier, la RATP lançait un appel à compétences pour développer un nouveau système de contrôle des titres de transport. Pour se débarrasser du titre de transport physique (ticket, pass navigo...), la RATP imaginait mettre au point un système de reconnaissance faciale. Le principe était le suivant : des caméras auraient "capturé" l'image du visage d'un usager abonné au service de transports en commun, image qui aurait été reconnue par le système grâce à la technologie de reconnaissance faciale. Les fraudeurs, dont les visages n'auraient pas été enregistrés dans la base de données, auraient été fichés et listés dès l'entrée.
Tutoriel Flottement CSS Float Et Superposition Z-index Le positionnement nous offre encore d'autres possibilités afin d'organiser notre page. Après avoir vu le positionnement absolu, fixe et relatif dans le tutoriel précédent, voyons maintenant le positionnement flottant. Les flottants Maintenant nous allons apprendre comment faire flotter des objets. Vous avez par exemple une page pour présenter des personnes et vous voulez mettre leur photo d'identité. Il y a donc un espace blanc à côté de la photo. Code CSS : Puis qu'on parle de journaux, ça nous fait penser aux lettrines. Effet de superposition Z index Toujours sur les manipulations du positionnement, on veut maintenant avoir des effets de superposition pour des blocs qui se chevauchent. Pour cela, nous devons utiliser la propriété z-index. Code XHTML : Le numéro 1 (z-index=1) qui est en rouge est écrasé par le numéro 2 (z-index=2), en vert, le numéro 2 par le 3 (z-index=3) et ainsi de suite. Une question ? A propos de l'auteur Nicolas Galle est développeur indépendant.
How to create slick effects with CSS3 box-shadow – Red Team Design Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop's Blending options. But now, since CSS3 "hit the charts", you don't need Adobe's design tool to add a drop shadow or an inner shadow to a box. Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore. View demo box-shadow property Thebox-shadow property allows you to add multiple shadows (outer or inner) on box elements. <shadow> = inset? Rocket science? Not at all, here's an quick example: box-shadow: 3px 3px 10px 5px #000; This CSS declaration will generate the following shadow: A positive value for the horizontal offset draws a shadow that is offset to the right of the box, a negative length to the left.The second length is the vertical offset. The above theory it's just a small amount, if you want to read more, than be my guest and check the W3C specs. Enough theory, let's see some stuff! Add depth to your body Reference URL Drop shadows Quick tips
Les fondamentaux du Responsive Web Design I. Introduction▲ Prenons deux exemples simples. Le premier pourrait être ces vitres qui s'opacifient en fonction de la luminosité extérieure. Ou encore ces murs-miroirs où plus nous nous approchons, plus ils nous semblent se déformer. Bref, ce que cherchent les architectes dans ce mouvement, c'est de dépasser/s'abstraire des contraintes inhérentes liées aux différents supports. Le « Responsive Web Design » est né, car nous sommes de plus en plus confrontés aux mêmes problèmes que les architectes : s'adapter aux supports. Voyez plutôt : autrefois, nous n'avions qu'un ou deux navigateurs et les tailles d'écrans variaient peu. Et tout cela, c'est ce que nous avons maintenant. II. Pour faire une application Web qui soit Responsive Web Design, nous devons établir les trois points suivants : Si nous faisons une analogie avec l'architecture, les trois derniers points représentent nos outils. Il est heureusement possible de s'adapter pour y parvenir. III. cible / contexte = résultat IV. V. VI. <!
Sexy CSS3 menu – Red Team Design One of the most common elements when talking about a website or an application design is definitely the menu navigation. No matter if vertical or horizontal, simple or complex, a menu is essential and it has to look that way. In today's article, you'll learn how to create a good looking menu using some CSS3 magic. View demo The idea If you are a web developer you may have heard of tools called CSS pre-processors. While visiting LESS's site, I noticed their download button, which is an image, and I thought to myself: I can do it using CSS only. LESS download button - at this time The HTML <nav><ul><li><a href="#"><span>Home</span></a></li><li><a href="#"><span>Categories</span></a></li><li><a href="#"><span>About</span></a></li><li><a href="#"><span>Portfolio</span></a></li><li><a href="#"><span>Contact</span></a></li></ul></nav> Pretty clean, except for the span element. The CSS Removing the default list styles Style the proper links Multiple CSS3 properties were used to create the above.
Un arrière-plan extensible intelligent Certains sites affichent une (grande) image de fond qui s'adapte à toutes les dimensions de la fenêtre du navigateur, proportionnellement, sans la déformer. La réalisation de ce genre de prouesse n'est pas si évidente techniquement, contrairement à ce que l'on pourrait croire de prime abord. Comment fait-on ? Exemples Pour avoir un aperçu de ce que l'on veut obtenir, voici quelques exemples utilisant ce principe : Simon & Comet Flavors me Piz'za-za Le point commun de tous ces sites est la mise en avant de leur background : il est fixe et c'est la pièce maîtresse de leur design. Le principe Comme vous venez de le remarquer, ce n'est pas qu'une simple image de fond qui s'adapte à la fenêtre : il n'y a aucune déformation, le ratio est toujours conservé et lorsque la fenêtre est vraiment étroite le fond est recadré. On est donc loin de ce résultat simpliste qui se contente d'étirer l'image à 100% de son conteneur. Préparation de l'image de fond Après enregistrement, l'image est prête à l'emploi ! <!