background preloader

CSS3 : @font-face, vous avez demandé une police de caractère non standard ?

CSS3 : @font-face, vous avez demandé une police de caractère non standard ?
Vous êtes ici > CSS Débutant | CSS3 | Déclarer une police de caractère non standard avec @font-face Longtemps, longtemps, le webmestre s'est lamenté de ne pouvoir utiliser qu'un petit nombre de fontes pour ses sites web. Arial, Helvetica, times new roman... c'était d'un triste ! Ou alors il fallait faire des images. Et mettre du texte en image ce n'est tout de même pas très logique, sans compter les problèmes d'accessibilité qui peuvent en découler. Grâce à @font-face on peut à présent utiliser des polices de caractère exotiques et laisser cours à son inventivité. Règle utilisée : @font-face Fonctionne avec : Chrome, Safari Firefox, SeaMonkey MSIE Opera Le sélecteur @font-face existe depuis très longtemps : depuis les CSS 2.0. La police de caractère, ou plutôt les différents formats de la police de caractère, doit être placée sur le serveur. Il y aura donc les mêmes contraintes techniques et éthiques qu'avec une image : Étape 1 : obtenir tous les formats nécessaires Code CSS Tout est dans le ? Related:  A trier

CSS Gradient Animator CSS3 Grid Layout - Alsacreations Le module de positionnement "Grid Layout" est une spécification du W3C à l'état de Candidate Recommandation dont les premiers jets datent de 2004. Sa documentation officielle est actuellement maintenue par trois contributeurs, dont une personne de Microsoft et une personne de Google. Note : ce tutoriel a été initialement rédigé en février 2012. Les anciennes versions de Mozilla Firefox, Chrome et Opera nécessitent d'activer un "flag" dans la configuration du navigateur; les autres navigateurs sont également intéressés et ne devraient pas tarder à implémenter ce module, au regard des vastes possibilités offertes par ce schéma de positionnement. Comment activer les flags ? Sur Firefox : about:config puis layout.css.grid.enabled Sur Chrome : puis "Activer les fonctionnalités expérimentales de Web Platform" Compatibilité navigateurs du module Grid Layout Le positionnement par grille Les propriétés usuelles de Grid Layout Mise en oeuvre Exemple 2 (grille de 4 emplacements) :

CSS Animation Generator CSS animations were added at the start of CSS3 which allows you to transition from one CSS style to another. To use a CSS animation you will have to start styling the element and a number of keyframes to define the transition from start to end of the animation. Before CSS animation was available, the way you would make an element change styling would be to use JavaScript to change an element's styling properties in a certain order. The advantages of using CSS animation over JavaScript driven animations is that they run smoother than JavaScript, which commonly skipped keyframes. Browser rendering engines are built to work better with CSS animation. They are also easier to develop as all coding of the animation is done in CSS and you just select which properties to change at certain keyframes. Using the CSS animation generator to try out the following range of CSS animations including You can also use the different easing options; ease, ease-in, ease-out, ease-in-out and linear.

Des trajets bon marché en bus et en train au Royaume-Uni, en Europe et en Irlande Create panoramas of a scene with LightWave's Advanced Camera [peteryu.ca] The advanced camera in LightWave is a very flexible camera that can produce lots of interesting effects. One useful feature is that it can create panoramas of your LightWave scene which you can use as environment maps with Textured Environment or as reflection maps. This is a panoramic view of a room with differently coloured walls that was created with the Advanced Camera: I tested this method with LightWave 9.6. Scene Setup I created a basic scene which consists of a box (with all polygon normals facing inwards), whose sides all have different colors. Here is a render with the standard Perspective Camera at the 4:3 aspect ratio, with zoom factor set to 0.5 to show more of the walls: Create a panorama suitable for spherical mapping To use the Advanced Camera, change the camera type to Advanced Camera. Setting the resolution in this way allows the field of view to show the entire scene in a panorama once the Advanced Camera is set up. Using the panorama Fish eye view

DIODON Drone Technology - Le premier drone gonflable Plusieurs modèles DIODON Drone Technology propose un ensemble de solutions sur mesure capables d'emporter une large gamme de capteurs, même les plus lourds. Charge utile disponible : caméra EO/IR fixe Plié : 200x200x100 mm Déplié : 600x600x100 mm Autonomie : jusqu'à 20min Charge utile disponible : caméra EO/IR avec nacelle stabilisée 2-axes Plié : 300x300x150 mm Déplié : 800x800x150 mm Autonomie : jusqu'à 30min Charge utile disponible : caméra EO/IR avec nacelle stabilisée 3-axes, capteurs spécifiques Plié : 400x400x200 mm Déplié : 1500x1500x200 mm Autonomie : jusqu'à 35min Caractéristiques communes Etanchéité : waterproof Résistance au vent : 20kts Temps de déploiement : ‹60s Temps de pliage : ‹60s Accessoires Tablette de contrôle étanche ultra-compact Compresseur électrique autonome Chargeur rapide Sac de transport compact

Correcteurs orthographiques : bien les choisir et les utiliser En tant que chef d'entreprise, la relecture des documents n'est pas chose aisée. Cela demande une concentration particulière et du temps qu'il faut pouvoir dégager de ses activités. Aucun programme n'égale les services d'un correcteur relecteur professionnel, mais, à défaut, des logiciels à l'efficacité croissante peuvent assurer la relecture de vos écrits professionnels ! Rapports, courriers professionnels, interventions sur les réseaux sociaux professionnels... sans être rédacteur, nombreuses sont les occasions de faillir à la langue française ! Les correcteurs gratuits Correcteurs intégrés aux navigateurs Si vous intervenez fréquemment sur des forums, sites web, réseaux sociaux professionnels pour discuter avec vos clients, collaborateurs et prospects ou si vous animez un blog professionnel, les correcteurs des navigateurs peuvent vous prêter main forte lors de vos relectures. Correcteurs intégrés aux suites bureautiques Correcteurs en ligne Bon patron. Les logiciels Antidote Cordial 20 Pro

Correcteur d'orthographe et de grammaire gratuite en français. Désinscrire vos appareils Voulez-vous vraiment quitter le programme de logiciels bêta d’Apple ? Ouvrez la sous-fenêtre des préférences de l’App Store. Accédez au menu Pomme () et sélectionnez Préférences Système. Sélectionnez l’icône de l’App Store dans la liste des icônes Préférences. Désactivez les mises à jour de logiciels bêta. Cliquez sur le bouton « Modifier… » à côté de la mention « Votre ordinateur est prêt à recevoir des versions bêta de mises à jour de logiciels ». Confirmez vos modifications. Une zone de dialogue s’affiche pour vous demander si vous voulez afficher ou masquer les mises à jour de logiciels bêta. Comment restaurer une version précédente de macOS ? Pour revenir à une version précédente de macOS, restaurez votre Mac à partir de la sauvegarde Time Machine que vous avez créée avant d’installer la version bêta publique. Ouvrir vos profils Pour ne plus recevoir de versions bêta publiques d’iOS, suivez les instructions ci-dessous pour supprimer le profil de logiciel bêta d’iOS. Accédez à Réglages.

Comprendre le Viewport dans le Web mobile Le Viewport désigne schématiquement la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau : sur mobile, le navigateur ne dispose pas de "fenêtre" réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile. Comprendre la notion de viewport est absolument indispensable dans un projet d'intégration de site web pour tablettes et smartphones, ou dans un esprit d'adaptation "Responsive Web Design". Les différentes surfaces d'un mobile Afin de mieux cerner et exploiter le concept de viewport sur terminaux nomades, il nous faut commencer par maîtriser deux notions de base : la surface réelle et la surface en "pixels CSS" des mobiles. La surface physique C'est le nombre physique de pixels qui composent la matrice de l'écran, telle que le constructeur le décrit dans les caractéristiques, en gros la "résolution" (en vérité le terme juste est "définition"). Niveau de zoom initial

Related: