Cikkajánló
Leírom, hogy én hogyan szoktam telepíteni és használni egy WordPress bővítményt. Meg kell jegyeznem, hogy ezt ÉN szoktam így, biztos van olyan emberke, akik ezt máshogy oldják meg, mert
Készítettem egy új modult a G-Portálon belül, ahova ezentúl teljes G-Portálos kinézetek kerülnek majd fel. Csak CSS témákat mostanában nem fogok már készíteni, mert nincsen hozzá kedvem. Ezért született
Kellemes estét :) Hoztam mára még négyféle project szövegdobozt és kilencféle elit csere ikon effektet. Az összes egyesével megnézhető az alábbi linkeken. Válogassatok :) A project dobozoknál és az
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
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
688 megtekintés

Hozzászólások