Curs Css

Buton Pulse Buton 3D-Umbra Buton Rotunjit Stanga Buton Rotunjit Dreapta Buton Inima-Sageata
Butoane cu CSS, create numai cu proprietati CSS / CSS3, fara a folosi fisier cu imagine.

Buton Simplu

<style type="text/css">
.buttons {
 display: inline-block;
 background-color: #ddd;
 border: 1px solid #444;
 background-image: -webkit-linear-gradient(top, #eee, #ccc);
 background-image: -moz-linear-gradient(top, #eee, #ccc);
 background-image: -o-linear-gradient(top, #eee, #ccc);
 background-image: linear-gradient(top, #eee, #ccc);
 border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 -khtml-border-radius: 8px;
 padding: 6px 10px;
 font-weight: bold;
}

.buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
 text-decoration: none;
 color: #00f;
}

.buttons:hover {
 background-color: #BBB;
 background-image: -webkit-linear-gradient(top, #DDD, #AAA);
 background-image: -moz-linear-gradient(top, #DDD, #AAA);
 background-image: -o-linear-gradient(top, #DDD, #AAA);
 background-image: linear-gradient(top, #DDD, #AAA);
 color: yellow;
}

.buttons:active { background: #CCC; }
</style>

<a href="http://www.coursesweb.net" title="Cursuri Programare Web Development" class="buttons">www.CoursesWeb.net</a> 
<a href="https://marplo.net/css" title="Curs CSS" class="buttons">Curs CSS</a>
Rezultat:
www.CoursesWeb.net Curs CSS

Buton Pulse

<style type="text/css">
.buttons {
 display: inline-block;
 background-color: #ddd;
 border: 1px solid #444;
 background-image: -webkit-linear-gradient(top, #eee, #ccc);
 background-image: -moz-linear-gradient(top, #eee, #ccc);
 background-image: -o-linear-gradient(top, #eee, #ccc);
 background-image: linear-gradient(top, #eee, #ccc);
 border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 -khtml-border-radius: 8px;
 padding: 6px 10px;
 font-weight: bold;
}

.buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
 text-decoration: none;
 color: #00f;
 -webkit-animation: "pulse" 1s ease-in-out 0 infinite alternate;
 -moz-animation: "pulse" 1s ease-in-out 0 infinite alternate;
 animation: "pulse" 1s ease-in-out 0 infinite alternate;
 box-shadow: 0px 0px 4px #00ACE6;
}

@-webkit-keyframes pulse {
 0% { box-shadow: 0px 0px 4px #00ACE6; }
 100% { box-shadow: 0px 0px 12px #00ACE6; }
}

@-moz-keyframes pulse {
 0% { box-shadow: 0px 0px 4px #00ACE6; }
 100% { box-shadow: 0px 0px 12px #00ACE6; }
}

@keyframes pulse {
 0% { box-shadow: 0px 0px 4px #00ACE6; }
 100% { box-shadow: 0px 0px 12px #00ACE6; }
}

.buttons:hover {
 background-color: #BBB;
 background-image: -webkit-linear-gradient(top, #DDD, #AAA);
 background-image: -moz-linear-gradient(top, #DDD, #AAA);
 background-image: -o-linear-gradient(top, #DDD, #AAA);
 background-image: linear-gradient(top, #DDD, #AAA);
 'box-shadow: 0px 0px 4px #0001E6;'
 color: yellow;
}

.buttons:active { background: #CCC; }
</style>

<a href="http://www.coursesweb.net" title="Cursuri Programare Web Development" class="buttons">www.CoursesWeb.net</a> 
<a href="https://marplo.net/ajax" title="Curs Ajax" class="buttons">Curs Ajax</a>
Rezultat:
www.CoursesWeb.net   Curs Ajax

Buton 3D-Umbra

<style type="text/css">
/* https://marplo.net/css */
.buttons {
 -moz-text-blink: none;
 -moz-text-decoration-color: -moz-use-text-color;
 -moz-text-decoration-line: none;
 -moz-text-decoration-style: solid;
 background-color: #FEFEFE;
 border-bottom-left-radius: 8px;
 border-bottom-right-radius: 8px;
 border-top-left-radius: 8px;
 border-top-right-radius: 8px;
 box-shadow: 2px 3px 4px #6789DA inset;
 color: red;
 margin-bottom: 1px;
 margin-left: 5px;
 margin-right: 5px;
 margin-top: 1px;
 padding-bottom: 2px;
 padding-left: 8px;
 padding-right: 8px;
 padding-top: 2px;
}
.buttons:hover {
 -moz-text-blink: none;
 -moz-text-decoration-color: -moz-use-text-color;
 -moz-text-decoration-line: underline;
 -moz-text-decoration-style: solid;
 background-attachment: scroll;
 background-clip: border-box;
 background-color: yellow;
 background-image: none;
 background-origin: padding-box;
 background-position: 0 0;
 background-repeat: repeat;
 background-size: auto auto;
 box-shadow: 2px 3px 4px #A0A0DA;
 color: #0408FE;
}
</style>

<a href="http://www.coursesweb.net" title="Cursuri Programare Web Development" class="buttons">www.CoursesWeb.net</a> 
<a href="https://marplo.net/css" title="Curs CSS" class="buttons">Curs CSS</a>
Rezultat:
www.CoursesWeb.net Curs CSS

Buton Rotunjit Stanga

<style type="text/css">
.buttons {
 display: inline-block;
 background-color: #ddd;
 border: 1px solid #444;
 background-image: -webkit-linear-gradient(top, #eee, #ccc);
 background-image: -moz-linear-gradient(top, #eee, #ccc);
 background-image: -o-linear-gradient(top, #eee, #ccc);
 background-image: linear-gradient(top, #eee, #ccc);
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -khtml-border-radius: 10px;
 padding: 6px 10px;
 font-weight: bold;
}

.buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
 background-color: #007EBD;
 background-image: -webkit-linear-gradient(top, #00A0F0, #007EBD);
 background-image: -moz-linear-gradient(top, #00A0F0, #007EBD);
 background-image: -o-linear-gradient(top, #00A0F0, #007EBD);
 background-image: linear-gradient(top, #00A0F0, #007EBD);
 border-color: #0000CC;
 color: #FFF;
 border-top-right-radius: 0;
 border-bottom-right-radius: 0;
 margin-right: 0;
 border-right-width: 0;
}

.buttons:hover {
 background-color: #08aded;
 background-image: -webkit-linear-gradient(top, #00A0F0, #08aded);
 background-image: -moz-linear-gradient(top, #00A0F0, #08aded);
 background-image: -o-linear-gradient(top, #00A0F0, #08aded);
 background-image: linear-gradient(top, #00A0F0, #08aded);
 text-decoration: none;
 color: #ff1;
}

.buttons:active { background: #007EBD; }
</style>

<a href="https://marplo.net/html" title="Curs HTML" class="buttons">Curs HTML</a> 
<a href="https://marplo.net/css" title="Curs CSS" class="buttons">Curs CSS</a>
Rezultat:
Curs HTML Curs CSS

Buton Rotunjit Dreapta

<style type="text/css">
.buttons {
 display: inline-block;
 background-color: #ddd;
 border: 1px solid #444;
 background-image: -webkit-linear-gradient(top, #eee, #ccc);
 background-image: -moz-linear-gradient(top, #eee, #ccc);
 background-image: -o-linear-gradient(top, #eee, #ccc);
 background-image: linear-gradient(top, #eee, #ccc);
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -khtml-border-radius: 10px;
 padding: 6px 10px;
 font-weight: bold;
}

.buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
 background-color: #8cc99e;
 background-image: -webkit-linear-gradient(top, #66CC33, #8cc99e);
 background-image: -moz-linear-gradient(top, #66CC33, #8cc99e);
 background-image: -o-linear-gradient(top, #66CC33, #8cc99e);
 background-image: linear-gradient(top, #66CC33, #8cc99e);
 border-color: #0000CC;
 color: #FFF;
 border-top-left-radius: 0;
 border-bottom-left-radius: 0;
 margin-left: 0;
 border-left-width: 0;
}

.buttons:hover {
 background-color: #08A009;
 background-image: -webkit-linear-gradient(top, #66CC33, #08A009);
 background-image: -moz-linear-gradient(top, #66CC33, #08A009);
 background-image: -o-linear-gradient(top, #66CC33, #08A009);
 background-image: linear-gradient(top, #66CC33, #08A009);
 text-decoration: none;
 color: #ff1;
}

.buttons:active { background: #08A009; }
</style>

<a href="https://marplo.net/html" title="Curs HTML" class="buttons">Curs HTML</a> 
<a href="https://marplo.net/css" title="Curs CSS" class="buttons">Curs CSS</a>
Rezultat:
Curs HTML Curs CSS

Buton Inima-Sageata

<style type="text/css">
.buttons {
 display: inline-block;
 background-color: #ddd;
 border: 1px solid #444;
 background-image: -webkit-linear-gradient(top, #eee, #ccc);
 background-image: -moz-linear-gradient(top, #eee, #ccc);
 background-image: -o-linear-gradient(top, #eee, #ccc);
 background-image: linear-gradient(top, #eee, #ccc);
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -khtml-border-radius: 10px;
 padding: 6px 10px;
 font-weight: bold;
}

.buttons:link, .buttons:visited, .buttons:hover, .buttons:active {
 background-color: #007EBD;
 background-image: -webkit-linear-gradient(top, #00A0F0, #007EBD);
 background-image: -moz-linear-gradient(top, #00A0F0, #007EBD);
 background-image: -o-linear-gradient(top, #00A0F0, #007EBD);
 background-image: linear-gradient(top, #00A0F0, #007EBD);
 border-color: #0000CC;
 color: #FFF;
 border-top-right-radius: 0;
 border-bottom-right-radius: 0;
 margin-right: 0;
 border-right-width: 0;
}

.buttons:hover {
 background-color: #08aded;
 background-image: -webkit-linear-gradient(top, #00A0F0, #08aded);
 background-image: -moz-linear-gradient(top, #00A0F0, #08aded);
 background-image: -o-linear-gradient(top, #00A0F0, #08aded);
 background-image: linear-gradient(top, #00A0F0, #08aded);
 text-decoration: none;
 color: #ff1;
}

.buttons:active { background: #5CB82E; }

.buttons:after {
 content: "\2192";
 margin-left: 5px;
}

.buttons:before {
 content: "\2665";
 margin-right: 5px;
}
</style>

<a href="https://marplo.net/" title="Cursuri Jocuri Anime" class="buttons">MarPlo.net</a> 
<a href="https://coursesweb.net/javascript/" title="JavaScript Courses" class="buttons">JavaScript Course</a>
Rezultat:
MarPlo.net JavaScript Course

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
vivió vivido viviendo
Estoy viviendo aquí.
- Traiesc /Locuiesc aici.
Butoane cu CSS

Last accessed pages

  1. Viitor perfect si Viitorul perfect continuu - Future perfect and Continuous (21514)
  2. Pronumele ca obiect al prepozitiei (1834)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (149719)
  4. Joc exersare Spaniola (4927)
  5. Script pentru ceas (1860)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (536)
  2. Curs HTML gratuit Tutoriale HTML5 (339)
  3. Coduri pt culori (295)
  4. Gramatica limbii engleze - Prezentare Generala (236)
  5. Exercitii engleza - English Tests and exercises - Grammar (232)