Figures with css2 and css3

14.10.2011

Sometimes you can save quite a lot on images using regular css, for example in site navigation elements, a simple triangle to the left can tell the user in which direction this link leads. And how beautifully you can animate these elements by moving from one figure to another, as is usually done in flash (animation of objects). On the one hand, it is cumbersome and a lot of code, on the other hand, you can easily change the color and apply various animation effects. The tool will not disappear in the hands of a skilled craftsman.

css 2.0

A couple of examples of different triangles

 .triangle-up {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid #DE3B25;
}

 .triangle-down {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid #DE3B25;
}

 .triangle-left {
		float: left;
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-right: 100px solid #DE3B25;
        border-bottom: 50px solid transparent;
}

 .triangle-right {
		float: left;
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-left: 100px solid #DE3B25;
        border-bottom: 50px solid transparent;
}

 .triangle-topleft {
		float: left;
        width: 0;
        height: 0;
        border-top: 100px solid #DE3B25;
        border-right: 100px solid transparent;
}

 .triangle-topright {
		float: left;
        width: 0;
        height: 0;
        border-top: 100px solid #DE3B25;
        border-left: 100px solid transparent;

}

 .triangle-bottomleft {
		float: left;
        width: 0;
        height: 0;
        border-bottom: 100px solid #DE3B25;
        border-right: 100px solid transparent;
}

 .triangle-bottomright {
		float: left;
        width: 0;
        height: 0;
        border-bottom: 100px solid #DE3B25;
        border-left: 100px solid transparent;
}

And the most interesting css 3.0

Circle and heart

 .circle {
		float: left;
        width: 100px;
        height: 100px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px
        box-shadow:0px 0px 3px #999;
background-image: linear-gradient(bottom, #DE3B25 16%, #FF593F 58%, #FF745F 79%);
background-image: -o-linear-gradient(bottom, #DE3B25 16%, #FF593F 58%, #FF745F 79%);
background-image: -moz-linear-gradient(bottom, #DE3B25 16%, #FF593F 58%, #FF745F 79%);
background-image: -webkit-linear-gradient(bottom, #DE3B25 16%, #FF593F 58%, #FF745F 79%);
background-image: -ms-linear-gradient(bottom, #DE3B25 16%, #FF593F 58%, #FF745F 79%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.16, #DE3B25),
	color-stop(0.58, #FF593F),
	color-stop(0.79, #FF745F)
);
}

 .heart {
		float: left;
    position: relative;
    width: 100px;
    height: 90px;
}
.heart:before,
.heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px
    height: 80px;
    background: #DE3B25;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
.heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

Last in our blog

Good and cheap - does it work in SEO?

Internet Marketing

04.11.2019

How to promote your business - SEO, SMM or advertising?

Internet Marketing

03.10.2019