Bordes Doblados Flat – LESS mixin

8/Oct/2014 387

El siguiente es un mixin para LESS que creé que genera el efecto de bordes doblados dado un elemento HTML y con colores sólidos asociados.

Uso:

.flatCornerFold(@foldSize,color,bgcolor,direction,intensity);
  • foldSize: tamaño del doblez en forma de triángulo.
  • color: HEX para doblez (más claro) y sombra (más oscuro).
  • bgcolor: HEX para el fondo del triángulo; debería ser el mismo del fondo de la página (body) para dar el efecto de transparencia.
  • direction: valores: bottomright (por defecto) | topright | topleft | bottomleft.
  • intensity: opacidad (0% ~ 100%) del efecto del doblez.

Ejemplo:

@color: #ecf0f1;
@bgcolor: #ecf0f1;
@foldSize: 3rem;
selector {
    .flatCornerFold(@foldSize,@color,@bgcolor,bottomright,25%);
}

Ejemplo Avanzado:

selector {
    .flatCornerFold(1rem,#ecf0f1,#ecf0f1,bottomright,25%);
}
selector:after,
    selector:before {
        transition: .3s;
    }
selector:hover {
    .flatCornerFold(3rem,#ecf0f1,#ecf0f1,bottomright,25%);
}

Ver en GitHub

Comentarios

  1. kd 10 [#]

    My husband and i were very excited that Peter managed to complete his researching through the precious recommendations he acquired from your own blog. It’s not at all simplistic just to continually be handing out helpful tips that men and women have been selling. And we all see we’ve got the blog owner to be grateful to for that. The main illustrations you’ve made, the straightforward blog menu, the relationships you give support to promote – it’s most remarkable, and it’s really facilitating our son and us know that this subject is entertaining, and that’s seriously important. Many thanks for all!

  2. kyrie 6 [#]

    A lot of thanks for your whole hard work on this website. My daughter take interest in engaging in investigation and it’s easy to understand why. We all learn all concerning the compelling means you give very useful guides on your web blog and as well boost participation from others on that concern then our favorite princess has been starting to learn a lot of things. Enjoy the remaining portion of the year. You are always performing a tremendous job.

  3. kd shoes [#]

    My wife and i ended up being so relieved Raymond could finish off his web research because of the precious recommendations he made while using the web site. It’s not at all simplistic to just choose to be giving out tactics that some people have been making money from. And now we take into account we now have the writer to appreciate for this. These illustrations you’ve made, the straightforward blog navigation, the friendships you will assist to promote – it’s got most superb, and it’s really assisting our son and the family consider that that content is cool, and that is incredibly essential. Thank you for all the pieces!

  4. yeezy supply [#]

    I wanted to draft you the very little note so as to say thanks a lot the moment again for all the striking secrets you’ve featured on this website. This has been simply strangely generous with you to convey unreservedly just what a few individuals could possibly have marketed as an ebook to earn some bucks on their own, and in particular now that you might have done it in the event you wanted. These thoughts likewise acted to become fantastic way to understand that other people have similar eagerness just as mine to find out very much more in terms of this condition. I know there are many more enjoyable times in the future for those who scan through your blog post.

  5. jordan 6 [#]

    I needed to compose you one very small word in order to thank you so much as before about the pleasing tips you’ve shared in this case. It has been quite particularly open-handed with people like you to offer freely what numerous people would’ve sold for an ebook to help with making some bucks on their own, especially considering that you could have tried it if you desired. The concepts in addition acted like a good way to recognize that some people have the identical desire similar to mine to understand many more related to this condition. I’m certain there are lots of more pleasurable sessions up front for individuals that scan your blog post.

  6. bit.ly [#]

    Hiya! Quick question that’s completely off topic.
    Do you know how to make your site mobile friendly? My blog looks weird when browsing from my iphone 4.
    I’m trying to find a theme or plugin that might be
    able to correct this problem. If you have any suggestions, please share.
    Appreciate it! cheap flights http://1704milesapart.tumblr.com/ cheap flights

  7. MarvinFuh [#]

    viagra free samples
    about canadian drug companies cialis – canada cialis from canadian pharmacy drug prices viagra side effects viagra-canada generic cialis canada pharmacy online viagra mexico canadian medicine viagra dosages
    medication online price of cialis in canada cilas viagra ingredients viagra tablet

  8. http://bitly.com/ [#]

    At this moment I am going to do my breakfast, later than having my breakfast coming over again to read more news.
    ps4 https://bitly.com/3z5HwTp ps4 games

  9. http://j.mp [#]

    Write more, thats all I have to say. Literally, it seems as though you relied on the video to
    make your point. You definitely know what youre talking about, why throw away your intelligence on just posting videos to your weblog when you could be giving
    us something enlightening to read? scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  10. stromectol 6mg uses [#]

    stromectol and antiparasitic

    stand fixed joint grandmother

  11. prednisone 5 mg tablet [#]

    Piece of writing writing is also a fun, if you
    be acquainted with afterward you can write otherwise it is complex to write. https://buszcentrum.com/deltasone.htm

  12. http://bitly.com/ [#]

    Pretty section of content. I just stumbled upon your
    site and in accession capital to assert that I acquire actually enjoyed
    account your blog posts. Anyway I’ll be subscribing to your augment and even I achievement you access
    consistently fast. cheap flights http://1704milesapart.tumblr.com/ cheap flights

  13. coub.com [#]

    I have been exploring for a little bit for any high-quality articles or weblog posts on this sort of space .
    Exploring in Yahoo I ultimately stumbled upon this site. Reading
    this information So i am happy to exhibit that I have a very good
    uncanny feeling I came upon exactly what I needed.
    I such a lot without a doubt will make certain to do not forget this website and provides it a glance regularly.

    scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

  14. www.iherb.com [#]

    Your style is very unique compared to other people I have read stuff from.

    Thank you for posting when you have the opportunity, Guess I will just book mark this blog.

    quest bars https://www.iherb.com/search?kw=quest%20bars quest bars

  15. hydroxychloroquine states not allowing [#]

    That is very interesting, You’re an excessively skilled blogger.
    I’ve joined your feed and look ahead to looking for extra of your great post.

    Also, I have shared your site in my social networks https://hhydroxychloroquine.com/

  16. HenryUnfiP [#]

    gay sugar daddy dating uk
    blued gay dating
    troy rein gay dating site

  17. online pharmacy [#]

    legitimate canadian pharmacy online

  18. SLOT PG [#]

    Thank you very much for sharing this great article. ดาวน์โหลด pgslot

  19. online pharmacy canada [#]

    online pharmacies

  20. ciprofloxacin hcl 500 mg price [#]

    Hi, i believe that i noticed you visited my weblog so i came
    to go back the want?.I am attempting to in finding issues to
    enhance my website!I assume its ok to make use of a few of your ideas!! http://antiibioticsland.com/Cipro.htm

  21. zyrtec d otc [#]

    generic allegra cvs – http://allergyd.com

  22. ivermectin for humans for sale [#]

    ivermectin for humans where to buy

    substantial nucleus pulposus stick

  23. GafInvake [#]

    cialis super active plus

  24. is it safe to buy stromectol online uk [#]

    get stromectol online

    long-term cognitive function statement

  25. pharmaceptica [#]

    cloriquin https://pharmaceptica.com/

  26. stromectolforte.com [#]

    stromectol medicine https://stromectolforte.com/# ivermectin 8 mg buy ivermectin 12 mg for humans

  27. GazInvake [#]

    cialis generic best price

  28. ivermectin [#]

    stromectol http://stromectolforte.com/ buy stromectol online uk ivermectin for humans for sale

  29. ivermectin tablets over the counter [#]

    ivermectin stays in system for

    copy major depression get

  30. prednisonedosepack [#]

    what is prednisone used for steroid prednisone

  31. isotretinoin side effects [#]

    what is accutane accutune

  32. nuvigilvsprovigil [#]

    modafinil uses https://modafilmodafinil.com/

  33. bactrim side effects [#]

    keflex sulfamethoxazole for dogs

  34. off white hoodie [#]

    I definitely wanted to post a brief comment so as to express gratitude to you for all of the pleasant information you are showing on this site. My rather long internet investigation has at the end of the day been recognized with pleasant tips to go over with my contacts. I ‘d declare that many of us visitors actually are rather fortunate to exist in a perfect place with very many special individuals with good secrets. I feel very happy to have come across the webpages and look forward to so many more cool minutes reading here. Thanks once more for all the details.

  35. GustavoVet [#]

    college essay help
    research paper assignment

  36. how to use ivermectin pour [#]

    I’m really impressed with your writing skills and also with
    the layout on your blog. Is this a paid theme or did you customize it yourself?
    Anyway keep up the excellent quality writing, it’s rare to see a nice blog like this one today. http://harmonyhomesltd.com/Ivermectinum-during-pregnancy.html

CSSLab