CSS-тени и закругленные углы в бутстраповых вкладках

Есть ли какие-либо css-хаки, чтобы сделать это изображение ниже с помощью разметки загрузочной накидки bootstrap? Имея округленные углы с тенями в нем?CSS-тени и закругленные углы в бутстраповых вкладках

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> 
 
    <li class="active"><a href="#red" data-toggle="tab">ABOUT OUR SEASONINGS</a></li> 
 
    <li><a href="#orange" data-toggle="tab">GET RECIPE IDEAS</a></li> 
 
    <li><a href="#yellow" data-toggle="tab">INGREDIENTS & NUTRITION INFO</a></li> 
 
</ul> 
 
<div id="my-tab-content" class="tab-content"> 
 
    <div class="tab-pane active" id="red"> 
 
    <h1>Red</h1> 
 
    <p>red red red red red red</p> 
 
    </div> 
 
    <div class="tab-pane" id="orange"> 
 
    <h1>Orange</h1> 
 
    <p>orange orange orange orange orange</p> 
 
    </div> 
 
    <div class="tab-pane" id="yellow"> 
 
    <h1>Yellow</h1> 
 
    <p>yellow yellow yellow yellow yellow</p> 
 
    </div> 
 
</div> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

enter image description here

Я имею в виду, что делает его

источник

2015-04-15 Vincent

Там нет 'хаки', вы просто должны восстановить рестайл по умолчанию навигационные вкладки. В частности, посмотрите на «border-bottom» в классе «nav-tabs». Дайте ему какую-то тень. Restyle 'nav-tabs> li> a', придать ему цвет фона, некоторые тени и т. Д. –

Если вы можете показать нам, какие попытки вы сделали, чтобы добавить тени, мы могли бы помочь дальше. Я не уверен, что «хаки» - это то, что вы после ... просто правильный CSS. –

@nationalholiday Спасибо за комментарий, но я уже ожидал этого и много раз думал о том, что мне следует сделать, чтобы сделать этот тип макета в чистом CSS, но если вы посмотрите внимательно на изображение, тени и вкладки довольно сложно реализовать css – Vincent

Попробуйте что-то вроде этого

CSS:

.nav-tabs{ 
     box-shadow: 0px 0px 10px #777; 
} 
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{ 
     -webkit-transform: perspective(30) rotateX(10deg); 
}

источник

2015-04-16 06:02:54 Arun

Здесь я предоставляю полный пример создания панели вкладок начальной загрузки с закругленной рамкой.

$(function(){ 
 
    $('#myTab a').click(function (e) { 
 
     e.preventDefault(); 
 
     $(this).tab('show'); 
 
    }) 
 
    });

html{ 
 
    margin: 20px 10px auto; 
 
    font-family: arial,sans-serif; 
 
} 
 
.nav:after, 
 
.nav:before { 
 
    content:""; 
 
    display: table; 
 
} 
 
.nav:after { 
 
    clear:both; 
 
    overflow:hidden; 
 
} 
 
.nav { 
 
    zoom: 1; 
 
    margin-left: 20px; 
 
     padding-bottom: 3px; 
 
} 
 
.nav li { 
 
    list-style: none outside none; 
 
    float: left; 
 
    position: relative; 
 
} 
 
.nav .active { 
 
    z-index: 3; 
 
} 
 
.nav li:before, 
 
.nav li:after, 
 
.nav a:before, 
 
.nav a:after { 
 
    content:""; 
 
    position: absolute; 
 
    bottom:0; 
 

 
} 
 

 
.nav a { 
 
    float: left; 
 
    padding: 10px 40px; 
 
    text-decoration: none; 
 
    color: #fff; 
 
    background: rgb(97, 142, 70); 
 
    border-radius: 5px 5px 0 0; 
 
    -webkit-transform: perspective(30) rotateX(10deg); 
 
} 
 
.nav .active a { 
 
    background: #F66599; 
 
    color:#BE3569; 
 
    -webkit-transform: perspective(30) rotateX(10deg); 
 
} 
 

 

 

 
.nav a:before { 
 
    left:-20px; 
 
} 
 
.nav a:after { 
 
    right: -20px; 
 
} 
 

 
.nav .active:before, 
 
.nav .active:after { 
 
    z-index: 1; 
 
    background: #F66599; 
 
} 
 

 
.nav li:first-child a:before, 
 
.nav li:last-child a:after { 
 
    background-color: #fff; 
 
} 
 
.tab-content { 
 
    background: rgba(60, 118, 61, 0.17);; 
 
    color:#444444; 
 
    padding: 20px; 
 
} 
 
.tab-pane { 
 
    display: none; 
 
} 
 
.tab-pane.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<ul class="nav nav-tabs" id="myTab"> 
 
    <li class="active"><a href="#home">Home</a></li> 
 
    <li><a href="#portfolio">Portfolio</a></li> 
 
    <li><a href="#messages">Messages</a></li> 
 
    <li><a href="#settings">Settings</a></li> 
 
</ul> 
 
    
 
<div class="tab-content"> 
 
    <div class="tab-pane active" id="home">Home page</div> 
 
    <div class="tab-pane" id="portfolio">Portfolio page</div> 
 
    <div class="tab-pane" id="messages">Messages page</div> 
 
    <div class="tab-pane" id="settings">Setting page</div> 
 
</div>

Для добавления CSS тени используют следующие CSS

.tab-content { -webkit-box-shadow: 0px -5px 14px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px -5px 14px 1px rgba(0,0,0,0.75); box-shadow: 0px -5px 14px 1px rgba(0,0,0,0.75); }

jsfiddle: jsfiddle link

Ref: w3codeschool.com

источник

2017-07-20 10:08:15

CSS-тени и закругленные углы в бутстраповых вкладках

ответ

Смежные вопросы