Jadili ya kufanyia

Mafunzo wa CSS wa kawaida

• Mafunzo ya CSS
• Muhtasari wa CSS
• Inayotumiwa kwa CSS
• Muhtasari wa matokeo wa CSS
• Tumia CSS
• Mafanikio ya CSS
• Vibarua ya CSS
• Vibarua ya RGB ya CSS
• Vibarua ya HEX ya CSS
• Vibarua ya HSL ya CSS
• Mabaki ya CSS
• Mabaki ya picha ya CSS
• Ukirekebeshaji wa mabaki ya CSS
• Inayopewa kwa mabaki ya CSS
• Mafanikio ya mabaki ya CSS ya kifupi
• Mabaki ya CSS
• Ukubwa wa mabaki ya CSS
• Rabo la mabaki ya CSS
• Mabaki ya kina ya CSS
• Mafanikio ya mabaki ya kina ya CSS ya kifupi
• Kina za mabaki ya CSS
• Ukubwa wa mashauri ya CSS
• Ukisameheza wa mashauri ya CSS
• Mabaki ya ndani ya CSS
• Ukubwa/Unafiki wa CSS
• Mfumo wa kina ya CSS
• Kifupi cha CSS
• Ukubwa wa kifupi cha CSS
• Rabo la kifupi cha CSS
• Mafanikio ya kifupi cha CSS ya kifupi
• Ushirikiano wa kifupi cha CSS
• Matukio ya CSS
• Usimamizi wa matukio ya CSS
• Matukio ya mafanikio ya CSS
• Matukio ya uharibifu wa CSS
• Matukio ya mabaki ya uharibifu ya CSS
• Matukio ya mabaki ya uharibifu ya CSS
• Fonti ya CSS
• Mwisho wa fonti ya CSS
• Ukubwa wa fonti ya CSS
• Fonti ya Google ya CSS
• Mafanikio ya fonti ya CSS ya kifupi
• Icon ya CSS
• Tovuti ya CSS
• Listi ya CSS
• Tovuti ya tabia ya CSS

Mwongozo wa juu wa CSS

• Display wa CSS
• max-width wa CSS
• Utafiti wa CSS
• z-index wa CSS
• Kusikia kwa kina wa CSS
• Kusikia wa CSS
• Kusikia kwa kilele cha CSS
• Inayotumiwa kwa CSS - Mfano wa uharibifu
• inline-block wa CSS
• Uingilio wa CSS
• Kombinasi za CSS
• Inayotumiwa kwa CSS - Pseudo-class
• Inayotumiwa kwa CSS - Pseudo-element
• Inayotumiwa kwa CSS - Inabaki
• Inayotumiwa kwa CSS - Bar ya nia
• Inayotumiwa kwa CSS - Bar ya nia ya pekee
• Inayotumiwa kwa CSS - Bar ya nia ya mawingu
• Inayotumiwa kwa CSS - Menu ya kusikitisha
• Inayotumiwa kwa CSS - Kituo cha picha
• Inayotumiwa kwa CSS - Image sprite
• Inayotumiwa kwa CSS - Muhtasari wa matokeo wa属性
• Inayotumiwa kwa CSS -omuumba wa fomu
• Inayotumiwa kwa CSS - Kichakata cha mafanikio
• Inayotumiwa kwa CSS - Muundo wa tovuti
• Inayotumiwa kwa CSS - Viwango
• Inayotumiwa kwa CSS - Muhimu wa matokeo
• CSS !important
• Inayotumiwa kwa CSS - Functia ya matukio

Mwongozo wa juu wa CSS3

• Inayotumiwa kwa CSS - Kina za mabaki
• Inayotumiwa kwa CSS - Picha ya mabaki
• Mabaki ya CSS
• Vibarua ya CSS
• Inayotumiwa kwa CSS - Kichwa cha rangi
• CSS muhimu
• CSS muhimu radial
• CSS shadwa
• CSS box-shadow
• CSS mafuriko waandiko
• CSS fonti wa mtandao
• CSS muhimu 2D
• CSS muhimu 3D
• CSS mafikirio
• CSS mafuriko
• CSS tooltip
• CSS stili ya picha
• CSS object-fit
• object-position za CSS
• CSS kikabu
• CSS kibarua
• CSS mazungumzo
• CSS makundi
• CSS jumuija ya mtumishi
• CSS muhimu
• CSS muhimu wa kufikiria
• Variable za CSS - JavaScript
• Variable za CSS - media query
• CSS @property
• Box Sizing wa CSS
• Flexbox wa CSS
• Media query wa CSS
• Mfano wa media query wa CSS

Mbinu ya uzoefu wa CSS

• RWD Kiwango cha Kwanza
• Viewport RWD
• Grid view RWD
• Media query RWD
• Picha RWD
• Video RWD

Mwongozo wa grid wa CSS

• Moduli wa muhimu wa kifungu cha CSS
• Kivunja wa muhimu wa CSS
• Mimba wa muhimu wa CSS

Mfano wa CSS

• Mfano wa CSS

Mchakato wa CSS

• Mchakato wa CSS

Mwongozo wa CSS

• Mwongozo wa CSS
• Mwongozo wa wasaidizi wa CSS
• Muhtasari wa matokeo wa CSS
• Funknzi ya CSS
• Inayotumiwa kwa CSS - Viwango
• Maadili ya CSS
• Fonti za mtandao za CSS
• Mafuriko ya CSS
• Inayotumiwa kwa CSS - Viwango
• Vibarua ya CSS
• Chaguo cha rangi cha CSS
• Chaguo cha chaguo cha CSS
• Matokeo ya CSS

Kisomea

Mwongozo wa kusikia:

• Kigea cha kifaa cha CodeW3C.com

Jifunze kuhakikisha kuwengia picha kwa CSS.

picha za kina

kwa matumizi ya border-radius michakato ya kujenga picha za kina:

Mfano

picha za kina:

img {
  border-radius: 8px;
}

Tenda kwa mafanikio

Mfano

picha za kikuu:

img {
  border-radius: 50%;
}

Tenda kwa mafanikio

picha ya msingi

kwa matumizi ya border michakato ya kujenga picha ya msingi.

Picha ya msingi:

Mfano

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
<img src="paris.jpg" alt="Paris">

Tenda kwa mafanikio

kama picha ya msingi ya kiungo:

Mfano

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

Tenda kwa mafanikio

Picha zisikia kwa uwezo

Picha zisikia kwa uwezo ziweza kufikia ukubwa wa kikata za ekran.

Ili uweze kuwusikia picha kwa uwezo, lakini utakadai kuwakataa kuwagiza kubwa zaidi ya ukubwa wa asili, tafuta makabila yafuatavyo:

Mfano

img {
  max-width: 100%;
  height: auto;
}

Tenda kwa mafanikio

Msaada:Kwenye Mafunzo ya CSS RWD Jifunze vizuizi vya uzoefu wa Web kwa kina.

picha kwenye kimo cha kati

Ili kushika picha kwenye kimo cha kati, tafuta mabadiliko ya joto na kimaombi: auto na ingiza kama elementi ya block:

Mfano

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Tenda kwa mafanikio

tusha ya Polaroid / kadi

kati ya nyanja

kati ya kijani

Mfano

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
  text-align: center;
  padding: 10px 20px;
}

Tenda kwa mafanikio

Picha inayotumia tabaka

opacity Uarifu wa mafupi ni 0.0 - 1.0. Kwa sababu ya uarifu wa chini, ni mwenye tabaka:

opacity 0.2

opacity 0.5

opacity 1 (kwa kawaida)

Mfano

img {
  opacity: 0.5;
}

Tenda kwa mafanikio

Matukio ya picha

Jua matukio ya kilele kwenye picha:

Mfano

Kueleza kwenye pori na kushoto

Kueleza kwenye pori na kushoto

Kueleza kwenye pori na kushoto

Kueleza kwenye pori na kushoto

Kwa kawaida

Tenda binafsi:

Kueleza kwenye pori na kushoto Kueleza kwenye pori na kushoto Kueleza kwenye pori na kushoto Kueleza kwenye pori na kushoto Kwa kawaida

Mafunzi ya picha

CSS filter Mafupi huongea vizuizi vya uonekano (kama uharibifu na uadilifu wa uangalifu).

Kuelewa:Internet Explorer au Edge 12 hauzungumza kifupi cha filter.

Mfano

Badilisha rangi ya picha zote kwa mabrowni (100% mabrowni):

img {
  filter: grayscale(100%);
}

Tenda kwa mafanikio

Msaada:Tungahesabu: Mafunzo ya filter ya CSSZingatia mambo ya kifunzi cha filter ya CSS.

Kwenye kikuria cha picha

Tengeneza uendeshi wa kwenye kikuria cha kina:

Mfano 1

Mfano wa kuweka matukio:

Sikini Mungu

Tenda kwa mafanikio

Mfano 2

Mfano wa kuweka kikamilifu:

Bill

Tenda kwa mafanikio

Mfano 3

Inuka (kutoka juu):

Sikini Mungu

Tenda kwa mafanikio

Mfano 4

Inuka (kutoka chini):

Sikini Mungu

Tenda kwa mafanikio

Mfano 5

Inuka (kulia):

Sikini Mungu

Tenda kwa mafanikio

Mfano 6

Inuka (kulia):

Sikini Mungu

Tenda kwa mafanikio

Kuchukua picha

Tumia kwenye picha:

Mfano

img:hover {
  transform: scaleX(-1);
}

Tenda kwa mafanikio

Muona wa picha wa kina

Tunaweza kutengeneza muona ya picha yenye uwezo wa kutokea kwa kina.

Mfano hii hujui kwa kutumia media query kuagiza picha kwa ukubwa wa ekranu. Tukifungua ukanda wa kivinzi cha programu:

Mfano

.responsive {}}
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}
@media only screen and (max-width: 700px){
  .responsive {}}
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 500px){
  .responsive {}}
    width: 100%;
  }
}

Tenda kwa mafanikio

Msaada:Tumia hii Mafunzo ya CSS RWD Tafakari zaidi kuhusu ujenzi wa tovuti ya kina kina katika hii.

Ufukuo wa picha (Image Modal)

Hii ni mbinu ya mtaarifu ya kuhusu CSS na JavaScript kwa kufanyika kazi pamoja.

Kwanza, tumia CSS kuanzisha ufukuo wa kina kina (mshairi) na kusikitisha kuwa inahifadhiwa kwa ukweli.

Kisha, kama mtumishi anafanyia ugonjwa wa picha, tumia JavaScript kuonyesha ufukuo wa kina kina na kuonyesha picha kwa ufukuo huo:

×

Tenda kwa mafanikio

Kifaa cha kawaida

Mwongozo wa CSS

Mfano wa CSS

Mchakato wa CSS

Kitabu cha nyota cha CSS

Vilabu vya msingi