Jump to content
lezão

div box com texto

Recommended Posts

Boa noite!

Td bem com vcs?

 

Meus amigos, estou precisando de um css que eu não faço ideia por onde começar ja pesquisei e nada.

só encontrei como imagem, vejam.

btn_week.png

 

será que tem como fazer em css desse modelo, o texto tem q ficar sobreposto a cor do fundo.

 

Share this post


Link to post
Share on other sites
7 horas atrás, lezão disse:

Meus amigos, estou precisando de um css que eu não faço ideia por onde começar ja pesquisei e nada.

Duvido muito que tenha pesquisado, pois se tivesse pesquisado teria chegado a 

https://developer.mozilla.org/

 

Enfim, depende de conceitos de como e quais características os elementos vão se empregados.

<style>
    .conter {
        position: relative;
        height: 200px;
        width: 240px /* Depende do tamanho do texto */
    }
    .circulo {
        /* Criando o circulo */
        height: 200px;
        width: 200px;
        border-radius: 50%;
        /* Adicionando a sombra */
        box-shadow: 8px 10px 10px rgba(0,0,0,.8);
        /* Plano de fundo gradiente */
        background-image: linear-gradient(180deg, rgba(255,0,0,0), rgba(255,10,100,1));
        margin-left: 20px /* Depende da lagura do "conter" "(X - Y) / 2 = ?" */
    }
    .texto {
        /* Posicionando o texto */
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        /* Propriedades do texto */
        color: #ffffff;
        font-size: 90px;
        text-shadow: 6px 3px 6px rgba(0,0,0,.8);
    }
</style>

<div class="conter">
    <div class="circulo"></div>
    <div class="texto">Weeks</div>
</div>

 

Share this post


Link to post
Share on other sites

Boa noite, Omar~!

td bem com você?

 

muito obrigado pela sua ajuda, deu certinho.

vlw, fica com Deus!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By FabianoSouza
      Pessoal, é possível abrir uma nova aba/janela do navegador dentro de uma DIV?
      Como faço?
       
      Pergunto isso porque o IFRAME não vai funcionar para o meu objetivo (já testei).
       
      Estou tentando adaptar esse código JQUERY para o Javascript puro, pra saber se a ideia funciona (não manjo de JQUERY).
      https://stackoverflow.com/questions/33296867/how-to-open-the-content-inside-a-div-tag-in-new-tab
       
      Grato.
    • By Alberto Nascimento
      Como faço que consiga colocar parágrafos no campo tipo "text" do formulário?
          <input name="Text1" style="width: 528px; height: 223px" type="text" /></form>
      Se eu pressiono ENTER automaticamente envia o formulário
      Como então consigo digitar ao preencher o formulário da forma abaixo?
       
    • By kaioneresm
      Olá boa tarde, alguem sabe um codigo javascript facil que sirva para abrir uma div como se fosse um pou-up no centro da tela e dentro dela conter um X para fechá-la? 
       
      obrigado!!
    • By luiz monteiro
      E aí pessoal!
      Minha questão de hoje é a seguinte, ao usar o display inline-block ou inline-flex ocorre um desalinhamento dos blocos. Tentei usar outro inline, porem sem sucesso.
      Para melhor visualizar o que quero dizer, anexo esta uma print do resultado indesejável.
      Preciso que os blocos fiquem alinhados, porem ao inserir duas divs  (2 e 3) no terceiro bloco ocorre o desalinhamento.
      Vou deixar o código para melhor entender.
       
      //==================HTML
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <title></title>
          <link rel="stylesheet" type="text/css" href="./css/style.css">
      </head>
      <body>

          <div class="container">
              
              <div class="blocos">0</div>
              
              <div class="blocos">1</div>
              
              <div class="blocos">
                  <div class="linhas">2</div>
                  <div class="linhas">3</div>
              </div>
              
              <div class="blocos">4</div>
          </div>
       
      </body>
      </html>
       
       
      //================== CSS
      @charset "utf-8";
      *
      {
          margin: 0px;
          padding: 0px;
          list-style: none;
          resize: none;
          outline: none;
          text-decoration: none;
      }
      html, body
      {
          width: 100%;
          overflow-x: hidden;
          font-family: verdana;
          letter-spacing: 1.5555px;
          font-weight: normal;
      }
      .container
      {
          width: 100%;
          padding-left: 13px;
          background: #000;
      }
      .blocos
      {
          display: inline-block;
          width: 300px;
          height: 250px;
          background: #888;
      }
      .linhas
      {
          background: #f60;
          width: 100%;
          height: 122px;
          margin-bottom: 2px;
      }
       
      Agradeço desde já.
       
       
       

    • By kaioneresm
      Olá, tenho um form que pede um codigo enviado por email para o usuário confirmar, essa mesma pagina já está gerada o código dentro de uma variável. 
      O que eu preciso é que no momento que o usuário digitar o codigo nesse input text que é composto de 6 digitos, o botão submit habilite (mas somente se o que foi digitado corresponder a variavel). 
       
      Segue abaixo o meu Form.
       
      <input type="text" class="textenv" maxlength="6" placeholder="Digite o código enviado:"></input> <button type="submit" class="btncria" >Confimar<font color="#fff"></font></button> Alguem sabe como utilizar js nesse caso? Muito obrigado!!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.