Prezentare Mesaj Infinit Insigna Panglica Blazon Vapor

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:

MarPlo

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:
CSS polygon

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:
www.CoursesWeb.net

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
Alte forme complexe cu DIV si CSS

Last accessed pages

  1. Zilele saptamanii - Lunile anului - Anotimpurile - Engleza (10611)
  2. Verbe frazale din limba Engleza (15272)
  3. Jokes - Glume, Bancuri, Humor (3661)
  4. Zilele saptamanii, Lunile si Anotimpuri - Exercitii incepatori (3195)
  5. Proverbe, expresii si zicatori (5908)

Popular pages this month

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (3644)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (3243)
  3. Gramatica limbii engleze - Prezentare Generala (2719)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (2361)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (1955)