• Jouons avec les formes grâce au "border-radius"

    Avec Image carré  border-radius: 50%;

    Avec Image rectangle hauteur>largeur border-radius: 50%; ovale vertical

    Avec Image rectangle hauteur<largeur border-radius: 50%; ovale horizontal

    Avec image carré border-radius: 25%;

    avec image carré border-radius: 150px 50px 150px 50px;

    Avec image carré border-radius: 0px 150px 0px 150px;

    code HTML de l'image ci-dessus avec bordure, radius et ombre

    A mettre dans code source d'un billet <> car ce n'est pas du CSS mais du HTML

    <p><img style="border: 2px solid white; border-radius: 50%; box-shadow: 0px 0px 10px black;" src="http://ekladata.com/XBeiExd3icqh_Uz8xG0zHXFDSV0@254x339.gif" alt="" width="254" height="339" /></p>

     

    « Un hibou avec des élastiques Du changement en ce ki concerce le menu header »

  • Commentaires

    1
    Jeudi 31 Juillet 2014 à 10:09
    Bonjour Rebelle, C'est trés joli....mais c'est pour mettre ou?
    2
    Jeudi 31 Juillet 2014 à 10:45

    Bonjour ma belle.

    C'est tres bien pour moi faire des fonds d'horloges et de jolis boutons.

    Dis moi?...

    Sais tu comment mettre un mini gif animé devant les nouveautés d'un article...

    ex: dans ma rubrique papiers lettres IM, j'ai plusieurs categories...

    Femmes, fleurs etc...

    et je voudrais signaler aux visiteurs que j'ai ajouté de nouveaux pal à fleurs par ex...

    J'ai essayé , mais  ???...pas douée...sniff!

    A moins que ce ne soit pas possible.

    Bisous et merci de ta reponse.

    Evy

     

     

    3
    Jeudi 31 Juillet 2014 à 10:59

    moi je prends Dali cela fera de beau fond d'image en gif où Png

    merci c'est super-sympa ce partage de tes trouvailles,

    bisous bonne journée;

    4
    Jeudi 31 Juillet 2014 à 12:30

    Hello ma Dali,

    J'adore !!!!!!!!!!! C'est vraiment du génie cette astuce,

    Cela me redonne envie de faire des articles tiens...

    Merci merci merci....♥♥♥

    5
    Jeudi 31 Juillet 2014 à 12:59

    Kikou ma Dali , C'est super de pouvoir le faire en html , mais ça on sais le faire aussi avec le css exemple pour ta première image 

    border2px solid white;
    border-radius50%;
    box-shadow0px 0px 10px black;
    }

    le seul hic , c'est qu'en css cela s' applique a toutes les images du blog !

    6
    Jeudi 31 Juillet 2014 à 13:45

    Bonjour et bravo !

    Je vais mettre une lien vers ton article !

    La remarque de Manola n'est valable que si chaque élément à la même identification en CSS.

    Hélas, lorsque je regarde mon tour de taille, ton tire: "Jouons avec les formes" ne s'adapte pas !

    Et pourtant, c'est si agréable de "jouer avec les formes" (pardon mais sourire tout de même !)

    Gilbert

     

    7
    Jeudi 31 Juillet 2014 à 14:55

    Oui tout à fait raison Gilbert , pour la première image il faut qu'elle soit de forme carrée pour qu'elle devienne ronde avec le css ; Si elle est de forme rectangulaire ,elle deviendra ovale .

    En plus, dans les explications que je donne ici plus bas, elles ne sont pas exactes parce que j'ai oublié le sélecteur . Donc voici le code pour le contenu 

    .module_contenu img { border2px solid white ;
     
    border-radius:50%;
     
    box-shadow0px 0px 10px black;
     }

    et ici pour les images de la colonne

    .module_menu_contenu img border2px solid white;
      border-radius50%;
      box-shadow0px 0px 10px black;
      }

    8
    Jeudi 31 Juillet 2014 à 15:37

    coucou Dali

    dés que j ai un moment je vais essayé avec mes photos merci bisous

    9
    Jeudi 31 Juillet 2014 à 16:25

    bonjour
    c'est gentil de m'avoir accepté ,mais je ne sais pas si j'y arriverai
    avec mon ami gilbert avec lequel j'ai beaucoup appris ,mais chez-toi il va falloir que j'étudie
    je te remercie et te souhaite une bonne fin de journée
    bises
    janine

    10
    Jeudi 31 Juillet 2014 à 16:31

    Merci pour elle !

    Cette personne est une personne âgée, qui s'est fait construire son blog par une autre blogueuse.

    Elle voudrait bien en faire plus mais manque d'éléments...

    C'est une personne fidèle en relation et qui est chez moi depuis le début ... ce qui devient rare !

    J'espère que tu sauras l'aider mieux que je ne le fais.

    Gilbert

    11
    Jeudi 31 Juillet 2014 à 17:08

     

    Merci pour ces explications !

    Vous êtes meilleures que moi !!!

    Bisous et bonne fin de semaine,

    Allison

    12
    Jeudi 31 Juillet 2014 à 19:09

    Merci Dali, c'est sympa de préciser qu'il faut le mettre dans un code source d'un billet car je confondais HTLM et CSS, et oui je vieillis des neurones mdr !!!

    bises et bonne soirée.  

    13
    Jeudi 31 Juillet 2014 à 20:55

    Bon, je reviens !

    J'avais déjà commencé une réponse mais j'ai voulu tester une idée ... en vain !

    Je n'ai pas trouvé le moyen de transformer ces images, composées de plusieurs éléments, pour en faire une sélection sur une image de fond.

    On ne peut donc les remplir avec des images... du moins, je ne sais pas !

    Je reste sur une façon de faire, que j'avais présentée: les masques, créés sur Photofiltre.

    Regarde si tu as plus d'idées que moi ... bon courage !

    Gilbert

    14
    Jeudi 31 Juillet 2014 à 21:49

    Merci Dalila le petit nounours je l'ai mis dans un billet en brouillon

    je ferais un billet a la rentrée big bisous merci pour les fonds

    qui serviront surement un de ces quatre bey-bey  Dalila !

    15
    Jeudi 31 Juillet 2014 à 23:05

    Bonsoir rebelle  magnifique tes cadres

    j'aime cette façon de mettre en valeur  les photos

    avec le fameux border-radius :

    je te souhaite une très bonne fin de soirée a bientôt

    pour d'autres articles . a pluche

    cadeau pour toi

    http://ekladata.com/YAcxFQWFQ01yb9gvwjjTLE0NCIo/crea8.png

    16
    Vendredi 1er Août 2014 à 07:35

    Bonjour.

    Le ciel nuageux ne m'a pas empêché de revenir sur le sujet des formes en CSS ... mais sans grand succès !

    Certes, en utilisant ces formes pour faire des masques sur une image de fond, on peut ne laisser apparaître de celle-ci qu'un triangle, par exemple, mais sans possibilité de bordure ou d'ombre .. donc, usage très limité.

    D'autres solutions plus simples sont à notre disposition alors....

    Bonne journée.

    Gilbert

    17
    Vendredi 1er Août 2014 à 13:54

    Bonjour ma douce Dalila

    Merci pour tes conseil, je vais essayer mais je ne sais pas si je vais y arriver je suis pas aussi callée que toi

    Bon 1 août et gros bisous

    Janine

    Divers Animations 6

    18
    Vendredi 1er Août 2014 à 20:37

    ma chère Dali comme je suis toujours en vacances ,je verrais toutes tes astuces au retour ,car là ,c'est soleil , soleil . 

    bonne semaine 

    gros bisous

    19
    Vendredi 1er Août 2014 à 20:56

    Mon homme étant en congés , je serai beaucoup moins présente pendant ce mois d'Août !!!

    20
    Vendredi 1er Août 2014 à 22:49

    les congés qu'elle change cette année je n'en ai pas sniff.

    pas grave je vais travaillé le week-end 

    et la semaine je serais en repos  bonne vacance a toi ci tu pars à

    pluche

    21
    Samedi 2 Août 2014 à 08:41

    Bonjour.

    Ciel gris et internet perturbé !

    Alors, pour les formes que tu m'as indiquées, j'ai bien réussi à publier le coeur et à constater, en bricolant, qu'il est constitué de deux images superposées ce qui fait qu'on en peut y insérer une image facilement.

    J'ai déjà quelques articles paramétrés mais je regarderai ton idée tout à l'heure.

    Je suis toujours en train d'essayer de passer de Linux 13.10 à la dernière version 14.04.

    J'ai lu, avec surprise, que les serveurs (avec leur "cloud")  travaillent avec Linux à 90% alors, que pour les PC individuels, c'est Windows qui est à 90%.

    Les administrations travaillent avec Unix ( sur la base Linux).

    Profites de "ton homme": c'est plus important que l'internet !

    Au plaisir.

    Gilbert

    22
    Samedi 2 Août 2014 à 09:56

    Voilà !

    J'ai ajouté, à mon article de demain, un montage un peu dans ton idée.

    Je repense à ton truc de id="head"

    tu te souviens que si tu mets id="head", en css, c'est #head{

    et si tu écris class="head", en css, c'est .head{

    Gilbert

    23
    Dimanche 3 Août 2014 à 08:56

    Bonjour.

    Alors, on est bien avec les doigts de pied en éventail !

    Bon dimanche.

    Gilbert

    24
    Mardi 5 Août 2014 à 09:40
    Coucou ma gentille Dalila je suis de retour j'espère que tu va bien merci pour ton passage durant ma pause cela ma fait un énorme plaisir de pouvoir te lire on reprend le train train quotidien fini les doigts de pieds en éventail mes on en profitera encore les weekend se mois-ci loll. J'ai lu ton commentaire en dessous et oui ses le monde du net et des blogs de passer sans rien dire on prend et aucun merci beaucoup de monde ne savent plus ses que le respect envers autrui et cela est bien dommage. Passe une agréable journée ensoleillé . Bisette
    25
    Mardi 5 Août 2014 à 18:37

    Bonsoir.

    J'ai préparé quelques montages et surtout, j'ai contacté un pro de Linux Ubuntu pour essayer de comprendre pourquoi une version fonctionne très bien alors que la mise à niveau plante tout... j'en suis là !

    A part ça, beaucoup de visiteurs "messagerie" mais bien peu sur les montages ou codes .. .sniff !

    Bonne vacances !

    Gilbert

    26
    Jeudi 7 Août 2014 à 18:13

    Bonsoir.

    Tout à l'heure, je me suis demandé si j'étais venu te saluer hier; j'ai la flemme de chercher dans les commentaires...

    Un peu démotivé en cette période calme; de plus, je n'arrive pas à avancer avec ubuntu car je ne comprends pas ce qu'il faut faire et ça ...ça m'agace !

    Bonne détente !

    Gilbert

    27
    Mardi 12 Août 2014 à 14:21

    coucou ma belle,

    merci pour l'astuce, je vais essayer,

    belle semaine à toi avec la pluie pour nous,

    gros bisous !

    ♥ belle semaine d' Athos & Cheyenne ♥

    28
    Mardi 12 Août 2014 à 15:58

    et voilà !!! merciiii !

    bisous !

    ♥ belle semaine d' Athos & Cheyenne ♥

    29
    Mardi 12 Août 2014 à 21:16

    Coucou ma belle,

    C'est du html certes, mais ça m'a donné l'idée de modifier du css et c'est pas mal du tout.

    C'est vrai que ça varie les formes et que ça casse la monotonie.

    A consommer sans modération, merci pour ce petit rappel.

    Gros bisous

    A bientôt

    EDMJ

    Ps : bon voyage !

    30
    Mercredi 13 Août 2014 à 23:39

    Ben mazette encore une superbe découverte !! yessss !! encore ! encore !!  kissous

    31
    Jeudi 14 Août 2014 à 14:43

    Bonjour mon amie,

    3 blogs oui !

    Mais les coms... sont plutôt absents...

    Bon allez, ne soyons pas méchante... au moins pour les deux derniers, pfff !

    Les tribulations d'un nuage

    J'espère te revoir, car  mon nuage se sent un peu seul  pffff !

    Gros bisous

    A bientôt

    EDMJ

    32
    Vendredi 15 Août 2014 à 14:32

    coucou ma dali tu ne t'arrête jamais ,mais ta raison donne nous en plein les yeux ,bon j'ai  n'ai pas essayer ,car j'ai rien compris ( lol)et je n'en est pas le temps ,bon je sais que si j'ai besoin de toi tu sera là pour me filer un coup de main,je te souhaite une bonne fin de semain bizzz

    33
    Samedi 16 Août 2014 à 14:11

    Bonjour la vacancière !

    Tu as raison de ne pas ouvrir mon code car il est le premier pour ouvrir, non pas par un bouton, mais par un clic sur l'image !

    En réalité, le clic est sur un bouton transparent, au dessus de l'image.

    Voilà, tu sais tout et profite bien de tes congés !

    Gilbert

    34
    Vendredi 8 Mai 2015 à 15:19

    Bonjour Dalila ,

    un ptit coucou pour voir comment tu vas ??

    Gros Bisous de vendredi férié !

    35
    Dimanche 19 Juillet 2015 à 13:06

    Bonjour Dalila je comprend pas pour jouer avec les formes

    pourtant tes explications sont claires , mais j'avoue que la

    je rame , merci pour toutes tes astuces et codes ton blog

    est vraiment génial

    bises

    36
    Mercredi 26 Août 2015 à 19:59

    Génial tes petits gifs des visiteurs

    J'adoreeeeeeeeeeeeee

    Bonne soirée

    Vous devez être connecté pour commenter