Curs Css

  • Pentagon
  • Hexagon
  • Octogon

Cateva forme de poligoane, create doar cu un singur tag DIV si proprietati CSS.

Paralelogram

- Continutul din paralelogram e distorsionat in functie de forma paralelogramului.
Cod:
<style type="text/css">
#parallelogram{
 margin:5px 0 5px 20px;
 width: 150px;
 height: 100px;
 -webkit-transform: skew(20deg);
 -moz-transform: skew(20deg);
 -o-transform: skew(20deg);
 background: #abcdef;
}
</style>

<div id="parallelogram">Cursuri Jocuri Anime<br/>MarPlo.net</div>
Rezultat:
Cursuri Jocuri Anime
MarPlo.net

Pentagon

Cod:
<style type="text/css">
#pentagon {
 margin:70px 0 5px 20px;
 position: relative;
 width: 110px;
 border-width: 100px 36px 0;
 border-style: solid;
 border-color: #abefcd transparent;
}
#pentagon:before {
 content: "";
 position: absolute;
 height: 0;
 width: 0;
 top: -170px;
 left: -36px;
 border-width: 0 90px 70px;
 border-style: solid;
 border-color: transparent transparent #abefcd;
}

/* Content in pentagon */
#pentagon div{
 position:absolute;
 top:-50px;
}
</style>

<div id="pentagon"><div>MarPlo.net</div></div>
Rezultat:
MarPlo.net

Hexagon

Cod:
<style type="text/css">
#hexagon {
 width: 100px;
 height: 55px;
 background: #cdabef;
 position: relative;
}
#hexagon:before {
 content: "";
 position: absolute;
 top: -25px;
 left: 0;
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 25px solid #cdabef;
}
#hexagon:after {
 content: "";
 position: absolute;
 bottom: -25px; left: 0;
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 25px solid #cdabef;
}
</style>

<div id="hexagon">MarPlo.net</div>
Rezultat:
MarPlo.net

Octogon

Cod:
<style type="text/css">
#octagon {
 width: 100px;
 height: 100px;
 background: #a0e8a1;
 position: relative;
}
#octagon:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 border-bottom: 29px solid #a0e8a1;
 border-left: 29px solid #eee;
 border-right: 29px solid #eee;
 width: 42px;
 height: 0;
}
#octagon:after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 border-top: 29px solid #a0e8a1;
 border-left: 29px solid #eee;
 border-right: 29px solid #eee;
 width: 42px;
 height: 0;
}
</style>

<div id="octagon"></div>
Rezultat:
 

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Clic pe tag-ul care creaza o lista ordonata numeric
<ul> <tr> <ol>
<ol>
  <li>List-1</li>
  <li>List-2</li>
</ol>
Care selector reprezinta ID-ul unui element in CSS
.nume #nume nume
#id {
  color: #0110fb;
}
Ce cod creaza un obiect in JavaScript?
{} [] new Date()
var obj = {"site": "CoursesWeb.net", "pr": 5};
alert(obj.site);
Indicati instructiunea prin care se verifica daca o conditie este True sau False
else if() switch()
$var = 8;
if($var == 8) echo $var;
Indicati timpul Prezent pentru verbul "to be" (a fi).
be were is
Now, it is here.
- Acum este aici.
Care este conjugarea la timpul prezent al verbului "divertirse" (a se distra) la forma "yo"?
te diviertas me divierto se divierta
Yo me divierto.
- Eu ma distrez.
Poligoane cu CSS

Last accessed pages

  1. Cursuri limba engleza gratuite si lectii online (67506)
  2. Lucrul cu mai multe cadre (3507)
  3. Verbe reflexive 1 (11794)
  4. Participiu trecut (4282)
  5. Demonstrative (2235)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (9)
  2. Expresii uzuale din Limba Spaniola (A-D) (8)
  3. Verbe - care schimba e-ie (4)
  4. Verbe - care schimba o-ue (4)
  5. Gramatica limbii spaniole. Indrumator si prezentare generala (3)