Beautifull rope jumping robot css animation at mapbox.com

.robot{
 width: 300px;
 -webkit-animation: rainbow 4s steps(59) infinite;
}

.animate {
  -webkit-transition:all .125s;
     -moz-transition:all .125s;
      -ms-transition:all .125s;
          transition:all .125s;
  }

.robot-animation {
  background:url(img/footerguy-jump.jpg) no-repeat 0 0;
  background-size: auto 100%;
  height: 0;
  padding-bottom: 100%;
  transition: none;
  -webkit-animation: walk 2s steps(59) infinite;
     -moz-animation: walk 2s steps(59) infinite;
       -o-animation: walk 2s steps(59) infinite;
          animation: walk 2s steps(59) infinite;
  -webkit-animation-play-state:running;
     -moz-animation-play-state:running;
       -o-animation-play-state:running;
          animation-play-state:running;
}

@-webkit-keyframes walk {
   from { background-position: 0 0; }
     to { background-position: 100% 0; }
}

@-moz-keyframes walk {
   from { background-position: 0 0; }
     to { background-position: 100% 0; }
}

@-o-keyframes walk {
   from { background-position: 0 0; }
     to { background-position: 100% 0; }
}

@keyframes walk {
   from { background-position: 0 0; }
     to { background-position: 100% 0; }
}

@-webkit-keyframes rainbow {
   from { -webkit-filter:hue-rotate(10deg); }
     to { -webkit-filter:hue-rotate(360deg); }
}

@keyframes rainbow {
 from {
    -webkit-filter:hue-rotate(10deg);
            filter:hue-rotate(10deg);
    }
  to {
    -webkit-filter:hue-rotate(360deg);
            filter:hue-rotate(360deg);
    }
}

mapbox.com

Responsive email templates articles

 http://zurb.com/playground/responsive-email-templates
-> they use floats for columns and don't support Outlook 2007, 2010, 2013

http://www.campaignmonitor.com/guides/mobile/
-> good old campaignmonitor

http://internations.github.io/antwort/
-> they use align:left for columns and display block for smaller resolutions

http://www.emailonacid.com/blog/details/C13/emailology_a_free_responsive_email_template_using_media_queries_-_part_i
-> also align:left and simple devicewidth class (no display block); good testing email app
 

CSS3 essential tool-sites

www.css3generator.com

http://www.colorzilla.com/gradient-editor/

http://www.fontsquirrel.com/fontface/generator

Latimea siteurilor traditionale (css)

Facebook.com	981px (fixed)
Linkedin.com	980px (fixed)
Ebay.com (listing)	760px - 1200px (liquid)
Amazon.com	980px - 100% (liquid)
Mobile.de (fixed)	978px (fixed)
Bmw.de (fixed) (left aligned)	1024px (fixed)
Mercedes-benz.de (left aligned)	1000px (fixed)
Gsmarena.com	1002px (fixed)
Nytimes.com	972px (fixed)

Transitions and transformations with css3 and jquery fallback for ie

.home-section:hover img{
-webkit-transform: rotate(315deg) scale(0.5);
 -moz-transform: rotate(315deg) scale(0.5);
 -o-transform: rotate(315deg) scale(0.5); 
-ms-transform:scale(0.5,0.5) rotate(315deg) ; /* the order is important */
 transform: rotate(315deg) scale(0.5); /* future standard */
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in; 
-ms-transition: all 1s ease-in; /* future IE 10 */
transition: all 1s ease-in; /* future standard */
}

.home-section img{
-webkit-transition: all 2s ease-in-out;
 -moz-transition: all 2s ease-in-out;
 -o-transition: all 2s ease-in-out;
 -ms-transition: all 2s ease-in-out; /* future IE 10 */
transition: all 2s ease-in-out; /* future standard */
}

For IE 9:

 <!--[if lte IE 9]>
  <script type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">

</script>

<script type="text/javascript" src="jquery-css-transform.js"></script>

<script type="text/javascript" src="jquery-animate-css-rotate-scale.js">

</script>

<script type="text/javascript">

$().ready(function() {
$('.home-section').hover(function () {								   
$(this).find('img').animate({rotate: '+=315deg', scale: '-=0.5'}, 1000);
},function () {								   
$(this).find('img').animate({rotate: '-=315deg', scale: '+=0.5'}, 2000);
});
});			
	</script>
   <![endif]-->  
  
   

Where to find jquery-animate-css-rotate-scale.js :
http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html Thanks Zach!

More on CSS3 Transitions and transformations:
http://msdn.microsoft.com/en-us/library/ff974936%28v=vs.85%29.aspx
http://css3please.com/

Browser specific hacks - css filters

Webkit only css hack (safari, chrome):

@media screen and (-webkit-min-device-pixel-ratio:0) {

body{ background:red}

}

Firefox only css hack:

@-moz-document url-prefix() {

body{ background:green}

}

Opera only css hack:

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
       body {background:orange}
 }

IE only css hack:

body { 
 background : green\9; /* IE9,IE8 and below */ 
 *background : yellow; /* IE7 and below */ 
 _background : orange; /* IE6 */ 
}

More:

http://css-tricks.com/snippets/css/css-hacks-targeting-firefox/
http://www.evotech.net/blog/2007/04/ie7-only-css-hacks/

Statistici - Versiuni Browsere, Siteuri Sociale, Sisteme de Operare

Source: StatCounter Global Stats - Browser Version Market Share

Source: StatCounter Global Stats - Mobile Browser Market Share

Source: StatCounter Global Stats - Social Media Market Share

Source: StatCounter Global Stats - Operating System Market Share

La granita intre HTML si Illustrator / intre text si imagine

Am plecat de la ideea de a desena o harta a Europei cu tarile in care am facut turism pana acum (in scop stimulativ). Si tot cautand pe google o harta buna, am ajuns la ideea: "de ce nu o harta vectoriala ?".

Instant am gasit linkul utilului wikipedia:

http://commons.wikimedia.org/wiki/File:Blank_map_europe.svg

Si dupa putina stilizare, stergand stilurile inline (la fel ca intr-un html obisnuit) si scriind urmatorul randulet:

#at,#ro,#it,#cy,#hu,#si,#hr,#sr,#bg,#es,#de,#ch {fill:#956}


Gata si harta:

Aici veti gasi o simpla poza, pentru ca nu pot uploda sau insera un SVG atat de complex in blogger (cu cateva clickuri beninteles).


Unelte diverse:


http://plindenbaum.blogspot.com/2009/11/tool-converting-svg-to-canvas_22.html - aplicatie pentru a converti svguri in canvasuri (html5)

http://uvdiv.blogspot.com/2009/08/how-to-create-svg-graphics-in-blogger.html - exemplu de inserare svg in html prin crearea ''on the fly" cu js

Iphone CSS

Dimensiunile ecranului 320px cu 480px.

<meta name="viewport" content="width=320">

-> pentru a seta latimea ecranului (si implicit zoomul).

Putin javascript: 

window.scrollTo(0, 1) -> pentru a ascunde bara iphone-ului 

onorientationchange -> eveniment: la schimbarea orientarii mobilului ( portret <->orizontal ) 

http://css-tricks.com/video-screencasts/38-basics-tips-on-designing-for-the-iphone/ 

Selectorii CSS

Selector	Ce reprezinta	Denumire
*	Orice element	Selector universal
E	Orice element E, i.e orice marcaj de tipul E	Selectori de marcaj
E F	Orice element F, care este descendent al unui element de tip E	Selector Descendent
E > F	Orice element F care este copil al unui element de tip E	Selector copil
E:first-child	Orice element E, cand este primul copil ala parintelui sau	Selector primul-copil
E:link E:visited	Linkurile nevizitate inca/vizitate	Pseudo-clasele linkurilor
E:active E:hover E:focus	Linkurile E, la diferite actiuni (atentie la ordinea LOVE/HATE)	Pseudo-clasele dinamice
E:lang(c)	Orice element E daca este in limba c	Pseudo clasa de limba
E + F	Orice element F ce este imediat urmator unui element vecin, de tip E	Selector adiacent
E[x]	Orice element E, al carui atribut x este setat	Selector de atribut
E[x="eroare"]	Orice element E, al carui atribut x are exact valoarea "eroare"	Selector de atribut
E[x~="warning"]	Orice element E, al carui atribut x are contine valoarea "eroare"(dintr-o lista de valori)	Selector de atribut
E[x|="en"]	Orice element E, al carui atribut x incepe cu "en"	Selector de atribut
DIV.warning	Echivalent cu DIV[class~="warning"]: orice div ale carui clase contine si valoarea "warning"	Selector de clasa
E#myid	Orice element E cu id-ul "myid"	Selector de id

I heart CSS - Firefox only

Made with CSS3.


Vezi si alte iconite facute exclusiv cu CSS: http://rathersplendid.net/cssicons/

Rezolutii curente si denumirile lor

Code	Name	Aspect ratio	Width	Height
VGA	Video Graphics Array	4:3	640	480
SVGA	Super Video Graphics Array	4:3	800	600
XGA	eXtended Graphics Array	4:3	1024	768
XGA+	eXtended Graphics Array Plus	4:3	1152	864
WXGA	Widescreen eXtended Graphics Array	5:3	1280	768
WXGA	Widescreen eXtended Graphics Array	8:5 (16:10)	1280	800
SXGA	Super eXtended Graphics Array	4:3	1280	960
SXGA	Super eXtended Graphics Array	5:4	1280	1024
WXGA	Widescreen eXtended Graphics Array	16:9	1366	768
WSXGA	Widescreen Super eXtended Graphics Array	8:5 (16:10)	1440	900
UXGA	Ultra eXtended Graphics Array	4:3	1600	1200
WSXGA+	Widescreen Super eXtended Graphics Array Plus	8:5 (16:10)	1680	1050
HD-1080	Full High Definition	16:9	1920	1080
WUXGA	Widescreen Ultra eXtended Graphics Array	8:5 (16:10)	1920	1200

Fonturi folosite pe web

1. New York Times http://www.nytimes.com
   
   Georgia 20px/15px ; 24px (h1) + Arial 10px
   
   
2. Vanity Fair http://www.vanityfair.com
   
   Georgia 22px/13px+Verdana 10px
   
   
   
   
3. Yahoo http://news.yahoo.com
   
   Titluri: Georgia 26px (h1: 28px) + text: Arial 13px
   
4. Mocoloco http://mocoloco.com/
   
   titluri : Arial litere mari 22px (h1:30px) + text: Georgia 12px
   
5. BBC http://www.bbc.co.uk/
   
   Titluri: Verdana 18px (h1:22px) + text: Verdana 12px
   
6. Wordpress http://wordpress.org
   
   Titluri: Georgia 16px Italic (h1:36px normal) + text: Lucida Grande 12px
   

Concluzie: Georgia este unul din cele mai folosite fonturi, iar serifurile sunt in tendinte.

Cum sa scrii o extensie pentru Google Chrome

1. Citeste documentatia de la google:
http://code.google.com/chrome/extensions/getstarted.html


2.Creeaza propria ta extensie.
Exemplul meu evidentiaza linkurile atributul "cu nofollow" doar prin background, culoare si caractere italice, dar nu si chenar. (chenarul poate strica uneori layoutul siteului).

Codul este cat se poate de simplu: un css cu urmatoarele randulete:
a[rel~=nofollow]
{
background-color: cyan !important;
border: 0!important;
color: #630 !important;
font-style:italic !important
}


3.Instaleaza si trimite codul tau catre galeria de extensii.

Rezultat:

Eternele colturi rotunjite in css cross browser

border:5px solid #666;
-o-border-radius: 20px; // pentru Opera
-icab-border-radius: 20px; //pentru Icab
-khtml-border-radius: 20px;// pentru Konqueror
-moz-border-radius: 20px;// pentru Firefox
-webkit-border-radius: 20px;// pentru Safari si Chrome
border-radius: 20px;// viitorul standard

Ps. Despre IE:
Prezent:
"While the W3C has specified the border-radius properties in its latest CSS3 working draft, Microsoft has not implemented the border-radius properties in Internet Explorer 8." vezi http://msdn.microsoft.com/en-us/library/bb250413%28VS.85%29.aspx#borderradius

Viitorul IE9:
A more meaningful (from the point of view of web developers) example of standards support involves rounded corners. Here’s IE9 drawing rounded corners

Update: Da, Ie9 suporta border-radius !!!

Notiuni CSS: Layout fluid (lichid) si layout elastic

Layout fluid:

• widthurile blockurilor sunt procentuale

exemplu: www.okazii.ro




Layout elastic:

• widthurile blockurilor sunt relative la unitatea literelor (definite in em-uri)
  

exemplu: http://jontangerine.com/




Ps. De observat in acest exemplu este si dimensiunea imaginii din header definita in em-uri. Tot site-ul va face un fel de zoom la redimensionarea fontului.

Articol interesant despre imagini fluide:
http://unstoppablerobotninja.com/entry/fluid-images/

Tipuri de litere

1.Oldstyle

• Prezinta serfuri
• Serifurile sunt inclinate
  
• Tranzitia de la subtire la gros este moderata
• Linia stress este diagonala (aplecata spre stanga)

exemple: Goudy, Palatino, Times, Baskerville, Garamond

2.Modern

• Prezinta serifuri subtiri orizontale
• Tranzitia de la subtire la gros este radicala
• Linia stress este verticala
• Literele moderne au un aer rece, elegant
  

exemple: Bodoni, Times Bold, Onyx, Didot, Walbaum


3.Slab serif

• Prezinta serifuri subtiri orizontale
• Nu prezinta tranzitie de la gros la subtire sau este foarte moderata

exemple: Clarendon, Memphis, New Century Schoolbook, Silica


4.Sans serif

• Nu au serifuri
  
• Nu prezinta tranzitie de la gros la subtire
  

exemple: Proxima Nova, Formata, Folio, Bailey Sans, Syntax

5.Script

• litere caligrafice, asemanatoare celor scrise de mana
  

exemple: Linoscript, Ministry Script, Fountain Pen, Cocktail Shaker

6.Decorative

• fonturi cu scop decorativ

exemple: Jupiter, The Wall, Blue Island, Fajita, Pious Henry




Mai multe detalii:
http://ilovetypography.com/2007/11/21/type-terminology-old-style/

Tipurile de litere de origine chirilică
http://florinf.wordpress.com/2009/01/31/arhaic-romanesc/
http://www.peteava.ro/video/material/23968
http://www.georgehernandez.com/h/xComputers/Design/Typography.asp
http://typography.ro/2008/11/30/anatomia-fontului-typeface-anatomy/

The Non-Designer's Design Book 3rd edition - Robin Williams

Interesante css/js

• sa schimbi z-indexul elementelor la hover [pe parinte/unul din parinti]

• validarea campurilor unui forumular prin patternuri scrise ca atribut html patern ="..."

• sa te folosesti de propagarea evenimentelor
  

Unitati de masura in html / css

Unitati absolute:

• in: inches — 1 inch = 2.54 centimetri
• cm: centimetri
• mm: milimetri
• pt: points — 1pt= 1/72 inch
• pc: picas — 1 pica = 12 points

Unitati relative

• em: dimensiunea unei litere a fontului curent
  
• ex: inaltimea literei 'x' a fontului curent
• px: pixeli, relativi la rezolutia device-ului folosit
  

W3.org recomanda folosirea em-urilor, iar altii recomanda folosirea ex-urilor pentru mai multa precizie.


Wikipedia - liste cu typeface-uri:

• Serif
• Sans Serif
  
• Monospaced
  

Culorile in HTML si XHTML - denumiri si valori hexazecimale

Denumire	Valoare hexazecimala	Exemplificare
Black	#000000
Silver	#C0C0C0
Gray	#808080
White	#FFFFFF
Maroon	#800000
Red	#FF0000
Purple	#800080
Fuchsia	#FF00FF
Green	#008000
Lime	#00FF00
Olive	#808000
Yellow	#FFFF00
Navy	#000080
Blue	#0000FF
Teal	#008080
Aqua	#00FFFF