Efectele originale folosind CSS

Posibilităţile de folosire CSS3 încep să fie aplicate din ce in ce mai mult şi într-un fel, sunt infinite. Opţiunile sunt numeroase şi, în general, destul de simplu de aplicat.

Aici, voi prezenta un exemplu, dar restul pot fi vizualizate în demo on-line sau descărcate direct pe PC.

Toate au o structură similară în cadrul unui DIV cu anumite clase CSS (viev), se adaugă o imagine a cărei dimensiune defineşte restul proprietăţilor şi apoi un alt DIV va rămâne ascuns (mask), şi al cărui conţinut poate fi variabil.

<div class="view">
<img src="URL_IMAGEN" />
<div class="mask">
<h4> Titlu </h4>
<p> Text descriere </p>
<a href="#" class="info"> Citeste mai departe </a>
</div>
</div>

Evident, CSS este ceea ce contează şi este ... lung, deoarece, din păcate, se repetă multe proprietăţi pe care browsere, încă nu s-au decis să le unifice.

<style>
.view { /* DIV principal care are aceias dimensiune ca si imaginea utilizata, in acest caz este de 420x300 */
border: 10px solid #FFF;
cursor: pointer;
height: 300px;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: center;
width: 420px;
}
.view img { /* imagine */
display: block;
position: relative;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
opacity: 1;
filter: alpha(opacity=100);
}
.view:hover img { /* se anima cant trece mouseul peste imagine */
-moz-transform: rotate(720deg) scale(0);
-webkit-transform: rotate(720deg) scale(0);
-o-transform: rotate(720deg) scale(0);
-ms-transform: rotate(720deg) scale(0);
transform: rotate(720deg) scale(0);
opacity: 0;
filter: alpha(opacity=0);
}
.view .mask { /* DIV ascuns cu textul */
background-color: #ABC;
height: 300px;
left: 0;
position: absolute;
overflow: hidden;
top: 0;
width: 420px;
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
opacity: 0;
filter: alpha(opacity=0);
}
.view:hover .mask { /* */
-moz-transform: translateY(0px) rotate(0deg);
-webkit-transform: translateY(0px) rotate(0deg);
-o-transform: translateY(0px) rotate(0deg);
-ms-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
-moz-transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s;
opacity: 1;
filter: alpha(opacity=100);
}
.view h4 { /* titlul care ramane ascuns */
background-color: rgba(255, 255, 255, 0.5);
color: #FFF;
text-align: center;
position: relative;
font-family: Georgia;
font-size: 20px;
margin: 20px 0 0 0;
padding: 5px 0;
text-shadow: 0 3px 1px #000;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover h4 { /* apare titlul */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.view p { /* textul care ramane ascuns */
color: #000;
font-family: Tahoma;
font-size: 13px;
margin: 0;
padding: 15px;
position: relative;
text-align: center;
text-shadow: 1px 1px 1px #FFF;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view:hover p { /* apare textul */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.view a.info { /* link-ul care ramane ascuns */
background-color: #456;
border-radius: 5px;
box-shadow: 0 0 2px #FFF, 0 0 5px #FFF inset;
color: #FFF;
display: inline-block;
padding: 7px 14px;
text-decoration: none;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.view a.info:hover {
box-shadow: 0 0 5px #FFF;
}
.view:hover a.info { /* apare link-ul */
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
</style>

Castiga bani cu INFINI

Infini Global Network este un concept pe care il poti folosi pentru a-ti crea bunastarea si confortul la care visezi utilizand puterea combinatiei network-marketing si internet. Comunitatea Infini Global Network este o afacere ce mi s-a parut a fi o oportunitate exceptionala.

Citeste mai departe

Read More

Inca un exemplu de meniu animat cu CSS3

Un alt exemplu ce ofera CSS3 şi tranziţii pentru a crea meniuri animate.
Pentru a crea un un meniu animat in acest stil (vezi un exemplu aici) mergem la Desing -> Editati HTML si cautam linia </head> si exect deasupra ei se va adauga datele de mai jos:

<style type="text/css">
#menucircle { margin-left:50px; }
a.menucircle {
background-image: -moz-linear-gradient(100% 100% 90deg, #ABC, #456);
background-image: -webkit-gradient(linear, left bottom, left top, from(#ABC), to(#456));
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF445566', EndColorStr='#FFAABBCC');
background-color: #000;
-moz-transition-duration: 3s;
-webkit-transition-duration: 3s;
-o-transition-duration: 3s;
transition-duration: 3s;
border-radius: 10px;
color: #FFF !important;
display: block;
float:left;
font-family: Helvetica;
font-size:30px;
height: 100px;
line-height: 100px;
text-align: center;
text-decoration: none;
margin: 0 10px;
width: 150px;
}
a.menucircle:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transition-duration: .4s;
-webkit-transition-duration: .4s;
-o-transition-duration: .4s;
transition-duration: .4s;
background-image: -moz-linear-gradient(100% 100% 90deg, #DEF, #567);
background-image: -webkit-gradient(linear, left bottom, left top, from(#DEF), to(#567));
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF556677', EndColorStr='#FFDDEEFF');
color: #FF0;
}
</style>

ultimul pas deschide un nou vidget HTML/Javascript si adauga urmatorul cod:

<div id="menucircle">
<a class="menucircle" href="url_link">TEXT 1</a>
<a class="menucircle" href="url_link">TEXT 2</a>
<a class="menucircle" href="url_link">TEXT 3</a>
<!-- alte link-uri -->
</div>

Read More

Icoane sociale efect zoom cu CSS

Putem transforma proprietăţile unor imagini într-o varietate de moduri, folosind doar CSS. CSS este folosit pentru a transforma diferite forme de imagini cum ar fi: patrate, cercuri, triunghiuri sau chiar un element de conţinut fără a deranja in jurul lui. Cele două proprietăţi sunt acceptate în versiunile moderne de Safari, Chrome, Mozilla 3.5 +, Opera 9.5 + . Folosid un cod CSS3 de mai jos obtinem efectul "umfla" o imagine atunci când mouse-ul trece peste ea, şi evine la forma initiala la retragere lui. Vezi exemplul de mai jos:

• 
• 
• 
• 
• 

Mergi la Desing --> Editati HTML si cauti urmatoarea linie ]]></b:skin> exact deasupra ei adaugi urmatorul Cod CSS:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://nouwidget.blogspot.com/style/ */

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

.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}

.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

Salveaza si mergi la o postare noua sau deschizi un nou gadget HTML/Javascript si adaugi urmatorul cod HTML:

<ul class="bubblewrap">
<li><a href="URL_LINK"><img src="url_imagine_Stumbleupon.png" title="Add to Stumbleupon" /></a></li>
<li><a href="URL_LINK"><img src="url_imagine_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="URL_LINK"><img src="url_imagine_digg.png" title="Add to Digg" /></a></li>
<li><a href="URL_LINK"><img src="url_imagine_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="URL_LINK"><img src="url_imagine_rss.png" title="Add RSS Feed" /></a></li>
</ul>

Schimba URL_LINK cu linck-ul corespunzator pagini de socializare , si de asemenea url_ imagine cu respectiva imagine a retele. SUCCES!

Read More

Meniu orizontal in culori cu CSS

Un interesant meniu orizontal in culori adaptat pentru blogger realizat cu CSS.Mai jos este doar o imagine dar il poti vedea cum apare instalat pe blog in exemplul urmator: click aici

Cum se instaleaza acest meniu?
Mergi la Aspect (Desing) --> Editare HTML cauta linia ]]></b:skin> si exact inaintea ei adaugi urmatorul cod CSS:

#middle {
width: 765px;
float:center;
padding:10px 10px 10px 10px;
margin:10px 0;
background:#BDDFEB url() no-repeat;
}
.category {
width:133px;
float:left;
border-top:8px solid #333;
margin:5px;
padding:15px 10px 10px 10px;
background:#33AAFF;
}
.category p {
margin:0;
}

#cat-1 {width:133px; margin:0; border-top:8px solid #9977FF; color:#000000;}
#cat-2 {width:133px; margin:0; border-top:8px solid #66BB88; color:#000000;}
#cat-3 {width:133px; margin:0; border-top:8px solid #FF55FF; color:#000000;}
#cat-4 {width:133px; margin:0; border-top:8px solid #9911FF; color:#000000;}
#cat-5 {width:133px; margin:0; border-top:8px solid #FFDD33; color:#000000;}

#cat-1 h2, #cat-2 h2, #cat-3 h2, #cat-4 h2, #cat-5 h2 {
text-transform:lowercase;
margin:0;
font-weight:bold;
font-size:1.5em;
letter-spacing:-0.05em;
color:#333;
}
.category a {
color:#ffffff;
display:block;
background:none;
}
.category a:hover {
background:none;
color:#fff;
text-decoration:none;
}
#cat-1:hover {background:#9977FF; color:#352726; }
#cat-2:hover {background:#66BB88; color:#352726; }
#cat-3:hover {background:#FF55FF; color:#352726; }
#cat-4:hover {background:#9911FF; color:#352726; }
#cat-5:hover {background:#FFDD33; color:#352726; }
#cat-1 h2 a:hover, #cat-2 h2 a:hover, #cat-3 h2 a:hover, #cat-4 h2 a:hover, #cat-5 h2 a:hover {
color: #fff;
}

verifica daca totul este bine si salveaza modificarile.

Pasul 2 Editare nou gadget HTML/Javascript si adauga urmatorul cod html:

<div class='clearfloat' id='middle'>
<div class='cat-1'>
<div class='category section' id='cat-1'><div class='widget text' id='text1'>
<h2 class='title'><a href='URL 1'></a></h2><b>TEXTUL 1</b>
</div></div></div>

<div class='cat-2'>
<div class='category section' id='cat-2'><div class='widget text' id='text2'>
<h2 class='title'><a href='URL 2'></a></h2><b>TEXTUL 2</b>
</div></div></div>

<div class='cat-3'>
<div class='category section' id='cat-3'><div class='widget text' id='text3'>
<h2 class='title'><a href='URL 3'>/a></h2><b>TEXTUL 3</b>
</div></div></div>

<div class='cat-4'>
<div class='category section' id='cat-4'><div class='widget text' id='text4'>
<h2 class='title'><a href='URL 4'></a></h2><b>TEXTUL 4</b>
</div></div></div>

<div class='cat-5'>
<div class='category section' id='cat-5'><div class='widget text' id='text5'><h2 class='title'><a href='URL 5'></a></h2><b>TEXTUL 5</b>
</div></div></div></div>

Latimea de meniu se poate modifica de aici:
#middle {
width: 765px;

Se poate schimba culoarea textului de aici:
.category a
color:#ffffff;

La fel se poate schimba culoarea textului cand trece mouse-ul :
.category a:hover
color:#fff;

Pare un pic complicat cu atatea modificari dar merita incercat.

Read More

Selectioneaza, copiaza si lipeste un text!

In orice browser se poate copia un text ,un link sau o imagine.Daca pe blog-ul tau folosesti anumite (coduri,linck-uri sau texte) si doresti sa fie usor de selectionat si copiat poti folosi urmatoarea metoda foarte simpa si usor de adaugat pe blog.adauga urmatorul cod intr-o postare noua cu textul ce doresti sa fie selectionat si copiat:

<textarea rows="2" cols="5" onMouseOver="this.focus()" onFocus="this.select()" input type="text" name="emailaddr" value="your e-mail" size="31" onMouseOver="this.focus()" onFocus="this.select()"></...AICI VINE TEXTUL...textarea>

Daca treci cursorul peste acest text, continutlu va fi selectionat automat.Poate fi text sau cod HTML

folosind o alta metoda cu adaugarea unui buton de selectionare:

<center><form name="select_all">
<textarea rows="2" cols="50" name="text_area">... aici vine textul ...</textarea>
<input value="Selectioneaza textul" onclick="javascript:this.form.text_area.focus();this.form.text_area.select();" type="button"></form></center>

rezultatul este urmatorul:

... aici vine textul ...

Read More

Butoane cu CSS3 pentru blog

Aceasta este o alta forma de a construi butoane fara imagini,folosind umbre si alte efecte cu CSS3,adevarat cu cateva limite, dar functionand cu orice browser.

mergi la Aspect --> Editere HTML/Javascript si inainte de linia ]]></b:skin> adauga urmatorul cod CSS:

<style>
ul.demobotones a {
color: #FFF;
float: left;
font-size: 26px;
height: 40px;
line-height: 40px;
margin: 0 5px;
text-align: center;
text-shadow: 1px 1px 1px #000;
width: 120px;
-moz-border-radius: 9px; /* Firefox */
-webkit-border-radius: 9px;
border-radius: 9px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#65A5ED", endColorstr="#AEEAFF"); * Internet Explorer */
background: #65A5ED;
background: -moz-linear-gradient(center bottom,rgb(150,238,255) 11%,rgb(131,178,229) 41%,rgb(85,155,229) 54%,rgb(194,204,234) 94%); /* Firefox */
background: -webkit-gradient(linear,left bottom,left top,color-stop(0.11, rgb(150,238,255)),color-stop(0.41, rgb(131,178,229)),color-stop(0.54, rgb(85,155,229)),color-stop(0.94, rgb(194,204,234))); /* Chrome y Safari */
background: linear-gradient(top, #65A5ED, #AEEAFF); /* W3C */
-moz-box-shadow: 0 0 4px #000; /* Firefox */
-webkit-box-shadow: 0 0 4px #000; /* Chrome y Safari */
box-shadow: 0 0 4px #000; /* W3C */
}
ul.demobotones a:hover{
border-color: #000062;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=”#DBDBDB”, endColorstr=”#FFFFFF”); * Internet Explorer */
background: #DCDCDC;
background: -moz-linear-gradient(center bottom,rgb(255,255,255) 0%,rgb(214,214,214) 50%,rgb(235,235,235) 71%,rgb(248,248,248) 85%); /* Firefox */
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,255,255)),color-stop(0.5, rgb(214,214,214)),color-stop(0.71, rgb(235,235,235)),color-stop(0.85, rgb(248,248,248))); /* Chrome y Safari */
background: linear-gradient(top, #dbdbdb, #fff);-moz-box-shadow: 0 0 6px #000;-webkit-box-shadow: 0 0 6px #000;box-shadow: 0 0 6px #000; /* W3C */
}
ul.demobotones a:active{
-moz-box-shadow: 0 0 2px #000; /* Firefox */
-webkit-box-shadow: 0 0 2px #000; /* Chrome y Safari */
box-shadow: 0 0 2px #000; /* W3C */
}
</style>

si ultimul pas: unde doresti sa apara butoanele adaugi urmatorul cod HTML:

<ul class="demobotones"><a href="#">Blogger</a> <a href="#">RSS</a> <a href="#">Contact</a></ul>

SI REZULTATUL ESTE URMATORUL:

Blogger RSS Contact

Read More

Meniu orizontal simplu cu stilul CSS

Un meniu este o piesa importanta intr-un blog pentru ca ne ajuta sa punem ordine in continutul lui. Un meniu creat cu CSS este mai usor de adaugat pe un blog decat un meniu creat cu un script.

• HOME
• Enlace-1
• Enlace-2
• Enlace-3
• Enlace-4

Acest meniu este foarte usor de adaptat la un blog pentru ca exsta posibilitatea de al adapta la culoare sau dimensiune cu respectivul. Pentru adaugare mergem la Aspect --> HTML/Javascript si inainte de linia ]]></b:skin> adaugi urmatorul cod CSS:

#navigation {
margin-left:100px; /* Margina stanga */
top:25px; /* Margina sus */
}
#navigation li {
float:left;
}
#navigation a {
background-color:#000000; /* coloare de fond */
border-bottom:3px solid #FFFFFF; /* Línie inferioara *
color:#FFFFFF; /* Coloare de text */
display:inline-block;
font-size:13px; /* Marime de text */
font-weight:normal;
margin-right:1px;
padding:10px 20px 10px; /* Inaltime si latime de meniu */
text-decoration:none;
text-transform:uppercase; /* Litere mari */
text-shadow:0 1px 1px #CDCDCD ;/* Umbra text */
}
#navigation a:hover {
border-bottom:3px solid #05C7C0; /* Linia inferioara cand trece mouser-ul (hover) */
color:#05C7C0; /* Culoare cand trece mouser-ul (hover) */
}
#navigation li.selected a {
border-bottom:3px solid #05C7C0; /* Coloare linie inferioara fixa (Home) */
color:#05C7C0; /* Coloare text fix(Home) */
}
#navigation ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}

salveaza modificarile,si ultimul pas deschide un gadget HTML/Javascript si adaugi urmatorul cod HTM:

<div id='navigation'>
<ul>
<li class='selected'><a href='#'>HOME</a></li>
<li><a href='#'>Link-1</a></li>
<li><a href='#'>Link-2</a></li>
<li><a href='#'>Link-3</a></li>
<li><a href='#'>Link-4</a></li>
</ul>
</div>

In acest cod se poate inlocui Home sau Link cu ce doreti tu sa para in meniu

Read More

Com schimbam pozitia unei imagini ?

Cu ajutorul stilului CSS se poate schimba pozitia unei imagini. Avem nevoie de a crea o clasa numita flipH cu aceasta se poate modifica pozita unei imagini cand mouse-ul trece peste ea. Efectul este vizibil pe orice browser.

Mergem la Aspect --> HTML/Javascript si inainte de ]]></b:skin> adaugam urmatorul cod:

.flipH { /* cualquier propiedad */ }
.flipH:hover {
-moz-transform: scaleX(-1); // Firefox
-o-transform: scaleX(-1); // Opera
-webkit-transform: scaleX(-1); // Chrome y Safari
transform: scaleX(-1); // w3org
filter: FlipH; // Internet Explorer
}

salveaza modificarile si acum mergem la o postare noua unde vom adauga:

<img class="flipH" src="URL_imagine" />

schimba URL_imagine cu respectiva imagine care doresti sa apara in postare.
Un exemplu in imaginile de mai jos --> trece mouse-ul peste ea!

Read More

Generator online CSS3

Vom vedea ce se poate face folosind stilul CSS3 Playground , un generator online, care ne dă posibilitatea de a juca cu caracteristicile CSS3.Unele dintre lucrurile pe care le obţine sunt colturi rotunjite, umbre picătură pe text, marini ingrosate şi un efect frumos de opacitate.

In partea din stanga vedeti o bară de instrumente pentru a selecta proprietăţile pe care doriţi să le adăugaţi.In partea de sus avem un bloc eşantion se va schimba pe masura ce facem modificări, putem vedea blocul complet, dacă glisaţi liniei frontierei de jos cu mouse-ul.În partea de jos gasim stiluri care se adaugă la bloc şi la finalizarea modificări putem copia care spune că "Style to use in html/css file" şi lipiţi intr-o noua postare prin adăugarea unei clase de utilizare.
Am simplifica un pic, şi să presupunem că vom crea un bloc, oferă următoarele stiluri şi se adaugă înainte de ]]></b:skin> urmatorul cod.

.bloque-color {
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
-webkit-box-shadow: 4px 4px 6px #000000;
-moz-box-shadow: 4px 4px 6px #000000;
box-shadow: 4px 4px 6px #000000;
text-shadow: -1px -1px 0px #000000;
-webkit-transform: rotate(-17deg) scale(0.9) skew(-22deg,17deg);
-moz-transform: rotate(-17deg) scale(0.9) skew(-22deg,17deg);
-o-transform: rotate(-17deg) scale(0.9) skew(-22deg,17deg);
border: 1px solid #FFC0CB;
background: #696969;
padding: 9px;
opacity: 0.7;
font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
font-size: 12pt;
color: #FFF5EE;
text-align: center;
width: 300px;
height: 150px;
}

După salvarea modificărilor, intr-un nou gadget html adăuga următorul text:

<div class="bloque-color">
Aici se adauga un text sau ce doresti sa apara.
</div>

sau daca doresti sa apar si un text insotit de o imagine foloseste codul urmator:

<div class="bloque-color">
Aici se adauga un text,o imagine sau ce doresti sa apara.
<img border="0" src="url-imagine" />
</div>

Acces la generator CSS3 Playground

Read More

Comprimare CSS

CSS Compressor dupa cum sugereaza si numele este un compresor CSS si este foarte util daca dorim ca,pagina blogului sa nu devina interminabila cand adaugam un stil CSS.

Dupa ce am facut cateva probe , acest compresor nu altereaza stilul CSS deci il recomand.

Un exemplu de stil CSS pentru body:

body {
background:#FFF;
margin: 0;
padding: 0;
color:#333333;
font-family: 'Trebuchet MS', Trebuchet, Helvetica, Arial, Verdana, Sans-Serif;
font-size: 14px;
text-align: left;
}

Rezultatul dupa comprimare este urmatorul:

body{background:#FFF;margin:0;padding:0;color:#333;font-family:'Trebuchet MS',Trebuchet,Helvetica,Arial,Verdana,Sans-Serif;font-size:14px;text-align:left}

Pentru folosirea acestui generator click CSS Compressor

Read More

Efectul <strike> utilizand CSS

Acesta este un truc rapid si usor de a corecta un text sau o parte dintr-un document. Tag-ul <strike> il folosim atunci cand dorim sa anulam un text care nu ne mai intereseaza, incadreaza respectivul text intre <strike>aici vine textul</strike>

si rezultatul este acesta:
corecteaza un text sau o parte dintr-un document

Acum pentru a folosi acest truc cu ajutorul CSS apelam la urmatoarul exemplu: mergem la sablonul blogului si Aspect --> Editare HTML si inaite de linia </head> adaugam urmatorul cod:

<style type='text/css'>
strike {text-decoration:none; background:transparent url(url_de_la_imagine) repeat-x left 55%}
</style>

In acest caz trebuie doar sa inlocuiesti (url_de_la_imagine) cu cel de la imaginea care doresti, vin in ajutorul tau cu cateva imagini care le poti folosi, alege imaginea clik copieaza si adauga la codul de mai sus.

copiaza

copiaza

copiaza

copiaza

copiaza

copiaza

Salveaza modificarile si acum ori de cate ori doresti sa corectezi un text foloseste <strike>aici vine textul</strike>

Read More

CSS3 - Mai multe coloane de text

Cu ceva timp în urmă am văzut cum împărţim un text în două coloane. Cand folosim rar acest stil nu este incomod de adaugat intr-o postare dar, daca folosim uzual impartirea textului in doua sau mai multe coloane intr-un post, atunci, va trebui sa ne folosim de propietatea CSS3 care ne ajuta rapid sa adaugam sau sa schimbam numarul de coloane dintr-un text.

In acest caz mergem la sablonul blogului si Aspect --> Editare HTML exact inaintea liniei ]]></b:skin> adaugam urmatorul cod:

.texto-columnas {
-moz-column-count:3;
-moz-column-gap:15px;
-webkit-column-count: 3;
-webkit-column-gap: 15px;
}

Poti mari numarul coloanelor prin modificarea liniilor: -moz-column-count:3; si -webkit-column-count: 3; (la 3, 4, sau 5 dar atentie! totul depinde de marimea spatiului care il ai la dispozitie pe blog). Salveaza modificarile si acum ori de cate ori doresti sa scri un text intr-un post adaugi:

<p class="text-coloana">Text</p>

Se inlocuieste Text cu descrierea care doresti sa apara si rezultatul este urmatorul:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop

Read More