CSS3 Tutorial: Buton On / Off forte atragator

Mai jos voi incerca sa descriu cum se poate de creat cu ajutorul la CSS3, un button on/off pentru un site, care nu va putea fi nevazut de vizitatorii site-lui sau webservce-ului, si mai mult, toti vor da click pe el. In principiu se va primi cam asa

Demo CSS Demo CSS+JQuery Download

designul este luat de pe dribble facut de Cole Bemis doar ca acolo este in format PSD (photoshop). Daca va este interesanta abordarea in CSS3, click mai jos

ET1: HTML
Pentru simbolul on/off  vom folosi codul “&#xF011;” ceva mai jos va fi descrierea cum vom primi pictograma data. Asa dar, incepem cu simplul tag pentru link <a> in care punem simbolul,  pentru indicator (rosu-verde) folosim tagul <span> si ambele tag-uri le impreunam in tagul pentru sectiune din HTML5 <section>

<section>
       <a rel="external" href="#button" id="button">&#xF011;</a>
       <span></span>
</section>

ET2: Stilurile de baza

Pentru inceput, punem fundalul “dark” pentru document si aliniem elementul <section> in centrul paginii. Apoi eliminam “outline-ul” punctat din link-ul <a> in stadia activa sau in focus:

body {
	background: url('images/micro_carbon.png');
}
section {
	margin: 150px auto 0;
	width: 75px;
	height: 95px;
	position: relative;
	text-align: center;
}
:active, :focus {
	outline: 0;
}

ET3: personalizarea fontului

Pentru pictograma butonului, vom folosit un font personalizat de la Font Awesome, care lucreaza cu mult mai repede decât o imagine. În acest fel, pictograma va fi uşor de stilizat şi de redimensionat cu ajutorl la stylesheet (CSS).
Downloadam  fontul,  fişierele cu extensia EOT, WOFF, TTF şi SVG. Apoi descriem acest font in codul nostru pentru a defini o familie de fonturi noi.

@font-face {
  font-family: "FontAwesome";
  src: url("fonts/fontawesome-webfont.eot");
  src: url("fonts/fontawesome-webfont.eot?#iefix") format('eot'),
  	   url("fonts/fontawesome-webfont.woff") format('woff'),
  	   url("fonts/fontawesome-webfont.ttf") format('truetype'),
  	   url("fonts/fontawesome-webfont.svg#FontAwesome") format('svg');
  font-weight: normal;
  font-style: normal;
}

Iata ce primim:

Butonul dat, in unicod are codul F011; odata ce in link am plasat &#xF011; cu ajutorl familei de fonturi importate, acest cod se inlocuieste cu pictograma “power”, deci suntem pe calea cea dreapta 🙂

ET4: STILIZAREA BUTONULUI

Mai intâi de toate, trebuie sa definim fontul personalizat pentru buton.
Butonul va fi un cerc, putem obţine efectul de cerc folosind proprietatea border-radius cu valoarea la, cel puţin, jumătate din lăţimea butonului.
Odata ce folosim un font pentru pictograma,   de asemenea putem seta  culoarea şi umbra (text-shadow).

Apoi, vom crea, efectul “bevel”pentru buton. Acest efect este destul de complicat. În primul rând, trebuie să aplicam fundalul de culoare: RGB (83,87,93), asta este pentru culoarea de bază a butonului, apoi adaugam patru straturi pentru  de umbre (box-shadows).

a {
	font-family: "FontAwesome";
	color: rgb(37,37,37);
	text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
	font-size: 32pt;
	display: block;
	position: relative;
	text-decoration: none;
	background-color: rgb(83,87,93);
    box-shadow: 0px 3px 0px 0px rgb(34,34,34), 
    			0px 7px 10px 0px rgb(17,17,17),
    			inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
    			inset 0px -12px 35px 0px rgba(0, 0, 0, .5); 
	width: 70px;
	height: 70px;
	border: 0;
	border-radius: 35px;
	text-align: center;
	line-height: 79px;
}

Acum trebuie sa marcam un cerc mai mare in jurul butonului, asta o vom face cu ajutorul pseudo-elementului “:before”

a:before {
	content: "";
	width: 80px;
	height: 80px;
	display: block;
	z-index: -2;
	position: absolute;
	background-color: rgb(26,27,29);
	left: -5px;
	top: -2px;
	border-radius: 40px;
	box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),
			 	inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}

ET5: INDICATORUL LUMINOS

Pentru a aduce tag-ul <span> la un beculet este novoie de a folosi box-shadow entru a imita efectul rază de lumină, initial ii dam culoarea rosie deoarece consideram ca initial butonul este oprit.

a + span {
	display: block;
	width: 8px;
	height: 8px;
	background-color: rgb(226,0,0);
	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
				0px 0px 3px 2px rgba(226,0,0,0.5);
 	border-radius: 4px;
 	clear: both;
 	position: absolute;
 	bottom: 0;
 	left: 42%;
}

ET6: EFECTELE

În general butonul deja arata destul de bine, avem nevoie doar de cateva efect, spre exemplu, in timpul apasarii (click-ului), trebuie sa facem efectul de “buton presat”, apoi dupa ce am dat click  butonul trebuie sa ia forma presata. Pentru asta, box-shadow  va lua valoarea zero, de asemenea, avem nevoie de a  regla intensitatea celor trei umbre pentru a se potri butonul cu poziţia sa.
Pentru a mentine butonul apasat dupa click, schimbandu-i culoarea pictogramei in alb, folosim pseudo-elementul :target + ceva efecte cu box-shadow

a:active {
    box-shadow: 0px 0px 0px 0px rgb(34,34,34), 
    		0px 3px 7px 0px rgb(17,17,17), 
    		inset 0px 1px 1px 0px rgba(250, 250, 250, .2), 
    		inset 0px -10px 35px 5px rgba(0, 0, 0, .5); 
    background-color: rgb(83,87,93);
  	top: 3px;
}

a:target {
    box-shadow: 0px 0px 0px 0px rgb(34,34,34),
    			0px 3px 7px 0px rgb(17,17,17),
    			inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
    			inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
    background-color: rgb(83,87,93);
  	top: 3px;
  	color: #fff;
  	text-shadow: 0px 0px 3px rgb(250,250,250);
}

a:active:before, a:target:before {
	top: -5px;
	background-color: rgb(26,27,29);
	box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),
			 	inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}

schimbam culoarea indicatorului din rosu in verde pentru a da efectul de “on”

a:target + span {
	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
				0px 0px 3px 2px rgba(135,187,83,0.5);
	background-color: rgb(135,187,83);
}

Adaugam efectele de transactie. Atunci cand apasam, culorile trebuie sa se schimbe lent, pentru timpul de schibare vom da 350ms

a {
    transition: color 350ms, text-shadow 350ms;
	-o-transition: color 350ms, text-shadow 350ms;
	-moz-transition: color 350ms, text-shadow 350ms;
	-webkit-transition: color 350ms, text-shadow 350ms;
}

a:target + span {
   transition: background-color 350ms, box-shadow 700ms;
	-o-transition: background-color 350ms, box-shadow 700ms;
	-moz-transition: background-color 350ms, box-shadow 700ms;
	-webkit-transition: background-color 350ms, box-shadow 700ms;
}


ET7: UPDATE

Pentru CSS asta a fost tot, doar ca odata ce apasam butonul in pozitia “on” nu-l mai putem reintoarce in “off”. pentru asta vom folosi JQuery

$(document).ready(function(){
	$('#button').click(function(){
		$(this).toggleClass('on');
	});
})

Facem o mica modificatie in CSS, tot ce am descris in pseudo-elementul :target, schimbam in class-ul “on”

a.on {
    box-shadow: 0px 0px 0px 0px rgb(34,34,34),
    			0px 3px 7px 0px rgb(17,17,17),
    			inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
    			inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
    background-color: rgb(83,87,93);
  	top: 3px;
 	color: #fff;
  	text-shadow: 0px 0px 3px rgb(250,250,250);
}
a:active:before, a.on:before {
	top: -5px;
	background-color: rgb(26,27,29);
	box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),
			 	inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}
a.on + span {
	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
				0px 0px 3px 2px rgba(135,187,83,0.5);
	background-color: rgb(135,187,83);
}

Demo CSS Demo CSS+JQuery Download

  • marik_v

    !nice