« — Au secours, mon écran apparaît sur le mur et reste noir sur le moniteur !
— Rhaaa !!! Le vidéo-projecteur s'allume, mais n'affiche rien !
— Oh-là-là ! J'ai des fenêtres qui ne s'ouvrent plus !
— Mais où est passé mon curseur de souris ?!!! »

… Autant de pannes qui ont toutes pour origine l'ignorance d'un simple raccourci clavier Windows !

Le comportement du vidéo-projecteur sur ce point dépend :

1. Du paramétrage de la machine,
2. Du paramétrage du vidéo-projecteur,
3. De l'ordre d'allumage entre PC et vidéo-projecteur.

Aussi, mieux vaut connaître la manipulation permettant de rectifier cela, et elle est (heureusement) très simple, et fonctionnelle que le PC soit fixe ou portable :

Choisir le bon mode d'affichage avec Windows+P

Il vous suffit d'appuyer sur la touche au logo Windows, et de la maintenir en appuyant sur la lettre "P" (comme "Projecteur").
Cela vous affichera le menu de choix du mode de projection.

Utilisez ensuite les flèches du clavier pour sélectionner le bon mode et validez en passant une ligne (touche Entrée).

Facile, non ? Pour que ce soit encore plus clair je vous explique chaque mode :

Mode 1 : Affichage sur le moniteur du PC uniquement

C'est le mode où le vidéo-projecteur n'affichera rien (écran noir), au contraire de votre moniteur de PC.
Ce mode est utile pour masquer temporairement au public ce que vous faites à l'écran.

Mode 2 : Affichage identique sur le moniteur et le vidéo-projecteur

C'est l'affichage le plus courant. Mais attention : la taille de l'affichage (résolution) sera la même sur l'écran et sur le vidéo-projecteur. Et il peut se faire que le texte soit trop petit ou que l'écran soit distendu en hauteur ou en largeur.
Ajustez la résolution de l'affichage dans le Panneau de Configuration ou s'il est désactivé, voyez dans la barre de notifications si vous ne pouvez pas le faire depuis l'assistant de votre carte graphique.

Mode 3 : Affichage prolongé sur la droite, depuis le moniteur vers le vidéo-projecteur

C'est un mode qui surprend beaucoup le débutant. En fait, c'est comme si le vidéo-projecteur était votre second écran sur la droite : vous pouvez alors y glisser vos fenêtres pour les rendre visibles à votre public, mais celui-ci ne verra rien de votre moniteur. Ce peut être très pratique pour lire des notes sur son moniteur durant un diaporama vidéo-projeté, par exemple.

Souvent, la résolution d'affichage peut être différenciée, et ce peut être très appréciable d'avoir une taille différente sur la projection par rapport à celle du moniteur.

Lorsque le projecteur est éteint, il arrive parfois que le système reste sous ce mode. Et certaines fenêtres s'ouvriront alors sur l'affichage absent (invisibles à l'écran), ou votre pointeur disparaitra sur la droite. Dans ce cas, faites Windows+P et sélectionnez le bon mode.

Mode 4 : Affichage sur le vidéo-projecteur uniquement

Le dernier mode permet de transférer l'affichage du moniteur vers le vidéo-projecteur. Votre moniteur affichera donc un écran noir et vous devrez faire vos manipulations en regardant la projection. En fait, celle-ci remplace votre écran.

Astuce bonus : Comment faire un zoom sans utiliser le vidéo-projecteur ?

Beaucoup d'enseignants me demandent comment zoomer efficacement lors de leurs démonstrations. Le plus simple est d'utiliser l'outil de Windows :

Pour l'afficher, appuyez sur la touche au logo Windows, et maintenez-là en appuyant sur la touche du signe plus (+).

Notez qu'au bout de quelques secondes, la fenêtre de la loupe se transforme en icône transparente. Il vous suffira de cliquer dessus pour retrouver la fenêtre.

Dans le volet Affichage, vous aurez le choix entre trois types de zoom :

• Plein écran : le zoom affecte tout l'écran.
• Loupe : le zoom apparaît dans une fenêtre autour du pointeur de la souris (comme une loupe) et laisse visible le reste en proportions normale.
  
• Ancré : le zoom apparaît dans une moitié d'écran (vous pouvez déplacer la ligne de séparation), l'autre moitié reste en proportions normale.
  

Pour zoomer d'avantage, faites à nouveau la combinaison des touches Windows et Plus (+). Pour dé-zoomer, faites Windows et la touche Moins (-).
Pour fermer l'outil, cliquez sur la croix dans le coin de la fenêtre ou faites un clic droit sur le bouton de fenêtre dans la barre de tâches et cliquez sur "Fermer la fenêtre". On ne peut pas plus simple !

Pour plus d'infos sur l'utilisation de cet outil, vous pouvez consulter l'aide en ligne.

Bonnes démos à toutes et à tous !

Si vous êtes à la recherche de matériaux à recycler pour vos bricolages, vous avez peut-être intérêt à demander les déchets de l'informaticien. Voyez ce que l'on jette régulièrement, du déchet le plus régulier au plus rare :

• Des cartouches d'encre et tonner (voir si c'est l'intendance qui s'en occupe)
• Du plastique d'emballage
• Des cartons
• Du polystyrène
• Des catalogues/brochures et manuels de matériel informatique
• Des serre-fil (petits fils de fer souples et enrobés de plastique)
• Des CD hors d'usage ou inutiles
• Des petits élastiques
• Des capuchons de câbles VGA
• Des petites vis
• Des claviers HS
• Des souris HS
• Des câbles HS (essentiellement du RJ45 et du VGA)
• Des périphériques internes HS : cartes électroniques (mémoire, réseau, wifi, graphique… ), disques durs, lecteurs…
• Des UC HS ou obsolètes
• Des écrans HS ou obsolètes
• Des vidéo-projecteurs HS

Cette liste est juste à titre d'exemple, elle dépendra bien-sûr de la politique d'investissement, de la taille des établissements, etc.

Je trouve dommage que ces déchets ne profitent pas.  Il serait possible, non-seulement de ré-assembler des PC, certes peu puissants, mais fonctionnels. De réutiliser les cartons et le polystyrène pour des collages graphiques ou des maquettes. Mais il est possible par exemple de recycler des touches de clavier pour décorer des pots de crayons, ou un cadre en les collant à la colle chaude. Certains font des boucles d'oreilles ou des mots en porte-clé avec les touches de clavier.
On peut découper les CD en petits carrés et les coller sur une balle/boule pour faire une boule à facette, ou les découper et les tordre (en chauffant) pour en faire des hélices de ventilateur bricolé avec de la colle chaude, un bouchon, un moteur électronique et une prise USB.
Sans compter les sculptures de cartes électroniques pour faire un sapin ou une couronne de Noël, par exemple.

Voici quelques idées en images :

Si vous aimez bricoler, cherchez sur le Web des astuces en associant le nom du matériau avec le terme DIY, par exemple : « polystyrène diy » vous affichera toute sorte de bricolages pour recycler le polystyrène.

Bonne récup !

Après de la 3D et un trait de contour, c'est maintenant une ombre portée en diagonale que nous allons générer sur du texte en CSS, toujours grâce à la propriété text-shadow.

Avez-vous déjà vu (...) ce genre d'ombre dans des apparences de type flat-design ?

Foo!

C'est trop chou, non ? Eh bien je vais vous expliquer comment la reproduire sur votre numéro de pagination !
Libre à vous ensuite d'appliquer l'effet sur d'autres éléments comme des boutons, des titres, etc.

20 ombres à la suite

Le principe est quasiment le même que pour l'effet 3D : multiplier les ombres avec un pixel d'écart à chaque fois.
La différence ici, c'est que l'on devra en ajouter assez pour que l'ombre sorte du cadre de l'élément (son arrière-plan).

C'est parti !

Petite préparation

Nous allons tout d'abord cibler notre élément, qui porte la classe .pagination-current et ajouter un commentaire au-dessus pour plus de lisibilité :

/* Pagination */
.pagination-current{}

Ensuite, nous allons lui appliquer une couleur de fond ainsi qu'une marge interne :

/* Pagination */
.pagination-current{
    background-color: #e55e18;
    padding: 5px;
}

Pour changer la couleur du numéro, il faudra ajouter cette propriété :

color: #fff;

Mon numéro apparaît maintenant en blanc sur fond orange.
Si vous deviez lui appliquer une épaisseur grasse (c'est déjà le cas sur mon thème), il faudra ajouter ceci :

font-weight: bold;

Maintenant, si nous appliquons ce code CSS, nous aurons un petit souci de marges :
En effet, la marge interne se met à couvrir l'espace tout autour, au lieu de déplacer les éléments. Mince alors ! C'est parce que nous avons affaire à un élément ancré dans du texte (balise de type "inline"). Or, le texte possède une hauteur de ligne et un espacement indépendant des marges.

Nous allons donc changer le type de notre balise pour qu'elle ait un comportement normal, en lui ajoutant cette propriété, hop !

display: inline-block;

Un autre problème se présente maintenant : le bloc est décalé en hauteur par rapport au reste de la ligne. Rhooo !
Nous allons donc régler l'alignement vertical avec cette autre propriété :

vertical-align: middle;

Et voilà !
Nous avons donc ce code :

/* Pagination */
.pagination-current{
    display: inline-block;
    vertical-align: middle;
    padding: 5px;
    background-color: #e55e18;
    color: #fff;
}

Passons maintenant à l'effet souhaité :

L'ombre en diagonale

Utilisons la propriété text-shadow, pour réaliser la première ombre légèrement plus foncée que l'arrière-plan, et que l'on décalera d'un pixel en bas et d'un pixel à droite :

text-shadow: 1px 1px #cc4800;

Derrière une virgule, répétons la même ombre, décalée de deux pixels cette fois :

text-shadow: 1px 1px #cc4800, 2px 2px #cc4800;

Et ainsi de suite jusqu'à 20 pixels :

text-shadow: 1px 1px #cc4800, 2px 2px #cc4800, 3px 3px #cc4800, 4px 4px #cc4800, 5px 5px #cc4800, 6px 6px #cc4800, 7px 7px #cc4800, 8px 8px #cc4800, 9px 9px #cc4800, 10px 10px #cc4800, 11px 11px #cc4800, 12px 12px #cc4800, 13px 13px #cc4800, 14px 14px #cc4800, 15px 15px #cc4800, 16px 16px #cc4800, 17px 17px #cc4800, 18px 18px #cc4800, 19px 19px #cc4800, 20px 20px #cc4800;

Voilà l'ombre qui dépasse largement le bord.
Il ne nous reste plus qu'à masquer tout ce qui dépasse, et ce sera avec la propriété suivante :

overflow: hidden;

Voilà, nous avons fini ! Oh-là-là comme c'est zouliii !!!

1  2 3 4 ...

Voici le code complet :

/* Pagination */
.pagination-current{
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    padding: 5px;
    background-color: #e55e18;
    color: #fff;
    text-shadow: 1px 1px #cc4800, 2px 2px #cc4800, 3px 3px #cc4800, 4px 4px #cc4800, 5px 5px #cc4800, 6px 6px #cc4800, 7px 7px #cc4800, 8px 8px #cc4800, 9px 9px #cc4800, 10px 10px #cc4800, 11px 11px #cc4800, 12px 12px #cc4800, 13px 13px #cc4800, 14px 14px #cc4800, 15px 15px #cc4800, 16px 16px #cc4800, 17px 17px #cc4800, 18px 18px #cc4800, 19px 19px #cc4800, 20px 20px #cc4800;
}

Si vous souhaitez changer la couleur, il suffira d'utiliser la fonction rechercher - remplacer de votre éditeur de texte (ou sur le Bloc Note de Windows) pour aller plus vite.

Bon développement !

Vous pensiez que des titres d'articles affichables automatiquement en 3D n'existaient que dans vos rêves ?
Eh bien détrompez-vous ! En CSS3, c'est possible et même sur Eklablog :

Une ombre, plus une ombre, plus une ombre… = 3D !

L'astuce est fort simple à comprendre : il suffit d'utiliser la propriété CSS3 text-shadow, et de décliner les ombres, pixel par pixel, pour former le volume. Car, oui, il est possible de déclarer plusieurs ombres dans un seul et même text-shadow !

Note : Dans un article précédent, j'explique où ajouter votre code CSS pour votre blog Eklablog.

Petit rappel, donc de l'écriture de la propriété text-shadow :

text-shadow: NlargeurMesure NhauteurMesure NflouMesure Couleur;

Le premier chiffre concerne la largeur, le second la hauteur, le troisième l'amplitude du flou (toujours en unité de longueur). Pour ces chiffres, la mesure doit être précisée (em, rem, px…) sauf pour un zéro, et ils peuvent être négatifs (un - devant) pour les ombres vers le haut ou la gauche. Et pour terminer, on note la couleur de l'ombre (fonction rgba acceptée pour la transparence si besoin).

Mais pour notre 3D, point besoin de flou ! Toutes nos ombres devront rester nettes, le flou restera donc toujours à zéro.

Essayons, je vous prie, un effet 3D en bas à droite sur ce titre de couleur orange :

Futur titre 3D

Je crée donc ma première ombre, qui sera plus foncée que la couleur de mon titre :

text-shadow: 1px 1px 0 #873900;

Futur titre 3D

J'ajoute une seconde ombre, un peu plus claire et 1 pixel plus profonde, et je sépare les deux suites de valeurs par une virgule :

text-shadow: 1px 1px 0 #873900, 2px 2px 0 #963F00;

Futur titre 3D

Et je continue comme cela jusqu'à un résultat satisfaisant :

text-shadow: 1px 1px 0 #873900, 2px 2px 0 #963F00, 3px 3px 0 #A74600;

Futur titre 3D

Eh bien rien qu'avec 3 ombres, voilà déjà un titre qui ne manque pas de volume !

Petite leçon de dessin sur les ombres (c'est cadeau ! )

Je me permet cependant de vous rappeler quelques notions d'éclairage :

Le dégradé de votre ombre dépend, non-seulement de l'orientation de votre éclairage, mais aussi de la clarté de votre fond.

Si nous avons un fond sombre, le dégradé de l'ombre propre ira de clair à foncé comme ceci :

Si au contraire, nous avons un fond clair, l'ombre propre sera éclaircie par le fond. Il sera donc plus approprié d'inverser le dégradé :

Voilà ! C'était le chapitre de monsieur-j'étalle-mon-savoir-inutile.

Un générateur de code CSS en ligne

Trop compliqué de coder soi-même ? Faites appel à un générateur  :

Sur celui-ci, cliquez sur le bouton "Realistic 3D" et choisissez vos couleurs avant de copier le code généré.

Et quid des blocs ?

Les zones HTML aussi peuvent être transformés en 3D : bloc, bouton, etc.

Il suffit d'utiliser la propriété box-shadow ! Je vous laisse étudier l'affaire tout seuls comme des grands.

Amusez-vous bien !

En CSS, on connaît bien-sûr les bordures autour des éléments. On sait aussi faire des arrondis. Mais ajouter une bordure autour des lettres d'un texte ou d'un titre, c'est déjà moins évident. Mais c'est bien-sûr possible… Avec plusieurs ombres sur le même texte. Ce sera l'astuce du jour :

Une ombre, deux ombres, trois ombres…

Avant d'entrer dans le vif du sujet, un petit rappel s'impose :

La propriété CSS pour réaliser des ombres pour du texte se nomme text-shadow et a l'avantage de pouvoir comporter plusieurs séries de valeurs : il suffit de les séparer par une virgule.

Par exemple, si je veux une ombre cyan en bas et une ombre magenta en haut d'un titre, je n'ai qu'à écrire les valeurs pour ces deux cas de figure et séparer chaque suite par une virgule :

h1{text-shadow:0 4px 0 #00ecff, 0 -4px 0 #ff4045;}

Je rappelle la syntaxe ici, pour cette propriété :

text-shadow: NlargeurMesure NhauteurMesure NflouMesure Couleur;}

Le premier chiffre concerne la largeur, le second la hauteur, le troisième l'amplitude du flou (toujours en unité de longueur). Pour ces deux chiffres, la mesure doit être précisée (em, rem, px…) sauf pour un zéro, et ils peuvent être négatifs (un - devant) pour les ombres vers le haut ou la gauche. Et pour terminer, on note la couleur de l'ombre (fonction rgba acceptée pour la transparence si besoin).

Résultat de notre exemple :

Exemple de texte avec deux ombres

Oui, on est d'accord que là c'est moche . Mais c'est juste pour l'exemple.
Notons que le navigateur affiche les ombres dans l'ordre inverse de la lecture du code : la dernière ombre sera affichée derrière les précédentes déclarées. Dans notre exemple, l'ombre cyan à été déclarée avant l'ombre magenta ; ce sera donc l'ombre cyan qui sera affichée devant la seconde.

Technique 1 : une simple règle CSS

Sachez qu'il existe déjà une règle CSS pour ajouter un contour au texte. Il s'agit de text-stroke.

-webkit-text-stroke: 2px;
-webkit-text-stroke-color: #d60;

Malheureusement, elle n'est pas encore supportée par tous les navigateurs Web. C'est son gros désavantage.

Mais visuellement, c'est parfait. Essayez sur Firefox, vous aurez un résultat impeccable :

Texte décoré avec text-stroke

Observez que l'épaisseur de la bordure se répand exactement sur l'axe du contour au lieu de s'étaler à l'extérieur.

À défaut, voici donc deux autres techniques pour remplacer cette propriété :

Technique 2 : répétition d'ombre floue

La première technique consiste à répéter une ombre floue derrière le texte, jusqu'à ce qu'elle forme un aspect opaque.

Le nombre de répétition dépend de la taille du flou. Pour 2 pixels, comptez 20 fois la même ombre. Voici un exemple :

text-shadow: 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60, 0 0 2px #d60;

Résultat :

Texte avec 20 ombres floues de 4px

Notez que cette technique donne un bord peu net, fort arrondi et nécessite beaucoup de répétition pour des bordures épaisses.

Technique 3 : une ombre opaque sur tous les angles

La seconde technique est plus précise :

Elle consiste à réaliser 8 ombres opaques qui iront chacune dans un angle.
Démonstration :

text-shadow: 2px 0 0 #d60, 2px 2px 0 #d60, 0 2px 0 #d60, -2px 2px 0 #d60, -2px 0 0 #d60, -2px -2px 0 #d60, 0 -2px 0 #d60, 2px -2px 0 #d60;

Résultat :

Texte avec 8 ombres opaques sur 2px

Le rendu est plus précis au niveau des angles. Mais un inconvénient apparaît d'autant plus sur les pointes des caractères, que les ombres sont éloignées du texte. Voici un exemple flagrant :

C K X Y

C'est moche, hein ! Pour limiter ce défaut et lisser le tout au pixel près, il faudrait multiplier les 8 ombres par le nombre de pixels de large que fait l'épaisseur du texte.

En revanche, 8 ombres sont largement suffisantes pour un texte d'un pixel de large, ou pour des polices d'écriture bien rondes.

La technique vous paraît trop laborieuse à coder ?
Ne vous cassez pas la tête : utilisez ce générateur de code CSS en ligne.
Il vous fera tout le boulot à votre place ! Merci au généreux développeur qui nous partage son application en ligne.

Bon développement à tous !