•
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:
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:
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
Care atribut specifica metoda HTTP de trimitere (GET, POST) a datelor din formular?
action method value<form action="script.php" method="post"> ... </form>
Ce proprietate CSS adauga umbra la chenar?
background-image box-shadow border-radius#id {
background-color: #bbfeda;
box-shadow: 11px 11px 5px #7878da;
}Clic pe functia care elimina primul element dintr-un array?
pop() push() shift()var fruits = ["mar", "cireasa", "banana"];
fruits.shift();
alert(fruits.length); // 2
Indicati functia cu care se poate verifica daca un anumit modul e instalat in PHP.
function() filetype() extension_loaded()if(extension_loaded("PDO") === true) echo "PDO este valabil."Alegeti verbul auxiliar corect care trebuie in propozitia: " ... I listen to music?".
has have Can Can I listen to music?
- Pot asculta muzica?
Alegeti verbul corect care trebuie in propozitia: "Me ... las frutas dulces"
están gustan gustaMe gustan las frutas dulces.
- Imi plac fructele dulci.