Grafiko.ro

Google fonts Api pentru un design mai atragator

Google a anuntat pe 19 mai Webfonts Api, fonturi gazduite de google care fac ca pagina sa se incarce rapid datorita cache-ului in browser, folosesc deja pentru titlurile din blog fontul “Josefin Sans Std Light“, imi place cum arata, mai schimba din aspectul “La fel pe 5000 de site-uri” .
Sper ca numarul de fonturi sa fie mai mare, dar deja pagina gazduieste fonturi destul de diferite, avand de unde alege pentru aproape orice design, numai cand creati layoutul, tineti cont si de asta.

Tags: css, Design, font-family, fonts, fonturi, google, google fonts api, google-fonts, sifr

Inspiratii si resurse teme wordpress

Am pregatit o mică listă de site-uri pentru webdesign și design pentru wordpress, site-uri cu tutoriale și resurse de design teme wordpress plus codarea lor, sunt 12 site-uri pe care le urmăresc de o perioadă și care mi-au fost de enorm ajutor în crearea temelor de până acum.

Am câteva teme nelansate, dar până nu sunt 100% sigur că sunt ok nici nu am să o fac, în plus, am încercat să aduc ceva unic la ele, nu prea am ce însă, mai tot este facut deja, ce rost mai are să ‘reinventez roata’, le voi lansa în curând cu o pagină de opțiuni.

Tags: codare wordpress, css, css tricks, Design, hack, photoshop, theme, trucuri, Tutoriale, video, webdesign, Wordpress

Urasc site/blog care nu au link catre ‘home’

Nu inteleg creatori de teme wordpress sau cei care fac situri, de ce nu pun link la logo, majoritatea pun, dar mai vad cate un ratacit din cand in cand, eu urasc sa nu pot da click pe logo, este primul lucru care il fac, cand ajung pe un site/blog, poate din obisnuinta, asa este acum si la forum pe grafiks, lui serban (kv7) ia fost lene s-au nu a stiut.

Pentru incepatori in css si html, am sa scriu o mica modalitate de image replacement buna pentru SEO si in acelasi timp si cu link, este arhi cunoscuta dar vad ca tot apar situri fara, nu trebuie sa puneti tag de img cu html, doar un link si h1.

codul html ar trebui sa arate cam asa, dar cu mici modificari ale voastre, cum ar fi clasa:

<h1>
<a class="logo-tema" title="grafiko.ro" href="/">Grafiko.ro</a>
</h1>

Binenteles cu link-urile voastre, titlurile si text, doar am pus demostrativ, defapt cam asa am si eu la logo, un a href cu o clasa de logo infasurat intrun h1, asta doar pentru logo, puteti folosi si la butoane s-au ce mai doriti, dar nu infasurat in h1, probabil va fi in

<li>

sau div, acum urmeaza css-ul, il puteti pune inainte de intre tagurile

<style type="text/css" media="screen"> codul css </style>

sau direct in fisierul css.

Pentru css aveti codul cam asa:

h1 a.logo-tema {
     background:url(./logo.png) no-repeat left top;
     /*Calea catre imaginea voastra*/
     width:218px;/*lungimea in pixeli*/
     height:71px;/*inaltimea in pixeli*/
     display:block;/*pentru a face toata imaginea click-abila*/
     text-indent:-9999px;/*mutarea textului de
      pe imagine in afara spatiului vizual*/
     overflow:hidden;/*sa arate outline-ul cat imaginea,
     se vede dupa ce ati dat click.*/
}

Ar trebui sa va arate ceva de genul acesta
Grafiko.ro
foarte usor si accesibil SEO in acelasi timp.

Tags: css, grafiks, h1, image replacement, Wordpress, xhtml