Cateva
forme complexe create doar cu un singur DIV si proprietati CSS, fara a folosi fisier cu imagine.
Forma 1
Cod:
<style type="text/css">
/* https://marplo.net/css */
#shp1 {
height: 0;
width: 170px;
background: #b1b0fb;
position: relative;
border-bottom: 110px solid #08fb09;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
padding:0 3px;
}
#shp1:before {
content: "";
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-bottom: 28px solid #b1b0fb;
border-left: 14px solid transparent;
position: absolute;
bottom: 0;
left: -14px;
}
#shp1:after {
content: "";
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-bottom: 28px solid #b1b0fb;
border-right: 14px solid transparent;
position: absolute;
bottom: 0;
right: -14px;
}
</style>
<div id="shp1"><br/>Cursuri Online:<br/>https://marplo.net/</div>
Rezultat:
Cursuri Online:
http://marplo.net
Prezentare Mesaj
Cod:
<style type="text/css">
/* http://css-tricks.com/examples/ShapesOfCSS/ */
#talkbubble {
margin: 10px 25px;
width: 200px;
height: 89px;
background: #05fb08;
position: relative;
-moz-border-radius: 14px;
-webkit-border-radius:
14px; border-radius: 14px;
padding: 2px 5px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 28px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 26px solid #05fb08;
border-bottom: 13px solid transparent;
}
</style>
<div id="talkbubble"><br/>Cursuri Online:<br/>https://marplo.net/</div>
Rezultat:
Cursuri Online:
http://marplo.net
Insigna Panglica
Cod:
<style type="text/css">
#badgeribbon {
position: relative;
background: #08fb09;
height: 100px;
width: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
padding: 2px;
text-align: center;
}
#badgeribbon:before, #badgeribbon:after {
content: "";
position: absolute;
margin-top: 8px;
border-bottom: 70px solid #01fb02;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
top: 70px; left: -5px;
-webkit-transform: rotate(-140deg);
-moz-transform: rotate(-140deg);
-ms-transform: rotate(-140deg);
-o-transform: rotate(-140deg);
}
#badgeribbon:after {
left: auto;
right: -5px;
-webkit-transform: rotate(140deg);
-moz-transform: rotate(140deg);
-ms-transform: rotate(140deg);
-o-transform: rotate(140deg);
}
</style>
<div id="badgeribbon"><br/>MarPlo</div>
Rezultat:
Infinit
Cod:
<style type="text/css">
#infinity {
position: relative;
width: 212px;
height: 100px;
}
#infinity:before, #infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid blue;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<div id="infinity"></div>
Rezultat:
Blazon
Cod:
<style type="text/css">
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin: 6px auto;
height: 60px;
width: 200px;
}
#chevron:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: #efabcd;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after {
content: "";
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: #efabcd;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
</style>
<div id="chevron"></div>
Rezultat:
Vapor
Cod:
<style type="text/css">
#ship {
margin:30px 0 5px 20px;
position: relative;
width: 200px;
border-width: 50px 28px 0;
border-style: solid;
border-color: #ccddef transparent;
font-weight: bold;
}
#ship:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -15px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent #bbcdef;
}
/* Content */
#ship div{
position:absolute;
top:-30px;
}
</style>
<div id="ship"><div>www.CoursesWeb.net</div></div>
Demo:
Un Test simplu in fiecare zi
HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag creaza un text ingrosat?
<q> <strong> <em><p>Adresa: <strong>http://CoursesWeb.net/</strong> - Tutoriale.</p>
Care din aceste coduri CSS afiseaza textul ingrosat?
text-size: 18px; font-style: italic; font-weight: 800;#id {
font-weight: 800;
}
Ce functie JavaScript apeleaza o alta functie, in mod repetat, la un anumit interval de timp?
setInterval() setTimeout() push()function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Clic pe variabila definita corect in PHP.
var vname = 8; $vname = 8; $vname == 8;$vname = 8;
echo $vname;
Care din urmatoarele forme ale verbului "travel" (a calatori) e la timpul Prezent Perfect?
have traveled shall travel had traveledWe have traveled in space.
- Noi am calatorit (deja) in spatiu.
Care din urmatoarele forme ale verbului "pintar" (a picta) se foloseste la Trecutul Imperfect?
ir a pintar pintaba pintóLa niña pintaba un arco iris.
- Fetita picta un curcubeu.