Toggle Lateral: HTML, CSS, sem JavaScript | PromoveFácil

HTML

CSS

PHP

MySQL

DESIGN

SEO

MARKETING

INTERNET

TECNOLOGIA

NEGÓCIO

USABILIDADE

TENDÊNCIA

OUTRAS
Você está aqui: PromoveFácil » CSS » Toggle Lateral: HTML, CSS, sem JavaScript

Toggle Lateral: HTML, CSS, sem JavaScript

16 de março de 2021

Durante a escolha dos elementos de um projeto você pode imaginar mais de mil e uma soluções que encaixam dentro do requisito de um projeto, isto vale também para as soluções adaptadas para que haja menos confusão durante o desenvolvimento e faz abranger mais detalhes que podem ser pensados para serem enriquecidos diante de tantas questões levantadas durante um conversa que dá início ao desenrolar de cada design de tela resolvida por ser consequente de cada solução selecionada.

Tenha em mãos cada solução em um repertório que faça existir menos complicação para depender menos da mão de obra e levantar mais questões sobre o desenvolvimento de cada profissional à se tornar aliado para que medida adotada para o desenvolvimento de arquitetura de um projeto.

Não decida apenas por haver mais soluções, adotar à medida do possível o caminho mais otimizado é a melhor rotina a ser adotada.

Aliar as medidas em que se torne propenso à tornar o projeto ainda mais viável frente a posição adotada para que se possa passar despercebido todo o conteúdo em que se coloca em prova para manter e selecionar os melhores refúgios durante o desenvolvimento de um projeto. Por isso, seja cauteloso diante de cada solução em que fora adotada, pois nem sempre você terá algo simples para derrubar um conceito já adotado.

Confira clicando neste LINK dentro de suas expectativas a solução dada para um Toggle sem JavaScript.

ARQUIVO .HTML:

 

<html>
<head>

<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">

</head>

<body>

<div class="topoLogia">

<div class="divisao divisaoAzul">

<div class="menuAzul">
<p class="soletra soletraAzul">BOAS VINDAS</p>
</div>

<div class="divLogin">
<h1 class="divisaoTitle">BOAS VINDAS</h1>
<form action="" method="POST">

<p class="pPhraseLoginFirst">
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"
<br/><br/>

<input class="campoLogin" name="campoLogin" placeholder="LOGIN:" />

</p>

</br >
<p class="pPhraseLoginSecond">
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"
<br/><br/>
<input class="campoSenha" name="campoSenha" placeholder="SENHA:" />

</p>


<div class="divBtLogin">

<input class="btLogin" type="submit" name="login" value="ENTRAR" />

</div>


</form>

</div>

</div>

<div class="divisao divisaoLaranja">

<div class="menuLaranja">
<p class="soletra soletraLaranja">CADASTRAR</p>
</div>

<div class="divLogin">

<h1 class="divisaoTitle">SISTEMA DE CADASTRO</h1>

<form action="" method="POST">

<p class="pPhraseLoginFirst">
The standard Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"
<br/>

<input type="text" class="campoLogin" name="campoLogin" placeholder="LOGIN:" />

</p>

</br >
<p class="pPhraseLoginSecond">
Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"
<br/>
<input type="text" class="campoSenha" name="campoEmail" placeholder="EMAIL:" />

</p>

</br >
<p class="pPhraseLoginSecond">
Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"
<br/><br/>
<input type="password" class="campoSenha" name="campoSenha" placeholder="SENHA:" />

</p>


<div class="divBtSignIn">

<input class="btSignUp" type="submit" name="login" value="CADASTRAR" />

</div>

</form>

</div>

</div>

<div class="divisao divisaoVermelho">

<div class="menuVermelho">
<p class="soletra soletraVermelho">VERIFICAR</p>
</div>

<div class="divLogin">
<h1 class="divisaoTitle">SISTEMA DE VERIFICAÇÃO</h1>
<form action="" method="POST">

<p class="pPhraseLoginFirst">
Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"
<br/><br/>

<input class="campoLogin" name="campoLogin" placeholder="LOGIN:" />

</p>

</br >
<p class="pPhraseLoginSecond">
The 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"
<br/><br/>
<input class="campoSenha" name="campoSenha" placeholder="SENHA:" />

</p>

<div class="divBtLogin">

<input class="btLogin" type="submit" name="login" value="ENTRAR" />

</div>


</form>

</div>

</div>





























<div class="divisao divisaoVerde">

<div class="menuVerde">
<p class="soletra soletraVerde">EXCLUIR</p>
</div>

<div class="divLogin">
<h1 class="divisaoTitle">SISTEMA DE EXCLUSÃO</h1>
<form action="" method="POST">

<p class="pPhraseLoginFirst">
Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"
<br/><br/>

<input class="campoLogin" name="campoLogin" placeholder="LOGIN:" />

</p>

</br >
<p class="pPhraseLoginSecond">
The 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"
<br/><br/>
<input class="campoSenha" name="campoSenha" placeholder="SENHA:" />

</p>

<div class="divBtLogin">

<input class="btLogin" type="submit" name="login" value="ENTRAR" />

</div>


</form>

</div>

</div>

</div>

</body>

</html>

ARQUIVO .CSS:

* {
padding:0;
margin:0 auto;
border:0;
}

body {
font-family: 'Roboto', sans-serif;
}

.topoLogia {
width:450px;
min-height:530px;
}

.divisao {
width:450px;
height:600px;
position:absolute;
top:150px;
}

.soletra {
font-size:14px;
color:#ffffff;
text-align:center;
position:relative;
top:110px;
}

.divisaoTitle {
font-size:22px;
margin-bottom:25px;
color:#ffffff;
}

/*
DIVISAO AZUL: ENTRAR
*/

.menuAzul, .menuVerde, .menuLaranja, .menuVermelho {
cursor:pointer;
}

.divisaoAzul {
background:#4267B2;

}

.menuAzul {
width:150px;
height:150px;
position:relative;
top:0px;
left:-300px;
z-index:999;
background:#4267B2 url(images/entrar.png) no-repeat 45px 45px;
}

.menuAzul {
background:#4267B2 url(images/entrar.png) no-repeat 45px 45px;
}

.divisaoAzul:hover, .menuAzul:hover {
z-index:999999999;
}

/*
DIVISAO LARANJA: SISTEMA DE CADASTRO
*/

.menuLaranja {
width:150px;
height:150px;
position:relative;
top:150px;
left:-300px;
background:#FF6600 url(images/cadastrar.png) no-repeat 45px 45px;
z-index:999;
}

.divisaoLaranja:hover, .menuLaranja:hover {
background:#FF6600;
z-index:999999999;
}

.menuLaranja:hover {
background:#FF6600 url(images/cadastrar.png) no-repeat 45px 45px;
}

/*
DIVISAO VERDE: SISTEMA DE VERIFICAÇÃO
*/

.menuVerde {
width:150px;
height:150px;
position:relative;
top:450px;
left:-300px;
z-index:999;
background:#FF3333 url(images/excluir.png) no-repeat 45px 45px;
}

.divisaoVerde:hover, .menuVerde:hover {
z-index:999999999;
}

.divisaoVerde {
background:#FF3333;
min-height:344px;
z-index:998;
}

.divisaoVerde {
background:#FF3333;
z-index:998;
}

/*
DIVISAO VERMELHA: SISTEMA DE EXCLUSAO
*/

.menuVermelho {
width:150px;
height:150px;
position:relative;
top:300px;
left:-300px;
z-index:999;
background:#999900 url(images/verificar.png) no-repeat 45px 45px;
}

.divisaoVermelho:hover, .menuVermelho:hover {
z-index:999999999;
}

.divisaoVermelho {
background:#999900;
min-height:344px;
z-index:998;
}

.divisaoVermelho {
background:#999900;
z-index:998;
}


/*
CAMPOS DE ENTRADA: INPUT
*/

.campoLogin, .campoSenha, .campoEmail {
width:280px;
height:15px;
padding:20px;
}

.divBtLogin {
width:280px;
height:40px;
margin-top:38px;
text-align:center;
line-height:5%;
}

.divLogin {
width:280px;
margin:0 auto;
position:relative;
top:-50px;
}

.pPhraseLoginFirst, .pPhraseLoginSecond {
color:#f5f5f5;
}

.btLogin {
width:280px;
padding:15px 40px;
cursor:pointer;
background:#0099CC;
color:#ffffff;
}

.btSignUp {
width:280px;
padding:15px 40px;
margin-top:20px;
background:#0099CC;
color:#ffffff;
}

Adotada a solução, você deve permanecer os estudos para melhor adaptação de novos incrementos possíveis para que possa dar um plus do que foi desenvolvido e tornando personalizável cada concebimento que você possa adotar e acoplar ao seu gosto desde a origem percebida até a sua implantação.

Últimos posts por Fábio Pereira (exibir todos)

Artigo Relacionados:

Política de privacidade | Termos de Uso

CNPJ: 33.891.552/0001-96 - © PROMOVEFÁCIL LTDA.

TODOS OS DIREITOS RESERVADOS