Es mostren els missatges amb l'etiqueta de comentaris css. Mostrar tots els missatges

dissabte, 9 de gener del 2010

Banderes: Codi CSS/ Flags: CSS code

Per afegir les banderes als meus posts he afegit aquestes línies de codi CSS dins de l'etiqueta <head>:

El codi s'ha de col·locar dins de l'etiqueta <b:skin> </b:skin> després de la declaració de les les variables, que finalitza amb un /*.

.cat{ background-image:url('cat.png');
background-repeat:no-repeat;
padding-left:35px;
text-align:justify }

.eng{ background-image:url('eng.png');
background-repeat:no-repeat;
padding-left:35px;
text-align:justify }

I quan escric un post l'he de posar entre <div class="cat"> i </div> o <div class="eng"> i </div>

Les banderes són imatges que he creat jo, no són intrínseques del codi css o html. Per tant on diu
background-image:url('cat.png');
s'ha de posar la ruta a l'arxiu d'imatge; per exemple:
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeh79kucTov2hkplSSV9HqEsp0yv6RHk_k68FTmFaTrN_UiFp3njFMClE1X0s10laUsjNySpDtwu-sZuFgqqjENMgA1D7zVvQwTAHVUS8l77q6XIBJ40y3f1muCYDldHKKNZn3_Q/');

To add the flags in my posts I added the next CSS code between the tags <head> and </head>:

When I'm writting a post I need to write the text between the labels <div class="cat"> and </div> or <div class="eng"> and </div>

publicat originalment el 18/11/2009 i modificat el 09/01/2010 per afegir comentaris d'aclariment.

diumenge, 3 de gener del 2010

Feliç 3 de gener del 2010

Nou any i noves ganes de tirar endavant aquest blog. Començo l'any desitjant-vos el millor i esperant que tots els propòsits que heu fet i fareu els porteu a bon terme. A més començo a fer una modificació d'aspecte al blog que fa temps que volia fer.
De moment queda força pobre i els colors no acaben d'encaixar, però bé, el canvi s'ha fet. Els propers dies ja el milloraré.

Bon any a totes i tots!!

dimecres, 18 de novembre del 2009

banderes/flags

Acabo de modificar la fulla d'estil per que mostri la bandera catalana o l'anglesa, segons si escric en un idoma o l'altre. Però vist el resultat potser fa més nosa que servei. Al post "A Lituania/In Lithuania" intercalo frases en els dos idiomes i per tant apareixen moltes banderes. Crec que més que res distreu.

Així que o decideixo no utilitzar les banderes i passar a utilitzar un color de lletra o una tipografia diferent, o simplement procuro escriure paragrafs llargs com els d'aquest post.

Que en penseu?

I just added some lines to my CSS with the aim to show the catalan flag or the english flag according on the language of the text. But I'm not satisfied with the result. In the post "A Lituania/In Lithuania" I write short sentences changing the language almost every line. Thus many flags appear in the post. I think this is quite annoying.

Then, or I erase the flags or I can try to write long paragraphs like this one.

What do you think?

dijous, 20 de març del 2008

Safari 3.1 accepta CSS3 completament

Estic molt interessat en les possibilitats que donen les fulles d'estil. Les conec i les utilitzo. No domino al 100% totes les propietats que ofereixen, però em defenso prou bé.

Fins ara els navegadors acceptaven CSS i CSS2 (tot i que IE a la seva manera i no tot). El W3C ja va llençar la versió 3 (CSS3) però fins avui cap navegador l'acceptava completament.

Avui llegeixo a http://www.css3.info/ [en] de la ma de Peter Gasston que apple ha llançat la versió 3.1 de Safari, i que aquest accepta completament CSS3.

En Peter Gasston comenta que (i això no se si es propi de CSS3 o de Safari) es poden "incrustar" fonts (tipus de lletra) a les teves pàgines perquè els usuaris que no les tinguin les vegin igualment. Així, definitivament tu trias com es veurà la teva web i amb quina tipografia. Realment és molt interessant.

basat en:
http://www.css3.info/safari-31-pushes-css3-support-forward/

divendres, 15 de febrer del 2008

Cantonades rodones amb css

Amb la versió 3 de CSS (CSS3) es podràn crear perfils arrodonits.
La propietat CSS3 que ho permetrá és

border-radius

I les seves derivades

border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

Ara per ara no està soportat ni per FireFox ni per Internet Explorer. Diria que tampoc per Opera ni Safari. (Ara funciona amb Safari?)

No obstant Firefox de moment implementa un equivalent amb el prefix -moz-

-moz-border-radius: 1em;

Al final del post teniu enllaços a més informació sobre CSS3 i aquestes propietats.

Faig un exemple:

CSS

.cantonadaRodona
{
background-color: #c33;
-moz-border-radius: 15px; /*Firefox*/
border-radius: 15px; /*CSS3*/
border: 1px solid #000;
padding: 10px;

}

HTML

<div class="cantonadaRodona">
<h1>Capa amb les cantonades arrodonides</h1>
</div>

Capa amb les cantonades arrodonides

Amb Internet Explorer no funciona

Modificant els valors de -moz-border-radius i l'amplada i l'alçada de les capes podem aconseguir circumferències.

Enllaços d'interès:
- W3C: CSS3 propietat border-radius [EN]
- -moz-border-radius [EN]
- border-radius exemples [EN]

dilluns, 11 de febrer del 2008

reformes al blog: Nous links

He estat canviant els links del blog. Però crec que no queden bé. Haig de canviar el color o alguna cosa.

De moment es queda així.

apa!

diumenge, 4 de novembre del 2007

css: transparència (ii)

capa1: Vermella

capa2: Blava

Com podem veure podem aconseguir efectes de barreja de colors utilitzant la propietat de transparencia de CSS que comentava en el post anterior " CSS:traparencia ". Des de petits sabem que barrejant el vermell i el blau obtenim el lila. Doncs aquí està.

Aquí he utilitzat aquest estil CSS:

#capaBASE{
position:relative;}

#capaBASE #capa1 {
position: absolute;
left:0;
top:0;
height:100px;
margin: 5px;
background-color: red;
width:250px;
filter: alpha(opacity:50); /* IE */
opacity: .5; /* CSS3 */
}

#capaBASE #capa2 {
position: absolute;
right:0;
top:20px;
height:100px;
margin: 5px;
background-color: blue;
width:250px;
filter: alpha(opacity:50); /* IE */
opacity: .5; /* CSS3 */
text-align: right;
}

I el següent codi per mostrar les capes:

<div id="capaBASE">
<div id="capa1">capa1: Vermella</div>
<div id="capa2">capa2: Blava</div>
</div>

No deixa de ser una curiositat. Moltes, moltes, moltes coses es poden fer amb CSS.

;)

diumenge, 16 de setembre del 2007

CSS: transparencia

El CSS (Cascade Style Sheet [Fulles d'estil]) té moltes possibilitats. Quan comences a fer pàgines web resulta realment pràctic i impressindible utilitzar fulles d'estil. Aquestes et permeten estructurar el contingut de la web de manera precisa i en tot el conjunt del site. Si decideixes canviar el color de lletra simplement ho canvies a la fulla d'estil, i no has de canviar pàgina per paàgina (o paragraf per paràgraf).

Avui remarco les propietats per fer transparent una capa (o secció) de la nostra web.

Degut a l'existència de diferents navegadors i de la manca d'acords i estandarització existeixen diferents maneres segons el navegador:

A l'estandard CSS3 existeix la propietat opacity que pren valors entre 0 (invisible) i 1 (opac).
Mozilla té la seva propia propietat anomenada -moz-opacity que pren els mateixos valors que la de l'estandard CSS3. No obstant Mozilla compleix l'estandard CSS3 així que es pot usar la propietat opacity sense problemes.
Per ultim Internet Explorer utilitza la propietat filter opacity amb valors entre 0 i 100 de la seguent manera: filter: alpha(opacity=50);

Així que podem definir l'estil seguent:

.fonsVermell { background-color:red; widht:100%;}

.fonsTransparent{

background-color:red;

widht:100%;

filter: alpha(opacity:50); /* IE */

opacity: .5; /* CSS3 */

}

</style>

I el resultat d'aquestes dues classes és el següent.

Fons opac

Fons Transparent

He aplicat les classes .fonsVermell i .fonsTransparent a dues capes diferents marcades amb l'etiqueta <div></div>. Podem veure que tota la capa es torna transparent (al 50%), tant fons com lletra.

Aquesta propieta pot donar molt joc per a fer diferents efectes.

dijous, 11 de maig del 2006

CSS: quantes possibilitats!!

Quan comences a entrar en el món de les fulles d'estil (CSS) ets capaç de veure avantatges bàsics que implica la seva utilització. El més rellevant és la capacitat de definir el format de tot el que conté un o diversos arxius html, i canviar-lo sense esforç i de cop quan es vulgui sense haver de modificar el format individualment per a cada arxiu i per a cada fragment del mateix.

Si comences a rascar una mica utilitzes les etiquetes

i per organitzar seccions. Els hi dones un format, color, marges, posició, mida del text, interlineat... i creus que ja ho tens dominat. Que això és el millor que es pot fer amb el CSS.

Però si comences a rascar una mica més et trobes amb coses com aquesta. Una galeria d'imatges que al passar per sobre d'una miniatura apareix en gran en una altra secció de la web. I únicament amb CSS!!

Si aprens la funcionalitat del CSS i el CSS2 podràs fer el que vulguis. Com tots els idiomes de programació pensareu. Però no és un llenguatge de prgramació, sinó de descripció, que defineix l'estil, no que programa mitjançant funcions... Però té gran potencial.

Sincerament, em sorprèn el que es pot arribar a fer.

missatge modificat el 13 de maig per aclarir unes linies confuses.

diumenge, 7 de maig del 2006

Una utilitat de javascript

L'altre dia vaig quedar amb el porras per fer unes cerveses i vam estar xerrant. Una de les coses que li vaig comentar era que estava fent una web amb un menu css.

Aquest menú era un tros de codi html
que estava copiat a cada document de la web. Així que si tenia 40 arxius tenia el menú copiat 40 cops. I quin és el problema? doncs que si feia una modificació en un menú l'havia de fer en els 39 restants. Selecció-> copiar-> enganxar, selecció-> enganxar, selecció-> enganxar, ... Procés que és força cansat.

Així que li vaig preguntar si sabia alguna manera de modificar-ne només un i que tingués efecte en tots. Doncs aquí entra el javascript. El javascript és molt útil i es poden fer moltes coses, però jo em centraré en aquesta opció.

Javascript permet crear funcions i permet fer-ho en arxius externs als documents html, aquests arxius tenen extensió .js . Es creen amb qualsevol editor de textos i tenen el format següent:

function nomfunció (parametre1, patametre2,...)
{
línies de codi
...
}

Per incloure'ls als html s'han de posar dues coses:

entre les etiquetes <head></head> cal posar :
<src="arxiu.js"></script>

entre les etiquetes <body></body> cal posar:
<language="javascript"> nomfunció() </script>

Per exemple, un arxiu .js podria ser

function holamon(){
  document.write("Hola món")
  }

que escriuria Hola món a la part que nosaltres decidim del document html.

També podem incloure codi html:

function liniesHtml(){
  document.write("<h1>titol escrit amb javascript</h1>")
  document.write("<>paragraf escrit amb javascript< /p>")
  }

D'aquesta manera la funció lineaHtml() que inclouríem al document html se substituiria per les dues línies html que hem posat dins la funció.

Per tant podem escriure tantes línies de codi com vulguem utilitzant document.write().

Cal tenir en compte però que si hi ha altres cometes entre el text html s'han d'intercanviar per \". Per exemple el link
<a href="http://espurnes.blogspot.com">espurnes </a> te cometes així que la funció de javascript següent no sería correcte:

document.write("<a href="http://espurnes.blogspot.com">espurnes </a>")

La manera correcte seria:
document.write("<a href=\"http://espurnes.blogspot.com\">espurnes </a>")

Podria estar millor explicat.

dissabte, 12 de novembre del 2005

CSS: i internet explorer

Fa un parell o tres de dies vaig aprendre a utilitzar identificadors per crear diferents capes en un document XHTML amb l'ajuda de CSS. Em vaig posar molt content perquè m'adonava de l'importància de poder utilitzar-les. La programació d'un document XHTML utilitzant capes dóna molt de joc, permet fer coses que sense elles eren molt dificils o impossibles.

Els intents per fer una web d'aspecte decent a base de taules transparents els deixo enrere i ben lluny. No eren més que potineries.

Vaig estar utilitzant les capes en una web que quedava guapíssima amb el FireFox i amb el Netscape, però, com sempre, l'ie s'ho va carregar tot. Aquest explorador tant utilitzat pels desconeixedors d'altres exploradors fa el que vol amb la web, passa olimpicament del que jo li dic. He aconseguit arreglar-ho una mica, però ni de bon troç queda igual...

Espero que la versió 7 del ie corregeixi això. I faigi una mica de cas de l'estandard d'HTML i CSS, q per això estàn. He vist que hi ha un grupet d'arxius que juntament amb unes linies de codi fan que les webs que es visiten amb ie faigin una mica més de cas dels CSS, es diu IE7 (que no és el mateix que l'internet explorer 7). Però crec q és més sensill instalar-se el firefox.

apa!

espurnes