Logo Hardware.com.br
TerraSkilll
TerraSkilll Zumbi Moderador
4K Mensagens 1.2K Curtidas
#3 Por TerraSkilll
04/09/2023 - 10:44
Esse tipo de efeito pode ser obtido com o uso de hover no css, que determina o que ocorre quando o mouse é colocado sobre um elemento da página. Na imagem, provavelmente está sendo alterado a escala (tamanho) do elemento e o sombreamento (box-shadow ). Como o A6 disse, se quiser ver o código exato, pode inspecionar o elemento da página de onde pegou esse print, embora provavelmente seja melhor começar com exemplos mais simples.
 
Referência:

- https://www.devmedia.com.br/hover-css-ativando-estilo-de-um-elemento/43498
- https://www.w3schools.com/cssref/sel_hover.php
- https://codepen.io/ovdojoey/pen/BomKyZ

Abraço.
Gabriel Rochadel
Gabriel Roch... Super Participante Registrado
359 Mensagens 31 Curtidas
#5 Por Gabriel Roch...
06/09/2023 - 21:17
Gabriel Roch... disse:
vou fazer do meu jeito kkk a tabela, depois volto aqui.

é um vídeo, não tem como inspecionar vídeos.

‎eu fiz a tabela, mas queria ter feito com table, tr,th,tbody, etc.. como é uma tabela, porém não consegui.

me ajude a melhorar meu código, deixando ele semanticamente correto, me ajude a deixar ele mais limpo, estou aprendendo semântica html:5, tem algo que eu precise melhorar no código meu?


código html:

[code=html]<![/color]DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Documenttitle>
head>
<body>
    <section>

        <div class="centro">
            <h1>STANDARDh1>
            <div class="preco"><p>R$: 9,90p> <p>PER MONTHp>div>
            <ul>
                <li>10GB <P>Disk SpaceP>li>
                <li>200GB <P>BandwidthP>li>
                <li>20 <P>Emails AccountsP>li>
                <li>Unlimited <P>SubdomainsP>li>
                <li>Full <P>Time SupportP>li>
            ul>
            <button>Sign upbutton>
        div>

        <div class="centro">
            <h1>PROFESSIONALh1>
            <div class="preco azul"><p>R$: 16,90p> <p>PER MONTHp>div>
            <ul>
                <li>20GB <P>Disk SpaceP>li>
                <li>300GB <P>BandwidthP>li>
                <li>30 <P>Emails AccountsP>li>
                <li>Unlimited <P>SubdomainsP>li>
                <li>Full <P>Time SupportP>li>
            ul>
            <button class="azul">Sign upbutton>
        div>

        <div class="centro">
            <h1>PREMIUMh1>
            <div class="preco verde"><p>R$: 21,90p> <p>PER MONTHp>div>
            <ul>
                <li>50GB <P>Disk SpaceP>li>
                <li>500GB <P>BandwidthP>li>
                <li>50 <P>Emails AccountsP>li>
                <li>Unlimited <P>SubdomainsP>li>
                <li>Full <P>Time SupportP>li>
            ul>
            <button class="verde">Sign upbutton>
        div>

        <div class="centro">
            <h1>SUPREMEh1>
            <div class="preco laranja"><p>R$: 9,90p> <p>PER MONTHp>div>
            <ul>
                <li>10GB <P>UnlimitedP>li>
                <li>200GB <P>UnlimitedP>li>
                <li>20 <P>UnlimitedP>li>
                <li>Unlimited <P>SubdomainsP>li>
                <li>Full <P>UnlimitedP>li>
            ul>
            <button class="laranja">Sign upbutton>
        div>
        <div class="clear">div>

    section>
body>
html>[/font][/size][/color]


abaixo código css da pasta css:

[size=2][font=Consolas, "Courier New", monospace][color=#569cd6]*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    font-family-removed: tahoma;
}
.clear{
    clear: both;
}

section{
    text-align: center;
    margin: 50px auto;
    width: 1024px;
    border: 1px solid #efeaea;

}

div.centro{
    float:left;
    margin: 0 auto;
    width: 25%;
    transition: 500ms ;

}
section h1{
    font-size-removed: 16px;
    padding: 15px 10px;
    color: #636262;

}

section div.preco{
    background-color: #656161;
    padding: 15px;
    color: white;
}

section div.preco p {
    font-size-removed: 25px;
}
section div p:last-child{
    font-size-removed: 10px;
    margin-top: 5px;
}

section ul li{
    font-size-removed: 15px;
    font-weight: bolder;
    padding: 20px;
    color: rgb(55, 54, 54);
    border-bottom: 1px solid #f2f0f0;
}

section ul li p{
    color: #b0aeae;
}

section button{
    width: 80px;
    border: 0;
    background-color: #656161;
    padding: 6px;
    color: white;
    border-bottom: solid 1px rgb(65, 63, 63) ;
    margin: 15px;
    -webkit-box-shadow: 0px 3px 9px -2px rgba(0,0,0,0.61);
    -moz-box-shadow: 0px 3px 9px -2px rgba(0,0,0,0.61);
    box-shadow: 0px 3px 9px -2px rgba(0,0,0,0.61);

}

section div.azul, button.azul{
    background-color: rgb(5, 182, 217);
    border-bottom: solid 1px rgb(5, 142, 169);
}
section div.verde, button.verde{
    background-color: rgb(18, 195, 151);
    border-bottom: solid 1px rgb(8, 164, 125);
}
section div.laranja, button.laranja{
    background-color: rgb(248, 83, 6);
    border-bottom: solid 1px rgb(208, 75, 13);
}

section div.centro:hover , div.preco:hover{
    position: relative;
    cursor: pointer;
    -webkit-box-shadow: 0px 4px 8px 3px rgba(0,0,0,1);
    -moz-box-shadow: 0px 4px 8px 3px rgba(0,0,0,1);
    box-shadow: -2px 0px 10px 6px rgb(142, 141, 141);
    border: 0;
    z-index: 0;

}

@media screen and (max-width: 1050px){
   section{
    width: 96%;
   }
    section div.centro{
        width: 50%;
       
    }
   
}
@media screen and (max-width: 768px){
     section div.centro{
         width: 100%;
     }
     
 }[/code]
esquiloesperto
esquiloesper... Cyber Highlander Moderador
7.1K Mensagens 2.2K Curtidas
#7 Por esquiloesper...
09/09/2023 - 04:03
Ficou muito bom mesmo! Parabéns!

No entanto é possível obter resultado idêntico usando tabelas também, visto que elas são elementos de bloco tal como as .
Veja só:

<!DOCTYPE html>

<html lang="pt-br">

<head>

    ...

</head>

<body>

    <section>

        <table class="centro">

            <thead><tr><th>STANDARD</th></tr></thead>

            <tbody>

                <tr><td class="preco"><p>R$: 9,90</p> <p>PER MONTH</p></td></tr>

                <tr><td>10GB <P>Disk Space</P></td></tr>

                <tr><td>200GB <P>Bandwidth</P></td></tr>

                <tr><td>20 <P>Emails Accounts</P></td></tr>

                <tr><td>Unlimited <P>Subdomains</P></td></tr>

                <tr><td>Full <P>Time Support</P></td></tr>

                <tr><td><button>Sign up</button></td></tr>

            </tbody>

        </table>



        <table class="centro">

            <thead><tr><th>PROFESSIONAL</th></tr></thead>

            <tbody>

                <tr><td class="preco azul"><p>R$: 16,90</p> <p>PER MONTH</p></td></tr>

                <tr><td>20GB <P>Disk Space</P></td></tr>

                <tr><td>300GB <P>Bandwidth</P></td></tr>

                <tr><td>30 <P>Emails Accounts</P></td></tr>

                <tr><td>Unlimited <P>Subdomains</P></td></tr>

                <tr><td>Full <P>Time Support</P></td></tr>

                <tr><td><button class="azul">Sign up</button></td></tr>

            </tbody>

        </table>



        <table class="centro">

            <thead><tr><th>PREMIUM</th></tr></thead>

            <tbody>

                <tr><td class="preco verde"><p>R$: 21,90</p> <p>PER MONTH</p></td></tr>

                <tr><td>50GB <P>Disk Space</P></td></tr>

                <tr><td>500GB <P>Bandwidth</P></td></tr>

                <tr><td>50 <P>Emails Accounts</P></td></tr>

                <tr><td>Unlimited <P>Subdomains</P></td></tr>

                <tr><td>Full <P>Time Support</P></td></tr>

                <tr><td><button class="verde">Sign up</button></td></tr>

            </tbody>

        </table>



        <table class="centro">

            <thead><tr><th>SUPREME</th></tr></thead>

            <tbody>

                <tr><td class="preco laranja"><p>R$: 9,90</p> <p>PER MONTH</p></td></tr>

                <tr><td>10GB <P>Unlimited</P></td></tr>

                <tr><td>200GB <P>Unlimited</P></td></tr>

                <tr><td>20 <P>Unlimited</P></td></tr>

                <tr><td>Unlimited <P>Subdomains</P></td></tr>

                <tr><td>Full <P>Unlimited</P></td></tr>

                <tr><td><button class="laranja">Sign up</button></td></tr>

            </tbody>

        </table>

        <div class="clear"></div>

    </section>

  </body>

</html>





– CSS  ** (Basicamente apenas mudança de nomes para os elementos de tabelas):



*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



section {

    text-align: center;

    margin: 50px auto;

    width: 1024px;

    border: 1px solid #efeaea;

}



.centro {

    float:left;

    margin: 0 auto;

    width: 25%;

    transition: 500ms;

    border-collapse: collapse;

}



.centro th {

    padding: 15px 10px;

    color: #636262;



}



.centro td {

    font-weight: bolder;

    padding: 20px;

    color: rgb(55, 54, 54);

    border-bottom: 1px solid #f2f0f0;

}



.centro tr:last-child td {

    border: none;

}



button {

    width: 80px;

    border: 0;

    background-color: #656161;

    padding: 6px;

    color: white;

    border-bottom: solid 1px rgb(65, 63, 63);

    -webkit-box-shadow: 0 3px 9px -2px rgba(0,0,0,0.61);

    -moz-box-shadow: 0 3px 9px -2px rgba(0,0,0,0.61);

    box-shadow: 0 3px 9px -2px rgba(0,0,0,0.61);

}



td p {

    color: #b0aeae;

}



.centro td p:last-child {

    margin-top: 5px;

}



.preco {

    background-color: #656161;

    padding: 15px;

}



.preco p {

    color: white;

}



.azul {

    background-color: rgb(5, 182, 217);

    border-bottom: solid 1px rgb(5, 142, 169);

}



.verde {

    background-color: rgb(18, 195, 151);

    border-bottom: solid 1px rgb(8, 164, 125);

}



.laranja {

    background-color: rgb(248, 83, 6);

    border-bottom: solid 1px rgb(208, 75, 13);

}



.centro:hover {

    position: relative;

    cursor: pointer;

    -webkit-box-shadow: 0 4px 8px 3px rgba(0,0,0,1);

    -moz-box-shadow: 0 4px 8px 3px rgba(0,0,0,1);

    box-shadow: -2px 0 10px 6px rgb(142, 141, 141);

    z-index: 0;

}



.preco:hover {

    filter: drop-shadow(2px 0 4px rgba(0,0,0,1));

}



.clear {

    clear: both;

}



@media screen and (max-width: 1050px) {

    section {

        width: 96%;

    }

    

    .centro {

        width: 50%;

    }

}



@media screen and (max-width: 768px) {

    .centro {

        width: 100%;

    }

}


Anexo do post
Gabriel Rochadel
Gabriel Roch... Super Participante Registrado
359 Mensagens 31 Curtidas
#8 Por Gabriel Roch...
09/09/2023 - 19:51
esquiloesper... disse:
Ficou muito bom mesmo! Parabéns!

No entanto é possível obter resultado idêntico usando tabelas também, visto que elas são elementos de bloco tal como as <divs>.
Veja só:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    ...
</head>
<body>
    <section>
        <table class="centro">
            <thead><tr><th>STANDARD</th></tr></thead>
            <tbody>
                <tr><td class="preco"><p>R$: 9,90</p> <p>PER MONTH</p></td></tr>
                <tr><td>10GB <P>Disk Space</P></td></tr>
                <tr><td>200GB <P>Bandwidth</P></td></tr>
                <tr><td>20 <P>Emails Accounts</P></td></tr>
                <tr><td>Unlimited <P>Subdomains</P></td></tr>
                <tr><td>Full <P>Time Support</P></td></tr>
                <tr><td><button>Sign up</button></td></tr>
            </tbody>
        </table>

        <table class="centro">
            <thead><tr><th>PROFESSIONAL</th></tr></thead>
            <tbody>
                <tr><td class="preco azul"><p>R$: 16,90</p> <p>PER MONTH</p></td></tr>
                <tr><td>20GB <P>Disk Space</P></td></tr>
                <tr><td>300GB <P>Bandwidth</P></td></tr>
                <tr><td>30 <P>Emails Accounts</P></td></tr>
                <tr><td>Unlimited <P>Subdomains</P></td></tr>
                <tr><td>Full <P>Time Support</P></td></tr>
                <tr><td><button class="azul">Sign up</button></td></tr>
            </tbody>
        </table>

        <table class="centro">
            <thead><tr><th>PREMIUM</th></tr></thead>
            <tbody>
                <tr><td class="preco verde"><p>R$: 21,90</p> <p>PER MONTH</p></td></tr>
                <tr><td>50GB <P>Disk Space</P></td></tr>
                <tr><td>500GB <P>Bandwidth</P></td></tr>
                <tr><td>50 <P>Emails Accounts</P></td></tr>
                <tr><td>Unlimited <P>Subdomains</P></td></tr>
                <tr><td>Full <P>Time Support</P></td></tr>
                <tr><td><button class="verde">Sign up</button></td></tr>
            </tbody>
        </table>

        <table class="centro">
            <thead><tr><th>SUPREME</th></tr></thead>
            <tbody>
                <tr><td class="preco laranja"><p>R$: 9,90</p> <p>PER MONTH</p></td></tr>
                <tr><td>10GB <P>Unlimited</P></td></tr>
                <tr><td>200GB <P>Unlimited</P></td></tr>
                <tr><td>20 <P>Unlimited</P></td></tr>
                <tr><td>Unlimited <P>Subdomains</P></td></tr>
                <tr><td>Full <P>Unlimited</P></td></tr>
                <tr><td><button class="laranja">Sign up</button></td></tr>
            </tbody>
        </table>
        <div class="clear"></div>
    </section>
  </body>
</html>


– CSS  ** (Basicamente apenas mudança de nomes para os elementos de tabelas):

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

section {
    text-align: center;
    margin: 50px auto;
    width: 1024px;
    border: 1px solid #efeaea;
}

.centro {
    float:left;
    margin: 0 auto;
    width: 25%;
    transition: 500ms;
    border-collapse: collapse;
}

.centro th {
    padding: 15px 10px;
    color: #636262;

}

.centro td {
    font-weight: bolder;
    padding: 20px;
    color: rgb(55, 54, 54);
    border-bottom: 1px solid #f2f0f0;
}

.centro tr:last-child td {
    border: none;
}

button {
    width: 80px;
    border: 0;
    background-color: #656161;
    padding: 6px;
    color: white;
    border-bottom: solid 1px rgb(65, 63, 63);
    -webkit-box-shadow: 0 3px 9px -2px rgba(0,0,0,0.61);
    -moz-box-shadow: 0 3px 9px -2px rgba(0,0,0,0.61);
    box-shadow: 0 3px 9px -2px rgba(0,0,0,0.61);
}

td p {
    color: #b0aeae;
}

.centro td p:last-child {
    margin-top: 5px;
}

.preco {
    background-color: #656161;
    padding: 15px;
}

.preco p {
    color: white;
}

.azul {
    background-color: rgb(5, 182, 217);
    border-bottom: solid 1px rgb(5, 142, 169);
}

.verde {
    background-color: rgb(18, 195, 151);
    border-bottom: solid 1px rgb(8, 164, 125);
}

.laranja {
    background-color: rgb(248, 83, 6);
    border-bottom: solid 1px rgb(208, 75, 13);
}

.centro:hover {
    position: relative;
    cursor: pointer;
    -webkit-box-shadow: 0 4px 8px 3px rgba(0,0,0,1);
    -moz-box-shadow: 0 4px 8px 3px rgba(0,0,0,1);
    box-shadow: -2px 0 10px 6px rgb(142, 141, 141);
    z-index: 0;
}

.preco:hover {
    filter: drop-shadow(2px 0 4px rgba(0,0,0,1));
}

.clear {
    clear: both;
}

@media screen and (max-width: 1050px) {
    section {
        width: 96%;
    }
   
    .centro {
        width: 50%;
    }
}

@media screen and (max-width: 768px) {
    .centro {
        width: 100%;
    }
}


‎muito obrigado, ajudou bastante no meu desenvolvimento rs
© 1999-2024 Hardware.com.br. Todos os direitos reservados.
Imagem do Modal