Cikkajánló
A héten volt egy ilyen kérés is, hogy hogyan lehet az Awesome ikonokat úgy használni a G-Portálon, hogy nem kell külön kódokkal bíbelődni. Hát ma volt időm, hogy megírjam
Még augusztusban valamikor készítettem háromféle Oldal infó szövegdobozt, amit akkor fel is tettem az oldalra, csak még nem írtam ki. Ha esetleg valaki nem tud magától készíteni az oldalára,
8. rész   Ebben a részben a column_main azaz a G-Portálon lévő középső modullal ismerkedhettek meg. Lásd a cikk alatt a képen a középső világos színű modult. Ezt a
Prémium téma | Zendaya Coleman G-Portálos téma Sosugary Gallery | Jennifer Lawrence téma Szövegdoboz | Kattintásra kijelöli és másolja a szöveget Ingyenes téma | Coppermine Gallery free theme Prémium téma | Sophie Turner WordPress theme
Százalékcsík 4.

 

60% Progress: 60% done.

 

Százalékcsík kódja
 

<table align="center">
    <tbody>
        <tr>
            <td>
                <div class="container">
    <div class="progress_wrapper orange_green">
        <span class="orange_green tooltip">60%</span> <progress class="orange_green" max="100" value="60"> <strong>Progress: 60% done.</strong> </progress></div>
</div></td>
        </tr>
    </tbody>
</table>


CSS kód
 

<style type="text/css">
.progress_controller a {
  color: #afa5b4;
  text-shadow: 1px 1px 0px rgba(0,0,0,0.9);
  font-size: 13px;
  cursor: pointer;
}
.progress_controller a:hover {
  color: #d7d2da;
}
.progress_wrapper {
  position: relative;
  width: 342px;
}
.progress_wrapper progress.orange_green {
  width: 340px;
  height: 14px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  padding: 1px;
  border-radius: 5px;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.13);
  overflow: hidden;
  background-color: #000;
}
.progress_wrapper progress.orange_green::-webkit-progress-bar {
  background-color: #000;
}
.progress_wrapper .tooltip {
  display: inline-block;
  font-size: 12px;
  color: #fff;
  padding: 4px 0px;
  width: 39px;
  -webkit-border-radius: 3px;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius: 3px;
  -moz-border-radius-bottomleft: 0;
  border-radius: 3px;
  border-bottom-left-radius: 0;
  border: 1px solid #000;
  box-shadow: 1px 0px 2px rgba(0,0,0,0.28), inset 1px 1px 1px rgba(255,255,255,0.05);
  position: absolute;
  top: -35px;
  left: 0%;
  margin-left: -10px;
  text-shadow: 1px 1px 0px rgba(0,0,0,0.9);
}
.progress_wrapper .tooltip.orange_green {
  background: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.2) 100%), #393d2d;
  background: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.2) 100%), #393d2d;
  left: 60%;
}
.progress_wrapper .tooltip.orange_green::before {
  content: '';
  display: block;
  position: absolute;
  top: 25px;
  left: -1px;
  width: 0;
  height: 0;
  border-right: 3px solid transparent;
  border-top: 3px solid #000;
  border-left: 3px solid #000;
  border-bottom: 3px solid transparent;
}
.progress_wrapper .tooltip.orange_green::after {
  content: '';
  display: block;
  position: absolute;
  top: 23px;
  left: 0px;
  width: 0;
  height: 0;
  border-right: 3px solid transparent;
  border-top: 3px solid #303426;
  border-left: 3px solid #303426;
  border-bottom: 3px solid transparent;
}
.progress_wrapper progress.orange_green::-webkit-progress-value {
  background: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.2) 100%), -webkit-linear-gradient(left, #dd896c 0%, #9dac7b 100%);
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.7);
  border-radius: 5px;
  position: relative;
}
.progress_wrapper progress.orange_green::-webkit-progress-value:after {
  content: '';
  width: 6px;
  height: 6px;
  display: block;
  position: absolute;
  border-radius: 50%;
  right: 5px;
  top: 3px;
  background-color: #687746;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.37), inset 0px 1px 1px rgba(0,0,0,0.54);
}
.progress_wrapper progress.orange_green::-moz-progress-bar {
  background: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.2) 100%), -moz-linear-gradient(left, #dd896c 0%, #9dac7b 100%);
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.7);
  border-radius: 5px;
  position: relative;
}
.progress_wrapper progress.orange_green::-moz-progress-bar:after {
  content: '';
  width: 6px;
  height: 6px;
  display: block;
  position: absolute;
  border-radius: 50%;
  right: 5px;
  top: 3px;
  background-color: #687746;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.37), inset 0px 1px 1px rgba(0,0,0,0.54);
}
</style>
 


Kinézet böngészőkben
Mozilla Firefoxban és Google Chrome-ban így néz ki:


Internet Explorerben így néz ki:

lindadesign Hozzászólások
752 megtekintés

Hozzászólások