Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
10
respostas

Seletores avançados

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Selecionando qualquer coisa e atividade Seletores avançados

por Davilson Lopes Rodrigues
| 85k xp | 117 posts
Photodesigner

Olá pessoal,

Gostaria de fazer um degradê de uma tag a outra, sem mexer no html. No caso section class="mapa" até o final da section class="beneficios".

tentei usar a seguinte declaração no css, mas o resultado foi dois degradês.

.mapa, .beneficios {
    background: linear-gradient(#f4f4f4, #888888);
}

É possível usar seletores sem mexer no html ?

html completo da aula.

<!DOCTYPE html>

<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title>Barbearia Alura</title>

        <link rel="stylesheet" href="folha de estilo/reset.css">
        <link rel="stylesheet" href="folha de estilo/style.css">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    </head>

    <body>
        <header>
            <div class="caixa">
                <h1><img src="imagens/logo.png" alt="Logo da Barbearia Alura"></h1>

                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>

        <img class="banner" src="imagens/bannerMod.jpg">

        <main>
            <section class="principal">

                <h2 class="titulo-principal">Sobre a Barbearia Alura</h2>

                <img class="utensilios" src="imagens/utensilios.jpg" alt="Utensilios de um barbeiro.">

                <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

                <p><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

                <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
            </section>

            <section class="mapa">
                <h3 class="titulo-principal">Nosso estabelecimento</h3>
                <p>Nosso estabelecimento está localizado no coração da cidade.</p>

                <div class="mapa-conteudo">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.427770373201!2d-46.4017076826352!3d-23.588986799041827!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce6f82ea4e6343%3A0x7c37ff456a30672e!2sRua%20Eduardo%20Sanchez%2C%2071%20-%20Cidade%20Tiradentes%2C%20S%C3%A3o%20Paulo%20-%20SP%2C%2008475-180!5e0!3m2!1spt-BR!2sbr!4v1589235845556!5m2!1spt-BR!2sbr" width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>    
                </div>
            </section>

            <section class="beneficios">
                <h3 class="titulo-principal">Benefícios</h3>

                <div class="conteudo-beneficios">
                    <ul class="lista-beneficios">
                        <li class="itens">Atendimento aos Clientes</li>
                        <li class="itens">Espaço Diferenciado</li>
                        <li class="itens">Localização</li>
                        <li class="itens">Profissionais Qualificados</li>
                        <li class="itens">Pontualidade</li>
                        <li class="itens">Limpeza</li>
                    </ul><img class="imagem-beneficios" src="imagens/beneficiosMod.jpg">
                </div>


                <div class="video">
                    <iframe  width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
            </section>
        </main>

        <footer>
            <img src="imagens/logo-branco.png">
            <p class="copyright">&copy; Copyright Barbearia Alura - 2019</p>
        </footer>
    </body>
</html>
10 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Davilson, tudo bem? Vamos la:

É possível usar seletores sem mexer no html ?

Sim, seletores CSS são agnósticos do HTML, ou seja, você pode escrever o seletor que quiser, o máximo que pode acontecer é o mesmo não ser aplicado em caso onde o match não existiu ou o elemento não existe na página.

Agora falando sobre o problema, eu não entendi muito bem, consegue dar mais exemplo ou mandar algum print do que está precisando fazer?

Fico no aguardo.

por Davilson Lopes Rodrigues
| 85k xp | 117 posts
Photodesigner

Como que coloco um print aqui no fórum?

por Davilson Lopes Rodrigues
| 85k xp | 117 posts
Photodesigner

Oi Matheus Castiglioni,

vou colocar aqui um link do google para um print.

Print do projeto.

A ideia é fazer com que o degradê inicie lá no título "Nosso estabelecimento", e termine no final da seção "Benefícios" que termina lá depois do vídeo, ok! Repare que a forma que eu fiz, ficou dois degradês dividindo os elementos.

Quero, tentar marcar com seletores no css dois elementos html separados por section e aplicar um estilo de continuidade como degradê, fazendo isso só com o css.

Se fosse cor sólida a declaração citada no começo já resolvia.

Sei que posso criar uma "div com class" juntando esse dois elementos, mas a idéia, é treinar isso como se fosse uma manutenção, e que mexer no html seria problemático.

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala Davilson, saquei, nesse caso o ideal seria aplicar o degrade no pai dos dois e deixar as duas seções com transparent no background.

Não sei como está a estrutura da página, mas, tente aplicar no elemento pai das duas seções, pode ser um main o body, vai depender da estrutura da sua página.

Espero ter ajudado.

por Davilson Lopes Rodrigues
| 85k xp | 117 posts
Photodesigner

Oi Matheus Castiglioni,

Sobre a dica de colocar o degradê no elemento pai, por exemplo "main". ele acaba pegando todas as seções. A ideia é livrar a primeira seção e pegar a partir da segunda e terceira seção.

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala Davilson, então, nesse caso precisa adaptar a estrutura, como eu não sei como está, a ideia seria algo assim:

<body>
    <header>...</header>
    <main>
    </main>
        <section>...</section>
        <div> // você aplicaria nesse elemento, que seria o pai das duas seções
            <section>...</section>
            <section>...</section>
        </div>
    </main>
    <footer>...</footer>
</body>

Dessa maneira, ele iria ignorar os outros elementos e aplicar apenas nos dois que seriam o objetivos.

Espero ter ajudado.

por Davilson Lopes Rodrigues
| 85k xp | 117 posts
Photodesigner

Oi Matheus Castiglioni.

Perfeito, isto funciona,

Mas seria legal se o css tivesse um seletor que fizesse justamente isso que vc fez, agrupar as duas seções em "div" fletando em um elemento, no html eles ainda estariam com seus irmãos, mas para o css os dois irmão selecionados, seria um elemento.

Uma analogia de sintax: Se eu pudesse escrever isso no css, seria algo assim: rs!

main section:fletar-elementos (section 2, section 3) {
    background: linear-gradient(#f4f4f4, #888888);
}
/* Pronto! fundiu as duas seções, rs! */

Mas nas minhas tentativas, fiz uma gambiarra com 2 gradient, sem mexer no html e funcionou também. Print do projeto.

Usando a ferramenta inspecionar elementos, eu descobri o valor da cor no meio "50%" do meu gradient observe que o valor rgb que finaliza o primeiro gradient é o mesmo que inicia o segundo gradient. Considerando isso, meu css ficou assim.

.mapa {
    background: linear-gradient(#f4f4f4, rgb(191, 191, 191));
}
.beneficios {
    background: linear-gradient(rgb(191, 191, 191), #888888);
}

Considerando a nossa condição inicial de não mexer na estrutura do html, É ruim uma solução de quebrar o degradê em 2 ?

Obrigado!

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala Davilson, tudo bem? Essa necessidade pode ser aplicada de N jeitos, a mais simples a que eu te mandei, você agrupa os dois em um pai e aplica nele.

Também daria para fazer como você comentou, calculando o quanto de background foi aplicado na primeira parte e depois continuar dali para a segunda, mas, acho que não vale o esforço, uma vez que com o pai fica muito simples.

Para o CSS fazer isso é um pouco complicado, pois, cada caixa seria um box, então ele juntar os dois acabaria quebrando um pouco o conceito do mesmo.

Espero ter ajudado.

por Davilson Lopes Rodrigues
| 85k xp | 117 posts
Photodesigner

Oi Matheus Castiglioni!

Sempre aprendo muito aqui no forum com vc's.

Muito obrigado!

solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Magina Davilson, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.