C'est quoi l'oblong ?

C'est une figure géométrique à la mode qui est un rectangle en sandwich entre deux demi-cercles

C'est à la mode de chez nous

Comment le dessiner géométriquement ? (Adobe Illustrator)

En associant un rectangle avec deux cercles

1. Dessiner un rectangle
2. Choisir l'outil ellipse
3. Amener la souris au milieu d'un des côtés du rectangle, appuyer en même temps sur ALT/OPTION + SHIFT et tracer un cercle qui prend toute la largeur
4. Dupliquer un autre cercle du même côté (on peux le cliquer-glisser en appuyant sur ALT/OPTION)
5. Les fusionner (fenêtre Pathfinder)

---

En arrondissant un rectangle

1. Dessiner un rectangle
2. Attraper une poignée d'arrondi (les espèces d'yeux) et l'amener au maximum vers le centre.

Code CSS d'un oblong

Il suffit de mettre l'arrondissement de la bordure, le border-radius à infini, personnellement je met à 50rem, ça fait un clin d'œil à 50% et puis c'est très grand, généralement c'est suffisant, méfiance si vous devez en faire un énorme, mettez 5000rem ça ira !
J'ai appris cette technique en regardant l'inspecteur sur material design bootstrap, car il ont une classe qui permet directement de transformer en oblong.

    .oblong{
        border-radius: 50rem ; /* équivalent de l'infini */
    }

Et voici un exemple en direct !

Les deux cousins de l'oblong, le rectangle arrondis et le cercle

Le rectangle arrondi

Utilisé dans Messenger

Facebook Messenger s'amuse à avoir des rectangles arrondis pour les textes de discussions, de telle sorte que si le texte ne fait qu'une seule ligne, cela fasse un oblong. En effet, un oblong est cas particulier de rectangle arrondi.

Dessiner un rectangle arrondi sur Adobe Illustrator

1. Dessiner un rectangle
2. Attraper une poignée d'arrondi (les espèces d'yeux) et l'amener légèrement vers le centre.

Code CSS d'un rectangle arrondi

Il faut mettre un arrondi de bordure de manière absolu (c'est-à-dire par relatif à la forme ou à l'écran, donc pas en %, vw, vh...), personnellement je conseille d'utiliser les rem et d'abandonner les px.

L'astuce ici va consister à ne pas donner une valeur infini au border-radius (arrondi).
Il faut donner une valeur pour le font-size (taille du texte), une pour le padding (marge interne), et de choisir un arrondi qui soit égal à (padding + font-size + padding)/2

De manière mathématique, (padding + font-size + padding)/2 équivaut à (padding + 1/2 font-size).

    .arrondi{
        font-size: 1rem ;
        padding: 1rem ;
        border-radius: 1.5rem ;
    }

    .arrondi{
        $fsz : 1rem ;
        $p : 1rem ;

        font-size: $fsz;
        padding: $p;
        border-radius: $p + 0.5*$fsz ; // (2*$p + $fsz)/2
    }

    // ou pour les paresseux
    .arrondi{
        $tmp : 1rem;

        font-size: $tmp;
        padding: $tmp;
        border-radius: 1.5*$tmp ;
    }

Exemple sur une seule ligne

Exemple
sur
plusieurs
lignes

Redimensionnez-moi

Note : il vaut mieux que l'oblong soit un peu moins prononcé que trop, sinon ça le bouge et ça perd son joli effet.

Ne pas faire

Le cercle

Le cercle est un cas particulier d'oblong

On peux avoir différents effets avec un cercle qui se transformera en oblong, par exemple un bouton circulaire qui se transformera en champs de saisie

Voici un copié-collé du code de l'input (champs de saisie) pour faire ça :

    <input type="text" id="input-oblong" placeholder="Aa">
    <label for="input-oblong">Écrivez dans le texte ci-contre

    #input-oblong{
        border:none;
        border-radius:50rem; /*oblong*/
        box-shadow : 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
        background-color: gold;
        width: 1rem;
        height: 1rem;
        padding: 1rem;
        transition:.3s ease-out;
    }
    #input-oblong:focus{
        width: 5rem;
    }

Lien

lien Wikipédia

---

Bon, je pensais que j'allais faire un article sur les oblongs en 10 minutes... Mais ça a pris plus de 2 heures... Merci de m'encourager en commentant sur Linkedin ! 🌹

Merci d'avoir lu !
Si en général vous avez une question, une curiosité, n'hésitez pas me contacter.