Web development for beginners in swahili

frankgalos · Apr 13, 2016

Habari marafiki,katika sehemu hii tutajifunza kuhusu 2D transformations na jinsi zinavyo fanyakazi.

CSS3 2D Transforms

Css3 transforms inakuruhusu ku kusogeza(translate),kufanya mzunguuko(rotate),scale, na ku skew kipengele.

Ugeuzaji(transformation) ni effect ambayo inaifanya kipengele ibadilike umbile,ukubwa na mahali.

CSS3 ina support ugeuzaji wa aina mbili 2D na 3D.

CSS3 2D Transformations

Katika sehemu hii utajifunza kuhusu njia zifuatazo za 2D transformation.

· Translate()

· Rotate()

· Scale()

· skewX()

· skewY()

· matrix()

Njia ya Translate()

Hii njia ina kisogeza kipengele kutoka mahali pake pa kawaida kutokana vigezo ilivyopewa kwaajiri ya X-axis na Y-axis.

Mfano

<!DOCTYPE html>

<html>

<head>

<title>translate()</title>

<title>translate</title>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

-ms-transform: translate(50px,100px); /* IE 9 */

-webkit-transform: translate(50px,100px); /* Safari */

transform: translate(50px,100px); /* Standard syntax */

}

</style>

</head>

<body>

<div>

Hiki kipengele cha div kimesogezwa 50 pixels kuria, na 100 pixels chini kutoka katika sehemu yake ya kawaida.

</div>

</body>

</html>

translate() <

Mfano hapo juu kipengele cha div kimesogezwa 50 pixels kuria, na 100 pixels chini kutoka katika sehemu yake ya kawaida.

Njia ya Rotate()

Hii njia ina ki rotate kipengele clockwise au counter-clockwise na shahada(degree) iliyo pewa.

Mfano

<!DOCTYPE html>

<html>

<head>

<title> clockwise</title>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

}

div#myDiv {

-ms-transform: rotate(20deg); /* IE 9 */

-webkit-transform: rotate(20deg); /* Safari */

transform: rotate(20deg); /* Standard syntax */

}

</style>

</head>

<body>

<div>

Hii ni ni div ya kawaida.

</div>

<div id="myDiv">

Hiki kipengele kime kuwa rotated clockwise 20 shahada.

</div>

</body>

</html>

clockwise <

Kwa kutumia thamani za hasi zitazizunguusha kipengele counter-clockwise.

Mfano

<!DOCTYPE html>

<html>

<head>

<title>counter-clockwise</title>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

}

div#myDiv {

-ms-transform: rotate(-20deg); /* IE 9 */

-webkit-transform: rotate(-20deg); /* Safari */

transform: rotate(-20deg); /* Standard syntax */

}

</style>

</head>

<body>

<div>

Hii ni div ya kawaida.

</div>

<div id="myDiv">

Hiki kipengele cha div kimezunguushwa counter-clockwise na shahada 20.

</div>

</body>

</html>

counter-clockwise <

Njia ya Scale()

Njia hii ina ongeza au inapunguza ukubwa wa kipengele kutokana na vigezo ilivyopewa kwaajiri ya (width na height).

Mfano

<!DOCTYPE html>

<html>

<head>

<title>scale method-increase</title>

<style>

div {

margin: 150px;

width: 200px;

height: 100px;

background-color: #f7624b;

color:#fff;

border: 1px solid black;

border: 1px solid black;

-ms-transform: scale(2,3); /* IE 9 */

-webkit-transform: scale(2,3); /* Safari */

transform: scale(2,3); /* Standard syntax */

}

</style>

</head>

<body>

<div>

Hiki kipengele cha div ni mala mbili ya upana wake wa kawaida, na ni malatatu ya urefu wake wa kawaida.

</div>

</body>

</html>

scale method-increase <

Mfano ufuatao una punguza kipengele cha div kuwa nusu ya upana na urefu wake harisi.

Mfano

<!DOCTYPE html>

<html>

<head>

<title>scale method-decrease</title>

<style>

div {

margin: 150px;

width: 200px;

height: 100px;

background-color: #f7624b;

color:#fff;

border: 1px solid black;

border: 1px solid black;

-ms-transform: scale(0.5,0.5); /* IE 9 */

-webkit-transform: scale(0.5,0.5); /* Safari */

transform: scale(0.5,0.5); /* Standard syntax */

}

</style>

</head>

<body>

<div>

Hiki kipengele cha div kimepunguzwa nusu ya upana na urefu wake wa kawaida.

</div>

</body>

</html>

scale method-decrease <

Njia ya SkewX()

Hii njia ina I skew kipengele ikiambatana na X-axis kwa pembe iliyo pewa.

Mfano

<!DOCTYPE html>

<html>

<head>

<title>skew()</title>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

}

div#myDiv {

-ms-transform: skew(20deg,10deg); /* IE 9 */

-webkit-transform: skew(20deg,10deg); /* Safari */

transform: skew(20deg,10deg); /* Standard syntax */

}

</style>

</head>

<body>

<div>

Hii ni div ya kawaida.

</div>

<div id="myDiv">

Hiki kipengele kimekuwa skewed 20 degrees ikiambatana na X-axis.

</div>

</body>

</html>

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

Njia ya Matrix()

Hii njia inajumuisha njia zote za 2D transform kwa moja.

Hii njia inachukua vigezo sita(6),vilikuwa na functions za hesabu ambazo zinakuruhusu ku rotate,scale,move(translate) na ku skew kipengele.

Hivyo vigezo vipo hivi: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()):

Mfano

<!DOCTYPE html>

<html>

<head>

<title>matrix()</title>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

}

div#myDiv1 {

-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */

-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */

transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */

}

div#myDiv2 {

-ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */

-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */

transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */

}

</style>

</head>

<body>

<div>

Hii ni div ya kawaida.

</div>

<div id="myDiv1">

Kutumia njia ya matrix().

</div>

<div id="myDiv2">

Kutumia njia ya matrix().

</div>

</body>

</html>

matrix() <

<file>

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

Itaendelea …………..

zech · Apr 13, 2016

mickey.T said:
With wordpress hauhitaji kujua coding, kama unaweza bonyeza mouce wewe unauwezo wa kuwa designer,

If this is what you do, then you're not a designer/developer, you are what we call a 'script kiddie' : - (a person who uses existing computer scripts or code to hack into computers, lacking the expertise to write their own), stop misleading people, i am willing to bet that you can't even create your own wptheme, you are one of those people who just downloads hacked templates and call themselves a designer, mpo wengi tu huko Dar.

frankgalos · Apr 13, 2016

zech said:
If this is what you do, then you're not a designer/developer, you are what we call a 'script kiddie' : - (a person who uses existing computer scripts or code to hack into computers, lacking the expertise to write their own), stop misleading people, i am willing to bet that you can't even create your own wptheme, you are one of those people who just downloads hacked templates and call themselves a designer, mpo wengi tu huko Dar.

Thanks kwa kuliona hilo Zech kwasababu kuwa designer na kuwa developer siokitu cha siku moja, tuseme umeamka umesoma na umekuwa developer it take time and true commitment. uwezi kuwa mshindi just by dreaming kuna safari ndefu ndo uje utambue kuwa na wewe upo katika hiyo safari, kama unavyo sema wengi wanatumia wp,joomla,drupal nk lakini niwachache walio jaribu kutengeneza temp zao zaidi wana nunua na wanajiita web designer na ma developer wakati template zinakuja na full functionality. Tujifunzeni kutotegemea pesa kwa shida ndogo ndogo za elimu, just soma kwanza then kwa kidogo ulicho pata utakitafutia kipato.

frankgalos · Apr 14, 2016

Habari marafiki, karibuni katika sehem nyingine ya CSS3, katika sehemu hii tutajifunza kuhusu 3D transforms na jinsi inavyofanya kazi.

CSS3 TRANSFORMS

Css3 inakuruhusu kuweza kuki format kipengele chako kwa kutumia mabadiliko ya 3D:

Katika sehemu hii tutajifunza njia zifuatazo za 3D transforms

· rotateX()

· rotateY()

· rotateZ()

Njia ya rotateX()

Hii njia inakizunguusha kipengele karibu na X-axis yake kutokana na digiri iliyopewa.

Mfano

<!DOCTYPE html>

<html>

<head>

<title>rotateX</title>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

}

div#myDiv {

-webkit-transform: rotateX(150deg); /* Safari */

transform: rotateX(150deg); /* Standard syntax */

}

</style>

</head>

<body>

<div>

Hiki nikipengele cha kawaida cha div.

</div>

<div id="myDiv">Hiki kipengele cha div kimezunguushwa 150 degrees.

</div>

<p><b>Note:</b> Internet Explorer 9 (na matoleo ya mwanzo) hazi support njia rotateX().</p>

</body>

</html>

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

Njia ya rotateY()

Hii njia ina kizunguusha kipengele karibu na Y-axis yake kuringana na digirii iliyopewa.

Mfano

<!DOCTYPE html>

<html>

<head>

<title>rotateY</title>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

}

div#myDiv {

-webkit-transform: rotateY(150deg); /* Safari */

transform: rotateY(150deg); /* Standard syntax */

}

</style>

</head>

<body>

<div>

Hiki nikipengele cha kawaida cha div.

</div>

<div id="myDiv">Hiki kipengele cha div kimezunguushwa 150 degrees.

</div>

<p><b>Note:</b> Internet Explorer 9 (na matoleo ya mwanzo) hazi support njia rotateY().</p>

</body>

</html>

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

Njia ya rotateZ()

Hii njia ina kizunguusha kipengele karibu na Z-axis yake kuringana na digirii iliyopewa.

Mfano

<!DOCTYPE html>

<html>

<head>

<title>rotateZ</title>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

}

div#myDiv {

-webkit-transform: rotateZ(90deg); /* Safari */

transform: rotateY(90deg); /* Standard syntax */

}

</style>

</head>

<body>

<div>

Hiki nikipengele cha kawaida cha div.

</div>

<div id="myDiv">Hiki kipengele cha div kimezunguushwa 90 degrees.

</div>

<p><b>Note:</b> Internet Explorer 9 (na matoleo ya mwanzo) hazi support njia rotateZ().</p>

</body>

</html>

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

CSS3 Transform Properties

Table ifuatayo inaorodhesha properties zote za 3D Transforms

properties

Maelezo

transform

Inafanya mabadiliko ya 2D au 3D kwenye kipengele

Transform-origin

Inkuruhusu kubadilisha nafasi(position) kwenye kipengele kilicho badilishwa

Transform-style

Inaeleza jinsi ya vipengele vilivyo kuwa ndani ya vipengele vioneshwe vipi kwenye nafasi(space) ya 3D

perspective

Inaeleza perspective kwa jinsi ya vipengele vya 3D vinavyo onekana

Perspective-origin

Inaeleza nafasi ya chini ya vipengele vya 3D

Backface-visibility

Inaeleza eidha kipengele kioneshwe au kisioneshwe wakati hakikabiliwa kwenye skrini(screen)

Njia za 3D Transforms

Table ifuatayo ina orodhesha njia zinazotumika kwenye 3D transforms

function

Maelezo

Matrix3d(n,n,n,n, n,n,n,n, n,n,n,n, n,n,n,n,)

Inaaeleza mabadiliko ya 3D, kwa kutumia matrix 4x4 ya thamani 16

Translate3D(x,y,z)

Inaeleza 3D translation(usogezaji)

translateX(x)

Inaeleza mabadiliko ya 3D kwakutumia thamani ya X-axis pekee

TranslateY(y)

Inaeleza mabadiliko ya 3D kwakutumia thamani ya Y-axis pekee

translate(z)

Inaeleza mabadiliko ya 3D kwakutumia thamani ya Z-axis pekee

Scale(x,y,z)

Inaeleza mabadiliko ya 3D scale

scaleX(x)

Inaeleza mabadiliko ya 3D scale,kwakuipa thamani kwaajiri ya X-axis

scaleY(y)

Inaeleza mabadiliko ya 3D scale,kwakuipa thamani kwaajiri ya Y-axis

scaleZ(z)

Inaeleza mabadiliko ya 3D scale,kwakuipa thamani kwaajiri ya Z-axis

Rotate3D(x,y,z,angle)

Inaeleza uzunguukaji wa 3D

rotateX(x)

Inaeleza uzunguukaji wa 3D,ikiambatana na X-axis

rotateY(y)

Inaeleza uzunguukaji wa 3D,ikiambatana na Y-axis

rotateZ(z)

Inaeleza uzunguukaji wa 3D,ikiambatana na Z-axis

Perspective(n)

Inaeleza muonekano wa perspective kwaajiri ya kipengele cha 3D kilichobadilishwa

<file>

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

Itaendelea …………………

Zifuatazo ni atua za kuwa designer mzuri

CSS3 Transition

CSS3 Animation

CSS3 Pagination

CSS3 Multiple columns

CSS3 User interface(ui)

CSS3 Flexbox

CSS3 Media queries

------- End CSS/CSS3---------

Final project design

Javascript

Advance HTML5

Final project completion

---------------- End HTML/HTML5 + CSS/CSS3 + javascript --------------

frankgalos · Apr 15, 2016

Karibuni marafiki, katika sehemu nyingine ya CSS3 katika sehemu hii tutajifunza kiundani zaidi CSS3 Transition.

CSS3 Transition

CSS3 transition inakuruhusu kubadilisha thamani za mali kiuraisi kutoka thamani moja hadi nyingine) kwa muda uliyo pewa.

Jinsi ya kutumia CSS3 Transitions

· Mali unayotaka kuongeza effect

· Muda wa effect(duration)

Note: kama sehemu ya muda(duration) haija wekwa,transition hato fanya kazi kwasababu thamani yake ya default iyopewa ni 0;

Mfano

<!DOCTYPE html>

<html>

<head>

Transition-upana

<style>

div {

width: 100px;

height: 100px;

background: #f7624b;

-webkit-transition: width 2s; /* Safari 3.1 to 6.0 */

transition: width 2s;

}

div:hover {

width: 300px;

}

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9 na matoleo ya mwanzoni Transitions hazi fanyi kazi .</p>

<div></div>

<p>gusa kipengele cha div hapo juu utaona effect.</p>

</body>

</html>

Transition-upana <

Mfano hapo juu transition imefanyika kwenye upana wa kipengele endapo mouse itagusa kipengele na upana utaongezeka, kwa muda wa sekunde mbili(2)

Kubadilisha Thamani za mali nyingi

Mfano unaofata unaweka effect ya transition kote upana na urefu, kwa muda wa sekunde mbili(2) kwa upana na sekunde nne(4) kwa urefu.

Mfano

<!DOCTYPE html>

<html>

<head>

Transition-upana na urefu

<style>

div {

width: 100px;

height: 100px;

background: #f7624b;

-webkit-transition: width 2s; /* Safari 3.1 to 6.0 */

transition: width 2s;

}

div:hover {

width: 300px;

height:300px;

}

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9 na matoleo ya mwanzoni Transitions hazi fanyi kazi .</p>

<div></div>

<p>gusa kipengele cha div hapo juu utaona effect.</p>

</body>

</html>

Transition-upana na urefu <

Kuweka Speed Curve ya Transition

Transition-timing-function: inaweka speed curve ya effct ya transition.

Transition-time-function property inawezakuwa na thamani zifuatazo.

· Ease

· Linear

· Ease-in

· Ease-out

· Ease-in-out

· Cubic-bezier(n,n,n,n)

Mfano

<!DOCTYPE html>

<html>

<head>

<title>timing-function</title>

<style>

div {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 2s; /* Safari */

transition: width 2s;

}

/* For Safari 3.1 to 6.0 */

#div1 {-webkit-transition-timing-function: linear;}

#div2 {-webkit-transition-timing-function: ease;}

#div3 {-webkit-transition-timing-function: ease-in;}

#div4 {-webkit-transition-timing-function: ease-out;}

#div5 {-webkit-transition-timing-function: ease-in-out;}

/* Standard syntax */

#div1 {transition-timing-function: linear;}

#div2 {transition-timing-function: ease;}

#div3 {transition-timing-function: ease-in;}

#div4 {transition-timing-function: ease-out;}

#div5 {transition-timing-function: ease-in-out;}

div:hover {

width: 300px;

}

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9 na matoleo ya mwanzoni Transitions hazi fanyi kazi .</p>

<div id="div1">linear</div><br>

<div id="div2">ease</div><br>

<div id="div3">ease-in</div><br>

<div id="div4">ease-out</div><br>

<div id="div5">ease-in-out</div><br>

<p>gusa kipengele cha div hapo juu utaona effect.</p>

</body>

</html>

timing-function <

Kuchelewesha(delay) Transition Effect

Property ya transition-delay inafanya transition effect ichelewa kwa sekunde iliyopewa.

Mfano

<!DOCTYPE html>

<html>

<head>

<title>transition-delay</title>

<style>

div {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 3s; /* Safari */

-webkit-transition-delay: 1s; /* Safari */

transition: width 3s;

transition-delay: 1s;

}

div:hover {

width: 300px;

}

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9 na matoleo ya mwanzoni Transitions hazi fanyi kazi .</p>

<div></div>

<p>gusa kipengele cha div hapo juu utaona effect.</p>

<p><b>Note:</b> umeona transition effect imechelewa kwa sekunde moja kabla haija anza.</p>

</body>

</html>

transition-delay <

Transition + Transformation

Mfano unafata unaweka mabadiliko katika effect ya transition

Mfano

<!DOCTYPE html>

<html>

<head>

<title>Transition+Transformation</title>

<style>

div {

width: 100px;

height: 100px;

background: #f7624b;

-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */

transition: width 2s, height 2s, transform 2s;

}

div:hover {

width: 300px;

height: 300px;

-webkit-transform: rotate(180deg); /* Safari */

transform: rotate(180deg);

}

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9 na matoleo ya mwanzoni Transitions hazi fanyi kazi .</p>

<div></div>

<p>gusa kipengele cha div hapo juu utaona effect.</p>

</body>

</html>

Transition+Transformation <

Properties za transitions zinaweza kuwekwa moja kwa moja

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: #f7624b;

/* For Safari 3.1 to 6.0 */

-webkit-transition-property: width;

-webkit-transition-duration: 2s;

-webkit-transition-timing-function: linear;

-webkit-transition-delay: 1s;

/* Standard syntax */

transition-property: width;

transition-duration: 2s;

transition-timing-function: linear;

transition-delay: 1s;

}

div:hover {

width: 300px;

}

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9 na matoleo ya mwanzoni Transitions hazi fanyi kazi .</p>

<div></div>

<p>gusa kipengele cha div hapo juu utaona effect.</p>

<p><b>Note:</b> umeona transition effect imechelewa kwa sekunde moja kabla haija anza.</p>

</body>

</html>

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

Kuweka kwa kifupi property ya Transition

Mafno

<!DOCTYPE html>

<html>

<head>

<title>kifupi</title>

<style>

div {

width: 100px;

height: 100px;

background: #099999;

-webkit-transition: width 2s linear 1s; /* For Safari 3.1 to 6.0 */

transition: width 2s linear 1s;

}

div:hover {

width: 300px;

}

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9 na matoleo ya mwanzoni Transitions hazi fanyi kazi .</p>

<div></div>

<p>gusa kipengele cha div hapo juu utaona effect.</p>

<p><b>Note:</b> umeona transition effect imechelewa kwa sekunde moja kabla haija anza.</p>

</body>

</html>

kifupi <

<file>

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

frankgalos · Apr 16, 2016

Habari marafiki ? karibuni katika sehemu nyingine ya CSS3 na katika sehemu hii tutajifunza kuhusu animations.

CSS3 Animations

Animations zinaruhusu vipengele vya HTML kuwa animated bila kutumia javascript au flash.

CSS3 Animations ni nini ?

Animation inakifanya kipengele kibadilike hatua kwa hatua kutoka mtindo moja hadi mwingine.

Unaweza kubadilisha CSS properties nyingi utakavyo, kwa muda unaotaka.

Ilikuweza kutumia CSS3 animation, unatakiwa kwanza uweke baadhi ya keyframes kwaajiri ya animation.

Keyframes zinashikiria mitindo ya ambayo kipengele kitakuwa nayo kwa muda husika.

Kanuni za @keyframes

Mitindo yote ya CSS inawekwa ndani ya @keyframes.

Wakati ukiweka mitindo ndani ya kanuni za @keyframes , animation itabadilika hatua kwa hatua kutoka katika mtindo uliokuwa nao na kwenda kwenye mtindo mpya kwa muda flani.

Ili animation iweze kufanya kazi lazima uweke neno animation kwenye kipengele.

Mfano unaofata unaweka “frank” animation kwenye kipengele cha div na animation itaanza sekunde 4,na hatua kwa hatua itabadilisha rangi ya nyuma ya kipengele cha div kutoka “red” kwenda “yellow”.

Mfano

Note:kama animation-duration property haijawekwa animation aitofanya kazi,kwasababu thamani yake ya kawaida ni ‘0’.

Mfano hapo juu tume weka wakati wa animation itakayo badilika kwa kutumia maneno “from” na “to” ( ambazo zina wakilisha 0% (kuanza) na 100% (kumaliza)).

Pia inawezekana kutumia asilimia. Kwani kwa kutumia asilimia unaweza kuweka mitindo mingi unayo penda.

Mfano unaofata utabadilisha rangi ya nyuma ya kipengele cha div pindi animation itakapo maliza 25% na itakapo maliza 50% na tena itakapo maliza 100%

Mfano

<!DOCTYPE html>

<html>

<head>

<title>Animation</title>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

-webkit-animation-name: frank; /* Chrome, Safari, Opera */

-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */

animation-name: frank;

animation-duration: 4s;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes frank {

from {background-color: red;}

to {background-color: yellow;}

}

/* Standard syntax */

@keyframes frank {

from {background-color: red;}

to {background-color: yellow;}

}

</style>

</head>

<body>

<p><b>Note:</b> Internet Explorer 9 na matoleo ya mwanzo animation azifanyi kazi.</p>

<div></div>

<p><b>Note:</b> pindi animation iki maliza inarejea mtindo wakw hlisi.</p>

</body>

</html>

Animation <

Mfano unaofata utabadilisha vyote rangi ya nyuma na mahali pa kipengele cha div wakati animation itakapokuwa 25%,na 50% natena 100%.

Mfano

<!DOCTYPE html>

<html>

<head>

<title>Animation</title>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

-webkit-animation-name: frank; /* Chrome, Safari, Opera */

-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */

animation-name: frank;

animation-duration: 4s;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes frank {

0% {background-color: red;}

25% {background-color: yellow;}

50% {background-color: blue;}

100% {background-color: green;}

}

/* Standard syntax */

@keyframes frank {

0% {background-color: red;}

25% {background-color: yellow;}

50% {background-color: blue;}

100% {background-color: green;}

}

</style>

</head>

<body>

<div></div>

</body>

</html>

Animation <

Uchelewehaji wa animation

Property ya animation inachelewesha animation inapo anza.

Mfano ufuatao animation itachelewa kwa sekunde 2 kabla aijaanza.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

-webkit-animation-name: example; /* Chrome, Safari, Opera */

-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */

-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */

animation-name: example;

animation-duration: 4s;

animation-delay: 2s;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}

/* Standard syntax */

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}

</style>

</head>

<body>

<div></div>

</body>

</html>

Animation <

Kuweka muda gani animation ifanye kazi

Property ya animation-iteration-count inaweka muda wa animation wa kufanya kazi.

Mfano ufuatao aniamation itafanyakazi mala 3 kabla haija simama.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

-webkit-animation-name: example; /* Chrome, Safari, Opera */

-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */

-webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */

animation-name: example;

animation-duration: 4s;

animation-iteration-count: 3;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}

/* Standard syntax */

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}

</style>

</head>

<body>

<div></div>

</body>

</html>

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

Mfano ufuatao umetumia thamani ya “infinite” kuifanya animation iendelee daima.

mfano

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

-webkit-animation-name: example; /* Chrome, Safari, Opera */

-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */

-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */

animation-name: example;

animation-duration: 4s;

animation-iteration-count: infinite;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}

/* Standard syntax */

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}

</style>

</head>

<body>

<div></div>

</body>

</html>

Animation <

kuifanya aniamation I run Reverse Direction au Alternate Cycles

property ya animation-direction inaifanya animation iwe reverse direction au alternate cycles .

mfano ufuatao animation it run reverse direction.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

-webkit-animation-name: example; /* Chrome, Safari, Opera */

-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */

-webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */

-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */

animation-name: example;

animation-duration: 4s;

animation-iteration-count: 3;

animation-direction: reverse;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}

/* Standard syntax */

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}

</style>

</head>

<body>

<div></div>

</body>

</html>

Animation <

Mfano ufuatao thamani ya “alternate” imetumika kuifanya animation kwanza iende mbele, kisha nyuma ,na mbele tena.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

-webkit-animation-name: example; /* Chrome, Safari, Opera */

-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */

-webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */

-webkit-animation-direction: alternate; /* Chrome, Safari, Opera */

animation-name: example;

animation-duration: 4s;

animation-iteration-count: 3;

animation-direction: alternate;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}

/* Standard syntax */

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}

</style>

</head>

<body>

<div></div>

</body>

</html>

Animation <

Kuweka speed curve ya Animation

Property ya animation-timing-function inaweka speed curve ya animation.

Property ya animation-timing-function inaweza ikawa na thamani zifuatazo.

· Ease

· Linear

· Ease-in

· Ease-out

· Ease-in-out

· Cubic-bezier(n,n,n,n)

Thamani zilizokuwepo hapo Nisha zielezea jinsi zinavyo fanya kazi.

Mfano ufuatao unaonesha baadhi ya speed curves ambazo zinaweza kutumika.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 50px;

background-color: red;

font-weight: bold;

color:#fff;

position: relative;

-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */

animation: mymove 5s infinite;

}

/* Chrome, Safari, Opera */

#div1 {-webkit-animation-timing-function: linear;}

#div2 {-webkit-animation-timing-function: ease;}

#div3 {-webkit-animation-timing-function: ease-in;}

#div4 {-webkit-animation-timing-function: ease-out;}

#div5 {-webkit-animation-timing-function: ease-in-out;}

/* Standard syntax */

#div1 {animation-timing-function: linear;}

#div2 {animation-timing-function: ease;}

#div3 {animation-timing-function: ease-in;}

#div4 {animation-timing-function: ease-out;}

#div5 {animation-timing-function: ease-in-out;}

/* Chrome, Safari, Opera */

@-webkit-keyframes mymove {

from {left: 0px;}

to {left: 300px;}

}

/* Standard syntax */

@keyframes mymove {

from {left: 0px;}

to {left: 300px;}

}

</style>

</head>

<body>

<div id="div1">linear</div>

<div id="div2">ease</div>

<div id="div3">ease-in</div>

<div id="div4">ease-out</div>

<div id="div5">ease-in-out</div>

</body>

</html>

Animation <

Animation Shorthand Property(ufupishaji)

Mfano ufuatao umetumia properties 6 za animation.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

/* Chrome, Safari, Opera */

-webkit-animation-name: example;

-webkit-animation-duration: 5s;

-webkit-animation-timing-function: linear;

-webkit-animation-delay: 2s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

/* Standard syntax */

animation-name: example;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}

/* Standard syntax */

@keyframes example {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}

</style>

</head>

<body>

<div></div>

</body>

</html>

Animation <

Mfano hapo juu unaweza kufanywa kiulaisi kwakifupi tu.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

position: relative;

-webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */

animation: myfirst 5s linear 2s infinite alternate;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes myfirst {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}

/* Standard syntax */

@keyframes myfirst {

0% {background-color:red; left:0px; top:0px;}

25% {background-color:yellow; left:200px; top:0px;}

50% {background-color:blue; left:200px; top:200px;}

75% {background-color:green; left:0px; top:200px;}

100% {background-color:red; left:0px; top:0px;}

}

</style>

</head>

<body>

<div></div>

</body>

</html>

Animation <

<file>

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

Itaendelea …………….

frankgalos · Apr 18, 2016

Habari marafiki. Karibunia katika sehemu nyingine ya CSS3 na HTML katika sehemu hii tutajifunza kuhusu pagination /kuweka viunganishi vya ziada kwenye website.

CSS3 pagination

Pagination ni hali ya website kuwa na kurasa nyingi ambazo zote ni za muhimu na hazi wezi kukaa kwenye header ila sehemu ya juu ya content area au chini kabla ya footer ili kumuonesha mtumiajia au mtu anaetembelea website yako kujua kama kuna vitu vinaendelea au kurasa zina endelea.

Kwanjia rahisi ya kufanya pagination kwenye site yako ni kutumia server side languages kama PHP au ASP na database management systems(DBMS) kama mysql, SQL, oracle, PostgreSql nk.

Kwasababu kurasa zako zinakuwa kwenye server na unatumia moja ya lugha ya server side kuzichukua hizo kurasa zako katika server na HTML na CSS inachukua sehem ndogo tu, kwa maana kwa kira kurasa hutokuwa una rudia rudia kuzi wekea mitindo na kuweka <div > zinazo fanana.

Kwa HTML unachofanya ni kuziwekea viunganishi(links ya kurasa husika) kurasa zako na kuziwekea mitindo unayo itaka kazi imeisha.

Mfano HTML na CSS

<!DOCTYPE html>

<html>

<head>

<title> pagination</title>

<style>

ul.pagination {

display: inline-block;

padding: 0;

margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

}

</style>

</head>

<body>

<h2>Pagination</h2>

<ul class="pagination">

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

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

<li><a class="active" href="#">2</a></li>

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

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

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

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

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

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

</ul>

</body>

</html>

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

Kuweka hover effect na active pseudo

Mfano

<!DOCTYPE html>

<html>

<head>

<title> pagination</title>

<style>

ul.pagination {

display: inline-block;

padding: 0;

margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

}

ul.pagination li a.active {

background-color: #4CAF50;

color: white;

}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<h1>Pagination</h1>

<ul class="pagination">

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

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

<li><a class="active" href="#">2</a></li>

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

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

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

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

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

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

</ul>

</body>

</html>

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

Kuweka vitufe

Mfano

<!DOCTYPE html>

<html>

<head>

<title> pagination</title>

<style>

ul.pagination {

display: inline-block;

padding: 0;

margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

border-radius: 5px;

}

ul.pagination li a.active {

background-color: #f7624b;

color: white;

border-radius: 5px;

}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<h2>Rounded Active and Hover Buttons</h2>

<ul class="pagination">

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

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

<li><a class="active" href="#">2</a></li>

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

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

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

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

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

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

</ul>

</body>

</html>

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

Kuweka Transition kwenye vitufe wakati wa ku hover

Mfano

<!DOCTYPE html>

<html>

<head>

<title> pagination</title>

<style>

ul.pagination {

display: inline-block;

padding: 0;

margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

transition: background-color .3s,color .3s;

}

ul.pagination li a.active {

background-color: #f7624b;

color: white;

}

ul.pagination li a:hover:not(.active) {background-color: #4CAF50;color:#fff;}

</style>

</head>

<body>

<h2>Transition</h2>

<ul class="pagination">

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

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

<li><a class="active" href="#">2</a></li>

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

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

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

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

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

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

</ul>

</body>

</html>

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

Kuweka border pagination

Tumia property ya border kuweka border kwenye pagination

Mfano

<!DOCTYPE html>

<html>

<head>

<title> pagination</title>

<style>

ul.pagination {

display: inline-block;

padding: 0;

margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

transition: background-color .3s;

border: 1px solid #ddd;

}

ul.pagination li a.active {

background-color: #4CAF50;

color: white;

border: 1px solid #4CAF50;

}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<h2>Bordered Pagination</h2>

<ul class="pagination">

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

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

<li><a class="active" href="#">2</a></li>

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

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

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

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

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

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

</ul>

</body>

</html>

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

Kuweka round border kwenye pagination

Tumia property ya border-radius kuweka round border kweye pagination.

Mfano tunaweka round border kwenye link ya kwenza nay a mwisho kwenye pagination

Mfano

<!DOCTYPE html>

<html>

<head>

<title> pagination</title>

<style>

ul.pagination {

display: inline-block;

padding: 0;

margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

transition: background-color .3s;

border: 1px solid #ddd;

}

.pagination li:first-child a {

border-top-left-radius: 5px;

border-bottom-left-radius: 5px;

}

.pagination li:last-child a {

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

}

ul.pagination li a.active {

background-color: #4CAF50;

color: white;

border: 1px solid #4CAF50;

}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

</style>

</head>

<body>

<h2>Pagination na Rounded Borders</h2>

<ul class="pagination">

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

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

<li><a class="active" href="#">2</a></li>

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

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

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

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

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

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

</ul>

</body>

</html>

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

Kuweka nafasi kati ya viunganishi(links)

Tumia property ya margin kuweka nafasi kati ya viunganishi.

Mfano

<!DOCTYPE html>

<html>

<head>

<title> pagination</title>

<style>

ul.pagination {

display: inline-block;

padding: 0;

margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

transition: background-color .3s,color 0.4s,border-color 0.3s linear 0s;

border: 1px solid #ddd;

margin: 0 4px;

}

ul.pagination li a.active {

background-color: #f7624b;

color: white;

border: 1px solid #f7624b;

}

ul.pagination li a:hover:not(.active) {background-color: #4CAF50;color:#fff;border: 1px solid #4CAF50;}

</style>

</head>

<body>

<h2>Pagination na Margins</h2>

<ul class="pagination">

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

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

<li><a class="active" href="#">2</a></li>

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

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

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

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

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

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

</ul>

</body>

</html>

http://learn4good.ml/tutorials/Examples/49/7.html <

Kuongeza ukubwa wa pagination

Tumia property ya font-size kubadilisha ukubwa wa pagination.

Mfano

<!DOCTYPE html>

<html>

<head>

<title> pagination</title>

<style>

ul.pagination {

display: inline-block;

padding: 0;

margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

transition: background-color .3s,color 0.4s,border-color 0.3s linear 0s;

border: 1px solid #ddd;

margin: 0 4px;

}

ul.pagination li a.active {

background-color: #f7624b;

color: white;

border: 1px solid #f7624b;

}

ul.pagination li a:hover:not(.active) {background-color: #4CAF50;color:#fff;border: 1px solid #4CAF50;}

</style>

</head>

<body>

<h2>Pagination na Margins</h2>

<ul class="pagination">

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

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

<li><a class="active" href="#">2</a></li>

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

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

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

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

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

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

</ul>

</body>

</html>

http://learn4good.ml/tutorials/Examples/49/8.html <

Kuiweka kati pagination

Tumia property ya text-align:center kuweza kuweka pagination kati.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

ul.pagination {

display: inline-block;

padding: 0;

margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

color: black;

float: left;

padding: 8px 16px;

text-decoration: none;

transition: background-color .3s;

border: 1px solid #ddd;

}

ul.pagination li a.active {

background-color: #4CAF50;

color: white;

border: 1px solid #4CAF50;

}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

div.center {text-align: center;}

</style>

</head>

<body>

<h2>Centered Pagination</h2>

<div class="center">

<ul class="pagination">

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

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

<li><a class="active" href="#">2</a></li>

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

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

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

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

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

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

</ul>

</div>

</body>

</html>

http://learn4good.ml/tutorials/Examples/49/9.html <

<file>

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

Itaendelea ……………

frankgalos · Apr 19, 2016

Karibuni marafiki katika sehemu hii tutajiunza kitu kipya kabisa ch columns nahasa uwekaji wa columns nyingi kwa kutumia CSS3.

Css3 Multiple Columns

Multiple column layout

Css3 multiple column layout inaruhusu uwekaji wa column nyingi za maandishi kwa urahisi – kama kwenye magazeti.

Css3 multiple columns ina properties zifuatazo:

· Column-count

· Column-gap

· Column-rule-style

· Column-rule-width

· Column-rule-color

· Column-rule

· Column-span

· Column-width

Jinsi ya kutengeneza multiple columns

Property ya column-count inatoa namba za columns za kipengele ambazo zitakazo gawanywa nazo.

Mfano ufuatao utagawanya maandishi yaliyokuwemo kwenye kipengele cha <div> katika columns 3.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

}

</style>

</head>

<body>

<div class="newspaper">

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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</div>

</body>

</html>

column-count <

Kuweka gepu kati ya columns

Property ya column-gap inaweka gepu kati ya columns.

Mfano ufuatao tumeweka gepu la 40px kati ya columns.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */

column-gap: 40px;

}

</style>

</head>

<body>

<div class="newspaper">

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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</div>

</body>

</html>

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

Kuweka upana kati ya columns

Property ya column-rule-width: inaweka kanuni ya upana kati ya columns.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */

column-gap: 40px;

-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */

-moz-column-rule-style: solid; /* Firefox */

column-rule-style: solid;

-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */

-moz-column-rule-width: 1px; /* Firefox */

column-rule-width: 1px;

}

</style>

</head>

<body>

<div class="newspaper">

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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</div>

</body>

</html>

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

Property ya column-rule-color: inaweka kanuni ya rangi kati ya columns.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */

column-gap: 40px;

-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */

-moz-column-rule-style: solid; /* Firefox */

column-rule-style: solid;

-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */

-moz-column-rule-width: 1px; /* Firefox */

column-rule-width: 1px;

-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */

-moz-column-rule-color: lightblue; /* Firefox */

column-rule-color: lightblue;

}

</style>

</head>

<body>

<div class="newspaper">

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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</div>

</body>

</html>

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

Property ya column-rule: ni poperty fupi kwaajiri ya kuweka kanuni zote za column.

Mfano ufuatao unaweka width,style na color ya kanuni kati ya columns:

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */

column-gap: 40px;

-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */

-moz-column-rule: 1px solid lightblue; /* Firefox */

column-rule: 1px solid lightblue;

}

</style>

</head>

<body>

<div class="newspaper">

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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</div>

</body>

</html>

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

Kuweka columns ngapi ambazo kipengele kinatakiwa ku span.

Property ya column-span: inaeleza column ngapi kipengele tabidi ki span

Mfano ufuatao unaeleza kipengele cha <h2> ki span columns zote.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

-moz-column-gap: 40px; /* Firefox */

column-gap: 40px;

-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */

-moz-column-rule: 1px solid lightblue; /* Firefox */

column-rule: 1px solid lightblue;

}

h2 {

-webkit-column-span: all; /* Chrome, Safari, Opera */

column-span: all;

}

</style>

</head>

<body>

<div class="newspaper">

<h2>Lorem Ipsum Dolor Sit Amet</h2>

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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</div>

</body>

</html>

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

Kuweka upana wa column

Property ya column-width: inatoa pendekezo la upana mojawapo kwaajiri ya columns.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

-webkit-column-width: 100px; /* Chrome, Safari, Opera */

-moz-column-width: 100px; /* Firefox */

column-width: 100px;

}

</style>

</head>

<body>

<div class="newspaper">

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. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</div>

</body>

</html>

Mfano hapojuu upana moja wapo ni 100px;

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

<file>

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

Itaendelea ………..

frankgalos · Apr 20, 2016

Karibuni marafiki katika sehemu nyingine ya CSS3 na katika sehemu hii tutajifunza kuhusu user interface(UI).

CSS3 User Interface(UI)

Kwa wale wasiojua nini maana ya user interface.

User interface ni sehemu inayoonekana ya program ya kompyuta au operating system ambayo mtumiaji ana interact na kompyuta au programu.

Kwa website nisehemu ya mbele ya website ambayo mtumiaji anayoiyona na kufanya chochote anacho kitaka kwenye website.mfano tuseme wensite inatoa huduma yak u login ilesehemu anayo iyona na kuingiza taarifa zake muhimu ndo inaitwa user interface kwana mtumiaji anaiyona na ku interact na website.

Katika CSS3 kuna vitu vipya vya user interface kama ku resize kipengele,outlines na box sizing.

Katika sehemu hii tutajifunza properties zifuatazo za user interface

· Resize

· Outline-offset

CSS Resizing

Property hii inaeleza kama kipengele kiwe resizable na mtumiaji au la.

Mfano ufuatao una mruhusu mtumiaji aongeze au apunguze upana wakipengele tu.

Mfano

<!DOCTYPE html>

<html>

<head>

<title>resize- horizontal </title>

<style>

div {

border: 2px solid;

padding: 20px;

width: 300px;

resize: horizontal;

overflow: auto;

}

</style>

</head>

<body>

<div>MUACHACHE MTUMIAJI A RESIZE UREFU WA HIKI KIPENGELE CHA DIV.</div>

</body>

</html>

resize-horizontal <

Mfano ufuatao una mruhusu mtumiaji aongeze au apunguze urefu tu wa kipengele.

Mfano

<!DOCTYPE html>

<html>

<head>

<title>resize-vertical</title>

<style>

div {

border: 2px solid;

padding: 20px;

width: 300px;

resize: vertical;

overflow: auto;

}

</style>

</head>

<body>

<div>MUACHACHE MTUMIAJI A RESIZE UREFU WA HIKI KIPENGELE CHA DIV.</div>

</body>

</html>

resize-vertical <

Mfano unaofata unamruhusu mtumiaji aongeze au apunguze vyote upana na urefu.

Mfano

<!DOCTYPE html>

<html>

<head>

<title>resize-both</title>

<style>

div {

border: 2px solid;

padding: 20px;

width: 300px;

resize: both;

overflow: auto;

}

</style>

</head>

<body>

<div>MUACHACHE MTUMIAJI A RESIZE UREFU NA UPANA WA HIKI KIPENGELE CHA DIV.</div>

</body>

</html>

resize-both <

Outline Offset

Property hii inaongeza nafasi kati ya outline na border ya kipengele.

Outline inatofautiana na border kwanjia tatu:

· Outline nimstari unaochorwa kuzunguuka kipengele,nje ya border edge.

· Outline haichukui nafasi

· Outline inaweza isiwe rectangular

Mfano unaofata unatumia outline-offset property kuongeza nafasi ya 15px kati ya border na outline.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

div {

margin: 20px;

padding: 10px;

width: 300px;

height: 100px;

border: 1px solid black;

outline: 1px solid red;

outline-offset: 15px;

}

</style>

</head>

<body>

<div>Hiki kipengele cha div kina outline wa 15px nje ya border edge.</div>

</body>

</html>

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

<file>

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

itaendelea ………….

Babu Kijiwe · Apr 20, 2016

Basi sawa

frankgalos · Apr 21, 2016

karibuni marafiki katika sehem ya mwisho ya somoletu la CSS3, katika sehemu hii tutajifunza kuhusu media queries ambazo ndio zinahusika kwa kutengeneza website ambazo zina kabiliana na aina zote za screen.

CSS3 Media queries

Css3 media queries ni module ambayo inaruhusu yaliyomo kuonekana kukabiliana na hali ya screen resolution mfano, smartphone na kompyuta screen. Css3 media queries imekuja kuwa pendekezo la W3C mwaka 2012. Na imekua teknolojia ya msingi kwa kutengeneza website ambazo zina kabiliana na screen yoyote .

CSS2 Ilitambulisha aina za Media

@media rule imetambulishwa kwenye CSS2, ambayo imefanya uwezekano wa kuweka kanuni za mitindo mingi kwenye aina za media tofauti tofauti.

Mfano: unaweza ukawa na kanuni za mtindo mmoja kwaajiri ya screen za kompyuta, zingine kwaajiri ya printers na zingine kwaajiri ya vifaa vya mkononi.

Kwa bahati mbaya hizi aina za media hazikuwa zina fanya kazi hipasavyo kwenye vifaa, Zaidi ya aina ya media ya print.

CSS3 Imeitambulisha Media Queries

Media queries kwenye CSS3 ni wazo lilo panuka kutoka kwa aina ya media ya CSS2: zidi ya kuangalia aina ya kifaa,media queries zinaangalia uwezo wa kifaa.

Media queries inaweza kutumika kuangalia vitu vingi kama:

· Upana na urefu wa viewport

· Upana na urefu wa kifaa

· Muelekeo(iwapo simu/kibao(tablet) ipo urazo au wima)

· Resolution

Jinsi ya kuweka media queries

Media queries ina aina za media na ina elezo moja au Zaidi,ambazo zina tatua kweri ama sikweri(either true or false).

@media not|only mediatype and (expressions){

Css-code ……………………………

}

Matokeo ya swala(query) yana kuwa kweri(true) kama aina ya media iliyo wekwa ime fanana na aina ya kifaa kilicho oneshwa nyaraka na maelezo yote yaliyo kuwemo kwenye media query ni yaukweri.

Style sheet husika au kanuni ya mtindo iliyo iliyotumiwa inafata kanuni za kawaida ya cascanding.

Isipokuwa utumie not au only, aina za media ni zaihari na aina ya all itatumika. Kama ujatumia not au only.

Pia unaweza ukawa na aina tofauti za mtindo kwa media tofauti.

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 Media Types

Table [][][][][]

Thamani

Maelezo

all

Inatumika kwa media types devices zote

print

Inatumika kwaajiri ya printers

screen

Inatumika kwaajiri ya skirini za kompyuta,vibao(tablets), smart-phones

speech

Inatumika kwaajiri ya screenreaders imbazo zina soma kurasa kwa sauti

Mifano rahisi ya Media Queries

Njia moja ya kutumia media queries ni kuwa na sehemu mbadala ndani ya style sheet yako.

Mfano ufuatao unabadilisha rangi ya nyuma na kuwa orange kama viewport ipo 480px upana kama viewport ni ndogo Zaidi ya 480px rangi ya nyuma itakuwa pink.

Mfano

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: #ffa500;

}

@media screen and (min-width: 480px) {

body {

background-color: pink;

}

}

</style>

</head>

<body>

<h1>punguza browser yako kuona effect!</h1>

<p>media query itatumika kama aina ya media ni screen na viewport ipo 480px kwa upana.</p>

</body>

</html>

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

Mfano ufuatao unaonesha orodha ambazo zitakaa kushoto mwa kurasa kama viewport ni 480px upana na kama viewport ni ndogo Zaidi ya 480px orodha zitakaa juu mwa yaliyomo.

Mfano

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

.wrapper {overflow:auto;}

#main {margin-left: 4px;}

#leftsidebar {float: none;width: auto;}

#menulist {margin:0;padding:0;}

.menuitem {

background:#CDF0F6;

border:1px solid #d4d4d4;

border-radius:4px;

list-style-type:none;

margin:4px;

padding:2px;

}

@media screen and (min-width: 480px) {

#leftsidebar {width:200px;float:left;}

#main {margin-left:216px;}

}

</style>

</head>

<body>

<div class="wrapper">

<div id="leftsidebar">

<ul id="menulist">

<li class="menuitem">Menu-item 1</li>

<li class="menuitem">Menu-item 2</li>

<li class="menuitem">Menu-item 3</li>

<li class="menuitem">Menu-item 4</li>

<li class="menuitem">Menu-item 5</li>

</ul>

</div>

<div id="main">

<h1>punguza browser yako kuona effect!</h1>

<p> orodha ambazo zitakaa kushoto mwa kurasa kama viewport ni 480px upana na kama viewport ni ndogo Zaidi ya 480px orodha zitakaa juu mwa yaliyomo..</p>

</div>

</div>

</body>

</html>

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

Mfano Zaidi

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<style>

body {

font-family: "Lucida Sans", Verdana, sans-serif;

}

.main img {

width: 100%;

}

h1{

font-size: 1.625em;

}

h2{

font-size: 1.375em;

}

.header {

padding: 1.0121457489878542510121457489879%;

background-color: #f1f1f1;

border: 1px solid #e9e9e9;

}

.menuitem {

margin: 4.310344827586206896551724137931%;

margin-left: 0;

margin-top: 0;

padding: 4.310344827586206896551724137931%;

border-bottom: 1px solid #e9e9e9;

cursor: pointer;

}

.main {

padding: 2.0661157024793388429752066115702%;

}

.right {

padding: 4.310344827586206896551724137931%;

background-color: #f7624b;

color:#fff;

}

.footer {

padding: 1.0121457489878542510121457489879%;

text-align: center;

background-color: #f1f1f1;

border: 1px solid #e9e9e9;

font-size: 0.625em;

}

.gridcontainer {

width: 100%;

}

.gridwrapper {

overflow: hidden;

}

.gridbox {

margin-bottom: 2.0242914979757085020242914979757%;

margin-right: 2.0242914979757085020242914979757%;

float: left;

}

.gridheader {

width: 100%;

}

.gridmenu {

width: 23.481781376518218623481781376518%;

}

.gridmain {

width: 48.987854251012145748987854251012%;

}

.gridright {

width: 23.481781376518218623481781376518%;

margin-right: 0;

}

.gridfooter {

width: 100%;

margin-bottom: 0;

}

@media only screen and (max-width: 500px) {

.gridmenu {

width: 100%;

}

.menuitem {

margin: 1.0121457489878542510121457489879%;

padding: 1.0121457489878542510121457489879%;

}

.gridmain {

width: 100%;

}

.main {

padding: 1.0121457489878542510121457489879%;

}

.gridright {

width: 100%;

}

.right {

padding: 1.0121457489878542510121457489879%;

}

.gridbox {

margin-right: 0;

float: left;

}

}

</style>

</head>

<body>

<div class="gridcontainer">

<div class="gridwrapper">

<div class="gridbox gridheader">

<div class="header">

<h1>The kilimanjaro Mountain</h1>

</div>

</div>

<div class="gridbox gridmenu">

<div class="menuitem">The Drive</div>

<div class="menuitem">The Walk</div>

<div class="menuitem">The Return</div>

<div class="menuitem">The End</div>

</div>

<div class="gridbox gridmain">

<div class="main">

<h1>The Walk</h1>

<p> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>

<img src="picha" alt="picha" >

</div>

</div>

<div class="gridbox gridright">

<div class="right">

<h2>What?</h2>

<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry..</p>

<h2> Lorem Ipsum?</h2>

<p> Lorem Ipsum has been the industry's </p>

<h2>Frankgalos?</h2>

<p> Lorem Ipsum has been the!</p>

</div>

</div>

<div class="gridbox gridfooter">

<div class="footer">

<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>

</div>

</div>

</div>

</div>

</body>

</html>

mfano zaidi <

<file>

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

Note: katika css3 nime fundisha vitu ambavyo vinatumika sana katika front-end development. Kwaiyo kama unataka full css na CSS3 ingia hapa utajifunza vyote visivyo kuwa na muhimu. > CSS Tutorial <

Note: unaweza kuweka mitindo ya media queries tofauti na mitindo ya kawaida na ikafanya kazi sawa tu. Pia ilikuendana na mapendekezo ya W3C Testers na google responsive view tester lazima uweke meta tag ya media ikiwa na name viewporport na maelezo mengine ya media types. Kama.

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Kama inavyojieleza hapojuu. Na jinsi ya kuli link faili lako ya media

Kama lipo ndani ya folder linguine

<link rel="stylesheet" href="style/media.css">

Kama lipo nje ya folder la web yako

<link rel="stylesheet" href="../style/media.css">

<link rel="stylesheet" href="../media.css">

Kama lipo kwenye folder sawa na mafaili yako mengine

<link rel="stylesheet" href="media.css">

Unaweza kuweka orientation kwenye link ya media au ndani ya faili la media

Mfano

<link rel="stylesheet" href="media.css" orientation=’landscape’ >

<link rel="stylesheet" href="media.css" orientation=’portrait’ >

Ndani ya faili

@media only screen and (max-width:480px) and (orientation:landscape){

}

@media only screen and (max-width:480px) and (orientation😛ortrait){

}

Kuna aina nyingi za skrini resolution na hiyo hapo juu ni moja tu .

Kwaiyo ilikuweza kujua simu gani unataka ifanye kitu gani au tablet,pc.

Fanya yafuatayo

Kama unatumia firefox

· Bonyeza controls navigation [=] kuria juu

· Bonyeza developer

· Bonyeza Responsive view

· Juu kushoto utaona namba zikifatia na x katikati ya hizo namba na zina wakirisha muelekeo wa kifaa husika pia hizo ndo aina za kawaida za screen kwaiyo uta tengeneza website yako kulingana na hizo au kama una google screen zingine itakuwa vizuri.

Kama unatumia chrome

· Bonyeza controls juu kuria mwa browser yako

· Hover kwenye more tools utaona maneno developer tools

· Bonyeza developer tools

· Juu kusho mwa browser yako utaona majina ya simu laptop na tablets iki fatiwa na namba zinazowakirisha muelekeo wa kifaa husika

· Pia utaona picha ya kifaa kinacho onesha muelekeo pembeni ukibonyeza utaweza kubadilisha muonekano wa kurasa yako kwenye kifaa husika.

Mwisho wa CSS na HTML

Itaendelea …………… Tar 23-april-2016

project design HTML5 na CSS3

javascript

advance HTML 5

finishing project

frankgalos · Apr 21, 2016

Damushinmuhyool said:
mbona hukuweka <head></head>na <title>

Nashukuru kwa swali lako ila ninge weka mwanzoni head na title inge wachanganya wasomaji kwani ilikua sio sehemu yake ya kuweka head na title. fatilia vipindi vyote utaona sehemu nilioelezea kuhusu <head> na tags zake zote.Asante.

frankgalos · Apr 23, 2016

karibuni marafiki katika utangalizi wa final project design katika sehemu hii nimeongelea kuhusu maitaji na mapendekezo ya vitu unavo takiwa kuwa navyo ilikuanza final project yetu.

Final Project Design(FPD)

Maitaji

Ilikuweza kuanza na final project yetu tabidi ufanye vifuatavyo.

· Download komodo(IDE)

· Angalia FPD ilivo

· Uwetayari kwaajiri ya kufanya project

· Uturivu sio wa kukariri

· Tabidi Utengeneze mafolder (3) ya muhimu

Kwanini u pakue komodo (IDE)

Kwawanao anza kujifunza webDesign komodo ni nzuri kwani huitaji kuzi kariri property za CSS ukiandika unaletewa property husika. Japokuwa dreamweaver,notepad++,eclipse IDE na zingine zinafanya hivyo lakini kitukizuri kwa komodo kuwa unauwezo wa ku save dakika au sekunde kwaajiri ya faili lako kuji save automatically.

Pia dreamweaver ina uzuri wake kwani inakupa ruhusa yak u design kurasa zaka na kuziona mipangilio yake pia hata ku test kwenye browsers.

Kwanini uangalie final project

Final project hii front end imetumia php,html5,css,js;

Php imetumika kwaajiri ya kupangilia mafaili mfano

Faili la head na header kwasaba yangeitajika kwa kurasa zingine php ime rahisisha kwa ku include hayo mafaili katika kurasa husika kama yanaitajika.

Pia php imefanya urahisi kwa faili la index.html kutokuwa na code nyingi kwani lina include mafaili husika kama yanaitajika kutumika.

HTML,css,na js zimetumika kawaida kwa maitaji ya project hii mfano

Javascript imetumika katika scrolling part kuweka animation effect wakati kurasa ikiwa inashuka na kupanda na vinginevyo.

Kwanini mafolder matatu(3)

Hii project imetumia mafolder matatu kwaajiri ya kupangilia muenendo wa kurasa zetu.

Hayo mafolder.

1. Style

2. Images

3. Javascript

Folder la style:lina mafaili yafuatayo

· Style.css

· Media.css

Folder la images:lina mafolder yafuatayo

· Logo

· Social_icons

Folder la javascript: lina mafaili yafuatayo.

Js.js

Reset.js

Kwa sasa tunayaitaji mafolder mawili tu.

Style na images

Pia unaweza kuyaita mafolder yako kivyo vyote vile ilimladi usisahau pindi tutakapoanza kutengeneza project.

Kwaiyo ili kuanza project yetu tabidi uwena folder ambalo kuu nikimaanisha mafaili yako na mafolder mengine yatakuwa ndani ya hilo folder.

Langu nimeliita final ambalo ndani yak endo kuna mafolder hayo matatu.images,style na javascript.

Pia kuna mafaili ambayo yanaitajika kuwa yakwanza endapo tukiingia katika folder la final na hayo mafaili. Kwasababu ntatumia html tupu ntakuwa na faili moja tuu.

Index.html

Hili ndo faili ambalo litaonesha kila kitu kilicho kuwemo katika project yetu.

Katika final proje hii ina pande mbili. Kuna upande huu wa final project na kuna upande wa social network ambao huwo unaonekana endapo mtu emejidajiri katika hii social network , hii social network kuna baadhi ya sehemu hazija isha bado nikwasababu bado ina tengenezwa. Pia kwasasa inaonekana vizuri kwenye screen yenye resolution zaid ya 1920 upana.

Kwani haina media queries bado.

Pia kuna baadhi ya features kwenye safari hazi fanyi kazi na muonekano katika safari na chrome,edge inaonekana tofauti. Kwaiyo browser ambayo imejaribiwa kila kitu kinafanya kazi ni Firefox,Vivald,edge na chrome.ipokuwa Firefox zingine zote search field haizoneshi vizuri.

Kwaiyo kama unataka kujionea mwenyewe jisajiri kwa kubonyeza join me kama upo juu ya kurasa au jisajiri katika sehemu ilio andikwa join me kwenye hizo field na kuona muendelezo wake kwa kila hatua.

Pia tabidi niwe muazi natumia free server kwaajiri ya kufundishia kwaiyo kama free server ina limitation zake mdamwingine site ipo mda mwingine haipo lakini iki reload itafanya kazi tu na pia nafanya mchakato ninunue server kama itawezekana. Kwaiyo as long tunaishi uwezekano upo.

<final project link>

frankgalos <

<doc link>

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

Project itaanza Tar 25-april-16

frankgalos · Apr 25, 2016

Karibuni marafiki katika sehemu hii ya kwanza ya utengenezaji wa final project.katika sehemu hii tutaangalia basic structure ya project yetu na designing.

FINAL PROJRCT DESIGN(FPD)

Kabla ya kuanza kama ujatengeneza ma folder yalio itajika basi tengeneza sasa.

1. Tengeneza folder linaloitwa final project na uliweke sehemu yoyote ile kwenye kompyuta yako.Sehemu ambayo unaweza kulipata kwa ulaisi.

2. Ukishatengeneza ilo folder ndani ya hilo folder tengeneza folder lingine linaloitwa images/picha jina lolote unaloona linafaa.

3. Ndani ya folder la images tengeneza mafolder mengine mawili

4. Logos kwaajiri ya logo za website yako.

5. Social-icons kwaajiri ya logo za mitandao ya kijamii.

6. Pia tengeneza folder linaloitwa style(kwaajiri ya mitindo )kwani hatutotumia mitindo ya ndani katika project hii.

7. Tengenza folder linaloitwa javascript kwaajiri ya script. Hili folder halina umuhimu kwa sasa lakini litaitajika mbeleni.

Ukisha tengeneza hayo mafolder tayari utatakiwa kutengeneza mafaili yafutayo na kuweka katika sehemu husika.

1. Fungua text editor yako iwe notepad/notepad++/komodo IDE/dreamweaver/eclipse yani yoyote ambayo inauwezo wa kubadilisha extension ya faili.

2. Ukisha fungua tayari andika kitu chochote na usevu kama ifuatavyo.

3. Index.html hili faili utaliweka ndani ya folder kubwa yani final project ndani yake. Sio kwenye style, images wala javascript ni nje ya hayo mafaili.

4. Kama upo kwenye pc bonyeza Ctrl+n kwenye keyboard yako na utengeneze faili lingine linaloitwa style.css hili faili utalisevu ndani ya folder linalo itwa style.

5. Tengeneza faili linaloitwa js.js na uliweke ndani ya folder linaloitwa javascript.

Kama umefanya vitu vilivyo tajwa hapo juu tayari una karibishwa kuanza safari. Pia kumbuka mafolder na mafaili unaweza kuyaita majina yoyote yale isipokuwa faili la index.html hali badiliki kwani hili ndo linalotumika waka browser inapoitaji kuonesha website yako.

Fungua faili linaloitwa index.html

Andika vitu vifuatavyo.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<title>jina la website yako</title>

<link rel="stylesheet" href="style/style.css">

<link type="image/png" rel="shortcut icon" href="images/logos/favicon.png">

</head>

<body oncontextmenu="return false">

<div id="shadow">

<h1 >FRANK GALOS</h1>

<h1 class="dv">WEB DEVELOPER <b style="font-family:Tahoma">&</b> WEB DESIGNER</h1>

<div id="btn"> </div>

</div>

<img src="images/hero_highres.jpg" id="final">

</body>

</html>

Kama unavyo ona hapojuu hakuna kitu kigeni vyote tusha visoma.

Lakini utakua unajiuliza kwanini kuna <link type="image/png" rel="shortcut icon" href="images/logos/favicon.png">

Inamaanisha nini ?

Hiyo inamaanisha logo ya website yako ambayo inakaajuu ya browser yani kwenye broswers tab.

Pia kuna swali linguine oncontextmenu="return false" hiki ni nini?

Hiyo ni javascript event ambayo kazi yake ni kuzuiya right click kwenye mouse. Yani ukiwa unabonyeza rightClick kama unataka kujua jinsi website ilivotengeneza au unataka kuchukua picha kwenye website husika iyo ina kukataza kufanya hivo.

Tumetumia <image> kama ni kituchakwanza kuonekana wakati website inapo load pia tumetumia <div id=”shadow”> kwaajiri yakuweka kivuli ikiwa mbele ya <image> na kwaajiri ya kuonesha maandishi ya ziaada.

Kama inovo onekana hapo juu.

Basi kama ushaandika vitu vilikuwepo hapo juu unatakiwa kufungua faili la style na uandike vitu hivi.

*{

margin:0px;

padding:0px;

}

body {

margin:0px;

padding:0px;

background:#000;

-moz-user-select:none;

-webkit-user-select:none;

-o-user-select:none;

user-select:none;

}

@font-face{

font-family:frank;

src:url(maiden.ttf);

}

#final{

width:100vw;

height:99.5vh;

margin:0px;

position:relative;

z-index:-1;

}

#shadow{

width:100vw;

height:99.5vh;

margin:0px;

position:absolute;

z-index:1;

background:rgba(1,1,1,0.45);

text-align: center;

}

#shadow > h1{

position: fixed;

width: 100%;

top: 36vh;

color: rgba(255,255,255,0.50);

font-size: 6em;

font-family:frank;

animation:frankg 25s linear infinite 0s;

}

#shadow > .dv{

font-size: 4em;

top: 48%;

color: rgba(247,98,75,0.50);

font-family:frank;

animation:frankger 25s linear infinite 0s;

}

#shadow > #btn{

width: 0px;

height: 0px;

position: fixed;

bottom: 0;

left: 50vw;

border-bottom: 10px solid transparent;

border-top: 40px solid rgba(255,255,255,0.88);

border-left: 40px solid transparent;

border-right: 40px solid transparent;

animation:frank 7s linear infinite 0s;

cursor: pointer;

}

@keyframes frank{

0% { animation-timing-function: ease-in-out;}

8% { border-top-color:rgba(247,98,75,1);transition: 1s all;}

20% { border-top-color:rgba(247,98,75,1);transition: 1s all;}

}

@keyframes frankg{

0% { animation-timing-function: ease-in-out;}

8% { top:48%;color: rgba(255,255,255,0.36);transition: 0.8s all;}

20% { top:48%;color: rgba(247,98,75,0.50);transition: 0.8s all;}

40% { top: 36%;color: rgba(255,255,255,0.50);}

}

@keyframes frankger{

0% { animation-timing-function: ease-in-out;}

8% { top:36%;color: rgba(255,255,255,0.50);transition: 0.8s all;}

20% { top:36%;color: rgba(255,255,255,0.50);transition: 0.8s all;}

40% { top:48%;color: rgba(255,255,255,0.36);}

}

Hapa maswali yapo tuu??.

*{

margin:0px;

padding:0px;

}

Hivi hiyo nini ?

Hiyo ipo kwaajiri ya kuweka initial setup kwamba kurasa yako inatakiwa kuwaje.

Hapo umeona margin:0px; na padding:0px;

Kwasababu kama usipoweka hivi vitu kurasa yako itakuwa na margin by default.

Na siokwamba itaweka kila sehemu hapana kunasehemu nyingine tabidi uwe na uangalifu kwaiyo unaweka margin eidha top kuwa yoyote ile unayopenda ili upate muonekano unao utaka.

-moz-user-select:none;

-webkit-user-select:none;

-o-user-select:none;

user-select:none;

hivi hizi ni nini ??

hizo ni browsers vendors prefixes

hizi zipo kwaajiri ya kusuruhisha matatizo ya muonekano kati ya browser na browser

kwaiyo zina matumizi gani

user-select:none

maana yake mtumiaji hatakiwi ku select maandishi yoyote yalio wekewa hizi prefixes

@font-face{}

Katika website hii nimmetumia font family ya nje ambayo ni maiden.ttf

Na nimeipa jina la frank, ni meitumia katika <h1> tag ya <div> inayoitwa shadow na <div> yenye class ya .dv Kwaajiri ya kuweka muonekano mzuri wa maandishi yangu, pia sitoitumia kila sehemu ya website yangu ila ni hapo hapo tu ilipo tumika.

Kama unaitaka unaweza ku pakua google kwa kuandika jina hilo maiden au pakua kwenye hii website http://route.epizy.com/frank/maiden

Maelezo ya vilivyo tumika

#final hii ni picha yenye jina hili

Hii picha ina width ya viewport width(vw) ambayo ina fiti upana wa kifaa kinacho onesha hii kurasa

Pia ina height ya viewport height(vh) ambayo ina fiti urefu wa kifaa kinacho onesha hii kurasa.

Vw na vh hazifanyi kazi kwenye (safari 5.1.7)

Nimeiweka position:relative iwe sawa position ya kawaida.

Pia nimetumia z-index:-1;iliiweze kuwa nyuma ya kitu chochote kitakacho kuja juu. Na width:100vwili ichukue upana huwo na height:99.5vhili ichukue urefu huwo. Utakua unajiuriza kwanini urefu haukuwa 100vh.Ni kwasababu siitaji scroller pia unaweza kuweka 100vh kama unataka lakini mimi iliiweze kuwa na muonekano mzuri nika tumia hiyo.

Picha niliyotumia kama utaitaka
http://route.epizy.com/frank/frank_picture

#shadow hii div aina utofauti wa mitindo na #final ila utafauti wao ni z-index kwakuwa hii inatumia z-index:1 ambayo imeifanya hii div kuwa mbele ya picha na position itakayo ifaya hii div ikae mbeleni ni absolute au fixed tu.

<div>#btn iyo ndo bubble iliyo kuwepo chini ya kurasa yetu inayo waka waka ambayo inamjuulisha mtumiaji kama kuna vitu vinaendelea kwaiyo ashuke chini.na nimeipa animation ambayo ni infinite itakayo loop daima hato simama na nimeipajina la frankger.

Hii imeitwa chini kwakutumia @keyFrames kama tulivojifunza katika somo la animations jinsi yakuweka na kuziita.

Vitu vingine vinaeleweka ila kama ujaelewa popote pale usisite kuuliza

Rangi iliyo tumika mwanzo kama utataka kuitumiargba(251,251,149,0.55);

Utaiweka kwenye #shadow

<preview project>

http://route.epizy.com/frank/

<doc file>

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

itaendelea................

frankgalos · Apr 26, 2016

karibuni marafiki katika sehemu nyingine ya utengenezaji wa project,katika sehemu hii nimeongeza baadhi ya vitu katika faili la index.html na la style.css

kwaiyo kwa kuanza fungua faili lako la index.html na uandike vitu hivi.pia amna kigeni kama ulikua unafatilia tangu mwanzo utaonakuwa amna miujiza iliyo fanywa bali kilakitu nikile kile.

kwaiyo andika haya. kabla ya <div id="shadow">#shadow
yani baada ya <body> andika haya.

<header>
<div id="main">
<div id="logo">
<div id="main">
<a href="index.php" id="lg1"><img src="logo" alt="logo" /></a>
</div>
</div>
<nav>
<ul>
<li class="active"><a href="#header" >HOME</a></li>
<li><a href="#works">PROJECTS</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#contact">CONTACT</a></li>
<li><a href="#joinme">Join me</a></li>
</ul>
</nav>

</div>
</header>

hiyo hapo juu ni header pamoja na links ambazo mtumiaji atazitumia wakati akiingiia kwenye website yako pia kwa sasa bado hazifanyi kazi.
pia unaona kuna <li class="active"> hii imetumika kuiweka hii link active kwa kuweka mtindo wa border kwenye CSS na kuweza kuweka langi ya border ya hii link kuwa #f7624b. unaweza kuweka rangi yoyote.

Fungua faili lako la style.css

na uandike haya kabla ya #shadow
baada ya @font-face{}

header{
margin: 0px;
padding: 0px;
width: 100%;
height: auto;
z-index: 100;
position: fixed;
}

header > #main{
width: 90%;
height: 100%;
margin: 0px 4vw;
padding: 0px;
display:inline-block;
}

header > #main > #logo{
float: left;
margin: 12px 0 0 0;
padding: 0px;
width: 70px;
height: auto;
}

header > #main > #logo > #main{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: inline-block;
border-bottom:1px solid rgba(248,98,75,1);
}

header > #main > #logo > #main > a{
margin: 0px;
padding: 0px;
text-decoration: none;
}

header > #main > #logo > #main > a > img{
width: 100%;
height: auto;
display: inline-block;
margin: 0px;
border-radius: 5px;
padding: 0px;
cursor: pointer;
}

header > #main > #logo > #main > a > img:hover{
opacity:0.7;
transition😱pacity 0.6s linear 0s;
}

header > #main > nav{
width: 60%;
height: 100%;
margin: 10px 0 0 0%;
padding: 0px;
float: right;
}

header > #main > nav > ul{
margin: 0px;
padding: 0px;
}

header > #main > nav > ul > li{
float: left;
margin: 0px 0 0 0%;
padding: 29px 10px 18px 10px;
cursor: pointer;
list-style: none;
font-family:Lucida Fax;
font-size:18px;
}

header > #main > nav > ul > li:last-child{
margin:10px 0 0 0;
float:right;
background:rgba(247,98,75,0.90);
padding: 15px 10px 15px 10px;
border-radius:3px;
animation: frank2 7s linear 0s infinite ;
}

@keyframes frank2{
5%{background:rgba(248,98,75,0.30);transition:0,5s linear 0s;}
20%{background:rgba(248,98,75,0.60);transition:0,5s linear 0s;}
50%{background:rgba(248,98,75,0.100);transition:0,5s linear 0s;}
}
header > #main > nav > ul > li:last-child:hover{
border:none;
background:rgba(247,98,75,0.70);
transition:0.5s linear 0s;
}

header > #main > nav > ul > li.active{
border-bottom: 2px solid rgba(248,98,75,0.90);
}

header > #main > nav > ul > li > a{
margin: 0px;
padding: 0px;
text-decoration: none;
color: #fff;
}

header > #main > nav > ul > li > a:hover{
color:rgba(248,98,75,0.90);
transition:0.5s linear 0s;
}

header > #main > nav > ul > li:hover{
border-bottom: 2px solid rgba(248,98,75,0.90);
transition:border-bottom-color 0.4s linear 0s,color 0.3s linear 0s;
}

katika css nimeweka:
header kuwa na fixed position kwa maana itakua fixed kutoka kwa kipengele kingine na hakito sogea na vingele vingine wakati wa ku scroll pia nimeweka z-index kuwa 100 ili iwe mbele ya vipengele vyote vilivyokuwepo na vitakavyokuja.

na kama unaaona vizuri kuna <div> yenye id ya #main hii div nimeitumia ili kuweka links na logo ziendane na mitindo ya hii main.
kwa maana ya kawaida. ipo ivi header ni baba na #main ni mama mama anachukua kiasi fulani kwa baba na kuwagawia watoto zake ambao ni #logo na navigation. nahiko kiasi kinawezakua ni width au height.
kama unavyoona kuwa main ana width ya 90%; nasio 100% ya baba hii imetumika ili kuweza kubakisha kasehemu kwaajiri ya kuweka watoto wakae kati ya kurasa kwa kuweka margin 0px 4vw; pia unaweza kuweka margin:0px auto; links zako zitakaa kati ila usiweke display:inline-block; wala float haito fanya kazi.

pia mtoto wa mwisho wa <li> nimemuekea mitindo yake pamoja na animation yenye jina la frank2 ambayo duration yake ni sekunde 7 linear(timing-function) na ina fanyakazi daima kwa maana hato simama kwakutumia (iteration-count) ya infinite.

vingine haviitaji maelezo kwani tumejifunza kiundani zaidi wakati wa vipindi vyake.

Unaweza kuangalia jinsi inavyoonekana kwa sasa kwa kubonyeza link hii.

http://route.epizy.com/frank/

itaendelea .............

frankgalos · Apr 27, 2016

Habari ? karibuni katika muendelezo wa project yetu. na leo tunaendelea kuweka taarifa na kuziwekea mitindo mbalimbali.

kwakuwanza fungua faili lako la index.html na uandike hizi code.
baadaya <img> tag

<section>
<div id="container">
<div id="works">
<div id="main">
<h3>
MY HANDS WORKS
</h3>
<div id="projectHolder">
<div id="w1">
<div id='main'>
<div id="pi">
<img src="route" alt="route logo" id="r" >
</div>
<div id="link">
<a href="#" title="Go to the site">ROUTE</a>
<p>route is standalone web application which manages and monitor other websites that are connected to it.</p>
</div>
</div>
</div>
<div id="w2">
<div id='main'>
<div id="pi">
<img src="oyah" alt="oya logo">
</div>

<div id="link">
<a href="#" title="Go to the site">Oyah!</a>
<p>Oyah! is a social media application which intended for learning purpose only.</p>
</div>
</div>
</div>
<div id="w3">
<div id='main'>
<div id="pi">
<img src="shine" alt="shine24 logo" >
</div>
<div id="link">
<a href="#" title="Go to the site">shine24</a>
<p>shine24 it's a web blog application for news about sports, entertainment, politics and latest hits of celebrities.part of route</p>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
</section>

pia maandishi unaweza kuweka yako na kwenye sehemu ya picha unaweza kutoa na kuweka taarifa zozote kwenye <div id="pi"> #pi

ukisha andika hayo. fungua faili la style.css na uandike haya
baada ya @keyframes frankger{}

section{
margin: 0px;
padding: 0px;
background: #ffffff;
width:100vw;
z-index: 10;
position: absolute;
height:auto;
overflow:hidden;
}

section > #container{
width: 100%;
margin: 0px;
height: auto;
padding: 0px;
}

section > #container > #works{
width: 100%;
height:auto;
margin: 0px;
padding: 0px 0 20px 0;
display:inline-block;
}

section > #container > #works > #main{
width: 95vw;
height: 90%;
margin:0px auto;
}

section > #container > #works > #main > h3{
text-align: center;
margin: 7vh 0 0 0;
padding: 10px 0px 40px 0;
width: 100%;
font-family: monotype sans-serif;
color: rgba(248,98,75,1);
font-size: 2.5vw;
font-weight: bolder;
display: inline-block;
text-shadow:0px 3px 0px rgba(1,1,1,0.30);
}

section > #container > #works > #main > #projectHolder{
width:100%;
height:100%;
margin: 1% 0 0 0;
padding: 0px;
display:inline-block;
font-family: georgia,sans-serif;
}

section > #container > #works > #main > #projectHolder > div{
width: 32%;
height: auto;
float: left;
margin: 0px;
padding: 0px;
border-radius:3px;
box-shadow:0px 1px 5px 4px rgba(1,1,1,0.20);
}

section > #container > #works > #main > #projectHolder > div:last-child{
margin-left:25px;
}

section > #container > #works > #main > #projectHolder > div:nth-child(2){
margin-left:25px;
}

section > #container > #works > #main > #projectHolder > div > #main{
margin: 0px;
padding: 0px;
width: 100%;
display: inline-block;
height:100%;
}

section > #container > #works > #main > #projectHolder > div > #main > #pi{
width:100%;
height: 305px;
margin: 0px;
padding: 0px;
border-top-left-radius:3px;
border-top-right-radius:3px;
display: inline-block;
background:#eee;
}

section > #container > #works > #main > #projectHolder > div > #main > #pi > img{
width: 100%;
height: 100%;
margin: 0px;
display: inline-block;
padding: 0px;
}

section > #container > #works > #main > #projectHolder > div > #main > #pi > img:hover{
cursor: pointer;
opacity:0.9;
}

section > #container > #works > #main > #projectHolder > div > #main > #link{
width:100%;
height: auto;
margin: 0px;
padding: 20px 0px 20px 0px;
display: inline-block;
text-align: center;
}

section > #container > #works > #main > #projectHolder > div > #main > #link > a{
margin: 10px 0 0 0;
text-decoration: none;
padding: 0px;
color: #f7624b;
font-weight: bolder;
font-size: 22px;
display: inline-block;
}

section > #container > #works > #main > #projectHolder > div > #main > #link > a:hover{
color: #ffa311;
text-decoration: underline;
}

section > #container > #works > #main > #projectHolder > div > #main > #link > p{
padding:10px 0px 5px 0px;
color:rgba(1,1,1,0.60);
}

katika hili faili hakuna kitu kipya vyote ni vile vile tulivyo jifunza. ila kama ujaelewa sehemu yoyote kuwa huru kuuliza kwani bado tunaendelea kujifunza.

Fatilia muendelezo wa hii project katika link ifuatayo.

http://route.epizy.com/frank/

itaendelea ......

frankgalos · Apr 28, 2016

Karibuni marafiki kataka muendelezo wa project yetu. na katika sehemu hii tutaendelea kuweka taarifa katika kurasa yetu ya index.html na style .css

Basi kwa kuanza fungua faili lako la index.html na uandike haya nayo pia yanaeleweka amna kipya.

kwaiyo baada ya tag ya kumalizia ya projects andika haya.


<div id="services">
<div id="main">
<h3>WHAT DO I DO ?</h3>
<p>Simply i m making my foots steps by following this rules.</p>
<div id="desgn">
<div id="main">
<div id="logo"><img src="design"></div>
<div id="title"><h3>RESPONSIVE WEB DESIGN</h3></div>
<div id="desc">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id sagittis ex. Cras nunc enim, imperdiet sed lorem nec, vulputate aliquam lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id sagittis ex. Cras nunc enim, imperdiet sed lorem nec, vulputate aliquam lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id sagittis ex. Cras nunc enim, imperdiet sed lorem nec, vulputate aliquam lorem.
</p>
</div>
</div>
</div>
<div id="develop">
<div id="main">
<div id="logo"><img src="code"></div>
<div id="title"><h3>WEB DEVELOPMENT</h3></div>
<div id="desc">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id sagittis ex. Cras nunc enim, imperdiet sed lorem nec, vulputate aliquam lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id sagittis ex. Cras nunc enim, imperdiet sed lorem nec, vulputate aliquam lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id sagittis ex. Cras nunc enim, imperdiet sed lorem nec, vulputate aliquam lorem.
</p>
</div>
</div>
</div>

<div id="hosting">
<div id="main">
<div id="logo"><img src="hosting"></div>
<div id="title"><h3>WEB HOSTING</h3></div>
<div id="desc">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id sagittis ex. Cras nunc enim, imperdiet sed lorem nec, vulputate aliquam lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id sagittis ex. Cras nunc enim, imperdiet sed lorem nec, vulputate aliquam lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id sagittis ex. Cras nunc enim, imperdiet sed lorem nec, vulputate aliquam lorem.
</p>
</div>
</div>
</div>

<div id="seo">
<div id="main">
<div id="logo"><img src="seo"></div>
<div id="title"><h3>SEARCH ENGINE OPTIMIZING</h3></div>
<div id="desc">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id sagittis ex. Cras nunc enim, imperdiet sed lorem nec, vulputate aliquam lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id sagittis ex. Cras nunc enim, imperdiet sed lorem nec, vulputate aliquam lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id sagittis ex. Cras nunc enim, imperdiet sed lorem nec, vulputate aliquam lorem.
</p>
</div>
</div>
</div>
</div>
</div>

ukisha andika hayo kama usha fungua faili lako la style.css basi andika haya.

section > #container > #services{
width: 100%;
margin: 12vh 0 0 0;
padding: 0px;
float: left;background: #f7624b;
}

section > #container > #services > #main{
width: 95%;
height: 100%;
margin: 0px auto auto auto;
padding: 0px;
text-align: center;
font-family: monospace,sans-serif;

}

section > #container > #services > #main > h3{
text-align: center;
margin: 0px 0 0 0;
padding: 50px 0 20px 0;
width: 100%;
font-size: 3vw;
color: #fff;
text-shadow: 0px 3px 0px rgba(1,1,1,0.20);
}

section > #container > #services > #main > p{
color: #fff;
padding: 0 0 30px 0;
font-size: 1.4vw;
}

section > #container > #services > #main > div{
width: 48%;
height: 93.7%;
margin: 20px 0 0 20px;
padding: 0px 0 20px 0;
float: left;
overflow: hidden;
}

section > #container > #services > #main > div > div{
width: 100%;
height: auto;
display: inline-block;
margin: 0px;
padding: 0px;
overflow: hidden;
}

section > #container > #services > #main > div > div > #logo{
width: 13vh;
height: 13vh;
border-radius: 50%;
margin: 15px auto auto auto;
background-repeat: no-repeat;
padding: 0px;
}

section > #container > #services > #main > div > div > #logo > img{
width: 100%;
height: 100%;
display: inline-block;
border-radius: 50%;
}

section > #container > #services > #main > div > div > #title{
width: 100%;
margin: 0px;
padding: 0px;
color: #fff;
display: inline-block;
text-align: center;
}

section > #container > #services > #main > div > div > #title > h3{
margin: 0px;
padding: 20px 0 20px 0;
font-size: 1.3vw;
font-family: georgia,sans-serif;
}

section > #container > #services > #main > div > div > #desc{
width:90%;
float: left;
margin: 5px 0 0 0;
padding: 0px;
font-size: 1.1vw;
text-align: left;
}

section > #container > #services > #main > div > div > #desc > p{
margin: 0px;
color: #fff;
padding: 0px;
font-family: helvetica,sans-serif;
}

pia na hizi code zinaeleweka ila kama ujaelewa sehemu yoyote ile usisite ku comment na ntakua tayari kujibu.

kuangalia muonekano wa project jinsi ilivyo sasa bonyeza link iliopo chini.

http://route.epizy.com/frank/

itaendelea ................

frankgalos · Apr 29, 2016

karibuni katika muendelezo wa project yetu na leo tutaongeza baadhi ya taarifa katika index.html na style.css.

kwaiyo kwakuanza fungua index.html katika text editor yako na uandike hizi taarifa ambazo ni about infos.

baada ya </div> andika haya.

<div id="about">
<div id="main">
<div id="mLogo"><img src="frank_pic"></div>
<h3>ABOUT ME</h3>
<p>Who i am and what i do</p>
<div id="left">
<div id="main">
<p >I'm Frank Galos,I design and develop digital things.</p>
<p>Visual communication is my main goal. I typically design in
Illustrator and develop in-browser with hand-coded HTML ,CSS even JAVASCRIPT and it's libraries if neccesary and PHP & MYSQL, creating
relevant, functional and efficient websites.
</p>
<p>
With over two years of professional
experience, I'm well-versed in
producing websites which satisfy
clients and keep users smile.
</p>
</div>
</div>
<div id="right">
<div id="main">
<h2>My Skills</h2>
<ul>
<li>Responsive Web Design</li>
<li>HTML5 & CSS3</li>
<li>
JAVASCRIPT &
<ul>
<li>Ajax</li>
<li>Jquery</li>
</ul>
</li>
<li>PHP & MYSQLi</li>

<li>Memcached</li>

</ul>
<div id="req">
<p><a href="cv">Request CV</a></p>
</div>
</div>
</div>
</div>
</div>

baada ya kuandika hayo kama ushafungua faili lako la style.css. basi andika haya.

baadaya ya

section > #container > #services > #main > div > div > #desc > p{ // end services styles }

section > #container > #about{
width: 100%;
height: auto;
margin: 12vh 0 0 0;
padding: 0px 0 50px 0;
float: left;
}

section > #container > #about > #main{
width: 95%;
height: 100%;
margin: 0px auto ;
padding: 10px 0 0 0;
background: rgba(1,1,1,0.10);
cursor: default;
}

section > #container > #about > #main > #mLogo{
width: 20vw;
height: 35vh;
background: #eee;
margin: 0px auto;
padding: 0px 0 0 0;
border-radius: 50%;
}

section > #container > #about > #main > #mLogo > img{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: inline-block;
border-radius: 50%;
}

section > #container > #about > #main > h3{
text-align: center;
margin: 4% 0 0 0;
padding: 0px;
font-size: 4vw;
color: rgba(248,98,75,0.80);
font-family: frank;
text-shadow: 0px 3px 0px rgba(248,98,75,0.40);
font-weight: bolder;
}

section > #container > #about > #main > p{
margin: 10px 0 0 0;
text-align: center;
padding: 0px 0 10px 0;
color: rgba(1,1,1,0.30);
font-family: monospace,sans-serif;
font-weight: bold;
font-size: 20px;
word-spacing: 3px;
}

section > #container > #about > #main > #left{
float: left;
margin: 6% 0 0 0;
padding: 0px;
width: 55%;
height: auto;
color: rgba(0,0,0,0.45);
}

section > #container > #about > #main > #left > #main{
padding: 0px;
margin: 0px auto;
float: right;
width: 90%;
height: 100%;
}

section > #container > #about > #main > #left > #main > p:first-child{
margin: 0px;
padding: 0px;
text-align: center;
font-size: 27px;
color: rgba(248,98,75,0.70);
font-family: helvetica,sans-serif;
}

section > #container > #about > #main > #left > #main > p{
margin: 2% 0 0 0;
padding: 0px;
font-family: georgia,sans-serif;
font-weight: normal ;
font-size: 20px;
}

section > #container > #about > #main > #left > #main > p:last-child{
margin: 5% 0 0 0;
padding: 0px;
}

section > #container > #about > #main > #right{
float: right;
margin: 6% 0 0 0;
padding: 0px;
width: 30%;
height: auto;
}

section > #container > #about > #main > #right > #main{
display: inline-block;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}

section > #container > #about > #main > #right > #main > h2{
margin: 0px;
padding: 0px;
text-align: left;
font-family: frank,sans-serif;
font-weight: bold ;
font-size: 30px;
text-shadow: 0px 1px 0px rgba(1,1,1,0.20);
color: rgba(248,98,75,0.80);
}

section > #container > #about > #main > #right > #main > ul{
margin: 2% 0 0 2.7%;
padding: 0px;
}

section > #container > #about > #main > #right > #main > ul > li{
padding: 0px 0 0 0;
font-size: 19px;
margin: 5px 0 0 0;
list-style-type: circle;
color: rgba(0,0,0,0.50);
}

section > #container > #about > #main > #right > #main > ul > li > a{
margin: 0px;
padding: 0px;
display: block;
text-decoration: none;
}

section > #container > #about > #main > #right > #main > ul > li > ul{
margin: 2% 0 0 10%;
padding: 10px 0 15px 0;
}

section > #container > #about > #main > #right > #main > ul > li > ul > li{
color: rgba(248,98,75,0.90);
margin: 7px 0 0 0;
}

section > #container > #about > #main > #right > #main > #req{
margin: 40px auto;
padding: 15px;
display: inline-block;
border-radius: 3px;
cursor: pointer;
border: 1px solid rgba(248,98,75,0.60);
background: rgba(248,98,75,0.60);
text-align: center;
}

section > #container > #about > #main > #right > #main > #req:hover{
background: rgba(248,98,75,10);
transition:background 0.8s linear;
color: #fff;
}

section > #container > #about > #main > #right > #main > #req > p{
margin:0;
display: block;
padding: 0px;
font-size: 24px;
}

section > #container > #about > #main > #right > #main > #req > p > a{
margin: 0px;
padding: 0px;
color: #fff;
text-decoration: none;
}

pia kwenye hizi code amna kipya kwaiyo stojilazimisha kukwambia kitu unacho kijua nicje nika kwambia uwongo bure.

kuangalia jinsi ilivyo bonyeza link -------> http://route.epizy.com/frank

itaendelea ...................

frankgalos · May 1, 2016

Habari na karibuni katika sehemu nyingine ya muendelezo wa prject yetu. leo tutajifunza vituvipya richa ya kuongeza taarifa.

fungua index.html na uandike haya.
kaiyo baada ya
</div>

<div id="contact">
<div id="main">
<h3>CONTACT ME</h3>
<p id="p">When you need me, I'm right here.</p>
<p>Stop by or just call me.</p>
<div id="conInfo">
<div id="left">
<div id="main">
<form id="myMessageForm" onSubmit="return false" autoComplete="off">
<h3>Chat with me<span><i class="fa fa-commenting" aria-hidden="true"></i>
</span></h3>
<label>Name:</label>
<input id="name" type="text" placeholder="Your name">
<label>Email:</label>
<input id="name" type="email" placeholder="Your Email address">
<label>Message:</label>
<textarea id="message" placeholder="Your Message..."></textarea>
<button id="submit">send</button>
</form>
</div>
</div>
<div id="right">
<div id="main">
<ul>
<li><i class="fa fa-whatsapp" aria-hidden="true"></i>
<span>+255 685-744-46</span></li>
<li><i class="fa fa-globe" aria-hidden="true"></i>
<span>coming soon</span></li>
<li><i class="fa fa-paper-plane-o" aria-hidden="true"></i>
<span>frankslayer1@gmail.com</span></li>
</ul>
<div id="social">
<p>Follow me:</p>
<ul>
<li><a href="Route Frank | Facebook"><i class="fa fa-facebook" aria-hidden="true" title="follow me on facebook"></i></a></li>
<li><a href="Route (@r0ute) • Instagram photos and videos"><i class="fa fa-instagram" aria-hidden="true" title="follow me on instagram"></i></a></li>
<li><a href="Frank Slayer - Google+"><i class="fa fa-google-plus" aria-hidden="true" title="be my circle on google"></i></a></li>
<li><a href="route (@Reddeat60292619) | Twitter"><i class="fa fa-twitter" aria-hidden="true" title="follow me on twitter"></i></a></li>
<li><a href="https://www.linkedin.com/in/r0ute"><i class="fa fa-linkedin" aria-hidden="true" title="link me to your account"></i></a></li>
</ul>
</div>

<div class="fb-like" data-href="http://route.epizy.com/frank/" data-width="32" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"></div>

<a class="twitter-timeline" data-dnt="true" href="route (@Reddeat60292619) | Twitter" data-widget-id="726501673926049792" width="300"
height="250"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

</div>
</div>
</div>
</div>

katika hii sehemu kila icon unayo iyona katika lists sio picha ila ni font. Na nnavyojua kitu chamuhimu kwenye website sio muonekano ila uwezo wa website katika userbility, mtumiaji kama ataingia kwenye website yako kakaa nusu saa bila ya website kuonesha chochote kwakumaanisha ina load uyo mtumiaji ata ondoka katika website yako. Na hicho ndicho nilicho jifunza kwenye upande wa network, jaribu kutengeneza website ambayo inatumia 15milliseconds kuload zidi ya hapo toavitu ambavyo vinaifanya website iwe slow.
katika website optimization unashauriwa developer kutumia fonts 100% na kutumia picha ambazo hazitokuwa mzigo kwenye site yako. kwaiyo nimetumia font inayoitwa awesome font i google utaipata ila kaujaipata wasiliana na mimi ntakutumia.

jinsi ya kuiweka
ukisha download unachukua mafaili yenye extension .css na kuyaweka kwenye sehemu ya head ya kwenye kurasa yako nakila kitu kitakua sawa.

zidi ya kutumia fonts unaweza ukaweka picha katika lists na zikafanya kazisawa na fonts web ya ku download fonts >> None <<

pia ume notice kuna class="fb-like"

hiyo like button ya facebook nimeona kuna umuhimu wa site yako kuwa na like button kuonesha watu kuwa site yako ina watu wanayo ifatilia. hii like button aifanyi kazi kwenye domains za free kwaiyo kamaunataka kuitumia tabidi ununue domain.

ili kuweza kuipata ingia fb nakisha kwenye footer ya fb utaona more bonyeza hapo kisha bonyeza kwenye developer kisha kwa juu kwenye (header) utaona Doc utabonyeza hapo kisha kuria utaona PlatForms kwa chini utaona Web Developers utabonyeza hapo kisha utabonyeza kwenye Social Plugins na utaiyona Like button kwa chini uta bonyeza kwenye Web na utafata maelekezo utakuwa tayari kuweka like button kwenye web yako.

pia ume notice kuna class="twitter-timeline"

kuna umuhimu wa kuwa socialized na kwahiyo sababu nime include twitter timeline ilikuwaonesha watu kwamba upo twitter na wanaweza kuwasiliana nawe uko. ili kuweza kupata iyo time line ingia twitter na account yako kisha ingia kwenye diveloper na kisha bonyeza Tap into Twitter baada ya hapo shuka hadi kwenye haya maneno
Highlight Your Twitter
Account on Your Website

na bonyeza learn more about embedded Timelines. na soma maelekezo yote na kushoto kwako utaona list ya current selection na utabonyeza kwenye User Timeline na ukishuka utaona Create a new embedded user timeline na utabonyeza hapo. kisha fata maelekezo na utakuwa tayari kuwa na twitter timeline kwenye kurasa yako.

Fungua style.css na uandike haya.
huku akuna kipya kwaiyo baada ya
// section > #container > #about > #main > #right > #main > #req > p > a{}

section > #container > #contact{
width: 100%;
height: auto;
margin: 0px;
padding: 0px 0 20px 0;
background: rgba(1,0,1,0.85);
display: inline-block;
cursor: default;
}

section > #container > #contact > #main{
width: 80%;
height: 100%;
margin: 0px auto;
padding: 0px;
color: #fff;
}

section > #container > #contact > #main > h3{
text-align: center;
margin: 3% 0 0 0;
padding: 0px;
font-size: 3vw;
color: rgba(255,255,255,0.70);
font-family: georgia,sans-serif;

}
section > #container > #contact > #main > p{
margin: 0 0 0 0;
text-align: center;
font-family: georgia,sans-serif;
font-size: 22px;
color: rgba(255,266,255,0.68);
}

section > #container > #contact > #main > #p{
margin: 2% 0 0 0;
text-align: center;
}

section > #container > #contact > #main > #conInfo{
width: 100%;
height: 100%;
margin: 3% 0 0 0;
padding: 0px;
}

section > #container > #contact > #main > #conInfo > #left{
margin: 0px;
padding: 0px;
width: 50%;
height: auto;
float: left;
}

section > #container > #contact > #main > #conInfo > #left > #main{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: inline-block;
}

section > #container > #contact > #main > #conInfo > #left > #main > form{
width: 90%;
height: 100%;
margin: 0px;
padding: 0px;
float: right;
font-size: 14px;
text-align: center;
}

section > #container > #contact > #main > #conInfo >#left > #main > form > h3{
margin: 0px;
padding: 0px;
display: block;
color: #ddd;
font-size: 22px;
text-shadow: 0px 3px 2px rgba(248,98,75,0.20);
text-align: left;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > h3 > span{
display: inline-block;
font-size: 2.5vw;
position: absolute;
color:rgba(248,98,75,10);
margin: 0px 0px 0px 20px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > label{
margin: 3% 0 0 2px;
display: inline-block;
font-weight: bold;
font-size: 17px;
color:rgba(255,255,255,0.70);
font-family: georgia,sans-serif;
width: 100%;
text-align: left;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > input,textarea{
display: block;
margin: 4px 0 0 0;
background: rgba(0,0,0,0.30);
color: #ddd;
border: 2px solid rgba(255,255,255,0.10);
font-size: 18px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > input:focus,textarea:focus{
border-color:rgba(255,255,255,0.17);
color: rgba(248,98,75,0.70);
background: rgba(0,0,0,0.40);
transition: .5s linear 0s;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > input{
width: 80%;
border-radius: 5px;
padding: 9px 0px 9px 5px;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > textarea{
width: 95%;
border-radius: 5px;
height: 200px;
resize: none;
padding: 5px 0 0 1%;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > button{
margin: 5% auto;
padding: 10px 30px 10px 30px;
border-radius: 3px;
font-size: 22px;
color: #fff;
border: none;
background: rgba(248,98,75,0.70);
cursor: pointer;
}

section > #container > #contact > #main > #conInfo > #left > #main > form > button:hover{
background: rgba(248,98,75,0.50);
color: rgba(255,255,255,0.50);
transition: .5s linear 0s;
}

section > #container > #contact > #main > #conInfo > #right{
margin: 0px;
padding: 0px;
width: 40%;
height: auto;
float: right;
}

section > #container > #contact > #main > #conInfo > #right > #main{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: inline-block;
}

section > #container > #contact > #main > #conInfo > #right > #main > ul{
margin: 5% 0 0 15px;
padding: 0px;
}

section > #container > #contact > #main > #conInfo > #right > #main > ul > li{
display: block;
margin: 10px 0 0 0;
padding: 0px;
list-style: none;
color: #f7624b;
font-size: 1.7vw;
}

section > #container > #contact > #main > #conInfo > #right > #main > ul > li > span{
height: auto;
margin: 5px 0 0 30px;
padding: 0px;
font-size: 20px;
position:absolute;
}

section > #container > #contact > #main > #conInfo > #right > #main > #social{
margin: 50px 0 0 0;
width: 100%;
display: inline-block;
padding: 0px;
}

section > #container > #contact > #main > #conInfo > #right > #main > #social > p{
font-size: 22px;
}

section > #container > #contact > #main > #conInfo > #right > #main > #social > ul{
margin: 15px 0 0 0;
padding: 0px;
}

section > #container > #contact > #main > #conInfo > #right > #main > #social > ul > li{
margin: 0px 0 0 20px;
padding: 0px;
list-style: none;
float: left;
}

section > #container > #contact > #main > #conInfo > #right > #main > #social > ul > li:first-child{
margin: 0px;
}

section > #container > #contact > #main > #conInfo > #right > #main > #social > ul > li > a {
margin: 0px;
padding: 0px;
text-decoration: none;
color:rgba(248,98,75,1);
font-weight: bolder;
font-size: 32px;
display: inline-block;
}

section > #container > #contact > #main > #conInfo > #right > #main > #social > ul > li > a:hover{
color:rgba(248,98,75,0.50);
transform:rotateY(180deg);
transition: 0.6s linear 0s;
}

section > #container > #contact > #main > #conInfo > #right > #main > .fb-like{
color: #fff;
margin: 20px 0 0 0;
width:100%;
padding: 0 0 20px 0;
}

preview link
http://route.epizy.com/frank

itaendeleaa...........................

frankgalos · May 2, 2016

Habari marafiki karibuni katika sehemu ya mwisho ya utengenezaji wa project,katika sehemu hii kitu kikubwa kwako ni footer kwani sehemu ya join me utakuwa hauiitaji kwakipindi hiki cha html labdambaka ujifunze lugha zingine mabazo zinaweza kupokea inputs na kuzifanyia kazi.

kwaiyo kwa kuanza fungua faili lako la index.html na uandike yafuatayo.
kama unataka muonekano sawa na hii project basi utaandika kila kitu lakini kama unataka kuwa na tofauti basi utaandika kwenye footer tu.
baada ya </div>

<div id="joindiv">
<div id="main">
<div id="left">
<h2>JOIN ME <b id="forAnimation">NOW</b></h2>
<h3>Join me to make world a better place</h3>
<p>For us all.</p>
<p>Let code together for a while shall we ?.</p>
</div>
<div id="right">
<form id="jForm" onsubmit="return false" autocomplete="off">
<label>Username:</label>
<input type="text" id="uname" placeholder="Username">
<label>First name:</label>
<input type="text" id="fname" placeholder="Your real name">
<label>Last name:</label>
<input type="text" id="lname" placeholder=" A real name">
<label>Email:</label>
<input type="email" id="em" placeholder="Email Address">
<label>Password:</label>
<input type="password" id="passi" placeholder="Password">
<label>Password Again:</label>
<input type="password" id="pass1" placeholder="Confirmation Password">
<div id="statuss"></div>
<button id="joinf" onclick="registration();">JOIN ME</button>
<button id="members">members</button>
</form>
</div>
</div>
</div>
<footer>
<div id="main">
<h3><b style="color:#ffffff;">FRANK</b> GALOS © <b id="date"></b> </h3>
<p>All rights reserved.</p>
</div>
</footer>

katika upande huu amna kigeni kwaiyo sitoelezea.

kama ushaandika hayo hpo juu. fungua style.css na uandike yafuatayo.

section > #container > div#joindiv{
margin: 0px;
padding: 0px 0 70px 0;
width: 100%;
height:auto;
background: url(backpic) no-repeat center fixed;
background-size: cover;
float: left;
}
section > #container > div#joindiv > #main{
margin: 0px auto;
padding: 0px;
width: 80%;
height: 100%;
text-align: center;
}

section > #container > div#joindiv > #main > #left{
width: 53%;
height: 100%;
margin: 0px;
padding: 0px;
float: left;
font-family: monospace;,sans-serif;
font-style: bold;
color: #fff;
}

section > #container > div#joindiv> #main > #left > h2{
margin: 7vh 0 0 0%;
font-size: 3.5vw;
padding: 0px;
color: #f7624b;
}

section > #container > div#joindiv> #main > #left > h2 > #forAnimation{
animation: frank1 5s infinite linear 0s;
color: #fff;
}

@keyframes frank1{
5%{color:rgba(248,98,75,0.30);transition:0,5s linear 0s;}
20%{color:rgba(248,98,75,0.60);transition:0,5s linear 0s;}
50%{color:rgba(248,98,75,1);transition:0,5s linear 0s;}
60%{color:rgba(255,255,255,1);transition:0,5s linear 0s;}
}

section > #container > div#joindiv> #main > #left > h3{
margin: 3% 0 0 0;
font-size: 1.7vw;
padding: 0px;
}

section > #container > div#joindiv > #main > #left > p{
color:rgba(248,98,75,1);
font-size: 1.5vw;
font-family: cursive;
font-weight: bolder;
}

section > #container > div#joindiv > #main > #left > p:last-child{
color:#fff;
}

section > #container > div#joindiv > #main > #right{
width: 40%;
height: 100%;
margin: 0px;
padding: 0px;
float: right;
text-align: left;
}

section > #container > div#joindiv > #main > #right form{
width: 70%;
margin: 10% 0 0 0 ;
padding: 0px 0 70px 0;
float: right;
font-family:cursive,sans-serif;
}

section > #container > div#joindiv > #main > #right > form > label{
margin: 15px 0 0 0;
padding: 0px;
display: block;
font-size: 24px;
color: #fff;
}

section > #container > div#joindiv > #main > #right > form > input{
display: block;
width: 80%;
border: 1px solid gray;
background: transparent;
color: #fff;
border-radius: 5px;
padding: 10px;
margin: 4px 0 0 0;
font-size: 17px;
}

section > #container > div#joindiv > #main > #right > form > input:focus{
border-color: #098;
color: #098;
transition: .5s linear 0s;
}

section > #container > div#joindiv > #main > #right > form > button{
margin: 8% auto;
display: block;
background: rgba(248,98,75,1);
color: #fff;
font-size: 19px;
border-radius: 3px;
border: none;
padding: 10px 15px 10px 15px;
}

section > #container > div#joindiv > #main > #right > form > button:last-child{
float: right;
background: #098;
}

section > #container > div#joindiv > #main > #right > form > button:hover{
background: rgba(248,98,75,.60);
cursor: pointer;
transition:0.8s linear;
}

footer{
width: 100%;
height:auto;
margin: 0px;
padding: 0px;
position: absolute;
bottom: 0;
float: left;
z-index: 15;
background: #fff;

}
footer > #main{
width: 100%;
height: 100%;
display: inline-block;
margin: 0px;
padding: 0px;
text-align: center;
color: rgba(248,98,75,1);
font-family:cursive;
background: rgba(1,0,1,0.87);
}

footer > #main > h3{
margin: 1.5% 0 0 0;
font-size: 22px;
padding: 0px;
display: inline-block;
cursor: default;
text-shadow: 0px 2px 2px rgba(248,98,75,.5);
}

footer > #main > p{
margin:0px;
color: #ddd;
font-size: 19px;
display: block;
padding: 0 0 10px 0;
}

katika upande huu kama unavyoona nime weka footer position:absolute kwasababu watuwengi wana tengeneza website bila kuangalia footer kwani footer nayo ni sehemu ya site kama umeweza kutengeneza web nzuri basi nayo footer iwe nzuri.Watu wengi ambao wanatengeneza webs awaelewi jinsi ya kuiweka footer ikaechini kwamaana iwe kwenye footer kwakutumia mbinu hii atakama kurasa yako ina taarifa chache footer bado itakaa chini kabisa ya kurasa yako kwakumanish itachukua device height na itaenda kukaa chini.kwaiyo tumia hii mbinu kwa kurasa ambazo ni fupi kitaarifa. zidi ya kuweka footer iwe relative na divs zingine.

pia kwanini haijawa pekiyake yani footer kama footer tabidi ikae nje ya section kwanini ipo ndandi. kutokana na website hii ipo absolute footer ukiiweka nje ya section itakaajuu ya image tag kwakumaanisha itakuwa ina assume kuwa mwisho wa image tag ndio mwisho wa kurasa kwaiyo itakaa juu ya section. pia kuna site nyiingine utatengeneza ambazo haziusishi position yani main divs ni relatives utaweka footer inje ya section.

hakikisha unaweka hii kwenye index.html baada ya </html>

<script>var d = new Date(); document.getElementById("date").innerHTML = d.getFullYear();</script>

hii ni javascript nimetumia hii kwaajiri ya kuonesha current year

preview project

http://route.epizy.com/frank/

itaendelea ........
CSS3 media queries

Web development for beginners in swahili

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

JF-Expert Member

Similar Discussions

Our Community

Coming Soon

Regional Communities