2

estou a tentar fazer no meu website um botão que seja sticky, ao clicar nesse botão, ele faz um collapse right e mostra um container com um certo numero de cores disponiveis para o utilizador escolher, o utilizador ao escolher a pallette de cores, o site mudará a cor do layout para a pallette escolhida pelo user...

Meu codigo até ao momento...

HTML:

<!---- color changer ---->

    <div class="color-chg">
        <a href="#" class="color-btn"><i class="ion-ios-settings-strong"></i></a> 
    </div>

CSS:

.color-chg {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
    z-index: 2000;
}

/* Stylyng the icon */
.color-chg a {
  display: block;
  text-align: center;
  padding: 30px;
  transition: all 0.3s ease;
  color: white;
  font-size: 100%;
}

.color-chg a:hover {
  background-color: white;
    color: #74c8d2;
    border: 2px solid #74c8d2;
}

.color-btn {
    border: 2px solid transparent;
  background: #74c8d2;
  color: white;
}

O que eu quero:

inserir a descrição da imagem aqui

Por favor me deem umas dicas, eu não faço a minima ideia de como fazer isso, pesquisei, mas não encontro nada na internet, estive a verificar o codigo fonte desse site, mas não ajuda muito...

Obrigado pessoal!

2
  • Cara acho que a melhor forma de fazer isso hj seja com CSS Variables, currente-color, inherit e JS. Mas é algo que vc tem que ser planejar no início do projeto. Para implementar isso no site depois de iniciado o desenvolvimento pode ser algo bem trabalhoso... Se for algo mais simples para trocar a cor só de uma coisa ou outra, apenas entre 2 cores por exemplo me fala que te dou uma mão
    – hugocsl
    Commented 8/05/2018 às 2:03
  • Não, mas o meu problema é mesmo em construir a estrutura estática, ou seja o container com as cores, o collapse, etc... O resto consigo fazer com javascript pois já tenho o esquema planeado... Commented 8/05/2018 às 2:19

2 Respostas 2

1

Cara apenas a parte do collapse com as cores vc pode fazer usando o position:fixed e transition com right para colocar a paleta escondida para fora da tela.

Fiz um exemplo bem simples apenas da parte do collapse, a dinâmica para ele trocar as cores dos outros elementos depois de clicado vou deixar por sua conta. Ele usa flex, então sempre que vc adicionar mais cores ele vai quebrando a linha de 4 em 4

Como falei é um exemplo simples, mas com o que tem ai de CSS vc consege desenvolver bem mais esse componente.

Veja como ficou:

html, body {
    width: 100%;
    height: 200%;
    margin: 0;
    padding: 0;
}

.cores {
    display: flex;
    width: 200px;
    position: fixed;
    right: -160px;
    top: 20%;
    transition: right 350ms;
}
.btn {
    width: 40px;
    height: 40px;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255,0.6);
    font-size: 2rem;
    transition: color 350ms;
    cursor: pointer;
    line-height: 0;
}
.btn:hover {
    color: rgba(255, 255, 255,1);
}
#btn {
    display: none;
}
.paleta {
    box-sizing: border-box;
    border: 1px solid black;
    width: 160px;
    margin: 0;
    padding: 1rem;
    background-color: #eee;
    display: flex;
    flex-wrap: wrap
}
.paleta h4 {
    margin: 0 0 0.5em;
    width: 100%;
}
.paleta .box {
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: 1px solid #666;
    cursor: pointer;
    opacity: 0.65;
    transition: background-color 350ms;
}
.paleta .box:hover {
    opacity: 1;
}
.paleta .box.red {
    background-color: red;
}
.paleta .box.blue {
    background-color: blue;
}
.paleta .box.green {
    background-color: green;
}
.paleta .box.purple {
    background-color: purple;
}
.paleta .box.orange {
    background-color: orange;
}
.paleta .box.black {
    background-color: black;
}
input:checked + .cores {
    right: 0;
}
input:checked + .cores > .btn {
    color: rgba(255, 255, 255,1);
}
<input type="checkbox" id="btn">
<div class="cores">
    <label for="btn" class="btn" role="checkbox">&#x270E;</label>
    <div class="paleta">
        <h4>Cores</h4>
        <div class="box red"></div>
        <div class="box blue"></div>
        <div class="box green"></div>
        <div class="box purple"></div>
        <div class="box orange"></div>
        <div class="box black"></div>
    </div>
</div>

2
  • Mais uma vez muito obrigado amigo! Me ajudou muito mesmo! Commented 9/05/2018 às 9:19
  • Sem problemas @NelsonPacheco qq duvida eh só perguntar abs
    – hugocsl
    Commented 9/05/2018 às 9:52
1

Você pode via javascript ao clicar nas cores adicionar uma class ao body e criar um css para cada cor.

JS:

$(document).ready(function(){$("#azul_bt").click(function(){$("body").toggleClass("skin_azul");

CSS:

body.skin_azul h1 {
    color: blue;
}

Seria um pouco trabalhoso e o ideal seria montar tudo já pensando nessa transição, porém funciona.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .