CSS Curls

By -

Comments

Post a Comment

Popular posts from this blog

Website Color Palettes: The Palettes of 50 Visually Impactful Websites to Inspire You Css Zilla

By -
Did you know that Facebook is blue because Mark Zuckerberg is red-green color blind? “Blue is the richest color for me; I can see all of blue” says Zuckerberg. While this choice of color doesn’t seem very scientific, it’s still proves that a lot of thought is put into the choice of color. As Buffer writes, over 90% of our assessment of a product is made on color alone, so it makes sense that color should be considered with care for every design decision, particularly on websites. Chances are, if we don’t like the color palette, we’re not going to stay on the site for very long. To get you started on your own palette, we’ve gathered 50 beautiful websites with versatile color schemes you can take inspiration from. So without further ado, let’s get knee-deep in some beautiful colors. 01. Fun and Professional <img width="700" height="404" src="https://designschool.canva.com/wp-content/uploads/sites/2/2016/01/Palette_1.jpg" class="attac...
Read more

jQuery iFrame Sizing & auto-sizing iframes

By -
Note: Due to browser security limitations related to cross-site scripting, this solution works only for iframe page content called from the same domain. Example  http://host.sonspring.com/iframe/ Download:  http://sonspring.com/journal/jquery-iframe-sizing First off, let me say that frames are bad and should be avoided. That being said, if you must use frames then I suppose the iframe would be the least of all the evils. Occasionally, project requirements arise such that you simply cannot get around having to use these pesky elements. One thing I have always detested about iframes is they are not aware of the dimensions of their content. Setting the width of an iframe is trivial, because you generally know how wide its contents will be. The pain point often comes when specifying height, because pages always vary in length. With a fixed height, the iframe is either too tall or short. This causes one of two undesirable outcomes: cutoff content, or a scrollbar. On...
Read more

css triangle with smooth edges, How to make 3-corner-rounded triangle in CSS

By -
Hello Guys, Demo:-  Click here Try this .triangle, .triangle:before, .triangle:after { width: 4em; height: 4em; } .triangle { overflow: hidden; position: relative; margin: 7em auto 0; border-radius: 20%; transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866); cursor: pointer; pointer-events: none; } .triangle:before, .triangle:after { position: absolute; background: orange; pointer-events: auto; content: ''; } .triangle:before { border-radius: 20% 20% 20% 53%; transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(.866) translateX(-24%); } .triangle:after { border-radius: 20% 20% 53% 20%; transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(.866) translateX(24%); } .triangle:hover { overflow: visible; } .triangle:hover:before, .triangle:hover:after { background: none; } .triangle:hover, .triangle:hover:before, .triangle:hover:aft...
Read more