•
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
Ce tag adauga imagine in pagina web?
<div> <img> <span><img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Care din aceste coduri CSS afiseaza textul inclinat?
font-style: italic; text-decoration: underline; font-weight: 500;#id {
font-style: italic;
}
Clic pe functia jQuery care ascunde animat un element HTML.
click() hide() show()$(document).ready(function() {
$(".a_class").click(function(){ $(this).hide("slow"); });
});
Clic pe functia definita corect in PHP.
fname function() {} function fname() {} function $fname() {};function fname($a, $b) {
echo $a * $b;
}
Indicati forma pentru Prezent Perfect Continuu a verbului "to walk" (a merge).
have walked have been walking be walkingI have been walking for 5 hours.
- Merg pe jos de 5 ore.
Indicati Trecutul Nedefinit pentru verbul "ser" (a fi) la forma Yo.
será sería fuiYo fui entrenador.
- Am fost antrenor.