Cikkajánló
Hogy mi az az URL cím? Sok cikkemben írom, hogy pl. másoljátok ki az URL címet. Nekem ez tök egyértelmű, de lehet van olyan, akinek nem az. Szóval az
Hoztam egy újabb CSS kódot a G-Portálra. Vagyis az alap kód az már meg volt régóta, csak gondoltam tegyük kicsit egyedivé a portálunkat, így a modulcímet kicsit átvariáltam. Kettő
Az eddig elkészült rendelések előnézeti képeit feltöltöttem a galériába, ott meg tudjátok nézni. Akiknek még nem jeleztem, hogy kész a design-juk, legyenek türelemmel, mert készülnek azok is.:) Most Sosugary
Emma Roberts G-Portálos téma Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák
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
731 megtekintés

Hozzászólások