Forme Stea cu CSS

Curs Css

  • Stea 6 varfuri
  • Stea 8 varfuri
  • Stea 12 varfuri

Forme Stea, 5, 6, 8 si 12 varfuri, create doar cu un tag DIV si proprietati CSS.

Stea 5 varfuri

Cod:

<style type="text/css">
/* http://css-tricks.com/examples/ShapesOfCSS/ */
#star5 {
 margin: 50px 0;
 position: relative;
 display: block;
 width: 0px;
 height: 0px;
 border-right: 100px solid transparent;
 border-bottom: 70px solid #05ed08;
 border-left: 100px solid transparent;
 -moz-transform: rotate(35deg);
 -webkit-transform: rotate(35deg);
 -ms-transform: rotate(35deg);
 -o-transform: rotate(35deg);
}
#star5:before {
 border-bottom: 80px solid #05ed08;
 border-left: 30px solid transparent;
 border-right: 30px solid transparent;
 position: absolute;
 height: 0;
 width: 0;
 top: -45px;
 left: -65px;
 display: block;
 content:"";
 -webkit-transform: rotate(-35deg);
 -moz-transform: rotate(-35deg);
 -ms-transform: rotate(-35deg);
 -o-transform: rotate(-35deg);
}
#star5:after {
 position: absolute;
 display: block;
 top: 3px;
 left: -105px;
 width: 0px;
 height: 0px;
 border-right: 100px solid transparent;
 border-bottom: 70px solid #05ed08;
 border-left: 100px solid transparent;
 -webkit-transform: rotate(-70deg);
 -moz-transform: rotate(-70deg);
 -ms-transform: rotate(-70deg);
 -o-transform: rotate(-70deg); content:"";
}
</style>

<div id="star5"></div>

Rezultat:

Stea 6 varfuri

Cod:

<style type="text/css">
#star6 {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid #05ed08;
 position: relative;
}
#star6:after {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 100px solid #05ed08;
 position: absolute;
 content: "";
 top: 30px;
 left: -50px;
}
</style>

<div id="star6"></div>

Rezultat:

Stea 8 varfuri

Cod:

<style type="text/css">
#star8 {
 background: blue; width: 80px;
 height: 80px;
 position: relative;
 -webkit-transform: rotate(20deg);
 -moz-transform: rotate(20deg);
 -ms-transform: rotate(20deg);
 -o-transform: rotate(20eg);
}
#star8:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 height: 80px;
 width: 80px;
 background: blue;
 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
 -ms-transform: rotate(135deg);
 -o-transform: rotate(135deg);
}
</style>

<div id="star8"></div>

Rezultat:

Stea 12 varfuri

Cod:

<style type="text/css">
#star12 {
 background: blue;
 width: 80px;
 height: 80px;
 position: relative;
}
#star12:before, #star12:after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 height: 80px;
 width: 80px;
 background: blue;
}
#star12:before {
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 -ms-transform: rotate(30deg);
 -o-transform: rotate(30deg);
}
#star12:after {
 -webkit-transform: rotate(60deg);
 -moz-transform: rotate(60deg);
 -ms-transform: rotate(60deg);
 -o-transform: rotate(60deg);
}
</style>

<div id="star12"></div>

Rezultat:

<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />

#id {
  display: none;
}

for(var i = 0; i< 8; i++) {
  if(i > 1) break;
  alert(i);
}

define("CONSTANT_NAME", "value");
echo CONSTANT_NAME;

This school has three classes.
- Scoala asta are trei clase.

Escuché dos voces.
- Am auzit doua voci.