Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Malu Stecca

Borda arredondada no CSS

Por , em Desenvolvimento frontend

Recommended Posts

wilnet    92

wilnet
Postado

Olá Malu, blza!

 

Segue mais um link, bem simples de implementar e entender.

 

Veja Link

 

Para ver o CSS dele basta clicar no Menu acima "CSS & Result", e HTML & Result"

 

No HTML é inserida a Imagem dentro do CSS <figure> e a DIV : <div class="overlay"></div> que irá dar o efeito de Circulo.

 

Basta trabalhar no CSS para ter outros efeitos tb.

 

 

Qualquer dúvida posta ae pra nóis rsrs.

 

Espero ter ajudado,

 

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Malu Stecca    0

Malu Stecca
Postado

To aprendendo ...

 

Eu quero que só 3 imagens fiquem arredondadas...

 

Eu mudo no html e no css, é isso?

 

Ai que ignorância gente ! To me sentindo burra !

 

 

<style>

    /* GLOBAL STYLES
    -------------------------------------------------- */
    /* Padding below the footer and lighter body text */

    body {
      padding-bottom: 40px;
      color: #5a5a5a;
    }



    /* CUSTOMIZE THE NAVBAR
    -------------------------------------------------- */

    /* Special class on .container surrounding .navbar, used for positioning it into place. */
    .navbar-wrapper {
      position: relative;
      z-index: 10;
      margin-top: 20px;
      margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
    }

    /* Remove border and change up box shadow for more contrast */
    .navbar .navbar-inner {
      border: 0;
      -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
         -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
              box-shadow: 0 2px 10px rgba(0,0,0,.25);
    }

    /* Downsize the brand/project name a bit */
    .navbar .brand {
      padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
      font-size: 16px;
      font-weight: bold;
      text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    }

    /* Navbar links: increase padding for taller navbar */
    .navbar .nav > li > a {
      padding: 15px 20px;
    }

    /* Offset the responsive button for proper vertical alignment */
    .navbar .btn-navbar {
      margin-top: 10px;
    }



    /* CUSTOMIZE THE NAVBAR
    -------------------------------------------------- */

    /* Carousel base class */
    .carousel {
      margin-bottom: 60px;
    }

    .carousel .container {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
    }

    .carousel-control {
      background-color: transparent;
      border: 0;
      font-size: 120px;
      margin-top: 0;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
    }

    .carousel .item {
      height: 500px;
    }
    .carousel img {
      min-width: 100%;
      height: 500px;
    }

    .carousel-caption {
      background-color: transparent;
      position: static;
      max-width: 550px;
      padding: 0 20px;
      margin-bottom: 100px;
    }
    .carousel-caption h1,
    .carousel-caption .lead {
      margin: 0;
      line-height: 1.25;
      color: #fff;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
    }
    .carousel-caption .btn {
      margin-top: 10px;
    }



    /* MARKETING CONTENT
    -------------------------------------------------- */

    /* Center align the text within the three columns below the carousel */
    .marketing .span4 {
      text-align: center;
    }
    .marketing h2 {
      font-weight: normal;
    }
    .marketing .span4 p {
      margin-left: 10px;
      margin-right: 10px;
    }


    /* Featurettes
    ------------------------- */

    .featurette-divider {
      margin: 80px 0; /* Space out the Bootstrap <hr> more */
    }
    .featurette {
      padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
      overflow: hidden; /* Vertically center images part 2: clear their floats. */
    }
    .featurette-image {
      margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
    }

    /* Give some space on the sides of the floated elements so text doesn't run right into it. */
    .featurette-image.pull-left {
      margin-right: 40px;
    }
    .featurette-image.pull-right {
      margin-left: 40px;
    }

    /* Thin out the marketing headings */
    .featurette-heading {
      font-size: 50px;
      font-weight: 300;
      line-height: 1;
      letter-spacing: -1px;
    }



    /* RESPONSIVE CSS
    -------------------------------------------------- */

    @media (max-width: 979px) {

      .container.navbar-wrapper {
        margin-bottom: 0;
        width: auto;
      }
      .navbar-inner {
        border-radius: 0;
        margin: -20px 0;
      }

      .carousel .item {
        height: 500px;
      }
      .carousel img {
        width: auto;
        height: 500px;
      }

      .featurette {
        height: auto;
        padding: 0;
      }
      .featurette-image.pull-left,
      .featurette-image.pull-right {
        display: block;
        float: none;
        max-width: 40%;
        margin: 0 auto 20px;
      }
    }


    @media (max-width: 767px) {

      .navbar-inner {
        margin: -20px;
      }

      .carousel {
        ;
        margin-right: -20px;
      }
      .carousel .container {

      }
      .carousel .item {
        height: 300px;
      }
      .carousel img {
        height: 300px;
      }
      .carousel-caption {
        width: 65%;
        padding: 0 70px;
        margin-bottom: 40px;
      }
      .carousel-caption h1 {
        font-size: 30px;
      }
      .carousel-caption .lead,
      .carousel-caption .btn {
        font-size: 18px;
      }

      .marketing .span4 + .span4 {
        margin-top: 40px;
      }

      .featurette-heading {
        font-size: 30px;
      }
      .featurette .lead {
        font-size: 18px;
        line-height: 1.5;
      }

    }
    </style>

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

Olá Malu,

 

É assim mesmo todo início de aprendizado, o que diferencia será sua dedicação e empenho nesse aprendizado para se sair bem.

 

Uma regra do fórum, quando postar CODE, clique no Menu de inserir "Código" <> nas ferramentas acima, desta forma seus code ficaram no padrão do fórum e mais legíveis.

 

OBS: Procure em sua Página HTML, as <Div> ou as "class" dentro da sua Imagem para saber tb onde procurar no CSS depois.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Tava lendo sobre as classes do Bootstrap, e tem uma que faz as imagens ficarem em forma de circulo. Basta adicionar: 

class="img-circle"

na tag da imagem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Malu Stecca    0

Malu Stecca
Postado

Tava lendo sobre as classes do Bootstrap, e tem uma que faz as imagens ficarem em forma de circulo. Basta adicionar: 

class="img-circle"

na tag da imagem.

 

 

Já esta assim, mas a imagem fica oval !

 

<div class="row">
            <div class="col-sm-4">
                <img class="img-circle img-responsive img-center" img src="img/portico1.jpg" alt="">
                <h2>Pórticos</h2>
                <p>These marketing boxes are a great place to put some information. These can contain summaries of what the company does, promotional information, or anything else that is relevant to the company. These will usually be below-the-fold.</p>
            </div>
            
            <div class="col-sm-4">
                <img class="img-circle img-responsive img-center" img src="img/ponte.jpg" alt="">
                <h2>Talhas</h2>
                <p>The images are set to be circular and responsive. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            </div>
            
            <div class="col-sm-4">
                <img class="img-circle img-responsive img-center" src="http://placehold.it/300x300" alt="">
                <h2>Marketing Box #3</h2>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            </div>
            
        </div><!-- /row -->

Compartilhar este post

Link para o post
Compartilhar em outros sites

itlpps    109

itlpps
Postado

Coloque isso no css, e ajuste os pixels para que fique do jeito que você quer

 img{ border-radius: 100px;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

você deve procurar em seu CSS essa Class que está nas imagens:

 

 

Na página HTML

 

<img

class="img-circle img-responsive img-center"

img src="img/portico1.jpg" alt="">

 

 

No CSS

 

Deve estar no "bootstrap.min.css"

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maykel-ctba    233

Maykel-ctba
Postado

Se a imagem fica oval é pq vc nao tem a altura e largura iguais. Determine uma altura e largura fixos em pixel para ficar redonda.

<img src="http://placehold.it/200x200" width="200" height="200" class="img-circle" />

Compartilhar este post

Link para o post
Compartilhar em outros sites

Malu Stecca    0

Malu Stecca
Postado

 

Se a imagem fica oval é pq você nao tem a altura e largura iguais. Determine uma altura e largura fixos em pixel para ficar redonda.

<img src="http://placehold.it/200x200" width="200" height="200" class="img-circle" />

Exatamente isso !! Assim que eu mudei de imagem, ficou redonda!

Galera vlw pela ajuda !!

 

 

Vlw todos vcs !!

 

:natalbiggrin:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito