Alte variante ale efectului :hover

In dabblet.com se gasesc multe exemple interesante folosind efectul hover pe link-uri text, cele mai multe dintre ele sunt comune.

Printre acestea, sunt două pe care le-am găsit interesant. Primul este de a adăuga o culoare de fundal colorat unui link text, vezi mai jos:

Primul un link colorat

codul CSS pentru acest efect de adauga inainte de linia </head>

<style>
a.colorido:hover {
color: #FFF;
padding=0 5px;
background-image: -moz-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
background-image: -webkit-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
background-image: -ms-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
background-image: -o-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
}
</style>

salveaza modificarile, intr-o postare noua sau unde doresti sa experimentezi noul tau link,adaugi:

<a class="colorido" href="#">un link colorat</a>

Al doilea exemplu: în loc de afişare a conţinutului de la atributul href, am putea arăta orice altceva (titlu, REL, etc) si CSS, si care transforma textul link într-un fel Tooltip rapid, vezi mai jos:

acest link afiseaza orice alt text aditional

cod CSS:

<style>
a.informacion {position: relative;}
a.informacion:hover:after {
background-color: CornflowerBlue;
border-radius: 5px;
color: #FFF;
content: attr(rel);
font-size: 12px;
left: 2em;
padding: 2px 10px;
position: absolute;
top: -1.5em;
white-space: pre;
}
</style>

si link-ul:

<a class="informacion" href="#" rel="exemplu informatii detaliate">acest link</a>afiseaza orice alt text aditional

Read More

:after si :before

:before si :after sunt chemari pseudo-elemente. Ce fac ele? Iti permite sa adaugi "chestii" pe o etichetă, lucruri care pot fi proprietati CSS sau de conţinut de orice fel. Se poate argumenta ca, unei etichete se adauga alte doua etichete, una înainte (before) şi alta după (after). Aceste elemente nu au prea multe restricţii şi pot fi aplicate la orice etichetă.

Funcţiona pe orice browser relativ moderne, inclusiv Internet Explorer 8, Firefox, Chrome, Opera, Safari. Se poate folosi orice proprietate şi una in particular care ne permite să adăugaţi conţinut. Practic, acest conţinut poate fi atât un text şi adresa URL a unei imagini.

Sa vedem primul exmplu, aplicarea pseudo-elemenelor la un text:

Phasellus neque massa, mollis eu venenatis vitae, sodales vel quam. Aenean vitae nulla ipsum, ac malesuada felis. Morbi semper laoreet adipiscing. Nam adipiscing lacinia eros at mattis.

codul CSS, se adauga inaintea liniei: </head>

<style>
div.demoAB2 {
background-color: #000;
border: 1px solid #456;
color: #FFF;
font-family: Verdana;
margin: 0 auto;
padding: 20px 10px;
position: relative;
text-align: center;
width: 400px;
}
div.demoAB2:before {
background-color: #000;
border: 2px solid #456;
border-radius: 8px;
content: url(URL_IMAGINE);
padding: 5px 10px 2px;
position: absolute;
right: 20px;
top: -15px;
}
div.demoAB2:after {
bottom: 35px;
content: "este es el :after";
font-family: Helvetica;
font-size: 20px;
position: absolute;
right: -65px;
width: 55px;
}
</style>

Inlocuieste URL_IMAGINE cu imaginea ce doresi sa apara desupra textului, salvezi modificarile,si acum intr-o postare noua se adauga:

<div class="demoAB2">
Phasellus neque massa, mollis eu venenatis vitae, sodales vel quam. Aenean vitae nulla ipsum, ac malesuada felis. Morbi semper laoreet adipiscing. Nam adipiscing lacinia eros at mattis. </div>

Exmplul doi cu o imagine:

cod CSS:

<style>
div.demoAB4 {
cursor: pointer;
position: relative;
text-align: center;
}
div.demoAB4:before {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 10px;
box-shadow: 0 0 10px #A0A9B1 inset;
content: "ACEASTA ESTE O IMAGINE";
font-family: Tahoma;
font-size: 32px;
height: 48px;
line-height: 48px;
opacity: 0;
padding: 0 10px;
position: absolute;
right: 50px;
top: 20px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
div.demoAB4:hover:before {
right: 160px;
opacity: 1;
top: 140px;
}
div.demoAB4 img {
width: 400px;
-moz-transition: width 1s;
-webkit-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}
div.demoAB4 img:hover {
width: 500px;
}
div.demoAB4:after {
content: "efect mouseover";
display: block;
font-weight: bold;
font-family: Helvetica;
font-size: 20px;
text-align: center;
}
</style>

Se adauga intr-o noua postare:

<div class="demoAB4">
<img src="URL_IMAGINE" /></div>

---

Read More

Imagini si CSS totul depinde de ce navegator folosim

---

O imagine normala:

<img src="URL_IMAGINE"/>

Rotunjim colturile si in Firefox se vede cum apare in aceasta postare si foarte diferit in, Chrome Opera e IE9:

<img style="border-radius:20px" src="URL_IMAGINE"/>

Am adăuga o frontieră (margine):

<img style="border-radius: 20px;border: 5px solid #ED7274;" src="URL_IMAGINE"/>

Am adăugat un padding care este separarea dintre margine şi imaginea în sine:

<img style="border-radius: 20px;border: 5px solid #76F561;padding: 10px;" src="URL_IMAGINE"/>

Sa continuam cu adaugarea de culoare penttru fondul imagini:

<img style="background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;" src="URL_IMAGINE"/>

Si o mica umbra pe marginea exterioara a imagini:

<img style="background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;box-shadow:0 0 10px #DEF;" src="URL_IMAGINE"/>

Read More

Efect - Navigare cu cercuri

---

Efectul de navigare Cercul cu CSS3 este o ideea buna folosita de tympanus.net si care se poate aplica unui slider de imagini, dar pentru a nu complica lucrurile foarte mult, sa vedem cum se genereaza acest efect in mod obisnuit.

Trucul este bazat pe tag-uri adaugate in link, astfel putand fi controlat individual:

<a class="circulo" href="javascpit:void(0);">
<span style="background-image: url(IMAGINE_VIZIBILA);"></span>
<div style="background-image:url(IMAGINE_ASCUNSA);"></div>
</a>

Link-urile sunt prezentate ca cercuri mici, trecerea cursorul (mousul) peste ele mareste si afiseaza o a doua imagine, vezi exemplul de mai jos:

Si, bineinteles, totul depinde de CSS; - Mergi la Desing --> Editati HTML si urmatorul cod css se adauga inaint

<style>
/*link-urile pot avea orice dimensiune */
a.circulo {
display: inline-block;
height: 46px;
position: relative;
width: 75px;
}
/* la etiqueta SPAN contine imaginea vizibila */
a.circulo span {
background: #00BE98 url() no-repeat 50% 50%; /* imaginea este un fundal */
display: block;
cursor: pointer;
/* dimensiunea imagini */
height: 46px;
width: 46px;
border-radius: 23px; /* se vede ca un cerc cu diamentrul jumatate din marime */
/* pozitie absoluta in centru */
position: absolute;
top: 50%;
left: 50%;
/* punem margini negative sus si la stanga pentru centrare */
margin: -23px 0 0 -23px;
/* animatie */
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
/* imagine ascunsaa */
a.circulo div {
background: transparent url() no-repeat center center;
height: 0;
left: 50%;
margin: 0;
overflow: hidden;
position: absolute;
top: 50%;
width: 0;
z-index: 100;
-moz-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
/* trece cursorul pe deasupra imagini */
/* la etiqueta SPAN se "mareste" */
a.circulo:hover span {
border-radius: 75px;
height: 150px;
margin: -75px 0 0 -75px;
opacity: 0.6;
width: 150px;
}
/* tag-ul DIV se face vizibil */
a.circulo:hover div {
border-radius: 75px;
height: 150px;
margin: -75px 0 0 -75px;
width: 150px;
}
</style>

Salveaza modificarile si deja ai instalat un efect interesant pentru un slide de imagini.

Read More

Youtube Instant Search: Un plugin pentru JQuery

Youtube Instant Search este un mic plugin jQuery care permite sa cauti video si afiseaza rezultatele în timp real, profitand de Youtube API si de lectura de feed-uri în format JSON. Este usor de adaugat si personalizat. In primul rand, daca nu ai instalata biblioteca jQuery copiaza codul urmator si adaugal inainte de </head>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

daca deja ai instalat codul treci la urmatorul pas, adauga sub el urmatorul script cu plugin:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".search_input").focus();
$(".search_input").keyup(function() {
var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=1&v=2&alt=jsonc';
$.ajax({
type: "GET",
url: yt_url,
dataType:"jsonp",
success: function(response){
if(response.data.items){
$.each(response.data.items, function(i,data){
var video_id=data.id;
var video_title=data.title;
var video_viewCount=data.viewCount;
var video_frame="<iframe width='500' height='300' src='http://www.youtube.com/embed/"+video_id+"' frameborder='0' type='text/html'></iframe>";
var final="<div id='title'>"+video_title+"</div><div>"+video_frame+"</div><div id='count'>"+video_viewCount+" Views</div>";
$("#result").html(final);
});
} else {
$("#result").html("<div id='no'>No Video</div>");
}
}
});
});
});
//]]>
</script>

Pentru a utiliza plugin este nevoie de doua DIVs: primul este controlul pentru a face cautarea si al doilea celcare va arata rezultatele. Se adauga intr-o postare noua sau unde doresti sa fie vizibil pe blogul tau.
Codul DIVs;

<div id="input_box">
<input type="text" class='search_input' />
</div>
<div id="result"></div>

ultimul pas, adaugare de stil CSS pentru armare script video si se adauga inainte de linia ]]></b:skin>.

<style>
#input_box {
text-align: center;
width:500px;
}
.search_input {
font-size: 20px;
padding: 5px;
text-align: center;
width: 400px;
}
#result {
background-color: #91D0A1;
margin-top:25px;
min-height:380px;
width:500px;
}
#no { text-align: center; }
#title {
font-size: 18px;
height: 40px;
line-height: 1;
padding-bottom: 10px;
text-align: center;
}
#count {
height: 20px;
padding-top: 10px;
text-align: right;
}
</style>

salveaza modificarile si asta este tot, vezi exemplul de mai jos scrie numele unui artist sau melodie si in cateva secunde poti viziona video-ul cautat.

BARA DE CAUTARE

Un comentariu la acest post este binevenit!

Read More

Efecte acordeon

Un efect foarte interesant de acordeon pe verticala (vezi aici acelasi efec dar pe orizontala)
Ori de cate ori efectuam orice actiune pe o eticheta si dam clic pe ea pentru a interactiona, doar cu CSS nu este suficient, avem nevoie de JavaScript pentru ca browser-ului sa actioneze efectul acordeoane, vezi exemplul de mai jos:

Primul efect

Being a part of GulfReserve lets you invest in oil industry of almost all GULF and its surrounding countries. Despite of unstable political circumstances in some of these countries, OIL industry is still on its usual stable path but this stability denotes constant surge and decline in price and global demand of different varities of OIL and that is where

Al doilea efect

Proin consequat, justo quis ultrices vestibulum, lorem mi porttitor justo, et tristique magna ipsum sit amet ligula. Aliquam ante libero, imperdiet a sollicitudin commodo, iaculis at nunc? Proin luctus, diam nec semper ultrices, purus quam accumsan purus, ac sodales nunc odio in tellus.

Al treilea efect

Being a part of GulfReserve lets you invest in oil industry of almost all GULF and its surrounding countries. Despite of unstable political circumstances in some of these countries, OIL industry is still on its usual stable path but this stability denotes constant surge and decline in price and global demand of different varities of OIL and that is where

Un acordeon este o serie de link-uri care ne permit sa afiam sau sa ascundem un continut, astfel incat numai unul este vizibila atunci cand facem selectia, asa castigam spatil pe blog.

Pentru inceput mergi la Aspect --> Editati HTML/Javascript si cauta linia </head> adaugi urmatorul cod javascript:

<script>
//<![CDATA[
var abierto = "primero";
function demoacordeon(cual) {
var mostrar = document.getElementById(cual);
var actual = document.getElementById(abierto);
if(mostrar==actual) {return false;}
// permutamos sus clases
actual.className="novisible";
mostrar.className="visible";
abierto = cual;
}
//]]>
</script>

in continuare cauta linia ]]></b:skin> exact inaintea ei adaugi codul CSS urmator:

<style>
#demoA { /* div dimensionare si centrare */
margin: 0 auto;
width: 500px;
}
#demoA a { /* propietati link si butoane */
background-color: #456;
box-shadow: 0 0 4px #ABC inset;
display: block;
font-size: 16px;
height: 2em;
line-height: 2em;
margin: 1px 0;
padding-left: 20px;
}
#demoA a:hover {
box-shadow: 0 0 12px #ABC inset;
color: #EEE;
}
#demoA div { /* los contenidos */
overflow:hidden;
text-align: center;
/* fiecare schimbare se realizeaza cu efect anumat¨*/
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#demoA div.visible {
border: 1px solid #456;
height:100px;
}
#demoA div.novisible {
border: 1px solid transparent;
height:0px;
}
</style>

salveaza modificarile si acum deschizi un post nou si adaugi codul HTML urmator:

<div id="demoA">
<a onclick="demoacordeon('primero');" href="javascript:void(0);">TEXT 1</a>
<div id="primero" class="visible">
<p> ....... CONTINUT 1 ....... </p>
</div>
<a onclick="demoacordeon('segundo');" href="javascript:void(0);">tEXT 2</a>
<div id="segundo" class="novisible">
<p> ....... CONTINUT 2 ....... </p>
</div>
<a onclick="demoacordeon('tercero');" href="javascript:void(0);">TEXT 3</a>
<div id="tercero" class="novisible">
<p> ....... CONTINUT 3 ....... </p>
</div>
</div>

Read More

Cautare cu efect!

Acest lucru de a folosi jQuery este foarte usor, desi pe mine nu ma convinge, stiu ca este noua moda, dar îmi place să contrazic şi să caute alternative la bibliotecile de scripting, care sunt confortabile, dar, stiti ca un stil de viata sedentar nu este bun asa ca este intotdeauna mai bine pentru a găsi alternative sau cel putin a incearca.

În acest caz folosesc Autogrow search, o modalitate de a crea o etichetă de intrare(IMPUT) tehnica folosita de motoarele de căutare pentru a introduce text şi are proprietatea de a extinde şi modifica alte detalii grafice atunci când este activată. Un exemplu vezi mai jos:

Pentru a folosi acest efect cu CSS pe blog este nevoie de doua conditii:

1. Adauga codul HTML intr-un nou gadget HTMLJavascript,intr-o postare noua sau unde doresti sa apara pe blog:

<div id="wrap-search">
<div id="search">
<form class="form-search" method="get" action="/search" target="_blank">
<input src="URL_IMAGINE" type="image"/>
<input type="text" name="q" value="buscar" onfocus="this.value='';" onblur="this.value='buscar';" onmouseover="this.value='';" onmouseout="this.value='cauta';" />
</form>
</div>
</div>

unde URL_IMAGINE il inlocuiesti cu url-ul unei imagini de maxim 40x40px a unei lupe.

2. Mergi la Desing -->Editati HTML si cauti linia de cod ]]></b:skin> exact inaintea ei adaugi codul urmator CSS:

<style>
#wrap-search {
margin: 0 auto;
width: 100px;
-moz-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
#wrap-search br { display: none; }
#wrap-search #search {
background: -moz-linear-gradient(center bottom , #9B9B9B 0%, #A9A9A9 50%, #CACACA 50%, #D3D3D3 2550%);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #9B9B9B),color-stop(0.5, #A9A9A9),color-stop(0.5, #CACACA),color-stop(25.5, #D3D3D3));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9B9B9B', EndColorStr='#CACACA');
border-radius: 5px;
padding: 4px;
}
#wrap-search:hover { width:200px; }
.form-search {
background: -webkit-gradient(linear, 0 bottom, 0 top, from(#EBEBEB), to(#BCBCBC));
background: -moz-linear-gradient(-90deg, #BCBCBC, #EBEBEB);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EBEBEB', EndColorStr='#BCBCBC');
border: 1px solid #747474;
border-radius: 3px;
box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF;
height: 32px;
position: relative;
-moz-transition: all .2s ease-out;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.form-search input[type='text'] {
background: none;
border: none;
color:#6E7074;
height: 34px;
line-height: 34px;
padding: 0 27px 0 6px;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
text-shadow: 0 1px 0 #FFF;
}
#wrap-search:hover input[type='text'] { color:#597C84; }
#wrap-search:hover .form-search {
background: -moz-linear-gradient(-90deg, #9CC2CA, #DFECEF);
background: -webkit-gradient(linear, 0 bottom, 0 top, from(#DFECEF), to(#9CC2CA));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#DFECEF', EndColorStr='#9CC2CA');
box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
color: #25464D;
}
.form-search input[type='image'] {
height: 32px;
opacity: .5;
filter:alpha(opacity=50);
position: absolute;
right: 0px;
top: 0px;
width: 32px;
}
.form-search input[type='image']:hover {
opacity: 1;
filter:alpha(opacity=100);
}
</style>

Salvezi modificarea si deja ai instalat pe blog un buton de cautare cu efect. Succes!

Read More

Animatie - Exemplu de acordeon cu CSS

Acest exemplu de acordeon create numai cu CSS si care lucreaza în mod normal, în orice browser, dar este pregatit sa functioneze corect în Chrome, Opera şi Firefox 4.
Exemplu acordeon orizontal este cel care se potriveste cel mai bine in orice situatie si poate fi folosit cu latimi fixe şi procente, aici, spre deosebire de original, voi folosi prima metoda în cazul in care HTML este o lista ordonata, deci intr-o postare noua se adauga urmatorul cod:

<ul class="accordion">
<li class="slide-01">
<div>
<h2>Fila 1</h2>
....... aici textul .......
</div>
</li>
<li class="slide-02">
<div>
<h2>Fila 2</h2>
....... aici textul .......
</div>
</li>
<li class="slide-03">
<div>
<h2>Fila 3</h2>
....... aici textul .......
</div>
</li>
</ul>

Ultimul pas mergi la Desing --> Editati HTML si exact inaintea liniei ]]></b:skin> adaugi urmatorul CSS:

.accordion h2 { /* el título */
color: #DEF;
font-family: Helvetica;
font-size: 20px;
margin: 0 0 0.5em;
text-align: center;
}
.accordion li { /* cada item de la lista */
float: left;
overflow: hidden;
height: 160px; /* inaltimea maxima ce dorim */
width: 150px; /* latime maxima ce dorim */
/* propietati de animatie */
-moz-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-moz-transition-delay: 0.15s;
-webkit-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.accordion li:first-of-type { /* margini rotunde de la prima fila */
-moz-border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
-o-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
}
.accordion li:last-of-type{ /* margini rotunde de la ultima fila */
-moz-border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-o-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
}
.accordion div { /* el contenido */
padding: 10px;
}
.accordion:hover li {
/* pasar mouse se reduce latimea de la toate filele */
width: 100px;
}
.accordion li:hover {
/* se mareste latimea de la fila care o selectionam cu mouse-ul */
width: 300px;
}
/* culoare pentru fiecare fila */
.slide-01 {background:#404951; color:#FFF;}
.slide-02 {background:#606971; color:#FFF;}
.slide-03 {background:#808991; color:#FFF;}

Si rezultatul il poti vedea aici:

Un alt exempu de acordeon dar pe verticala gasesti in Vagabundia

Read More

Meniu expandabil cu CSS

Daca as spune ca tranziţiile folosesc pentru orice, este o exagerare, dar ... foloseste pentru aproape orice. De data aceasta, sa vedem modul în care acestea ar putea fi aplicate pentru a crea meniuri expandabile.

Cred că HTML este un dreptunghi în care adaugam o lista ordonata a cărei clasa este vizibil şi în interiorul adaugam a doua lista, cu o clasa invizibila:

Cod HTML

<div id="demomenu">
<ul class="visiblela">
<li>Acasa <ul class="novisible">
<li><a href="#">Tema 1</a></li>
<li><a href="#">Tema 2</a></li>
<li><a href="#">Tema 3</a></li>
<li><a href="#">Tema 4</a></li>
<li><a href="#">Tema 5</a></li>
</ul>
</ul>
</div>

si CSS

<style>

/* reguli generale */
#demomenu { /* ACESTA ESTE DREPTUNGHIUL CARE CONTINE TOT */
margin: 0 auto 50px;
position: relative; /* ozitionare de forma relativa */
width: 200px; /* definim latimea */
z-index: 100;
}
#demomenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#demomenu li { list-style-type: none; }
#demomenu a { /* se stabileste propietatea text de legatura linck */
color: #456;
font-size: 17px;
text-decoration: none;
text-shadow: 1px 1px 1px #FFF;
}
#demomenu a:hover { color: #000; }

/* aceasta este linia vizibila */
#demomenu .visible {
background-color: #456;
border: 2px solid #ABC;
border-radius: 4px;
box-shadow: 0 0 5px #FFF inset;
cursor: pointer;
padding: 5px 0;
text-align: center;
display: block;
position: absolute;
width: 200px;
}
#demomenu ul.visible li {
color: #EEEEEE;
font-family: Tahoma;
font-size: 24px;
text-shadow: 1px 1px 1px #000;
}

/* fiecare linie ce ramane invizibila */
#demomenu ul.visible ul li {
background-color: #ABC;
border-top: 2px solid #456;
padding: 0 0 5px;
/* aceasta tranzatie afecteaza culoarea de fond de la fiecare tema */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}

/* lista ascunsa */
#demomenu .novisible {
display: block;
padding: 0 10px;
position: relative;
top: 10px;
height: 0;
overflow: hidden;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}

/* schimba culoarea de fond */
#demomenu ul.visible ul li:hover { background-color: #CDE; }

#demomenu ul.visible:hover .novisible { height: 200px; }

</style>

Un exemplu de meniu click aici

---

Read More

Meniu vertical - clase CSS

Adaug azi un nou meniu vertical folosind clase CSS, acesta utilizeaza o imagine de fond unica pentru a realiza 3 efecte diferite.

Pentru incorporarea lui intr-un blog se respecta urmatori pasi:

1. Copiaeza urmatoarea imagine in PC-ul tau, o gazduiesti intr-un servidor de imagini care iti ofera url-ul de la imagine.


2. Mergi la Desing --> Editati HTML , cu ajutorul tastelor Control + F cauta urmatoarea linie ]]></b:skin> si exact deasupra ei adauga urmatorul cod clase CSS:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.arrowgreen{
width: 180px; /*width of menu*/
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 0px;
border-width: 0px;
}

.arrowgreen ul{
list-style-type: none;
margin: 0;
padding: 0;
}

.arrowgreen li a{
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
display: block;
background: transparent url(url_imagine) 100% 0;
height: 24px; /*Set to height of bg image- padding within link (ie: 32px - 4px - 4px)*/
padding: 4px 0 4px 10px;
line-height: 24px; /*Set line-height of bg image- padding within link (ie: 32px - 4px - 4px)*/
text-decoration: none;
}

.arrowgreen li a:link, .arrowgreen li a:visited {
color: #5E7830;
}

.arrowgreen li a:hover{
color: #26370A;
background-position: 100% -32px;
}


.arrowgreen li a.selected{
color: #26370A;
background-position: 100% -64px;
}

</style>

Inlocuieste url_imagine cu url-ul imagini gazguite. Salveaza modificarile si mergi la ultimul pas:

3. Deschde un nou gadget HTML/Javascript si adauga urmatorul cod html:

<div class="arrowgreen">
<ul>
<li><a href="url_link" >Home</a></li>
<li><a href="url_link" >CSS Library</a></li>
<li><a href="url_link" >DD Whois</a></li>
<li><a href="url_link" >Forums</a></li>
<li><a href="url_link" >Webmaster Tools</a></li>
<li><a href="url_link" >JavaScript</a></li>
</ul>
</div>

Inlocuieste ce este in culoare rosie cu url-ul paginilor care doresti sa apara si ce este de culoare albastra inlocueste cu descrierea sau titlul fiecarei pagini.

Un exemplu al acestui meniu vertical il gasesti pe blogul meu de proba clik aici

Read More

Meniu orizontal simplu pentru blogul tau

---

Cu câteva luni în urmă am aratat cateva meniuri pe care le poti adăuga la blog-ul tau rapid şi uşor.

Ei bine, azi a venit rândul să iti arat un nou meniu de navigare orizontal, un pic mai complex, dar simplu de implementat.

Poti vedea un exemplu a acestui meniu aici.

Pentru adaugarea meniu-lui mergi la Desen --> Element HTML/Javascript si adaugi urmatorul cod:

Meniu orizontal simplu pentru blogul tau
<hr />
<div id="meniu">
<ul id="navi1">
<li><a href="URL_LINK">Acasa</a></li>
<li><a href="URL_LINK">Desen</a></li>
<li><a href="URL_KINK">Stiri</a></li>
<li><a href="URL_LINK">Contact</a></li>
</ul>
</div>

<style type="text/css">
#navi1 {
margin:0px;
padding:0px;

}
#navi1 li {
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
background:url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini-1.png);
color:#000000;
margin:5px;
padding:3px;
width: 100px;
border:1px solid black;
text-align:center;
list-style:none;
font-family: Segoe UI, Arial;
font-size: 14px;
float:left;
}
#navi1 li:hover {
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
background:url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini-1.png);
color:#000000;
border:1px solid black;
}
#navi1 li a:hover {
color: #003366;
font-style: Italic;http://www.blogger.com/img/blank.gif
text-decoration: none;
}
#navi1 a {
color: #CCCCCC;
font-weight: bold;
}
</style>

Bun acum poti modifica tot ce este de culoare rosie cu informatia ce doresti sa apara in meniu si inlocuirea URL_LINK cu link-ul unde vrei sa fie directionata respectiva informatie.

Daca cauti un meniu orizontal interesant cu efetul Dock il poti gasi aici

Read More

Suprapune un text pe o imagine

Există multe modalităţi de a suprapunere text pe o imagine. Cele mai comune este de a plasa o imagine ca fundal intr-un bloc DIV. Cateva exemple se vad mai jos unde apare un text scris la inceputul imagini si in a doua imagine textul apare in partea de jos a imagini.Logic textul apare in prima imagine sus, pentru aplicarea lui jos trebuie adaugat in DIV proprietatea position: relative si la continul propietatea position: absolute.In acest mod folosind left, right, top si bottom se poate adauga textul in orice loc intr-o imagine.

---

Un buchet de flori
Pentru toate femeile de 8 Martie

<div style="background: url(URL_Imagine) no-repeat scroll left top transparent; height: 293px; margin: 0pt auto; width: 400px;">
<h4 style="-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; background-color: CornflowerBlue; color: rgb(255, 255, 255); margin: 0pt; padding: 5px 10px; width: 300px;">Text prima linie
Text a doua linie</h4></div>

Un buchet de flori
Pentru toate femeile de 8 Martie

<div style="position: relative; background: url(URL_Imagine) no-repeat scroll left top transparent; margin: 0pt auto; height: 293px; width: 400px;"><h4 style="-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; background-color: CornflowerBlue; bottom: 20px; color: rgb(255, 255, 255); margin: 0pt; padding: 5px 10px; position: absolute; width: 300px;">Text prima linie
Text a doua linie</h4></div>

Un alt exemplu mai simplu de a scrie un text pe o imagine gasesti aici

Read More