• Clip générateur

    Je découvre un générateur de clip-path, c'est à dire de sélection sur image: http://www.cssplant.com/clip-path-generator

    Jusqu'à maintenant, j'utilisais et j'utilise toujours le site: https://bennettfeely.com/clippy/ qui nous donne le code pour des sélections géométriques.

    On m'a demandé un jour si on pouvais créer des sélections non géométriques: avec le premier site: oui !

    Je me suis amusé à dimensionner une de mes images à la taille de l'exemple proposé: 960px par 414px et à faire une sélection au lasso (pas terrible !).

    Pour cela, on la fait glisser (drag en drop) dans le cadre du site .... et pi c'est tout !

    Vous pouvez même créer des animations entre 2 sélections: voir ICI.

    Le code créé est bien sûr très long puisque à chaque point, il enregistre la position X et Y mais il suffit de le copier et de le coller.

    Mon exemple:

     

     


    Dans mon bricolage, j'ai placé, en fond, id="grd", l'image en noir et blanc avec opacité de 0.5.

    Dessus, j'ai placé la sélection sur l'image colorée id="pcl" et le code copié sur le site.

    On pourrait ne faire apparaitre la sélection qu'au survol, par exemple mais ce sera pour un autre essai !


    <div style="width: 960px; height: 414px; margin: 1vh auto; border: 0.1vh solid black;">
    <p id="grd">&nbsp;</p>
    <p id="pcl">&nbsp;</p>
    </div>
    <style><!--
    #grd{ position:absolute; z-index:1; width:960px; height:414px; background:url('http://ekladata.com/89mMseQKSb2jIrUDPpcXQQ59dak.jpg'); filter:grayscale(1); opacity:0.5;}
    #pcl{ position:absolute; z-index:2;width:960px; height:414px; background:url('http://ekladata.com/89mMseQKSb2jIrUDPpcXQQ59dak.jpg');clip-path: polygon(316px 77px,320px 77px,320px 77px,324px 77px,324px 78px,325px 78px,327px 79px,328px 80px,329px 82px,332px 85px,333px 87px,337px 91px,338px 91px,339px 92px,340px 92px,341px 93px,342px 93px,344px 95px,345px 95px,346px 96px,348px 97px,350px 99px,352px 100px,358px 102px,362px 104px,364px 104px,368px 106px,372px 107px,374px 108px,378px 109px,383px 111px,388px 115px,392px 116px,398px 120px,404px 125px,408px 127px,414px 132px,423px 139px,426px 141px,435px 147px,442px 152px,445px 156px,452px 161px,459px 165px,466px 171px,469px 174px,476px 178px,483px 183px,485px 185px,492px 190px,498px 195px,501px 197px,506px 200px,512px 203px,517px 206px,521px 206px,525px 210px,531px 211px,535px 211px,542px 212px,551px 213px,578px 213px,586px 212px,595px 211px,602px 210px,606px 208px,614px 207px,624px 206px,639px 203px,647px 202px,654px 201px,658px 200px,666px 199px,675px 197px,679px 196px,686px 195px,695px 194px,703px 193px,706px 192px,713px 190px,716px 189px,730px 185px,737px 182px,740px 180px,747px 178px,753px 175px,757px 174px,763px 172px,770px 168px,772px 168px,779px 165px,784px 162px,791px 159px,795px 157px,802px 152px,812px 148px,818px 144px,824px 142px,829px 140px,831px 139px,834px 137px,839px 134px,841px 134px,846px 133px,850px 132px,899px 132px,911px 133px,920px 134px,930px 136px,932px 136px,937px 138px,943px 142px,944px 142px,949px 147px,950px 149px,951px 150px,951px 152px,952px 155px,952px 172px,951px 177px,948px 183px,948px 185px,946px 190px,944px 197px,943px 199px,941px 204px,939px 207px,938px 209px,934px 215px,931px 218px,929px 219px,923px 225px,921px 226px,918px 229px,915px 231px,911px 232px,909px 234px,903px 235px,900px 239px,896px 241px,888px 247px,885px 249px,881px 253px,876px 256px,873px 258px,869px 261px,864px 265px,852px 277px,844px 282px,842px 285px,826px 297px,822px 301px,814px 307px,805px 313px,798px 320px,796px 324px,791px 328px,786px 333px,784px 336px,777px 340px,772px 345px,764px 349px,759px 351px,750px 356px,745px 359px,735px 363px,725px 369px,714px 372px,709px 375px,702px 377px,693px 381px,689px 382px,673px 384px,667px 386px,665px 387px,660px 389px,655px 390px,650px 390px,645px 391px,639px 392px,634px 393px,626px 395px,617px 397px,614px 397px,607px 398px,599px 399px,593px 400px,590px 401px,585px 401px,581px 402px,497px 402px,493px 401px,488px 401px,487px 400px,483px 400px,479px 399px,473px 399px,472px 398px,467px 398px,465px 396px,464px 396px,458px 394px,454px 392px,451px 391px,449px 390px,448px 389px,447px 389px,445px 388px,444px 387px,444px 386px,442px 385px,441px 384px,440px 384px,439px 383px,437px 382px,436px 381px,434px 380px,434px 379px,430px 377px,427px 374px,425px 373px,424px 371px,422px 370px,421px 368px,420px 368px,418px 367px,415px 366px,414px 365px,410px 364px,407px 362px,403px 361px,402px 360px,398px 358px,395px 358px,392px 355px,386px 352px,382px 351px,378px 349px,375px 349px,371px 347px,362px 344px,360px 342px,357px 339px,355px 338px,352px 337px,350px 336px,350px 335px,347px 333px,343px 329px,341px 326px,339px 325px,337px 323px,335px 322px,333px 320px,329px 318px,326px 315px,324px 313px,319px 310px,315px 307px,311px 306px,307px 302px,301px 300px,293px 294px,289px 290px,283px 287px,277px 281px,276px 280px,274px 277px,271px 275px,271px 273px,268px 270px,267px 265px,265px 260px,263px 257px,261px 251px,258px 243px,257px 238px,256px 228px,255px 220px,254px 216px,252px 206px,251px 197px,249px 189px,249px 185px,248px 177px,245px 165px,243px 158px,241px 152px,240px 150px,238px 144px,238px 139px,236px 133px,235px 131px,235px 110px,236px 104px,236px 103px,237px 99px,238px 94px,239px 93px,245px 85px,248px 82px,249px 81px,252px 78px,255px 75px,257px 74px,260px 72px,262px 72px,267px 71px,273px 70px,292px 70px,300px 71px,303px 71px,310px 72px,315px 74px,319px 75px,320px 75px,320px 75px);}
    --></style>