Jump to content
Artes Ussler

Barra estilo sublinhado

Recommended Posts

Olá

 

Depois de muita pesquisa e testes, consegui fazer o CSS do assunto em questão aqui:

 

<style type="text/css">
h1 {
	position:relative; font-family:"Open Sans"; display:block; color:#000; font-size:1.4em; font-weight:700; text-transform:uppercase; text-align:center
}
h1:after {
	position:absolute; bottom:-5px; left:0; right:0; margin:auto; width:60px; content:'.'; color:transparent; background:#f26522; height:3px
}
p {
	font-family:"Open Sans"; color:#999; font-size:0.9em;
}
</style>
<h1>TÍTULO</h1>
<p>Meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui, meu texto aqui.</p>

Se está correto? Não sei, mas funcionou, fez o que eu precisava.

Estou postando aqui para que outras pessoas, assim como eu, iniciante, estejam buscando ajuda neste sentido.

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 kikekun
      Olá!
      Eu queria fazer um criador de personagens para colocar na web, e tomei como base este código aqui: https://codepen.io/kristenmay/pen/kkkdBr pra fazer em javascript, mas ainda ta limitado pro que eu quero.
      Preciso de um botão que altere mais de uma imagem ao mesmo tempo (por exemplo: pra fazer com que duas imagens de cabelo apareçam ao mesmo tempo, uma na camada da frente, outra na de trás);  um botão para alterar as cores das imagens (até consegui colocar essa barra de HUE, mas ela só muda a cor da primeira imagem, e quando passa, volta pro padrão (esse vermelho que coloquei em todas pra facilitar). mas o ideal mesmo seria um botão especifico pra o tipo de imagem que esteja sendo mudada, por exemplo... o de cabelos mudaria a cor da imagem entre moreno; castanho claro; castanho escuro; branco; loiro claro; loiro escuro; e ruivo... já o botão de cor da pele mudaria entre branco; pardo; asiatico e negro); e um botão de download para as pessoas baixarem seu personagem criado = P Da pra fazer isso? como eu faço? xD (posso tentar postar o codigo em algum lugar se precisar)

      Ta assim:

    • By 4Unknow
      Boa tarde pessoal.
      Estou criando uma página. Editando na verdade.
      Gostaria de saber se é possível deixar o texto retinho do lado direito igual está ao lado esquerdo.
      Existe alguma forma para fazer isso?
       
      Agradeço pela ajuda.
       
       

    • By Patrick Gabrel
      <html>   <head> <style> body{     background: #ecf0f1; }   #container-main{     margin:40px auto;     width:95%;     min-width:320px;     max-width:960px; }   #container-main h1{     font-size: 40px;     text-shadow:4px 4px 5px #16a085; }   .accordion-container {     width: 100%;     margin: 0 0 20px;     clear:both; }   .accordion-titulo {     position: relative;     display: block;     padding: 20px;     font-size: 24px;     font-weight: 300;     background: #fd0404;     color: rgb(0, 0, 0);     text-decoration: none; } .accordion-titulo.open {     background: #ff0000;     color: #fff; } .accordion-titulo:hover {     background: #1abc9c; }   .accordion-titulo span.toggle-icon:before {     content:"+"; }   .accordion-titulo.open span.toggle-icon:before {     content:"-"; }   .accordion-titulo span.toggle-icon {     position: absolute;     top: 10px;     right: 20px;     font-size: 38px;     font-weight:bold; }   .accordion-content {     display: none;     padding: 20px;     overflow: auto; }   .accordion-content p{     margin:0; }   .accordion-content img {     display: block;     float: left;     margin: 0 15px 10px 0;     width: 50%;     height: auto; }   @media (max-width: 767px) {     .accordion-content {         padding: 10px 0;     } } </style>     <script>         $(function(){ $(".accordion-titulo").click(function(e){   e.preventDefault();   var abra=$(this).next(".accordion-content");   if(abra.css("display")=="none"){ //open        abra.slideDown(250);             $(this).addClass("open"); } else{ //close      abra .slideUp(250); $(this).removeClass("open");     }   }); });     </script> </head> <body> <div id="container-main">   <h1>Os Mitos do Fut</h1>   <div class="accordion-container">   <a href="#" class="accordion-titulo">Messi<span class="toggle-icon"></span></a> <div class="accordion-content"> <img src="http://e0.365dm.com/15/05/660x350/champions-league-barcelona-bayern-munich-soccer-messi_3299830.jpg?20150506214236" alt=""/> <p>                     Biografia de Lionel Messi                     Lionel Messi (1987) é um jogador de futebol argentino que joga no time Barcelona. Foi considerado o melhor jogador do mundo por várias vezes e campeão por três anos consecutivos.                       Lionel Andrés Messi (1987) nasceu em Rosário, na Argentina, no dia 24 de junho de 1987.                     Revelou interesse pelo futebol desde a infância. Jogou num pequeno clube chamado Abanderado Grandoli, localizado perto de sua casa. Aos 7 anos, entrou para jogar no time Newell's Old Boys. Messi enfrentou problemas hormonais que lhe impedia o crescimento de forma natural.                    Por isso, fez tratamento com medicação injetável.                 </p> </div>   </div>   <div class="accordion-container"> <a href="#" class="accordion-titulo">CR7 (C.Ronaldo)<span class="toggle-icon"></span></a> <div class="accordion-content"> <img src="http://www.abc.es/Media/201301/10/cristiano-ronaldo--644x362.jpg" alt=""/> <p>                   </p> </div> </div>   </div> </body> </html>
    • By KABEst
      boa noite, é meu primeiro post aqui, eu preciso de ajuda pra colocar um "churrascômetro" no meu site do wordpress, nao tenho noçao nenhuma de como fazer isso, alguem pode me dar um norte? é pra um trabalho da faculdade. obrigado

      exemplo de como eu quero fazer:
      http://www.epa.com.br/churrascometro/
    • By Gih Peixoto
      Boa noite, eu preciso fazer uma linha do tempo, e queria que ela fosse animada, por exemplo: quando o usuário da scroll na tela, as informações  (imagens)  começam a aparecer. Eu achei um código para essa parte, mas eu não queria que a imagem simplesmente brotasse na tela, eu queria que ela deslizasse dos cantos da tela e parasse do lado da linha. Alguém sabe como fazer algo parecido com isso? Espero que de para entender a explicação.
×

Important Information

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