Correctif découpe avec contour dans Inkscape

Publié le par
Répondre

Dans un article précédent, je présentait comment, dans le logiciel Inkscape, définir une découpe avec contour.

La technique présentée implique l’utilisation de 2 clones, mais après un essai récent, je me suis aperçu que cela marchait également avec un seul et unique clone

La nouvelle technique

On trace la forme de la future découpe (peut importe le remplissage et les contours), puis on la clone (Alt+D ou Édition>Cloner>Créer clone).

Ensuite, on sélectionne le clone, qui normalement a été créé au-dessus de la forme originale, et les objets à placer dans la découpe, puis on défini la découpe (Ctrl+M ou Objet>Découpe>Définir une découpe).

Si l’objet original avait un remplissage avant les opérations précédentes, vous pouvez avoir l’impression qu’elles ont été faites pour rien. Mais ne paniquez pas !

Sélectionnez l’objet, et attribuez lui un contour en supprimant le remplissage, et voilà !

Cette nouvelle technique présente l’avantage de n’utiliser qu’un seul clone et de faciliter l’édition de la découpe, vu que l’objet original est directement sur les objets découpés.

Inkscape – définir facilement une découpe avec contour

Publié le par
Répondre

Dans ce tuto, pas de code, car j’ai décidé de vous parler d’une astuce avec le logiciel de dessin vectoriel Inkscape.

Du dessin, sur ce blog ?

Oui, car depuis maintenant bientôt 5 ans, je poste quotidiennement sur mon compte Instagram (@geekc) des illustrations réalisées avec ce logiciel.

Continuer la lecture →

Un marqueur personnalisé avec Leaflet

Publié le par
Répondre

Lors de mon tutoriel sur la carte du métro de Paris avec Leaflet, j’ai déjà personnalisé les marqueurs de cette carte, mais comme dans le cadre du tutoriel c’était assez secondaire, je n’ai pas détaillé ce point.

Aujourd’hui est venu le temps de revenir sur la manière d’utiliser nos propres marqueurs sur une carte Leaflet.

Rappel des bases

Avant de parler de la manière dont on crée un marqueur personnalisé avec Leaflet, je pense qu’il serait intéressant de revenir sur la création d’une carte avec un marqueur.

Première étape, créer la carte. Pour cela, il suffit juste d’appeler le constructeur L.map(), en lui fournissant deux paramètres :

  • l’id de la <div> destinée à la carte
  • un objet d’options, dont les plus intéressantes sont center (pour indiquer les coordonnées sur lesquelles centrer la carte) et zoom

    Pour créer une carte centrée sur le point zéro des routes de France, cela donne :

    const map = L.map('map', {
  center: [48.853402, 2.348785],
  zoom: 16,
});
    Continuer la lecture →

    Personnaliser le marqueur d’une carte OpenLayers

    Publié le par
    Répondre

    Dans un tuto précédent sur la réalisation d’une carte à l’aide d’OpenLayers (carte du métro), j’ai utilisé des marqueurs personnalisés, mais comme ce n’était pas l’intérêt majeur du tuto, ne me suis pas attardé sur ce point.

    Et c’est justement sur ce point, la personnalisation des marqueurs d’une carte OpenLayers, que l’on va se pencher aujourd’hui.

    Retour sur la base

    Avant de parler de la personnalisation d’un marqueur avec OpenLayers, je souhaite d’abord revenir rapidement sur la manière de définir ce marqueur.

    Avec OpenLayers, un marqueur est une Feature dont la géométrie est un Point. Et les coordonnées de ce point sont définies via la méthode ol.proj.fromLonLat(), à laquelle on fournit un array contenant la longitude, puis la latitude.

    En prenant en exemple le point zéro des routes de France (sur le parvis de Notre-Dame de Paris), dont les coordonnées en latitude/longitude sont 48.8533973/ 2.3487972, cela donne :

    const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([2.348785, 48.853402])),
});
    Continuer la lecture →

    Comment déclencher n’importe quel événement en JavaScript vanilla

    Publié le par
    Répondre

    Après avoir réussi à automatiser les clicks sur les fortunes de Cookie Clicker (voir ici), par curiosité je me suis intéressé à la première version de ce jeu (voir ici).

    Sur cette version, la première chose que j’ai cherché à automatiser est bien évidemment le click sur le cookie.

    Après un rapide coup d’oeil au code de la page, j’ai trouvé l’id de notre cookie (dans notre cas “cookie”), et j’ai mis en place un classique setInterval pour déclencher un clic, avec notre grande amie la méthode click().

    let legacyCookieClicker = setInterval(() => {
   document.querySelector('#cookie').click();
}, 250);

    Mais cela n’avais par l’air d’avoir d’effet.

    Continuer la lecture →

    Une flip card en CSS

    Publié le par
    Répondre

    Vous avez toujours voulu savoir comment créer un effet de carte retournée (flip card en anglais) ? Cet article est ce qu’il vous faut !

    Le résultat final est disponible ici.

    Structure HTML

    Pour commencer, attaquons nous à la structure HTML d’une carte.

    Pour schématiser, une carte se décompose comme ceci : un cadre, qui contient une planche sur les faces de laquelle il y a ce que l’on veut afficher, et au survol de la souris, on fait pivoter cette planche interne.

    Cela nous donne la structure HTML suivante :

    <div class="card">
  <div class="card_inner">
    <div class="card_face card_back"></div>
    <div class="card_face card_front"><h2>Don't worry</h2><p>Be happy</p></div>
  </div>
</div>

    La classe .card, représente le cadre, la classe .card_inner la planche et la classe .card_face les deux faces de cette planche (avec également une classe différente pour chaque face.

    Continuer la lecture →

    Automatiser le clic sur les fortunes de Cookie Clicker

    Publié le par
    Répondre

    Aujourd’hui, après avoir effectué une ascension sur Cookie Clicker, je me suis dit : “Si je veux débloquer les fortunes (qui apparaissent dans le fil d’actualités), il va falloir encore que je reste attentif devant mon écran…”.

    C’est alors que je me suis demandé s’il n’y avait pas moyen d’automatiser cela.

    La première étape fut d’analyser le code principal du jeu.

    Contrairement à d’autres aspects du jeu (les mini-jeux ou encore les cookies dorés…) le fil d’actualités n’est pas géré par l’intermédiaire de l’objet principal du jeu (Game dans le code du jeu).

    Pour arriver à mon but, il faut donc passer par le code HTML du jeu. Un rapide coup d’oeil à ce code me donne l’ID (commentsText1) de la div qui contient la nouvelle affichée.

    Avec cet ID je peux maintenant le sélectionner avec document.getElementById().

    Continuer la lecture →

    Animer les variables CSS

    Publié le par
    Répondre

    La semaine dernière j’ai rapidement mentionné qu’il était maintenant possible d’animer les variables CSS.

    L’utilité des variables CSS

    Les variables CSS (également appelées « propriétes personnalisées ») permettent de stocker des valeurs spécifiques. Et ces valeurs peuvent être modifiées par des événement JS ou des pseudos classes CSS (comme par exemple :hover).

    Elles se déclarent et se modifient comme ceci : --my-property: 123;, et s’utilisent comme cela : var(--my-property).

    L’intéret de ces variables vient quand on a besoin de préciser un seul paramètre dans une longue déclaration (comme par exemple une position dans une déclaration de dégradé) ou alors pour indiquer une couleur qui peut être amenée à changer et qui est utilisée dans différentes classes.

    Le problème de ces variables, c’est qu’il n’est pas possible de les animer. C’est là qu’intervient la at-rule @property.

    Continuer la lecture →

    Animer un dégradé en CSS

    Publié le par
    Répondre

    La semaine dernière je vous ai présenté comment créer un texte en dégradé avec uniquement du CSS. Aujourd’hui je vais vous montrer comment animer ce dégradé au survol de la souris.

    Le principe

    L’élément sur lequel on veut placer un dégradé ne laisse voir qu’une partie de ce dégradé, et on bouge le dégradé au survol de la souris.

    Continuer la lecture →

    Un texte en dégradé avec CSS3

    Publié le par
    Répondre

    Comme indiqué à la fin de mon gloubi tuto sur le texte en dégradé, il est maintenant possible d’obtenir un résultat similaire uniquement avec CSS3.

    Les techniques CSS utilisées

    Pour réaliser un texte en dégradé avec CSS3, on utilise deux techniques : les dégradés et le découpage d’arrière-plan (propriété CSS background-clip).

    J’ai déjà présenté ces deux techniques chacune dans un article dédié :

    Fusion !

    Il est maintenant temps de rassembler ces deux techniques.

    Continuer la lecture →