CSS menu horizontala

6
CSSarekin jarraituz, gaur webaren goiburuan jar daitekeen menu horizontal batekin gatozkizue. Menu honek duen berezitasunik handiena bere “slide” da eta bere inplementazioak ez du inongo zailtasunik. Hementxe doakizue adibide bat.






Lehenik eta behin Javascript hau instalatu beharko duzu. Ondoren, CSSan honako kode hau idatzi beharko duzu:

#mContainer {
position:relative;
margin:0 auto;
width:404px;
height:25px;
border-top:1px solid #638DA1;
border-bottom:1px solid #638DA1;
background-color:#F2F5F6;
padding:5px 0 0 0;
z-index:0;
}

#mContainer li {
position:relative;
display:inline;
margin:0 10px 0 12px;
font:0.8em arial,verdana;
padding:0;
z-index:20;
}

#mContainer li a {
text-decoration:none;
color:#638DA1;
}

#slider {
position:absolute;
background-color: #98B4C1;
border:1px solid #78919B;
width:74px;
height:20px;
padding:0;
z-index:1;
}

#credits {
position:relative;
margin:25px auto 0px auto;
width:250px;
font:9px verdana;
border-top:1px solid #000;
border-bottom:1px solid #000;
height:90px;
}

#description {
position:relative;
margin:25px auto 0px auto;
width:250px;
font:9px verdana;
}

#credits img {
float:left;
margin:5px 10px 5px 0px;
border:1px solid #000000;
width:80px;
height:79px;
}



Ondoren, ondorengo HTML kodea jarri beharko duzu:



<head> <script type=”text/javascript” src=”focus_slide.js”></script> </head> <body>

<ul id=”mContainer”> <li><a href=”#” title=”Esteka 1″> Esteka 1</a> </li>
<li><a href=”#” title=”Esteka 2″> Esteka 2</a> </li>
<li><a href=”#” title=”Esteka 3″> Esteka 3</a> </li>
<li><a href=”#” title=”Esteka 4″> Esteka 4</a> </li>
<li><a href=”#” title=”Esteka 5″> Esteka 5</a> </li>
</ul>


Menu horren adibide bat funtzionamenduan hemen: Euskaljakintza
Technorati etiketak: , ,

01.10.06 | 22:21 | Iruzkinik ez | ETIKETAK Informatika

Irudien gardentasuna CSSa erabiliz

5

Argazkien gardentasuna

Behin baino gehiagotan, ikusi izan dugu testuaren azpian irudi batzuk fondo bezala jarrita gardentasun nahikoarekin testua irakur ahal izateko. Hori nola egin zitekeen ikertzen aritu gara eta oso erraza iruditu zaigunez, bertan adibide bat jartzea erabaki dugu. CSSan kode hau jarri beharko duzu:

#translucent {
position: absolute;
left: 80px;
top: 30px;
text-align: center;
border: 1px solid #666;
background-color: #f0f0ff;
filter: Alpha(opacity=50);
-moz-opacity: .5;
opacity: .5;
}

Ondoren, argazkia kokatu nahi duzun eremuan hauxe idatzi beharko duzu:

<div style=”position:relative;”> <div id=”translucent”> <h2>Irudiaren izenburua!</h2> <img src=”irudia.gif” /></div><p>Idatzi beharreko destua… </p> </div>

Ikus dezakezuenez, oso gauza erraza da eta efektu polit bat lor daiteke hainbat idatzi apaintzeko.


Gardentasuna aukeratu

| | | |
| | | | |

01.07.06 | 14:53 | Iruzkin 1 | ETIKETAK Informatika

CSS argazki zoom-a

4
Beste idatzi honetan, esteka bati irudi baten thumbnail-a nola lotzen dugun erakutsi genizuen. Gaur, thumbnail batetik abiatuko gara argazkiaren zoom bat ikusi ahal izateko.

Egia esan, hau ez da oso konplikatua eta lortzen den efektua nahiko polita iruditzen zaigu. Gainera, kodean aldaketa batzuk sartuz gero, baliagarria izan daiteke argazki album bat sortzeko, erresoluzio handiko argazkiak post-etan sartzeko, … Badakizue, irudimenari eragiozu eta beste erabilpen batzuk bilatuko dizkiozu.

Urrezko Q-a Urrezko Qa

Olentzero Olentzero









Hau egiteko informazio guztia hemen aurki dezakezue. Bukatzeko, esan beharra dago honek ederki funtzionatzen duela (bazen garaia) Internet Explorer-en. Hala ere, jarraitzen dut FIREFOX aholkatzen.

01.06.06 | 20:36 | Iruzkinik ez | ETIKETAK Informatika

Efektu bitxia argazkiekin

3
CSSarekin jarraituz, gaur beste adibide bat erakutsi nahi dizuegu. Kasu honetan, CSSaz gain, Javascript bat erabiliko dugu efektu bitxi bat lortzeko.
Testu honen azpiko bi argazki hauetan klik egiten baduzue ikus ahal izango duzue.

Larri eta Jai
Larri eta Jai
Kanela
Kanela


Hori lortzeko burutu beharrekoa ez da oso konplikatua eta zuekin partekatu nahi dugu.

Hasteko, <head> eta </head> etiketen artean hau koipiatu beharko duzu:

<script type=”text/javascript” src=”lightbox.js”></script>

Ez ahaztu “lightbox.js” scriptaren kokapena zehaztu beharko duzula.
Segidan, zure CSSan honako kodea txertatu beharko duzu:

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}

#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url();
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”overlay.png”, sizingMethod=”scale”);
}


Eta azkenik, argazkia jarri nahi duzun tokian honako hau idatzi beharko duzu:

<a href=”images/image-1.jpg” rel=”lightbox”>irudia#1</a>

Eta hori da guztia. Erraza, ezta?

Deskargak



Oharra: Nik hemendik ikasi dut eta fitxategiak ere bertan dituzue. Hala ere, nik ez dut lortu Internet Explorer-en behar bezala jartzea (arrazoi gehiago FIREFOX erabiltzeko). Egileak egindakoa, berriz, oso ongi dabil exploradore guztietan. Baten batek laguntzen badit eskertu nioke.

| 14:52 | Iruzkin 1 | ETIKETAK Informatika

CSS taula

2
CSSa erbiliz era askotako taulak egin daitezke eta horretaz baliaturik, nik egin dudana estekaz beterik dago eta scroll bat du eskuinaldean, elementu guztiak espazio labur batean sartu ahal izateko. Taula estilo hau oso gomendagarria da eduki oso luzeak sartu behar ditugunerako eta kanpoko guneekin lotzeko estekak behar ditugunerako.
“Jakintzako Blogarien bilduma”
Adibide honetan Jakintza Ikastolako Blogariok egiten ari garenaren laburpena biltzeko taula ikus dezakezue. Aukeratu ditudan hiru blogen izenak goiburuan jarri ditut, bakoitzari dagokion estekaz. Zutabe bakoitzean, blog bakoitzeko post edo atal batzuen izenak, bakoitzari dagokion estekaz.


Horrelako zer edo zer egin nahi izanez gero, hemen doakizue egin beharrekoa:

Hasi baino lehen, gogoratu zuen blogaren neurri eta ezaugarrietara egokitu beharko duzuela kode hau. Nik egin dudan taulak 450 pixeleko zabalera du eta 285eko altuera, hiru zutabe ditu eta ezarri dizkiodan koloreak blog honetakoak dira. Errenkada guztiak kolore berdinaz ikusten dira, baina script hau (”http://www.alistapart.com/d/stripedtables/script.txt”) erabiltzeko aukera baduzue, nik ez daukat aukera hori, errenkadak zebra estiloan jar daitezke, hots, bi kolore txandakatuz (kode honetan zuria eta grisa jarrita daude).

Hasteko, zuen CSSan kode hau kopiatu eta txertatu beharko duzue:


/*- Taulak scroll eta linkable goiburuak——— */

div.tableContainer {
clear: both;
border: 1px solid #A0CCF8;
height: 285px;
overflow: auto;
width: 450px
}
html>body div.tableContainer {
overflow: hidden;
width: 450px
}
div.tableContainer table {
float: left;
width: 434px
}
html>body div.tableContainer table {
width: 450px
}

thead.fixedHeader tr {
position: relative
}
html>body thead.fixedHeader tr {
display: block
}

thead.fixedHeader th {
background: #A0CCF8;
border-left: 1px solid #A0CCF8;
border-right: 1px solid #fff;
border-top: 1px solid #A0CCF8;
font-weight: normal;
padding: 4px 3px;
text-align: center
}

thead.fixedHeader a,
thead.fixedHeader a:link,
thead.fixedHeader a:visited {
color: #FFF;
display: block;
text-decoration: none;
width: 100%
}

thead.fixedHeader a:hover {
color: #06038D;
display: block;
text-decoration: ;
width: 100%
}

html>body tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
width: 100%
}

tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #A0CCF8;
border-top: 1px solid #A0CCF8;
padding: 2px 3px 3px 4px
}

tbody.scrollContent tr.alternateRow td {
background: #EEE;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}

html>body thead.fixedHeader th {
width: 190px
}

html>body thead.fixedHeader th + th {
width: 210px
}

html>body thead.fixedHeader th + th + th {
width: 330px
}

html>body tbody.scrollContent td {
width: 220px
}

html>body tbody.scrollContent td + td {
width: 310px
}

html>body tbody.scrollContent td + td + td {
width: 340px
}


Ondoren, taula txertatu nahi duzun tokian honako kode hau txertatu beharko duzu (goiburua eta bi errenkada jarri ditut; bata estekak dituena eta bestea estekarik gabe. Errenkada gehiago jartzeko kode bera kopiatzea besterik ez daukazu) :

<div id="tableContainer" class="tableContainer">
<table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”80%” class=”scrollTable”>
<thead class=”fixedHeader”>
<tr>
<th><a href=”http://ikteroak.blogsome.com”> IKTeroak </a> </th>
<th><a href=”http://euskaljakintza.blogsome.com”> Euskaljakintza </a> </th>
<th><a href=”http://www.jakinstein.com”> Jakinstein </a > </th>
</tr>
</thead>
<tbody class=”scrollContent”>

&lt;tr><br />
    &lt;td>&lt;a href="#"> Estekaren izena&lt;/a> &lt;/td><br />
    &lt;td>&lt;a href="#"> Estekaren izena&lt;/a> &lt;/td><br />
    &lt;td>&lt;a href="#"> Estekaren izena&lt;/a> &lt;/td><br />

&lt;/tr><br />

<tr>
<td>Hemen ez dago estekarik </td>
<td>Hemen ez dago estekarik </td>
<td>Hemen ez dago estekarik </td>

&lt;/tr>


Technorati Etiketak:

, , ,

01.04.06 | 14:36 | Iruzkinik ez | ETIKETAK Informatika