Tresmollo.org

About everything and nothing

18Mar

Portal holes in css

A completly useless, but cool thing I made this afternoon : portal holes in css3 without any images

I guess it's a good way to make use of some of the cool features we get with css3 like the transform and rotate

It make use of the border-radius properties for the oval shape with a thick border and fot the particles, it's kind of the same thing but with only one border set in color while the three others are transparents.
Add a bit of : transform : rotate(); here and there and you have it !

Demo Download

HTML

<div class="portal blue">
    <div class="particle-1 blue"></div>
    <div class="particle-2 blue"></div>
    <div class="particle-3 blue"></div>
</div>

<div class="portal orange">
    <div class="particle-1"></div>
    <div class="particle-2"></div>
    <div class="particle-3"></div>
</div>

CSS

/* coloration */
.blue, .blue *{
    border-color: #50C0EE;
}
.orange, .orange *{
    border-color: #FF5108;
}

/* main portal frame */
.portal{
    position: relative;
    width: 200px;
    height: 320px;
    border-style: solid;
    border-width: 20px;
    -webkit-border-radius: 140px / 210px;
    -moz-border-radius: 140px / 210px; 
    border-radius: 140px / 210px;
}

/* particles effect */
.particle-1{
    width: 200px;
    height: 175px;
    border-right-style: solid;
    border-right-width: 11px;
    -webkit-border-radius: 140px / 210px;
    -moz-border-radius: 140px / 210px; 
    border-radius: 140px / 210px;
    position: absolute;
    right: 14px;
    transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
}

.particle-2{
    width: 86px;
    height: 147px;
    border-left-style: solid;
    border-left-width: 8px;
    -webkit-border-radius: 47px 37px 37px 37px / 200px 200px 200px 200px;
    -moz-border-radius: 47px 37px 37px 37px / 200px 200px 200px 200px;
    border-radius: 47px 37px 37px 37px / 200px 200px 200px 200px;
    position: absolute;
    left: -10px;
    top: 14px;
    transform: rotate(11deg);
    -webkit-transform: rotate(11deg);
    -moz-transform: rotate(11deg);
}

.particle-3{
    width: 126px;
    height: 118px;
    border-bottom-style: solid;
    border-bottom-width: 11px;
    -webkit-border-radius: 140px;
    -moz-border-radius: 140px;
    border-radius: 140px;
    position: absolute;
    left: 52px;
    top: 188px;
    transform: rotate(13deg);
    -webkit-transform: rotate(13deg);
    -moz-transform: rotate(13deg);
}