Μη Συνδεδεμενος Παρακαλώ συνδεθείτε ή εγγραφείτε

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω  Μήνυμα [Σελίδα 1 από 1]

#1
 Admin

avatar
Admin


HTML:

Κώδικας:

<div class="area-total-abas">
 <div class="lista-abas amimacao-flip">
 <input type="radio" name="lista-abas" checked id="aba-1" class="aba-1">
 <label for="aba-1"><span><span>Simples slideshow</span></span></label>
 <input type="radio" name="lista-abas" id="aba-2" class="aba-2">
 <label for="aba-2"><span><span>Algoritmo de Levenshtein</span></span></label>
 <input type="radio" name="lista-abas" id="aba-3" class="aba-3">
 <label for="aba-3"><span><span>Barra de progresso</span></span></label>
 <input type="radio" name="lista-abas" id="aba-4" class="aba-4">
 <label for="aba-4"><span><span>Captcha com PHP</span></span></label>
 <ul>
 <li class="aba-1">
 <div class="conteudo">
 <h1>Simples slideshow</h1>
 <p>Mais uma postagem simples e bem usual. Um sistema de slideshow fácil, rápido e leve, apenas com jQuery e CSS.</p>
 <p>Poderá ser usado em banners laterais, animações de postagens e etc. </p>
 <p>Iniciando, vamos montar o CSS que definará a estrutura final do slide... </p>
 </div>
 </li>
 <li class="aba-2">
 <div class="conteudo">
 <h1>Algoritmo de Levenshtein</h1>
 <p>Atualmente fazer buscas on-line tem se tornado algo muito comum, quase tudo na internet gira em torno de simples buscas. </p>
 <p>Então decidi publicar um sistema simples, porém muito interessante que deixará seu sistema de busca muito legal. </p>
 <p> O PHP possui uma função nativa, levenshtein. seu manual mostra todos os detalhes do seu uso e implementação. </p>
 </div>
 </li>
 <li class="aba-3">
 <div class="conteudo">
 <h1>Barra de progresso</h1>
 <p>Uma barra de progresso pode ser um processo importante ao ocultar o carregamento de páginas ou/e arquivos. </p>
 <p>Então ter uma barra de progresso responsiva e sem usar Jquery, apenas usando CSS3 e JavaScript. Isso sem dúvida deixaria a sua aplicação um pouquinho mais leve. </p>
 </div>
 </li>
 <li class="aba-4">
 <div class="conteudo">
 <h1>Captcha com PHP</h1>
 <p>A postagem de hoje aborda um ponto importante para nós, que temos servidores públicos, que qualquer um pode acessar, comentar e etc.</p>
 <p>Com esse sistema, sem dúvida seus formulários ganharão mais segurança contra spammers. </p>
 </div>
 </li>
 </ul>
 </div>
</div>

CSS:

Κώδικας:

/* greekport.gr */
body {
 background-color:#eee
}
.area-total-abas {
 width: 630px;
 margin: 100px auto;
 min-height: 300px
}
.lista-abas, .lista-abas * {
margin:0;
padding:0;
outline:none;
border:0;
background:none
}
.lista-abas {
position:relative;
font-size:0;
text-align:left;
color:#666
}
.lista-abas > input {
position:absolute;
display:none
}
.lista-abas > label {
position:relative;
z-index:1;
display:inline-block;
box-sizing:border-box;
-moz-box-sizing:border-box;
padding:1px;
padding-top:0;
padding-left:0;
font-size:13px;
line-height:45px;
cursor:pointer
}
.lista-abas > label span {
display:block;
padding:5px;
background:rgba(255, 255, 255, .9)
}
.lista-abas > label span span {
padding:0 14px;
background:transparent;
transition:background .3s, color .4s;
-o-transition:background .3s, color .4s;
-ms-transition:background .3s, color .4s;
-moz-transition:background .3s, color .4s;
-webkit-transition:background .3s, color .4s
}
.lista-abas > label:hover span span {
background:#3498db;
color:#fff
}
.lista-abas > input:checked + label span span {
background:#3498db;
color:#fff
}
.lista-abas > ul {
list-style:none;
position:relative;
display:block;
font-size:13px
}
.lista-abas > ul > li {
position:absolute;
top:0;
left:0;
width:626px;
overflow:auto;
padding:20px 25px 25px;
background:rgba(255, 255, 255, .9);
box-sizing:border-box;
-moz-box-sizing:border-box;
opacity:0;
-o-transform-origin:0% 0%;
-ms-transform-origin:0% 0%;
-moz-transform-origin:0% 0%;
/* greekport.gr */
-webkit-transform-origin:0% 0%;
-o-transition:opacity .8s, -o-transform .8s;
-ms-transition:opacity .8s, -ms-transform .8s;
-moz-transition:opacity .8s, -moz-transform .8s;
-webkit-transition:opacity .8s, -webkit-transform .8s
}
.lista-abas > .aba-1:checked ~ ul > .aba-1,
.lista-abas > .aba-2:checked ~ ul > .aba-2,
.lista-abas > .aba-3:checked ~ ul > .aba-3,
.lista-abas > .aba-4:checked ~ ul > .aba-4 {
position:relative;
z-index:1;
opacity:1
}
.conteudo {
width:600px;
position:relative;
line-height:20px
}
.pagina-url {
float:right;
margin-top:15px
}
.amimacao-flip > ul {
perspective:2000px;
-o-perspective:2000px;
-ms-perspective:2000px;
-moz-perspective:2000px;
-webkit-perspective:2000px;
perspective-origin:50% 50%;
-o-perspective-origin:50% 50%;
-ms-perspective-origin:50% 50%;
-moz-perspective-origin:50% 50%;
-webkit-perspective-origin:50% 50%
}
.amimacao-flip > ul > li {
-o-transform:rotateX(-90deg);
-ms-transform:rotateX(-90deg);
-moz-transform:rotateX(-90deg);
-webkit-transform:rotateX(-90deg)
}
.amimacao-flip > .aba-1:checked ~ ul > .aba-1,
.amimacao-flip > .aba-2:checked ~ ul > .aba-2,
.amimacao-flip > .aba-3:checked ~ ul > .aba-3,
.amimacao-flip > .aba-4:checked ~ ul > .aba-4 {
-o-transform:rotateX(0deg);
-ms-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
-o-transition-delay:0.2s;
-ms-transition-delay:0.2s;
-moz-transition-delay:0.2s;
-webkit-transition-delay:0.2s
/* greekport.gr */

http://www.greekport.gr

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή  Μήνυμα [Σελίδα 1 από 1]


Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης

Τρόποι Κοινοποίησης:
URL:
BBCode:
HTML: