Archivio mensile:Ottobre 2014

css3, infografiche

"helvetica neue extended" webfont

Pensa, non avrei mai immaginato di trovare così tanti problemi:
Anche solo ad usarlo come font family normale, hai problemi di interpretazione dai vari browser, quindi si consiglia di chiamarlo così:
http://css-tricks.com/snippets/css/better-helvetica/
Sicuro il vostro grafico ce l’ha in fft, ma se provi a convertirlo per il web da font squirrel ti dice
NOOOOO è DI PROPRIETà DELL’ADOBE!
fine trasmissioni.
Trovare un web font FREE simile non pare difficile.
Simil helvetica neue: http://desktoppub.about.com/od/classicfonts/f/How-Many-Helvetica-Names-and-Versions.htm
http://next.fontshop.com/people/stephen-coles/fontlists/helvetica-alternatives
PERò POi font-stretch non si può usare!! haihaihaihai!!! >> http://caniuse.com/#search=font-stretch
Quindi pare perseguibile solo:
http://www.fonts.com/web-fonts
Ma c’è un primo account gratis con limitazioni , ti obbliga a mettere il loro marchio pubblicitario in fondo al sito, poi sopra le 25.000 visualizzazioni al giorno ti tocca pagare.
Non credo che ci capiterà, quindi potremmo sottoscrivere il loro contratto e usarlo tramite il loro servizio.
 

css3, jquery UI, JS

::after & ::before come handler per jquery

ahahah, ho scoperchiato il vaso di pandora!
Infatti è molto bello e comodo aggiungere pseudo elementi (ecco perchè hanno i doppi puntini) prima e dopo i vostri contenitori,
ma poi vi viene la balzana idea di usarli per azionare movimenti nella pagina web e tad tam!! scopri che nn sono nel DOM!!
 
e quindi!??!
Qui c’è una discussione : http://stackoverflow.com/questions/8095177/jquery-using-after-selector
Io invece mi sono accorta che posso risolvere il mio problema (fa muovere una lista/menu orizzontalmente) senza essere così elegante 😛
 
Qui invece quello che sto smontanto:
html:
<div id=""#focus"><ul><li>item del menu 1</li><li>item del menu 2</li><li>item del menu 3</li></ul> <div>
CSS:

#focus::before {background: none repeat scroll 0 0 grey;color: #f56f20;content: "<";float: left;font-size: 5em;height: 1.08em;padding: 1.15em 0.1em;width: 20px;cursor:pointer;}
#focus::after {color: #f56f20;content: ">";float: right;font-size: 5em;margin-top: -2.5em;padding: 0.25em;width: 20px;cursor:pointer;}
Per i glifi questo può aiutarvi:
http://unicode-table.com/en/

css3

Utilissimi Selettori

.class.introSelects all elements with class=”intro”1
#id#firstnameSelects the element with id=”firstname”1
**Selects all elements2
elementpSelects all <p> elements1
element,elementdiv, pSelects all <div> elements and all <p> elements1
element elementdiv pSelects all <p> elements inside <div> elements1
element>elementdiv > pSelects all <p> elements where the parent is a <div> element2
element+elementdiv + pSelects all <p> elements that are placed immediately after <div> elements2
element1~element2p ~ ulSelects every <ul> element that are preceded by a <p> element3
[attribute][target]Selects all elements with a target attribute2
[attribute=value][target=_blank]Selects all elements with target=”_blank”2
[attribute~=value][title~=flower]Selects all elements with a title attribute containing the word “flower”2
[attribute|=value][lang|=en]Selects all elements with a lang attribute value starting with “en”2
[attribute^=value]a[href^=”https”]Selects every <a> element whose href attribute value begins with “https”3
[attribute$=value]a[href$=”.pdf”]Selects every <a> element whose href attribute value ends with “.pdf”3
[attribute*=value]a[href*=”w3schools”]Selects every <a> element whose href attribute value contains the substring “w3schools”3
:activea:activeSelects the active link1
::afterp::afterInsert content after every <p> element2
::beforep::beforeInsert content before the content of every <p> element2
:checkedinput:checkedSelects every checked <input> element3
:disabledinput:disabledSelects every disabled <input> element3
:emptyp:emptySelects every <p> element that has no children (including text nodes)3
:enabledinput:enabledSelects every enabled <input> element3
:first-childp:first-childSelects every <p> element that is the first child of its parent2
::first-letterp::first-letterSelects the first letter of every <p> element1
::first-linep::first-lineSelects the first line of every <p> element1
:first-of-typep:first-of-typeSelects every <p> element that is the first <p> element of its parent3
:focusinput:focusSelects the input element which has focus2
:hovera:hoverSelects links on mouse over1
:in-rangeinput:in-rangeSelects input elements with a value within a specified range3
:invalidinput:invalidSelects all input elemets with an invalid value3
:lang(language)p:lang(it)Selects every <p> element with a lang attribute equal to “it” (Italian)2
:last-childp:last-childSelects every <p> element that is the last child of its parent3
:last-of-typep:last-of-typeSelects every <p> element that is the last <p> element of its parent3
:linka:linkSelects all unvisited links1
:not(selector):not(p)Selects every element that is not a <p> element3
:nth-child(n)p:nth-child(2)Selects every <p> element that is the second child of its parent3
:nth-last-child(n)p:nth-last-child(2)Selects every <p> element that is the second child of its parent, counting from the last child3
:nth-last-of-type(n)p:nth-last-of-type(2)Selects every <p> element that is the second <p> element of its parent, counting from the last child3
:nth-of-type(n)p:nth-of-type(2)Selects every <p> element that is the second <p> element of its parent3
:only-of-typep:only-of-typeSelects every <p> element that is the only <p> element of its parent3
:only-childp:only-childSelects every <p> element that is the only child of its parent3
:optionalinput:optionalSelects input elements with no “required” attribute3
:out-of-rangeinput:out-of-rangeSelects input elements with a value outside a specified range3
:read-onlyinput:read-onlySelects input elements with the “readonly” attribute specified3
:read-writeinput:read-writeSelects input elements with the “readonly” attribute NOT specified3
:requiredinput:requiredSelects input elements with the “required” attribute specified3
:root:rootSelects the document’s root element3
::selection::selectionSelects the portion of an element that is selected by a user
:target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)3
:validinput:validSelects all input elements with a valid value3
:visiteda:visitedSelects all visited links1
from http://www.w3schools.com/cssref/css_selectors.asp

Bello da leggere anche: http://www.bedev.it/css-3/10-selettori-css-da-non-dimenticare/