2

inserir a descrição da imagem aqui

Olá, tô com uma dificuldade aqui de tirar essa tonalidade fraca que esta nas setas, já mudei a cor varias vezese não fica com o azul escurto forte somente pega quando passa o mouse em cima. Segue o meu codigo. To usando o bootstrap 3`

HTML

 <!doctype html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- As 3 meta tags acima *devem* vir em primeiro lugar dentro do `head`; qualquer outro conteúdo deve vir *após* essas tags -->
    <title>Serviços de SEO</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">


  <body>
  <div class="container-header1">
    <div class="container">
      <div class="row">
        <div class="col-md-4" >
          <span class="glyphicon glyphicon-earphone"></span>&nbsp (+123) 456 7890 &nbsp &nbsp &nbsp 
          <span class="glyphicon glyphicon-envelope"></span>&nbsp [email protected]
        </div>   
        <div class="col-md-offset-5 col-md-3">
          Siga-nos &nbsp <i class="fab fa-facebook-f"></i>&nbsp &nbsp &nbsp
          <i class="fab fa-twitter"></i>&nbsp &nbsp &nbsp
          <i class="fab fa-google-plus-g"></i>&nbsp &nbsp &nbsp
          <i class="fab fa-linkedin-in"></i>
        </div>
      </div>
    </div>
  </div>
  <!--/header1-->
  <nav class="navbar navbar-default " id="mainNav">

    <div class="container ">
      <div class="row menus" >
        <div class="col-sm-5 col-md-5">
          <ul class="nav navbar-nav">
            <li><a href="#"><strong>HOME</strong></a></li>
            <li><a href="#"><strong>SOBRE NÓS</strong></a></li>
            <li><a href="#"><strong>SERVIÇOS</strong></a></li>
            <li><a href="#"><strong>ESTUDO DE CASO</strong></a></li>
          </ul>
        </div>
        <div class="col-sm-3 col-md-2">
          <a href="#">
            <img class="logo" src="img/logo.png" class="img-responsive">
          </a>
        </div>
        <div class="col-sm-4 col-md-5">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><strong>PAGINAS</strong></a></li>
            <li><a href="#"><strong>BLOG</strong></a></li>
            <li><a href="#"><strong>CONTATO</strong></a></li>
            <li><a href="#"><strong>TESTEMUNHOS</strong></a></li>
          </ul>
        </div>
      </div>
    </div>  
  </nav>
  <!-- /.navegação -->


  <!-- .Carousel -->     
  <div id="carouselHacked" class="carousel slide carousel-fade" data-ride="carousel">
        <!-- Indicators -->

        <!-- /Indicators -->

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="img/slider1.png" alt="">
                <div class="carousel-caption">
                caption 1
                </div>
            </div>
            <div class="item">
                <img src="img/slider2.jpg" alt="">
                <div class="carousel-caption">
                    caption 2
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carouselHacked" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>

        <a class="right carousel-control" href="#carouselHacked" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" class="seta-slide" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

  <!-- /.Carousel -->
    <!-- jQuery (obrigatório para plugins JavaScript do Bootstrap) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Inclui todos os plugins compilados (abaixo), ou inclua arquivos separadados se necessário -->
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript" src="script.js"></script>


  </body>
</html>

CSS

*{margin:0; padding: 0;}


/*Header Index*/
.container-header1{width: 100%; background-color: #006699; height: 33px; color: #fff; line-height: 33px;}

/*Menu/Nav Index*/
.menus{margin:auto; padding-top: 15px;}
.logo{padding-top: 3px; margin-left: 15px; }

/*Slide Index Fade*/
.carousel-fade .carousel-inner .item {opacity: 0; transition-property: opacity;}

.carousel-fade .carousel-inner .active {opacity: 1;}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {left: 0; opacity: 0; z-index: 1;}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right { opacity: 1;}

.carousel-fade .carousel-control {z-index: 2;}
/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: 
        translate3d(0, 0, 0);}

    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}

    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}
.carousel-control.left, .carousel-control.right{ background: none !important; filter: progid:none !important; }/*Remove gradiente do slide default do bootstrap*/

.carousel-fade .carousel-control .glyphicon-chevron-left, .carousel-fade .carousel-control .glyphicon-chevron-right{border-radius: 40px; border: 3px solid  #0473AA; padding-bottom: 45px;  padding-top: 9px; width: 55px; color: #0473AA; text-shadow: none;}

Obrigado.

2
  • Adicione (no final do seu CSS): .carousel-control, .carousel-control:focus, .carousel-control:hover { opacity: 1 } Commented 24/04/2018 às 21:48
  • Muito obrigado. Deu certo. Commented 24/04/2018 às 22:52

2 Respostas 2

2

Basta incluir no CSS o opacity: 1; na classe .carousel-control, referente aos botões:

.carousel-control, .carousel-control:hover {
   opacity: 1;
}

<!doctype html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- As 3 meta tags acima *devem* vir em primeiro lugar dentro do `head`; qualquer outro conteúdo deve vir *após* essas tags -->
    <title>Serviços de SEO</title>

    <!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <link href="style.css" rel="stylesheet">
    <style>
    *{margin:0; padding: 0;}


/*Header Index*/
.container-header1{width: 100%; background-color: #006699; height: 33px; color: #fff; line-height: 33px;}

/*Menu/Nav Index*/
.menus{margin:auto; padding-top: 15px;}
.logo{padding-top: 3px; margin-left: 15px; }

/*Slide Index Fade*/
.carousel-fade .carousel-inner .item {opacity: 0; transition-property: opacity;}

.carousel-fade .carousel-inner .active {opacity: 1;}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {left: 0; opacity: 0; z-index: 1;}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right { opacity: 1;}

.carousel-fade .carousel-control {z-index: 2;}

.carousel-control, .carousel-control:hover {
   opacity: 1;
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: 
        translate3d(0, 0, 0);}

    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}

    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}
.carousel-control.left, .carousel-control.right{ background: none !important; filter: progid:none !important; }/*Remove gradiente do slide default do bootstrap*/

.carousel-fade .carousel-control .glyphicon-chevron-left, .carousel-fade .carousel-control .glyphicon-chevron-right{border-radius: 40px; border: 3px solid  #0473AA; padding-bottom: 45px;  padding-top: 9px; width: 55px; color: #0473AA; text-shadow: none;}
    </style>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">


  <body>
  <div class="container-header1">
    <div class="container">
      <div class="row">
        <div class="col-md-4" >
          <span class="glyphicon glyphicon-earphone"></span>&nbsp (+123) 456 7890 &nbsp &nbsp &nbsp 
          <span class="glyphicon glyphicon-envelope"></span>&nbsp [email protected]
        </div>   
        <div class="col-md-offset-5 col-md-3">
          Siga-nos &nbsp <i class="fab fa-facebook-f"></i>&nbsp &nbsp &nbsp
          <i class="fab fa-twitter"></i>&nbsp &nbsp &nbsp
          <i class="fab fa-google-plus-g"></i>&nbsp &nbsp &nbsp
          <i class="fab fa-linkedin-in"></i>
        </div>
      </div>
    </div>
  </div>
  <!--/header1-->
  <nav class="navbar navbar-default " id="mainNav">

    <div class="container ">
      <div class="row menus" >
        <div class="col-sm-5 col-md-5">
          <ul class="nav navbar-nav">
            <li><a href="#"><strong>HOME</strong></a></li>
            <li><a href="#"><strong>SOBRE NÓS</strong></a></li>
            <li><a href="#"><strong>SERVIÇOS</strong></a></li>
            <li><a href="#"><strong>ESTUDO DE CASO</strong></a></li>
          </ul>
        </div>
        <div class="col-sm-3 col-md-2">
          <a href="#">
            <img class="logo" src="img/logo.png" class="img-responsive">
          </a>
        </div>
        <div class="col-sm-4 col-md-5">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><strong>PAGINAS</strong></a></li>
            <li><a href="#"><strong>BLOG</strong></a></li>
            <li><a href="#"><strong>CONTATO</strong></a></li>
            <li><a href="#"><strong>TESTEMUNHOS</strong></a></li>
          </ul>
        </div>
      </div>
    </div>  
  </nav>
  <!-- /.navegação -->


  <!-- .Carousel -->     
  <div id="carouselHacked" class="carousel slide carousel-fade" data-ride="carousel">
        <!-- Indicators -->

        <!-- /Indicators -->

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="">
                <div class="carousel-caption">
                caption 1
                </div>
            </div>
            <div class="item">
                <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="">
                <div class="carousel-caption">
                    caption 2
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carouselHacked" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>

        <a class="right carousel-control" href="#carouselHacked" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" class="seta-slide" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

  <!-- /.Carousel -->
    <!-- jQuery (obrigatório para plugins JavaScript do Bootstrap) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Inclui todos os plugins compilados (abaixo), ou inclua arquivos separadados se necessário -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script type="text/javascript" src="script.js"></script>


  </body>
</html>

1
  • Obrigado deu certo Commented 24/04/2018 às 22:53
-1

Apenas colocar filter: invert(1); em

.carousel-control-next{
    right: 20%;
    opacity: 1;
      filter: invert(1);
}
.carousel-control-prev{
    left: 20%;
    opacity: 1;
    filter: invert(1);
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .