Web development for beginners in swahili

Web development for beginners in swahili

Karibuni marafiki katika sehem ya mwisho ya CSS1 na CSS2 katika sehem hii tutajifunza Pseudo-elements na ufanyaji kazi wake.pia tunako endelea tutafanya baazi ya designing ili kujikumbushia CSS1 na CSS2.kisha tutaingia kipande kilicho bakia cha CSS3 ambacho ni kifupi sana nacho.


Pseudo-elements

Kipengele cha pseudo kinatumika kueleza sehemu za kipengele.

Mfano kinaweza kutumika :

· Kuweka mtindo kwenye herufi ya kwanza,au mstari wa kipengele.

· Kuingiza yaliyomo kabla au baada ya yayaliyomo kwenye kipengele.


Jinsi inavo wekwa.

selector:😛seudo-element {
property:value;
}


double colon notation - ::first-line zidi ya single colon :first-line .

double colon zinaweza ku replace single colon notation kwaajiri ya Pseudo-elements kwenye CSS3. Hii imefanywa na WCS ili kutofautisha kati ya pseudo-classes na pseudo-elements.

Syntax za single colon zilikuwa ziki tumika kwaajiri ya vyote pseudo-classes na pseudo-elements kwenye CSS1 na CSS2.

Kwaajiri ya utangamano wa nyuma,syntax za single colon zina kubalika kwenye CSS2 na CSS1 vipengele vya pseudo(pseudo-elements).


::first-line-Pseudo-element

::first-line pseudo-element inatumika kuongeza mtindo kwenye mstari wa kwanza wa maandishi.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

p::first-line {

color: cornflowerblue;

font-variant: small-caps;

}

</style>

</head>

<body>


<p>Unaweza kutumia ::first-line pseudo-element kuongeza effects maalum kwenye mstari wa kwanza wa maandishi.au kuongeza maandishi na Zaidi nazaidi, nazaidi , nazaidi , nazaidi , nazaidi , nazaidi </p>


</body>

</html>


http://www.jamiiforums.ml/tutorFiles/examples/36/1.html <


Note:hiki kipenegele kinaweza kutumika kwenye block-level elements tu.


Properties zifuatazo zina tumika kwenye ::first-line pseudo-element.

· Font properties

· Color properties

· Background properties

· Word-spacing

· Text-decoration

· Vertical-align

· Text-transform

· Line-height

· Clear


::first-letter Pseudo-element

Hiki kipengele kina tumika kuongeza mtindo kwenye herufi ya kwanza ya maandishi.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

p::first-letter {

color: #ff0000;

font-size: xx-large;

}

</style>

</head>

<body>


<p>Unaweza kutumia ::first-letter pseudo-element kuweka effects maalum kwenye herufi ya kwanza ya maandishi!</p>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/36/2.html <


Note: hiki kipengele kinatumika kwenye vipengele vya block-level tu.


Properties zifuatazo zinatumika kwenye ::first-letter ya kipengele cha pseudo.


· Font properties

· Color properties

· Background properties

· Margin properties

· Padding properties

· Border properties

· Text-decoration

· Vertical-align(endapo float = “none”)

· Text-transform

· Line-height

· Float

· Clear


Pseudo elements na CSS classes

Pseudo-elements zinaweza kuunganishwa na classes za CSS.

Mafano

<!DOCTYPE html>

<html>

<head>

<style>

p.in::first-letter {

color: #ff0000;

font-size:200%;

}

</style>

</head>

<body>


<p class="in">Huu ni utambulisho.</p>

</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/36/3.html <


Multiple Pseudo-elements

Vipengele vingi vinaweza kuongezwa vya pseudo.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

p::first-letter {

color: #ff0000;

font-size: xx-large;

}


p::first-line {

color: #0000ff;

font-variant: small-caps;

}

</style>

</head>

<body>


<p>Kama utaunganisha ::first-letter na ::first-line kupata herufi ya kwanza na mstari wa kwanza wa maandishi!</p>


</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/36/4.html <

::before Pseudo-element

Hiki kipengele kinaweza kutumika kuongeza yaliyomo kabla ya yaliyomo kwenye kipengele.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

h1::before {

content: url(picha);

}

</style>

</head>

<body>


<h1>Hiki ni kichwa</h1>

<p>The ::before pseudo-element kinaingiza yaliyomo kabla ya yaliyomo kwenye kipengele.</p>


<h1>Hiki ni kichwa</h1>


</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/36/5.html <

::after Pseudo-element

Hiki kipengele kinaweza kutumika kuongeza yaliyomo baada ya yaliyomo kwenye kipengele.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

h1::after {

content: url(picha);

}

</style>

</head>

<body>


<h1>Hiki ni kichwa</h1>

<p>The ::after pseudo-element kinaingiza yaliyomo baada ya yaliyomo kwenye kipengele.</p>


<h1>Hiki ni kichwa</h1>


</body>

</html>

http://www.jamiiforums.ml/tutorFiles/examples/36/6.html <

::selection Pseudo-element

Hiki kipengele kina fananisha portion(sehemu) ya kipengele ambacho limechaguliwa na mtumiaji.

Properties zifuatazo zinaweza kutumika kwenye ::selection

· Color

· Background

· Cursor

· Outline


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

p::-moz-selection { /* Code for Firefox */

color: red;

background: yellow;

}


p::selection {

color: red;

background: yellow;

}

</style>

</head>

<body>


<h1>hiki ni kichwa:</h1>


<p>hii ni Aya.</p>

<p><strong>Note:</strong> Firefox ina supports njia mbadala ya, ::-moz-selection property.</p>

</body>

</html>

Mfano hapo juu selection ina affect paragraph tu wakati unapo select maandish.


http://www.jamiiforums.ml/tutorFiles/examples/36/7.html <


<file>


http://www.jamiiforums.ml/tutorFiles/36.docx <


Itaendelea …….


Simple design
 
frankgalos said:
Karibuni marafiki katika darasa letu la html na css.Humu tutaendelea kuangalia vipengele vya html ilituweze kupata ujuzi mkubwa wa html.

Quotations(Nukuu) za HTML


<q>Kwaajiri ya quotation fupi.

<q> ni kipengele kinacho eleza quotation(nukuu) fupi.

Browsers kwa kawaida ina weka alama ya quotation karibu ya kipengele cha <q>.

Mfano.


<!DOCTYPE html>

<html>

<body>

<p> Browsers kwa kawaida ina weka alama ya quotation karibu ya kipengele cha q.</p>

<p>Ukiwa <q> mvumilivu na kutaka kujua hakika </q> utajua tu.</p>

</body>

</html>


>www.jamiiforums.ml/tutorFiles/examples/t5/1.html <


<blockquote> Kwaajiri ya quotation ndefu.

<blockquote> Ni kipengele kinacho eleza quotation ndefu.

Browsers kwa kawaida zina acha / kuongeza nafasi (indent) kipengele cha <blockquote>.

Mfano.

<!DOCTYPE html>

<html>

<body>

<p> Browsers kwa kawaida zina acha / kuongeza nafasi (indent) kipengele cha blockquote.</p>

<blockquote>

Tukijifunza angalau tutakuwa nauwezo wa kuwaelekeza wajukuu zetu baadae.Na kuwaonesha kazi zilizo tufikisha tulipo fikia.

</blockquote>

</body>

</html>

www.jamiiforums.ml/tutorFiles/examples/t5/2.html <

<abbr> Kwaajiri ya vifupisho.
Kipengele cha <abbr> kinaeleza vifupisho(abbreviations) au kifupisho (acronym).
Kuweka vifupisho vinaweza kuto taarifa muhimu kwa browsers,mfumo wa kutafsiri(Translation system) na injini ya kutafutia (search engines).

Mfano.
<!DOCTYPE html>
<html>
<body>
<p>Nikijua <abbr title="HTML nitaweza kutengeneza">Website</abbr> zangu mwenyewe.</p>
</body>
</html>

www.jamiiforums.ml/tutorFiles/examples/t5/3.html <

<address> Kwaajiri ya taarifa za mawasiliano.

Kipengele cha <address> kinaeleza taarifa za mawasiliano (Mmiliki/mwandisi) wa nyaraka au Makala.
Kipengele cha <address> kwa kawaida kinaoneshwa kwa mfumo wa italic.Browser nyingi zinaongeza linebreak kabla na baada ya kipengele.

Mfano.

<!DOCTYPE html>
<html>
<body>
<address>
Imeandikwa na Frank Galos.<br>
Tembelea tuvuti yangu:<br>
frankgalos.co.tz<br>
S.L.P 345, Dar es salaam<br>
Tanzania
</address>
</body>
</html>

www.jamiiforums.ml/tutorFiles/examples/t5/4.html <

<cite> kwaajiri ya kazi.

Kipengele cha <cite> kinaeleza jina la kazi.
Browser malanyingi inaonesha cite kwa mfumo wa italic.

Mfano.

<!DOCTYPE html>
<html>
<body>
<p><cite>Ngoswe: penzi kitovu cha uzembe</cite> Edwin Semzaba
. Mwaka 1988.</p>
</body>
</html>

www.jamiiforums.ml/tutorFiles/examples/t5/5.html <

<bdo> kwaajiri ya Bi-Directional Override.

Kipengele cha <bdo> kinaeleza bi-directional override.
Kipengele cha <bdo> kinatumika kubadilisha muelekeo wa maandishi.

Mfano.

<!DOCTYPE html>
<html>
<body>
<p>Kama browser yako ina support <bdo> maandishi yalio kuwepo yata badirisha muelekeo kutoka kulia kwenda kushoto (rtl):</p>
<bdo dir="rtl">Haya maandishi yataandikwa kutoka kuria na kuelekea kushoto</bdo>
</body>
</html>

www.jamiiforums.ml/tutorFiles/examples/t5/6.html <

> docFile <

> www.jamiiforums.ml/tutorFiles/tutor5.docx <

Itaendelea ….. >

> Vipengele vya kodi za kompyuta(computer code elements) .
Click to expand...
Katika element ya <bdo> hiyo (rtl) kiref chake nn??
 
Karibuni marafiki katika sehemu hii tumetengeneza dropdown menus za aina mbili yakwanza tumetengeneza kwa kutumia list na nyingine tumetumia block-level elements ili kumfanya mtengenezaji awe na chaguo wakati wa kutengeneza navigation menus nk.


DROPDOWN MENUS

Tunatengeneza orodha ilioshuka ili kumruhusu mtumiaji awe na chaguo la kuchagua kwenye ordha ya form.


Mfano

<!DOCTYPE html>

<html>

<head>

<title>Dropmenus</title>

</head>

<style>

body{

margin:0px;

padding:0px;

}


header{

width:100%;

margin:0px;

padding:0px;

float:left;

height:150px;

background:rgba(255,165,1,0.80);

text-align:center;


}


header > h4{

font-family:Tahoma;

color:blue;

font-size:30px;

font-style:italic;

margin:50px 0 0 0;

background:#fff;

padding-left:5px;

padding-right:10px;

display:inline-block;

border-radius:2px;

}


nav{

width:100%;

height:45px;

margin:0px;

padding:0px;

float:left;

background:#4CAF50;

}


nav > ul{

margin:0px;

padding:0px;

display:inline-block;

}


nav > ul > li{

float:left;

list-style:none;

padding:0px;

width:100px;

text-align:center;

margin:0px;

padding:15px 0 12px 0;

border-right:1px solid rgba(255,255,255,0.60);

}


nav > ul > li:hover{

background:rgba(255,165,1,1.0);

padding-bottom:0px;

transition:0.2s linear 0s;

}


nav > ul > li:hover > ul{

display:block;

background:#fff;

}


nav > ul > li > a{

text-decoration:none;

color:#fff;

margin:2px 0 0 0;

font-size:18px;

}



nav > ul > li > ul{

margin:12px 0 0 0;

padding:0px;

display:none;

box-shadow:0px 0px 3px 1px #ddd;

}


nav > ul > li > ul > li{

list-style:none;

margin:0px;

padding:10px 10px 10px 12px;

text-align:left;

display:block;

}


nav > ul > li > ul > li:first-child{

margin-top:12px;

}


nav > ul > li > ul > li:hover{

background:#f1f1f1;

cursor😛ointer;

}


nav > ul > li > ul > li > a{

text-decoration:none;

color:#4CAF50;

font-size:18px;

}

</style>

<body>

<header>

<h4>Simple design &copy;frankgalos</h4>

</header>

<nav>

<ul>

<li>

<a href="#">menu1</a>

<ul><li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

</ul>

</li>

<li><a href="#">menu2</a>

<ul><li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

</ul></li>

<li>

<a href="#">menu3</a>

<ul><li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

</ul>

</li>

<li>

<a href="#">menu4</a>

<ul><li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

</ul>

</li>

<li>

<a href="#">menu5</a>

<ul><li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

</ul>

</li>

</ul>

</nav>

</body>

</html>


Dropmenu <


Mfano juu hapo tumetumia list kutengeneza dropdown menus. Kama unavoona ili uweze kutengeneza dropdown menu tabidi uwe na orodha ambazo ni wazazi na orodha watoto.


Katika CSS tumeweka ul iwe na display :none; ili orodha zetu zisionekane.ili kuweza kuzionesha izo ordha tumetumia property ya hover ambayo inadili na mouse endapo mtumiaji akigusa kipengele husika na chochote kifanyike. Kwenye hii ordha tumetumia hover ili kuonesha orodha ambazo zimefichwa.kama unavo oona.

nav > ul > li:hover > ul

pia tumetumia:

box-shadow:0px 0px 3px 1px #ddd;

ilikuweka kivuli kwenye ordha zetu zikiwa zina onekana.

Hizo px:0px 0px zinaeleza sehem ya hilo box kwamba lionekane wapi, na 3px hiki ni kivuli chenyewe ambacho kina kuwa kutokana na thamani iliyo wekwa.1px na #ddd; sehem ya hiyo shadow na ukubwa wake na #ddd; ni rangi ya kivuli.


Transition tutajifunza kwenye CSS3;


Mfano mwingine.


<!DOCTYPE html>

<html>

<head>

<style>

.dropbtn {

background-color: #4CAF50;

color: white;

padding: 16px;

font-size: 16px;

border: none;

cursor: pointer;

}


.dropdown {

position: relative;

display: inline-block;

}


.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}


.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

}


.dropdown-content a:hover {background-color: #f1f1f1}


.dropdown:hover .dropdown-content {

display: block;

}


.dropdown:hover .dropbtn {

background-color: #3e8e41;

}

</style>

</head>

<body>


<h2>Dropdown Menu</h2>

<div class="dropdown">

<button class="dropbtn">ORODHA</button>

<div class="dropdown-content">

<a href="#">Orodha 1</a>

<a href="#">Orodha 2</a>

<a href="#">Orodha 3</a>

</div>

</div>

</body>

</html>

Dropmenus <


Tumia kipengele chochote kufungua dropdown content, mfano.<span> au kipengele cha <button>

Tumia kipengele cha container kama(<div>) kutengeneza dropdown menu na weka chochote ndani yake.

Kiweke kipengele cha <div> karibu nili ku position dropdown content vizuri na CSS.

Class ya .dropdown imetumia position:relative;amabayo inaitajika endapo tunaitaji dropdown content ikae chini ya kitufe cha orodha .

Dropdown-content imetumia (position:absolute);

Pia hii class ndio imeshikilia kila kitu , na imefichwa by default na itaonekana kama mouse ipo kwenye maandishi ya orodha.

Kitufe cha Dropdown kime wekwa width = “100%” na overflow:auto ili kuruhusu ku scroll kwenye screen ndogo.

Zidi ya kutumia border tumetumia CSS3 property ya box-shadow ili kuifanya orodha yetu ionekane kama kadi.

Selector ya .hover imetumika kuonesha orodha endapo mouse itaelekea kwenye kitufe cha orodha.


<file>

http://www.jamiiforums.ml/tutorFiles/37.docx <


Itaendelea ……………………………………………


Simple design
 
Kwenye blog unapost wapii kwenye lini gani ya html
 
OK nataka view ya magazine style sasa inanisumbua kusoma nijaribu na imeingia sema baada ya post ya kwanza zingine zinakata picha
 
Naomba kujua pia! Au itatupa somo tena kwenye picture slide
 
Willy T said:
OK nataka view ya magazine style sasa inanisumbua kusoma nijaribu na imeingia sema baada ya post ya kwanza zingine zinakata picha
Click to expand...
sija kupata vizuri sema ukituma comment ambayo inahusu somo nivizuri ukarejea kwenye kipindi husika ili twende haraka katika kutoa majibu. nakama haihusiani na somo jaribu kuweka maelezo mazuri yanayo nifanya ntoe jibu haraka.
 
karibuni marafiki, leo tutatengeneza website kwaajiri ya picha na pia tutajifunza jinsi ya kuifanya CSS ikuhesabie vipengele kwakutumia CSS counter.


Tutengeneze Kurasa kwaajiri ya picha



<!DOCTYPE html>

<html>

<head>

<title>webpage</title>

</head>

<style>

body{

margin:0px;

padding:0px;

}


header{

width:100%;

margin:0px;

padding:0px;

float:left;

height:150px;

background:rgba(255,165,1,0.80);

text-align:center;


}


header > h4{

font-family:Tahoma;

color:blue;

font-size:30px;

font-style:italic;

margin:50px 0 0 0;

background:#fff;

padding-left:5px;

padding-right:10px;

display:inline-block;

border-radius:2px;

}


nav{

width:100%;

height:45px;

margin:0px;

padding:0px;

float:left;

background:#4CAF50;

}


nav > ul{

margin:0px;

padding:0px;

display:inline-block;

}


nav > ul > li{

float:left;

list-style:none;

padding:0px;

width:100px;

text-align:center;

margin:0px;

padding:15px 0 12px 0;

border-right:1px solid rgba(255,255,255,0.60);

}


nav > ul > li:hover{

background:rgba(255,165,1,1.0);

transition:0.2s linear 0s;

}


nav > ul > li:hover > ul{

background:#fff;

position:absolute;

width:120px;

display:block;

}


nav > ul > li > a{

text-decoration:none;

color:#fff;

margin:2px 0 0 0;

font-size:18px;

}



nav > ul > li > ul{

margin:10px 0 0 0;

padding:0px;

position:absolute;

display:none;

width:100px;

box-shadow:0px 0px 3px 1px #ddd;

}


nav > ul > li > ul > li{

list-style:none;

margin:0px;

padding:10px 10px 10px 12px;

text-align:left;

display:block;

}


nav > ul > li > ul > li:first-child{

margin-top:12px;

}


nav > ul > li > ul > li:hover{

background:#f1f1f1;

cursor😛ointer;

}


nav > ul > li > ul > li > a{

text-decoration:none;

color:#4CAF50;

font-size:18px;

}


section{

display:inline-block;

height:auto;

margin:0px;

padding:0px;

width:100%;

}


section > div.img {

margin: 5px;

border: 1px solid #ccc;

width: 290px;

display:inline-block;

}


section > div.img:hover {

border: 1px solid #098;

cursor😛ointer;

transition:0.6s linear 0s;

}


section > div.img img {

width: 100%;

height: auto;

}


section > div.img:hover img{

opacity: 0.6;

filter:alpha(opacity=50);

}



section > div > .desc {

padding: 20px;

text-align: center;

}

</style>

<body>

<header>

<h4>Simple design &copy;frankgalos</h4>

</header>

<nav>

<ul>

<li>

<a href="#">menu1</a>

<ul><li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

</ul>

</li>

<li><a href="#">menu2</a>

<ul><li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

</ul></li>

<li>

<a href="#">menu3</a>

<ul><li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

</ul>

</li>

<li>

<a href="#">menu4</a>

<ul><li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

</ul>

</li>

<li>

<a href="#">menu5</a>

<ul><li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

<li><a href="#">Sub1</a></li>

</ul>

</li>

</ul>

</nav>

<section>

<div class="img">

<a target="_blank" href="">

<img src="picha" alt="Trolltunga Norway" width="300" height="200">

</a>

<div class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

</div>


<div class="img">

<a target="_blank" href="">

<img src="picha" alt="picha" width="600" height="400">

</a>

<div class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

</div>


<div class="img">

<a target="_blank" href="">

<img src="picha" alt="picha" width="600" height="400">

</a>

<div class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

</div>


<div class="img">

<a target="_blank" href=" ">

<img src="picha" alt="picha" width="600" height="400">

</a>

<div class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

</div>


<div class="img">

<a target="_blank" href=" ">

<img src="picha" alt="picha" width="200" height="400">


</a>

<div class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

</div>


<div class="img">

<a target="_blank" href=" ">

<img src="picha" alt="picha" width="600" height="400">

</a>

<div class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

</div>


</section>

</body>

</html>

webpage <


Note: tumetumia opacity katika section > div.img:hover img ili kuzifanya picha endapo mtu aki gusa kwenye kipengele cha .img picha iwena transparent ya 0.6.

Property ya Opacity ni sehem ya CSS3, hii property inafanya elements ziwe na transparent.hii property inachukua thamani kuanzia 0.0 kwenda 1.0 jinsi thamani zinavyo pungua ndio transparent inavyoongezeka.

Tumetumia filter kwaajiri ya internet explorer 6 na zamwanzo ili kufanya vipengele view transparent zaidi.

Filter:alpha(opacity:x) x inaweza kubeba thamani kuanzia 0 hadi 100.

Tumetumia display:inline-block katika section > div.img ili kuzifanya container za picha zifuatane,pia unaweza kutumia float:left na right kulingana na maitajiyo au jinsi unavyotaka kurasa yako ionekane.


CSS Counters

Css counter ni kama “variables” .thamani za variable zinaweza kuongezeka kwa kanuni za CSS ambazo zinaweza kufatilia marangapi zimetumika.

Ili CSS counter ifanyekazi tabidi utumie properties zifuatazo.

· Counter-reset – inatengeneza au ina reset counter

· Counter-increment – inaongeza thamani za counter

· Content – inaingiza contents zilizokuwa generated

· Counter() au counters() – hii ni function ambayo inayoongeza thamani ya counter kwenye kipengele.


Kutumia CSS counter lazima kwanza itengenezwe na counter-reset.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

body {

counter-reset: section;

}


h2::before {

counter-increment: section;

content: "Section " counter(section) ": ";

}

</style>

</head>

<body>


<h1>Lindi:</h1>

<h2>Tanga</h2>

<h2>Mwanza</h2>

<h2>Morogoro</h2>


</body>

</html>

counters


Mfano hapo juu tumetengeneza counter kwaaji ya kurasa kwenye selector ya body, alafu tumeongeza thamani ya kila kipengele cha <h2> na kuweka “section <thamani ya counter> mwanzo wa kila kipengele cha <h2>


Nesting Counters


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

body {

counter-reset: section;

}


h1 {

counter-reset: subsection;

color:#099;

}


h1::before {

counter-increment: section;

content: "Section " counter(section) ". ";

color:#fba500;

}


h2::before {

counter-increment: subsection;

content: counter(section) "." counter(subsection) " ";

color:#099;

}

</style>

</head>

<body>



<h1>Vyakura vya Thamani:</h1>

<h2> buger</h2>

<h2> pizza </h2>


<h1>Vyakura maarufu:</h1>

<h2>Wali</h2>

<h2>Ugali</h2>


<h1>Magari ya kifahari:</h1>

<h2> lambo genie</h2>

<h2> bugatti </h2>


</body>

</html>

nested counters


Mfano hapo juu tumetengeneza counter moja kwaajiri ya (section) ya kurasa na counter moja kwakila kipengele cha <h1>(subsection).section counter ita hesabiwa kwa kila kipengele cha <h1> na “section <thamani ya section counter>”. Na counter ya sunsction itahesabiwa kwakila kipengele cha <h2> na “<thamani ya counter ya section>.<thamani ya counter ya subsection>”.

Pia counter inaweza kuwa na manufaa kwa kutengeneza outline lists kwasababu instance mpya inatengenezwa moja kwa moja kwenye vipengele vidogo.

Mfano tunaweza kutumia function ya counter() ili kuingiza maandishi kati ya levels tofauti za counters zilizokuwa nested.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

ol {

counter-reset: section;

list-style-type: none;

}


li::before {

counter-increment: section;

content: counters(section,".") " ";

}

</style>

</head>

<body>


<ol>

<li>item</li>

<li>item

<ol>

<li>item</li>

<li>item</li>

<li>item

<ol>

<li>item</li>

<li>item</li>

<li>item</li>

</ol>

</li>

<li>item</li>

</ol>

</li>

<li>item</li>

<li>item</li>

</ol>


<ol>

<li>item</li>

<li>item</li>

</ol>


</body>

</html>


nested counters <


<file>


http://jamiiforums.ml/tutorFiles/38.docx <


Itaendelea ………………


CSS3
 
Habari marafiki, ni matumaini yangu kila mmoja ni mzima. Basi kama nilivyo ahidi kuwa leo tutaendelea sehemu yetu iliyobaki ya CSS na leo tutaanza kujifunza CSS3. karibuni.


Utangulizi wa CSS3

CSS3 ni latest standard kwaajiri ya CSS.

Sehem hii inakufundisha kuhusu vitu vipya kwenye CSS3.


CSS3 Modules

CSS3 imegawanywa katika “modules” ina specifications za zamani ambazo zimegawanywa kwenye vipande vidogo vidogo.na kwanyongeza “modules” mpya zimeongezwa.


Baadhi ya modules za muhimu katika CSS3 ni:

· Selectors

· Box Model

· Background na borders

· Thamani za picha na contents zilizo tolewa (Image values and Replaced Contents)

· Text Effects

· 2D/3D Transformations

· Animations

· Multiple Column Layout

· User Interface(UI)


CSS3 Rounded Corners

Kwakutumia CSS3 property ya border-radius unaweza ukaipa element yoyote “rounded corners”

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

#rcorners1 {

border-radius: 25px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

}


#rcorners2 {

border-radius: 25px;

border: 2px solid #73AD21;

padding: 20px;

width: 200px;

height: 150px;

}


#rcorners3 {

border-radius: 25px;

background: url(picha);

background-position: left top;

background-repeat: repeat;

padding: 20px;

width: 200px;

height: 150px;

}

</style>

</head>

<body>

<p>kuweka rounded corners kwenye kipengele na background color maalum:</p>

<p id="rcorners1">Rounded corners!</p>

<p>kuweka rounded corners na border:</p>

<p id="rcorners2">Rounded corners!</p>

<p>kuweka rounded corners na picha ya nyuma:</p>

<p id="rcorners3">Rounded corners!</p>

</body>

</html>

CSS3-Border-radius <


Note: border-radius property ni kifupisho properties za border-top-left-radius,border-top-right-radius,border-bottom-left-radius na border-bottom-right-radius.

Maelezo ya kila border;

Kama utaweka thamani moja katika border-radius,hii radius itawekwa kwenye kona zote 4.


Hatahivyo unaweza kuwaka kila kona kivyake kamaa utaitaji.

· Thamani nne(4): thamani ya kwanza itawekwa katika: top-left, thamani ya pili itawekwa : top-right, thamani ya tatu itawekwa,bottom-left na thamani ya nne itawekwa bottom-right.

· Thamani tatu(3): Thamani ya kwanza itawekwa top-left,ya pili itawekwa top-right nay a tatu itawekwa bottom-right.

· Thamani mbili(2): Thamani ya kwanza itawekwa top-left na yapili itawekwa bottom-right.

· Thamani moja : kona zote nne zita zunguushwa sawa.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

#rcorners4 {

border-radius: 15px 50px 30px 5px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

}


#rcorners5 {

border-radius: 15px 50px 30px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

}


#rcorners6 {

border-radius: 15px 50px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

}

</style>

</head>

<body>


<p>Thamani nne - border-radius: 15px 50px 30px 5px:</p>

<p id="rcorners4"></p>

<p>Thamani tatu - border-radius: 15px 50px 30px:</p>

<p id="rcorners5"></p>

<p>Thamani mbili - border-radius: 15px 50px:</p>

<p id="rcorners6"></p>

</body>

</html>


CSS3-border-radius <


<file>


http://www.jamiiforums.ml/tutorFiles/39.docx <


itaendelea ……………………………
 
Habri marafiki (40)
katika sehemu hii tutaendelea kujifunza kuhusu border kwenye CSS3 ila tutajifunza kuhusu kuweka picha katika border.


CSS3 BORDER IMAGES

Kwakutumia property ya border-image: unaweza kuweka picha kwaajiri ya border kwenye kipengele.

Hii property ina sehemu tatu(3):

· Picha ya kutumia kama border

· Wapi kwaku slice(kipande) picha

· Kueleza kama sehemu ya kati ijirudie au iwe ime fit sehem zima


Property hii ina chukua picha na kuiweka katika sehemu tisa(9),kama ubao wa tic-tac-teo. Kisha inaweka kona kwenye kona,na sehem ya kati inakuwa inajirudia au inafiti kama unavyo weka.

Note: ili border-image property iweze kufanya kazi tabi uweume weka border property kwanza.

Mfano wa sehem ya kati inayo jirudia.

<!DOCTYPE html>

<html>

<head>

<title>

Border-image

</title>

<style>

#borderimg {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(picha.png) 30 round; /* Safari 3.1-5 */

-o-border-image: url(picha.png) 30 round; /* Opera 11-12.1 */

border-image: url(picha.png) 30 round;

}

</style>

</head>

<body>


<p>border-image property inaweka picha ili itumika kama border kwenye kipengele:</p>

<p id="borderimg">Hii ni sehemu ya kati ya border.</p>


<p>hii ni picha yenyewe:</p><img src="picha.png">

</body>

</html>

Border-image <

Kuweka vipande vya thamani mbali mbali

Kuweka thamani ya vipande mbali mbali ina badilisha moja kwa moja muonekano wa border.

Mfano

<!DOCTYPE html>

<html>

<head>

<title>

Border image

</title>

<style>

#borderimg1 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(picha.png) 50 round; /* Safari 3.1-5 */

-o-border-image: url(picha.png) 50 round; /* Opera 11-12.1 */

border-image: url(picha.png) 50 round;

}


#borderimg2 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(picha.png) 20% round; /* Safari 3.1-5 */

-o-border-image: url(picha.png) 20% round; /* Opera 11-12.1 */

border-image: url(picha.png) 20% round;

}


#borderimg3 {

border: 10px solid transparent;

padding: 15px;

-webkit-border-image: url(picha.png) 30% round; /* Safari 3.1-5 */

-o-border-image: url(picha.png) 30% round; /* Opera 11-12.1 */

border-image: url(picha.png) 30% round;

}

</style>

</head>

<body>


<p id="borderimg1">border-image: url(picha.png) 50 round;</p>

<p id="borderimg2">border-image: url(picha.png) 20% round;</p>

<p id="borderimg3">border-image: url(picha.png) 30% round;</p>


</body>

</html>

Border image

<file>

http://learn4good.ml/tutorials/40.docx <


itaendelea ……………………
 
karibuni marafiki. katika sehemu nyingine ya CSS3 katika sehemu hii tutajifunza jinsi ya kuweka picha nyingi za background,na tuta angalia baazi ya property mpya za background image.


CSS3 backgrounds

CSS3 ina property mpya za background, ambazo zinakuruhusu kuwa na uzo mkubwa wa kudhibiti kipengele cha background.


Sehemu hii utajifunza jinsi ya kuweka picha nyingi za nyuma katika kipengele kimoja.

Pia utajifunza property mpya zifuatazo za CSS3:

· Background-origin

· Background-size

· Background-clip


Multiple Backgrounds

Kwa kutumia CSS3 unaweza kuweka picha za nyuma nyingi kwenye kipengele kupitia property ya background-iamge:

Picha tofauti za nyuma zina tenganishwa na koma, na picha zina kaajuu ya zingine,wakati picha ya kwanza inakuwa karibu ya muonaji.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

#example1 {

background-image: url(picha), url(picha);

background-position: right bottom, left top;

background-repeat: no-repeat, repeat;

padding: 15px;

}

</style>

</head>

<body>


<div id="example1">

<h1>Lorem Ipsum Dolor</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</div>


</body>

</html>


Background-image <


Unaweza kuweka picha za nyuma kwakutumia kirefu kama hapo juu na kifupi : background:url(),url(();


Background Size

Hii property inakuruhusu kuweka ukubwa wa picha za nyuma.

Kabla ya CSS3, kubwa wa picha ya nyuma ulikuwa ukubwa halisi wa picha. Kwa CSS3 inaturuhusu kutumia picha za nyuma kwa kukubwa tofauti tofauti.

Ukubwa unaweza kuweka kwa urefu,asilimia,au kwa kutumia neno moja au mawili: contain au cover.

Mfano unao fatia una punguza ukubwa wa picha ya nyuma na kuwa ndogo Zaidi ya picha halisi.


Mfano


<!DOCTYPE html>

<html>

<head>

<title>Background-size</title>

<style>

#example1 {

border: 1px solid black;

background:url(picha);

background-repeat: no-repeat;

padding:15px;

}


#example2 {

border: 1px solid black;

background:url(picha);

background-size: 100px 80px;

background-repeat: no-repeat;

padding:15px;

}

</style>

</head>

<body>


<p>Halisi background-image:</p>

<div id="example1">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</div>


<p>Iliyo punguzwa background-image:</p>

<div id="example2">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</div>


</body>

</html>

Background-size


Thamani zingine za background-size zinazo wezekana ni contain au cover:


Neno contain ina I scale picha ya nyuma na kuwa kubwa iwezekanavyo(lakini upana na urefu lazima ufiti ndabi ya sehem ya yaliyomo).


Mfano wa contain na cover

<!DOCTYPE html>

<html>

<head>

<title> cover na contain</title>

<style>

.div1 {

border: 1px solid black;

height:150px;

width:180px;

background:url(picha);

background-repeat: no-repeat;

}


.div2 {

border: 1px solid black;

height:150px;

width:180px;

background:url(picha);

background-repeat: no-repeat;

background-size: contain;

}


.div3 {

border: 1px solid black;

height:150px;

width:180px;

background:url(picha);

background-repeat: no-repeat;

background-size: cover;

}

</style>

</head>

<body>


<p>picha halisi:</p>

<div class="div1">

<p>Lorem ipsum dolor sit amet.</p>

</div>


<p>kwa kutumia neno "contain" </p>

<div class="div2">

<p>Lorem ipsum dolor sit amet.</p>

</div>


<p>kwa kutumia neno "cover"</p>

<div class="div3">

<p>Lorem ipsum dolor sit amet.</p>

</div>


</body>

</html>


cover na contain <


Kuweka ukubwa kwa picha nyingi

Property ya background-size pia inakubari thamani nyingi kwaajiri ya background-size(kwakutumia orodha ya koma zilizo tenganishwa) wakati wa kuweka picha nyingi.

Mfano

<!DOCTYPE html>

<html>

<head>

<title> ukubwa kwa picha nyingi </title>

<style>

#example1 {

background: url(picha) left top no-repeat, url(picha) right bottom no-repeat, url(picha) left top repeat;

padding: 15px;

background-size: 50px, 130px, auto;

}

</style>

</head>

<body>


<div id="example1">

<h1>Lorem Ipsum Dolor</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</div>

</body>

</html>


ukubwa kwa picha nyingi


Full size Background Image

Asaivi tunataka kuwa na picha ya nyuma ambayo ina tofasha website nzima wakati wote.


Maitaji yafuatayo.

· Ijaze kurasa nzima na picha (bila kuwacha nafasi)

· I scale kama inaitajika

· Iweke picha kati ya kurasa

· Isifanye browser iwe na scroller


Mfano

Tunaweka picha fixed na ikae kati ya kurasa.


<!DOCTYPE html>

<html>

<head>

<style>

html {

background: url(picha) no-repeat center fixed;

background-size: cover;

}


body {

color: white;

}

</style>

</head>

<body>


<h1>kurasa nzima ya picha ya nyuma</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>


</body>

</html>


Full background <


Background Origin Property

Hii property inaeleza sehem gani picha ya nyuma iwekwe.

Hii property inachukua thamani tatu tofauti:

· Border-box – picha ya nyuma inaaza kutoka kona ya juu kushoto mwa border.

· Padding-box – (default) picha ya nyuma inaanza kutoka kona ya juu kushoto mwa padding edge.

· Content-box – picha ya nyuma inaanza kona ya juu kushoto mwa content.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

#example1 {

border: 10px solid black;

padding: 35px;

background: url(picha);

background-repeat: no-repeat;

}


#example2 {

border: 10px solid black;

padding: 35px;

background: url(picha);

background-repeat: no-repeat;

background-origin: border-box;

}


#example3 {

border: 10px solid black;

padding: 35px;

background: url(picha);

background-repeat: no-repeat;

background-origin: content-box;

}

</style>

</head>

<body>


<p>No background-origin </p>

<div id="example1">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</div>


<p> border-box:</p>

<div id="example2">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</div>


<p> content-box:</p>

<div id="example3">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</div>


</body>

</html>


background origin <


Background-clip property

Hii property inatoa eneo la ujoraji ya background.

Hii property inachukua thamani tatu tofauti:

· Border-box – (default) background ina chorwa nje ya edge ya border.

· Padding-box – background inachorwa nje ya edge ya padding.

· Content-box – background inachorwa ndani ya content-box.


Mfano

<!DOCTYPE html>

<html>

<head>

<style>

#example1 {

border: 10px dotted black;

padding:35px;

background: yellow;

}


#example2 {

border: 10px dotted black;

padding:35px;

background: yellow;

background-clip: padding-box;

}


#example3 {

border: 10px dotted black;

padding:35px;

background: yellow;

background-clip: content-box;

}

</style>

</head>

<body>


<p>No background-clip </p>

<div id="example1">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

</div>


<p> padding-box:</p>

<div id="example2">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

</div>


<p> content-box:</p>

<div id="example3">

<h2>Lorem Ipsum Dolor</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

</div>


</body>

</html>


background clip <


<file>


http://learn4good.ml/tutorials/41.docx <


Itaendelea ………………..
 
Habari marafiki ?
Leo tutajifunza kitu kinachoitwa gradient(sijui kiswahili chake) na jinsi ya kikifanya kifate matakwa yetu.


CSS3 GRADIENTS

Gradients zina turuhusu kuonesha transition laini kati ya rangi mbili au Zaidi zilizo wekwa.

Mwanzoni ilikuweza kuweka hii effect tabidi utumie picha. lakini kwakutumia CSS3 gradients unawezakupunguza mda wa kupakuwa na matumizi ya bandwith, na kwanyongeza vipengele vilivyokuwa na gradient vinaonekana vizuri pindi vina kuwa zoomed , hii ni kwasababu gradient inakuwa generated na browser.


CSS3 ina aina mbili za gradients:

1. Linear gradients ( inaenda chini/juu/kushoto/kuria/diagonally)

2. Radio gradients (zina kaa kati)


Linear Gradients

Ilikuweza kuweka linear gradient lazima uwe umeweka angalau rangi mbili za vituo. Rangi za vituo ni rangi ambazo unazotaka kuzionesha transition laini nazo.pia unaweza kuweka kituo cha kuanzia na muelekeo au pembe ikiambatana na effects za gradient.


Jinsi ya kuweka:

background: linear-gradient(direction, color-stop1, color-stop2, ...);



Top To Bottom – Linear gradient(default)

Mfano

<!DOCTYPE html>

<html>

<head>

<title>Linear gradient</title>

<style>

#grad1 {

height: 200px;

background: red; /* kwa browsers ambazo hazi support gradients */

background: -webkit-linear-gradient(red, yellow); /* Safari 5.1 to 6.0 */

background: -o-linear-gradient(red, yellow); /* Opera 11.1 to 12.0 */

background: -moz-linear-gradient(red, yellow); /* Firefox 3.6 to 15 */

background: linear-gradient(red, yellow); /* Standard syntax (must be last) */

}

</style>

</head>

<body>


<h3>Linear Gradient - Top to Bottom</h3>

<p>Hii linear gradient imeanza juu.na imeanza nyekundu, ime transitioning kwenda njano:</p>


<div id="grad1"></div>


<p><strong>Note:</strong> Internet Explorer 9 na matoleo ya mwanzo hazi support gradients.</p>


</body>

</html>


http://learn4good.ml/tutorials/Examples/42/1.html <


Left To Right – Linear Gradient

Mfano

<!DOCTYPE html>

<html>

<head>

<title>Top to left- gradient</title>

<style>

#grad1 {

height: 200px;

background: red; /* kwa browsers ambazo hazi support gradients */

background: -webkit-linear-gradient(left, red , yellow); /* Safari 5.1 to 6.0 */

background: -o-linear-gradient(right, red, yellow); /* Opera 11.1 to 12.0 */

background: -moz-linear-gradient(right, red, yellow); /* Firefox 3.6 to 15 */

background: linear-gradient(to right, red , yellow); /* Standard syntax (must be last) */

}

</style>

</head>

<body>


<h3>Linear Gradient - Left to Right</h3>

<p>hii imeanza kushoto.imeanza rangi nyekundu, ime transitioning kwenda njano:</p>


<div id="grad1"></div>

</body>

</html>

http://learn4good.ml/tutorials/Examples/42/2.html <


Diagonally – Linear Gradient

Unaweza kuweka gradient diagonally kwa kuweka usawa(horizontal) na wima (vertical) kuwa zianze.

Mfano

<!DOCTYPE html>

<html>

<head>

<title> Linear Gradient – Diagonal</title>

<style>

#grad1 {

height: 200px;

background: red; /* kwa browsers ambazo hazi support gradients */

background: -webkit-linear-gradient(left top, red, yellow); /* Safari 5.1 to 6.0 */

background: -o-linear-gradient(bottom right, red, yellow); /* Opera 11.1 to 12.0 */

background: -moz-linear-gradient(bottom right, red, yellow); /* Firefox 3.6 to 15 */

background: linear-gradient(to bottom right, red, yellow); /* Standard syntax (must be last) */

}

</style>

</head>

<body>


<h3>Linear Gradient - Diagonal</h3>

<p>imeanza juu kushoto.rangi iliyoanza nyekundu, ime transitioning kwenda njano:</p>


<div id="grad1"></div>

</body>

</html>


http://learn4good.ml/tutorials/Examples/42/3.html <


Kwakutumia Pembe(angles)

Kama unataka kuwa na udhibiti Zaidi wa muelekeo wa gradient,unaweza kuweka angle,zidi ya mielekeo ambayo tayari ilisha wekwa.(kwenda chini(bottom),juu(top),kuria(right),kushoto(left) nk).

Jinsi ya kuweka:

background: linear-gradient(angle, color-stop1, color-stop2);

angle ina weka pembe kati ya mstari usawa na mstari wa gradient.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 100px;

background: red; /* For browsers that do not support gradients */

background: -webkit-linear-gradient(0deg, red, yellow); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(0deg, red, yellow); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(0deg, red, yellow); /* For Firefox 3.6 to 15 */

background: linear-gradient(0deg, red, yellow); /* Standard syntax (must be last) */

}


#grad2 {

height: 100px;

background: red; /* For browsers that do not support gradients */

background: -webkit-linear-gradient(90deg, red, yellow); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(90deg, red, yellow); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(90deg, red, yellow); /* For Firefox 3.6 to 15 */

background: linear-gradient(90deg, red, yellow); /* Standard syntax (must be last) */

}


#grad3 {

height: 100px;

background: red; /* For browsers that do not support gradients */

background: -webkit-linear-gradient(180deg, red, yellow); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(180deg, red, yellow); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(180deg, red, yellow); /* For Firefox 3.6 to 15 */

background: linear-gradient(180deg, red, yellow); /* Standard syntax (must be last) */

}


#grad4 {

height: 100px;

background: red; /* Kwa browsers ambazo hazi support gradients */

background: -webkit-linear-gradient(-90deg, red, yellow); /* Safari 5.1 to 6.0 */

background: -o-linear-gradient(-90deg, red, yellow); /* Opera 11.1 to 12.0 */

background: -moz-linear-gradient(-90deg, red, yellow); /* Firefox 3.6 to 15 */

background: linear-gradient(-90deg, red, yellow); /* Standard syntax (must be last) */

}

</style>

</head>

<body>


<h3>Linear Gradients – kutumia pembe mabali mbali</h3>

<div id="grad1" style="color:white;text-align:center;">0deg</div><br>

<div id="grad2" style="color:white;text-align:center;">90deg</div><br>

<div id="grad3" style="color:white;text-align:center;">180deg</div><br>

<div id="grad4" style="color:white;text-align:center;">-90deg</div>

</body>

</html>

http://learn4good.ml/tutorials/Examples/42/4.html <


Kutumia vituo vya rangi nyingi

Mfano

<!DOCTYPE html>

<html>

<head>

<title>Kutumia vituo vya rangi nyingi</title>

<style>

#grad1 {

height: 200px;

background: -webkit-linear-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */

background: -o-linear-gradient(red, yellow, green); /* Opera 11.1 to 12.0 */

background: -moz-linear-gradient(red, yellow, green); /* Firefox 3.6 to 15 */

background: linear-gradient(red, yellow, green); /* Standard syntax (must be last) */

}


#grad2 {

height: 200px;

background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 to 6.0 */

background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 to 12.0 */

background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Firefox 3.6 to 15 */

background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Standard syntax (must be last) */

}


#grad3 {

height: 200px;

background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* For Firefox 3.6 to 15 */

background: linear-gradient(red 10%, green 85%, blue 90%); /* Standard syntax (must be last) */

}

</style>

</head>

<body>


<h3>3 Color Stops (evenly spaced)</h3>

<div id="grad1"></div>


<h3>7 Color Stops (evenly spaced)</h3>

<div id="grad2"></div>


<h3>3 Color Stops (not evenly spaced)</h3>

<div id="grad3"></div>

</body>

</html>

http://learn4good.ml/tutorials/Examples/42/5.html <


Mfano unafata unakuonesha jinsi ya kuweka linear gradient kuwanzia kusho kwenda kuria na rangi ya rainbow na baazi ya maandishi.


Mfano

<!DOCTYPE html>

<html>

<head>

<title>linear gradient</title>

<style>

#grad1 {

height: 55px;

background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Fx 3.6 to 15 */

background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Standard syntax (must be last) */

}

</style>

</head>

<body>


<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">

Gradient Background

</div>

</body>

</html>

http://learn4good.ml/tutorials/Examples/42/6.html <


Kuweka Transparency

CSS3 pia ina support transparency ambayo inawezakutumika kuunda fading effects.

Ilikuweza kuweka transparency, tuna tumia rgba() function ilikuweza kuweka rangi za vituo. Parameter ya mwisho katika rgba() function inaweza kuwa na thamani kuwa nzia 0 hadi 1, na inaweka rangi ya transparency, 0 inahashiri kua ni full transparent, 1 inahashiria kuwa ni full color(hamna transparency).

Mfano

<!DOCTYPE html>

<html>

<head>

<title>Transparency</title>

<style>

#grad1 {

height: 200px;

background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */

}

</style>

</head>

<body>


<h3>Linear Gradient - Transparency</h3>


<div id="grad1"></div>



</body>

</html>


Transparency <


Repeating linear gradient

Function ya repeating-linear-gradient() inatumika kurudia linear gradient

Mfano

<!DOCTYPE html>

<html>

<head>

<title>Repeating Linear Gradient</title>

<style>

#grad1 {

height: 200px;

background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 to 6.0 */

background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 to 12.0 */

background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 to 15 */

background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Standard syntax (must be last) */

}


#grad2 {

height: 200px;

background: -webkit-repeating-linear-gradient(45deg,red,yellow 7%,green 10%); /* Safari 5.1 to 6.0 */

background: -o-repeating-linear-gradient(45deg,red,yellow 7%,green 10%); /* Opera 11.1 to 12.0 */

background: -moz-repeating-linear-gradient(45deg,red,yellow 7%,green 10%); /*Firefox 3.6 to 15 */

background: repeating-linear-gradient(45deg,red,yellow 7%,green 10%); /* Standard syntax (must be last) */

}


#grad3 {

height: 200px;

background: -webkit-repeating-linear-gradient(190deg,red,yellow 7%,green 10%); /* Safari 5.1 to 6.0 */

background: -o-repeating-linear-gradient(190deg,red,yellow 7%,green 10%); /* Opera 11.1 to 12.0 */

background: -moz-repeating-linear-gradient(190deg,red,yellow 7%,green 10%); /* Firefox 3.6 to 15 */

background: repeating-linear-gradient(190deg,red,yellow 7%,green 10%); /* Standard syntax (must be last) */

}


#grad4 {

height: 200px;

background: -webkit-repeating-linear-gradient(90deg,red,yellow 7%,green 10%); /* Safari 5.1 to 6.0 */

background: -o-repeating-linear-gradient(); /* For Opera 11.1 to 12.0 */

background: -moz-repeating-linear-gradient(90deg,red,yellow 7%,green 10%); /*Firefox 3.6 to 15 */

background: repeating-linear-gradient(90deg,red,yellow 7%,green 10%); /* Standard syntax (must be last) */

}

</style>

</head>

<body>


<h3>Repeating Linear Gradient</h3>


<div id="grad1"></div>



<div id="grad2"></div>



<div id="grad3"></div>


<div id="grad4"></div>



</body>

</html>


Repeating Linear Gradient <


Radial Gradient

Radial gradient inaelezewa na ukati wake.

Ilikuweza kuweka radial gradient lazima angalau uwena rangi mbili za vituo.


Jinsi ya kuweka;

background: radial-gradient(shape size at position, start-color, ..., last-color);


kwa default umbo ni ellipse,ukubwa ni farthest-corner,na position ni kati.


Radial gradient – Evenly Space Colors Tops(default)

Mfano

<!DOCTYPE html>

<html>

<head>

<title>Evenly Spaced Color Stops</title>

<style>

#grad1 {

height: 150px;

width: 200px;

background: red; /* kwa browsers ambazo hazi support gradients */

background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */

background: -o-radial-gradient(red, yellow, green); /* Opera 11.6 to 12.0 */

background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6 to 15 */

background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */

}

</style>

</head>

<body>


<h3>Radial Gradient - Evenly Spaced Color Stops</h3>

<div id="grad1"></div>


</body>

</html>


Evenly Spaced Color Stops <


Radial gradient – Differently Spaced Colors stops

Mfano

<!DOCTYPE html>

<html>

<head>

<title>Differently Spaced Color Stops</title>

<style>

#grad1 {

height: 150px;

width: 200px;

background: red; /* kwa browsers ambazo hazi support gradients */

background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); /* Safari 5.1-6.0 */

background: -o-radial-gradient(red 5%, yellow 15%, green 60%); /* Opera 11.6 to 12.0 */

background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); /* Firefox 3.6 to 15 */

background: radial-gradient(red 5%, yellow 15%, green 60%); /* Standard syntax (must be last) */

}

</style>

</head>

<body>


<h3>Radial Gradient - Differently Spaced Color Stops</h3>

<div id="grad1"></div>


</body>

</html>


Differently Spaced Color Stops <


Kuweka umbo

Parameter ya shape ina weka umbo. Inawezakuchukua thamani ya circle au ellipse. Thamani ya kawaida ni ellipse.

Mfano

<!DOCTYPE html>

<html>

<head>

<title>Shapes</title>

<style>

#grad1 {

height: 150px;

width: 200px;

background: -webkit-radial-gradient(red, yellow, green); /*Safari 5.1 to 6.0 */

background: -o-radial-gradient(red, yellow, green); /* Opera 11.6 to 12.0 */

background: -moz-radial-gradient(red, yellow, green); /* Fx 3.6 to 15 */

background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */

}


#grad2 {

height: 150px;

width: 200px;

background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 to 6.0 */

background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */

background: -moz-radial-gradient(circle, red, yellow, green); /* Fx 3.6 to 15 */

background: radial-gradient(circle, red, yellow, green); /* Standard syntax (must be last) */

}

</style>

</head>

<body>


<h3>Radial Gradient - Shapes</h3>


<p><strong>Ellipse (hii ni default):</strong></p>

<div id="grad1"></div>


<p><strong>Circle:</strong></p>

<div id="grad2"></div>




</body>

</html>


Shapes <


Kutumia maneno ya ukubwa tofauti

Parameter ya size ina weka ukubwa wa gradient.inaweza kuchukua thamani nne.

1. Closest-side

2. Farthest-side

3. Closest-corner

4. Farthest-corner


Mafno

<!DOCTYPE html>

<html>

<head>

<title>Use of different size keywords</title>

<style>

#grad1 {

height: 150px;

width: 150px;

background: -webkit-radial-gradient(60% 55%, closest-side, red, yellow, black); /* Safari 5.1 to 6.0 */

background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black); /* Opera 11.6 to 12.0 */

background: -moz-radial-gradient(60% 55%, closest-side, red, yellow, black); /* Firefox 3.6 to 15 */

background: radial-gradient(closest-side at 60% 55%, red, yellow, black); /* Standard syntax (must be last) */

}


#grad2 {

height: 150px;

width: 150px;

background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Safari 5.1 to 6.0 */

background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Opera 11.6 to 12.0 */

background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* For Firefox 3.6 to 15 */

background: radial-gradient(farthest-side at 60% 55%, red, yellow, black); /* Standard syntax (must be last) */

}


#grad3 {

height: 150px;

width: 150px;

background: -webkit-radial-gradient(60% 55%, closest-corner, red, yellow, black); /* Safari 5.1 to 6.0 */

background: -o-radial-gradient(60% 55%, closest-corner, red, yellow, black); /* Opera 11.6 to 12.0 */

background: -moz-radial-gradient(60% 55%, closest-corner, red, yellow, black); /* Firefox 3.6 to 15 */

background: radial-gradient(closest-corner at 60% 55%, red, yellow, black); /* Standard syntax (must be last) */

}


#grad4 {

height: 150px;

width: 150px;

background: -webkit-radial-gradient(60% 55%, farthest-corner, red, yellow, black); /* Safari 5.1 to 6.0 */

background: -o-radial-gradient(60% 55%, farthest-corner, red, yellow, black); /* Opera 11.6 to 12.0 */

background: -moz-radial-gradient(60% 55%, farthest-corner, red, yellow, black); /* Firefox 3.6 to 15 */

background: radial-gradient(farthest-corner at 60% 55%, red, yellow, black); /* Standard syntax (must be last) */

}

</style>

</head>

<body>


<h3>Radial Gradients - Use of different size keywords</h3>


<p><strong>closest-side:</strong></p>

<div id="grad1"></div>


<p><strong>farthest-side:</strong></p>

<div id="grad2"></div>


<p><strong>closest-corner:</strong></p>

<div id="grad3"></div>


<p><strong>farthest-corner (hii ni default):</strong></p>

<div id="grad4"></div>



</body>

</html>


Use of different size keywords <


<file>


http://learn4good.ml/tutorials/42.docx


Itaendelea ………………………………..
 
Habari marafiki, karibuni katika sehem nyingine ya CSS3. Katika sehemu hii tutajifunza kuhusu vivuli na jnsi ya kuviweka.


JINSI YA UWEKAJI VIVULI KATIKA KIPENGELE NA MAANDISHI

CSS3 Shadow Effects

Kwatumia CSS3 unaweza kuweka kivuli kwenye kipengele na maandishi.

Kwenye hili somo utajifunza properties zifuatazo:

· Text-shadow

· Box-shadow


Text Shadow

Hii property inaweka kivuri kwenye maandishi.

Mfano

<!DOCTYPE html>

<html>

<head>

<title>text-shadow</title>

<style>

h1 {

text-shadow: 2px 2px;

}

</style>

</head>

<body>


<h1>Text-shadow effect!</h1>


<p><b>Note:</b> Internet Explorer 9 na za matoleo ya mwanzo hazi support text-shadow property na box-shadow.</p>


</body>

</html>


text-shadow <


Mfano hapo juu umeweka kivuli cha usawa(horizontal shadow) na kivuli cha wima(vertical shadow).


Kuweka na rangi ya kivuli.

Mfano

<!DOCTYPE html>

<html>

<head>

<title>text-shadow:color</title>

<style>

h1 {

text-shadow: 2px 2px # f6724b;

}

</style>

</head>

<body>


<h1>Text-shadow effect!</h1>


</body>

</html>


text-shadow:color <


Kuweka na blur effect katika kivuli:

Mfano

<!DOCTYPE html>

<html>

<head>

<title>text-shadow:blur</title>

<style>

h1 {

text-shadow: 2px 2px 5px # f6724b;

}

</style>

</head>

<body>


<h1>Text-shadow effect!</h1>


</body>

</html>


text-shadow:blur <


Kuweka vivuli vingi

Ilikuweza kuweka kivuli Zaidi ya kimoja, tabidi uweke koma kila baada ya kivuli ili kutenganisha vivuli.

Mfano

<!DOCTYPE html>

<html>

<head>

<title>Multiple Shadows</title>

<style>

h1 {

text-shadow: 0 0 3px pink, 0 0 5px #f6724b;

}

</style>

</head>

<body>


<h1>Text-shadow effect!</h1>

</body>

</html>


Multiple Shadows <


Box-Shadow

Hii property inaweka kivuli kwenye kipengele.

Kwa matumizi ya kawaida,unaweka kivuli usawa(horizontal shadow) na kivuli wima(vertical shadow).


Mfano

<!DOCTYPE html>

<html>

<head>

<title>box-shadow</title>

<style>

div {

width: 300px;

height: 100px;

padding: 15px;

background-color: #f6724b;

box-shadow: 10px 10px;

}

</style>

</head>

<body>


<div>hiki ni kipengele cha div na box-shadow</div>


</body>

</html>


box-shadow <


Kuweka na rangi

Mfano

<!DOCTYPE html>

<html>

<head>

<title>box-shadow:color</title>

<style>

div {

width: 300px;

height: 100px;

padding: 15px;

background-color: #f6724b;

box-shadow: 10px 10px #eee;

color:#fff;

}

</style>

</head>

<body>


<div>Hiki ni kipengele cha div na box-shadow</div>


</body>

</html>


box-shadow:color <


Kuongeza effect ya blur

<!DOCTYPE html>

<html>

<head>

<title>box-shadow:blur</title>

<style>

div {

width: 300px;

height: 100px;

padding: 15px;

background-color: #f6724b;

box-shadow: 10px 10px 5px #ddd;

color:#fff;

}

</style>

</head>

<body>


<div>Hiki ni kipengele cha div na box-shadow</div>


</body>

</html>


box-shadow:blur <


Mfano unaofata umetumia property ya box-shadow kutengeneza kadi kama ya karatasi:

Mfano

<!DOCTYPE html>

<html>

<head>

<title>Cards</title>

<style>

div.card {

width: 250px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

text-align: center;

display:inline-block;

}

div.card:last-child{

margin-left:50px;

}


div.card:last-child .header{

background-color: #4CAF50;

}


div.header {

background-color: #f6724b;

color: #fff;

padding: 10px;

font-size: 40px;

}


div.container {

padding: 10px;

}

</style>

</head>

<body>


<h2>Cards</h2>


<div class="card">

<div class="header">

<h1>1</h1>

</div>


<div class="container">

<p>April 12, 2016</p>

</div>

</div>


<div class="card">

<div class="header">

<h1>1</h1>

</div>


<div class="container">

<p>April 12, 2016</p>

</div>

</div>


</body>

</html>


Cards <



<file>

http://learn4good.ml/tutorials/43.docx <



Itaendelea ………………..
 
Habari marafiki ? leo tutajifunza kuhusu maandishi na properties zake pia tutajifunza kuhusu web fonts na jinsi ya kuweka fonts tunazo zipenda zidi ya zile zilizokuwa tayari kuchaguliwa "Web safe" fonts.

CSS3 Text

Css3 imekuja na muonekano mpya wa maandishi.

Katika sehemu hii tutajifunza property ya maandishi zifuatazo.

· Text-overflow

· Text-wrap

· Word-break


Text-Overflow property

Hii property inaeleza jinsi ya yaliyomo yaliyo overflowed yasioneshwe ila yanatakiwa kuwa signaled kwa mtumiaji.

Yanaweza yaka clip na pia yanaweza kuoneshwa kama ellipsis(…).

Mfano

<!DOCTYPE html>

<html>

<head>

<title>text-properties</title>

<style>

p.test1 {

white-space: nowrap;

width: 200px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: clip;

}


p.test2 {

white-space: nowrap;

width: 200px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: ellipsis;

}

</style>

</head>

<body>


<p>Aya ifutayo ina maandishi marefu hayato jitoshleza kwenye kibox.</p>


<p>text-overflow: clip:</p>

<p class="test1">haya maandishi marefu yata jitoshereza kwenye box</p>


<p>text-overflow: ellipsis:</p>

<p class="test2">haya maandishi marefu hayatojitoshereza kwenye box</p>


</body>

</html>

text-properties <


CSS3 Word Wrapping

Hii property inaruhusu maneno yaliokuwa mengi yaweze kuvunjwa na ku wrap kwenye mstari mwingine.

Mfano

<!DOCTYPE html>

<html>

<head>

<title>word-wrapping</title>

<style>

p.test {

width: 11em;

border: 1px solid #000000;

word-wrap: break-word;

}

</style>

</head>

<body>


<p class="test"> Hii Aya ina maneno marefu: thisisaveryveryveryveryveryverylongword.maneno marefu yata vunjwa na kufunguliwa mstari mpya.</p>


</body>

</html>

http://learn4good.ml/tutorials/Examples/44/2.html <


CSS3 Word Breaking

Hii property inatoa kanuni za uvunjaji.

Mafno

<!DOCTYPE html>

<html>

<head>

<title>Word-breaking</title>

<style>

p.test1 {

width: 140px;

border: 1px solid #000000;

word-break: keep-all;

}


p.test2 {

width: 140px;

border: 1px solid #000000;

word-break: break-all;

}

</style>

</head>

<body>


<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>


<p class="test2">This paragraph contains some text. The lines will break at any character.</p>

</body>

</html>

Word-breaking <

CSS3 Web Fonts

Web fonts zina mruhusu web designers kutumia fonts ambazo hazija ingizwa kwenye kompyuta ya mtumiaji.

Wakati ukiipata/kuinunua font ambayo unayoitaji kuitumia, iambayanishe font yako kwenye server yako na moja kwamoja ita pakuliwa kwa mtumiaji kama ikiitajika.


Fonts zako zinawekwa ndani ya kanuni ya CSS3 @font-face.


Formats Mbalimbali za Fonts

TrueType Fonts(TTF)

Hii ni font ilikuwa standard ambayo iliyotengenezwa na Apple na Microsoft mwisho wa 1980s. TrueType ni format ya kawaida sana kwa operating system za mac na Microsoft.


openType Fonts(OTF)

hii ni format kaajiri ya scalable computers fonts. Imetengenezwa kwenye TrueType na registered trademark ya Microsoft.


The Web Open Font Format(WOFF)

Hii niformat ya font kwa matumizi ya kurasa za mtandao. Imetengenezwa 2009 , na asaivi ni pendekezo la W3C.WOFF ni essentially OpenType au TrueType ina compression na metadata za nyongeza. Lengo lake ni ku support ugawaji wa font kutoka kwenye server kwenda kwa mtumiaji kupitia network na bandwidth constrains.

The Web Open Font Format(WOFF 2.0)

Ni TrueType/OpenType ambayo inayo toa compression nzuri zidi ya WOFF 1.0.


SVG Fonts/Shapes

Hizi fonts zinaruhusu SVG itumike kama glyphs wakati wa kuonesha maandishi. SVG 1.1 specification inaeleza module ya font ambayo inayo ruhusu uundaji wa fonts ndani ya nyaraka ya SVG. Pia unaeweza kuweka CSS kwenye nyaraka za SVG. Na kanuni ya @font-face inaweza kuwekwa kwenye maandishi yaliyokuwemo kwenye nyaraka za SVG.


Embedded OpenType Fonts(EOT)

Hizi fonts zipo katika mfumo wa compact ya OpenType fonts zimetengenezwa na Microsoft kwa kutumika kama embedded fonts kwenye kurasa za mtandao.


Kutumia font unayo ipenda

Kwa kanuni za CSS3 lazima kwanza uweke jina kwaajiri ya font(mfn:frank),na kisha lielekezee kwenye faili lenye font.


Note: tumia herufi ndogo kwani katika Internet Explorer ukitumia herufi kubwa utawezakupata majibu usiyo ya tarajia.


Mfano

<!DOCTYPE html>

<html>

<head>

<title>Web fonts</title>

<style>

@font-face {

font-family: frank;

src: url(font.woff);

}


div {

font-family: frank;

}

</style>

</head>

<body>


<div>kwakutumia CSS3 tunaweza kutumia fonts zingine zidi ya zile ambazo zimekwisha chaguliwa "web-safe" fonts.

</div>

</body>

</html>


Web fonts <


<file>

http://learn4good.ml/tutorials/44.docx <



Itaendelea ………………..
 
You must log in or register to reply here.

Similar Discussions

Our Community

Coming Soon

Regional Communities

Coming Soon
Back
Top Bottom
Menu
Forums
New posts
Log in
Register