👤
a fost răspuns

Inca un subiect rapid, dar de tip III

Structura css pentru 2 butoane 3d (unul up, altul down), integrare red & green cu `error` ~ `functions`.


Răspuns :

Salut din nou.
.btn-8g
{
background: #fff;
color: #999;
}
.btn-8g:active {
background: #fff;
}
.btn-8g:after,
.btn-8g:before {
text-transform: uppercase;
 width: 100%;
 height: 100%;
 position: absolute;
 left: 0;
 line-height: 70px;
.btn-8g:after {
top: -98%; // Versiunea Chrome pentru v3+ va cere 100%
background: #7aca7c; // Culoarea cerută
 color: #358337; 
content: 'Functions'; // Textul
-webkit-transform-origin: 0% 100%;
 -webkit-transform: rotateX(90deg);
 -moz-transform-origin: 0% 100%;
 -moz-transform: rotateX(90deg);
 -ms-transform-origin: 0% 100%;
 -ms-transform: rotateX(90deg);
 transform-origin: 0% 100%;
 transform: rotateX(90deg);
}
.btn-8g:before {
top: 100%;
 background: #e96a6a;
 color: #a33a3a; // Culoarea
 content: 'Error'; // Textul
font-weight: 700;
font-family: 'Lato', Calibri, Arial, sans-serif;
 -webkit-transform-origin: 0% 0%;
-webkit-transform: rotateX(-90deg);
 -moz-transform-origin: 0% 0%;
 -moz-transform: rotateX(-90deg);
 -ms-transform-origin: 0% 0%;
 -ms-transform: rotateX(-90deg);
 transform-origin: 0% 0%;
 transform: rotateX(-90deg);
}
Urmează efectul functions la rotirea down și error la rotirea up.
.btn-8g.btn-functions3d {
background: #aaa;
 -webkit-transform-origin: 50% 100%;
 -webkit-transform: rotateX(-90deg) translateY(100%);
-moz-transform-origin: 50% 100%;
 -moz-transform: rotateX(-90deg) translateY(100%);
 -ms-transform-origin: 50% 100%;
 -ms-transform: rotateX(-90deg) translateY(100%);
 transform-origin: 50% 100%;
 transform: rotateX(-90deg) translateY(100%);
}
.btn-8g.btn-error3d  {
background: #aaa;
 -webkit-transform-origin: 50% 0%;
 -webkit-transform: rotateX(90deg) translateY(-100%);
-moz-transform-origin: 50% 0%;
 -moz-transform: rotateX(90deg) translateY(-100%);
 -ms-transform-origin: 50% 0%; -ms-transform: rotateX(90deg) translateY(-100%);
 transform-origin: 50% 0%;
 transform: rotateX(90deg) translateY(-100%);
}
Verde down pe functions și roșu up pe error. Succes!
Vă mulțumim că ați ales să vizitați platforma noastră dedicată Informatică. Sperăm că informațiile prezentate v-au fost utile. Dacă aveți întrebări suplimentare sau aveți nevoie de ajutor, nu ezitați să ne contactați. Vă așteptăm cu drag data viitoare și vă încurajăm să ne salvați în lista de favorite!


Ze Questions: Alte intrebari