I have a few list elements that has a css triangle arrow after them. I'd like to add box-shadow around the arrow, but can't figure out why my shadow isn't working. I have tried following other solutions, but those solutions use ::after pseudo element to make the triangle, but my triangle is a separate div. any help is much appreciated.
#shippingsteps li {
padding: 15px 15px 15px 35px;
background: #ececec;
float: left;
display: block;
}
#shippingsteps li a {
color: #4A4947
}
#shippingsteps li span {
background: #7c7a7b;
color: white;
}
#shippingsteps li.active {
background: black;
color: white;
font-weight: bold
}
#shippingsteps li.active a {
color: white;
}
#shippingsteps li.active span {
background: #C60001;
color: white;
border-color: #C60001
}
#shippingsteps li::after {
border: none;
}
#shippingsteps li .nav-arrow {
border-color: transparent transparent transparent #ececec;
border-style: solid;
border-width: 31px 0 30px 20px;
;
height: 0;
position: absolute;
right: -19px;
top: 0;
width: 0;
z-index: 150;
}
#shippingsteps li .nav-arrow::after {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: transparent transparent transparent #ececec;
border-image: none;
border-style: solid;
border-width: 31px 0 30px 20px;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.4);
content: "";
position: absolute;
right: 3px;
top: -32px;
transform: rotate(31deg);
z-index: 100;
}
#shippingsteps li.active .nav-arrow {
border-color: transparent transparent transparent #000;
}
<ul class="clearfix" id="shippingsteps">
<li class="first active">
<div class="nav-arrow"></div>
<span>1</span><a data-target="checkout_login" href="#">
Checkout Method </a>
</li>
<li>
<div class="nav-arrow"></div>
<span>2</span><a data-target="billing_shipping" href="#">
Billing & Shipping</a>
</li>
<li>
<div class="nav-arrow"></div>
<span>3</span><a data-target="order_review" href="#">
Your Order & Payment</a>
</li>
<li><span>4</span><a href="#">
Confirmation</a>
</li>
</ul>
PS: Trying to put shadow around the grey triangles, the black one doesn't need any.
As previously answered in CSS box shadow around a custom shape? , you want to use the property filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)) with all vendor prefixes.
Related
How to create italic box in css like this
my code is
.ml {
list-style-type: none;
margin: 0;
padding: 0;
}
.ml li {
display: inline-block;
border: solid 1px #000;
font-style: italic;
padding: 5px 10px;
}
.ml li.active,
.ml li:hover {
background: #000;
color: #ffffff
}
<ul class="ml">
<li class="active">day</li>
<li>week</li>
<li>month</li>
<li>year</li>
</ul>
Just need to add skew property to your CSS
.ml {
list-style-type: none;
margin: 0;
padding: 0;
}
.ml li {
display: inline-block;
border: solid 1px #000;
font-style: italic;
padding: 5px 10px;
transform: skewX(-20deg);
}
.ml li.active,
.ml li:hover {
background: #000;
color: #ffffff
}
<ul class="ml">
<li class="active">day</li>
<li>week</li>
<li>month</li>
<li>year</li>
</ul>
The problem with some of the answers I've seen thus far is that the text becomes over-skewed. The <li>s are already italic, but adding skew to the elements makes the effect over-pronounced.
We want the boxes skewed, but the text left alone.
To do this, I add a span to each li and unskew the text in the inverse direction.
/* Keep things organized and store skew value in CSS variable */
:root {
--skew-value: -20deg;
}
.ml {
list-style-type: none;
margin: 0;
padding: 0;
}
.ml li {
display: inline-block;
border: solid 1px #000;
font-style: italic;
padding: 5px 10px;
/* Skew the box */
transform: skew(var(--skew-value));
}
.ml li > span {
/* Unskew the text */
transform: skew(calc(var(--skew-value) * -1));
display: inline-block;
}
.ml li.active,
.ml li:hover {
background: #000;
color: #ffffff
}
<ul class="ml">
<li class="active"><span>day</span></li>
<li><span>week</span></li>
<li><span>month</span></li>
<li><span>year</span></li>
</ul>
http://jsfiddle.net/xftywz1h/
Try this
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin:20px;
}
div#myDiv {
-ms-transform: skewX(-20deg); /* IE 9 */
-webkit-transform: skewX(-20deg); /* Safari */
transform: skewX(-20deg); /* Standard syntax */
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="myDiv">
This div element is skewed 20 degrees along the X-axis.
</div>
</body>
</html>
You can try this:
you can't show box font-style italic its needed transform and value skewX, because of the scewX rotate the box normally X-axis, and a box rotates this inner element or children auto rotate.
.ml{
list-style-type:none;margin:0;padding:0;}
.ml li {
display:inline-block;
border:solid 1px #000;
font-style:normal;
padding:5px 10px;
transform:skewX(-15deg);
text-transform: uppercase;
margin-right: 5px;
}
.ml li.active,
.ml li:hover {
background:#000; color:#ffffff
}
<ul class="ml">
<li class="active">day</li>
<li>week</li>
<li>month</li>
<li>year</li>
</ul>
Here what you need, You might need tot use one more wrapper to retain the border property
html
<ul class="ml">
<li class="active"><span>day</span></li>
<li><span>week</span></li>
<li><span>month</span></li>
<li><span>year</span></li>
</ul>
CSS
.ml li:after, .ml li span:after {
content: '';
position: absolute;
bottom: -1px;
right: -1.5px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 31px 5px;
border-color: transparent transparent #f8f8f8 transparent;
}
.ml li:before, .ml li span:before {
content: '';
position: absolute;
top: -1px;
left: 0px;
width: 0;
height: 0;
border-style: solid;
border-width: 30px 5px 0 0;
border-color: #000 transparent transparent transparent;
}
.ml li span:before{
left: -1px;
border-color: #F8F8F8 transparent transparent transparent;
}
.ml li span:after{
right: -0.5px;
border-color: transparent transparent #000 transparent;
}
jsfiddle see working copy here
I am trying to change from anchor tag to ul li but it doesn't seem to work.
Can you find out where I need to change CSS of my code?
Original link:https://codepen.io/arkev/pen/DzCKF
My code: https://codepen.io/SankS/pen/YRNzGK
<ul>
<li>Browse</li>
<li>Compare</li>
<li>Order Confirmation</li>
<li>Checkout</li>
</ul>
Minor changes in css and change 'active' class to li element
/*custom font*/
#import url(https://fonts.googleapis.com/css?family=Merriweather+Sans);
* {
margin: 0;
padding: 0;
}
html,
body {
min-height: 100%;
}
a{text-decoration:none;}
body {
text-align: center;
padding-top: 100px;
background: #689976;
background: linear-gradient(#689976, #ACDACC);
font-family: 'Merriweather Sans', arial, verdana;
}
.breadcrumb {
/*centering*/
display: inline-block;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
overflow: hidden;
border-radius: 5px;
/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
counter-reset: flag;
}
.breadcrumb li {
text-decoration: none;
outline: none;
display: block;
float: left;
font-size: 12px;
line-height: 36px;
color: white;
/*need more margin on the left of links to accomodate the numbers*/
padding: 0 10px 0 60px;
background: #666;
background: linear-gradient(#666, #333);
position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb li:first-child {
padding-left: 46px;
border-radius: 5px 0 0 5px;
/*to match with the parent's radius*/
}
.breadcrumb li:first-child:before {
left: 14px;
}
.breadcrumb li:last-child {
border-radius: 0 5px 5px 0;
/*this was to prevent glitches on hover*/
padding-right: 20px;
}
/*hover/active styles*/
.breadcrumb li.active,
.breadcrumb a:hover {
background: #333;
background: linear-gradient(#333, #000);
}
.breadcrumb li.active:after,
.breadcrumb li:hover:after {
background: #333;
background: linear-gradient(135deg, #333, #000);
}
/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb li:after {
content: '';
position: absolute;
top: 0;
right: -18px;
/*half of square's length*/
/*same dimension as the line-height of .breadcrumb a */
width: 36px;
height: 36px;
/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:
length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
if diagonal required = 1; length = 1/1.414 = 0.707*/
transform: scale(0.707) rotate(45deg);
/*we need to prevent the arrows from getting buried under the next link*/
z-index: 1;
/*background same as links but the gradient will be rotated to compensate with the transform applied*/
background: #666;
background: linear-gradient(135deg, #666, #333);
/*stylish arrow design using box shadow*/
box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
/*
5px - for rounded arrows and
50px - to prevent hover glitches on the border created using shadows*/
border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumb li:last-child:after {
content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb li:before {
content: counter(flag);
counter-increment: flag;
/*some styles now*/
border-radius: 100%;
width: 20px;
height: 20px;
line-height: 20px;
margin: 8px 0;
position: absolute;
top: 0;
left: 30px;
background: #444;
background: linear-gradient(#444, #222);
font-weight: bold;
}
.flat li,
.flat li:after {
background: white;
color: black;
transition: all 0.5s;
}
.flat li a {color:black;}
.flat li a:hover{background:none;}
.flat li:before {
background: white;
box-shadow: 0 0 0 1px #ccc;
}
.flat li:hover,
.flat li.active,
.flat li:hover:after,
.flat li.active:after {
background: #9EEB62;
}
<!-- a simple div with some links -->
<!-- another version - flat style with animated hover effect -->
<div class="breadcrumb flat">
<ul>
<li class="active">
Browse
</li>
<li>Compare</li>
<li>Order Confirmation</li>
<li>Checkout</li>
</ul>
</div>
<!-- Prefixfree -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
Try left floating the li tags to get the horizontal look:
.breadcrumb li {
float: left;
}
Try this, I think this will help you
.flat ul li{
float:left;
}
JavaScript
nav{
width: 100%;
height: 60px;
background: linear-gradient(to bottom, #fff, #bbb);
border-bottom: 1px solid #fff;
}
.wrapper{
max-width:1200px;
margin:0 auto;
}
li{
float:left;
width: 15%;
list-style: none;
margin-top: 5px;
}
a{
text-decoration: none;
box-sizing: border-box;
display: block;
padding: 10px 10px;
text-align: center;
color: #052537;
}
.nav01,
.nav03,
.nav05{
border-right: 1px solid #999999;
border-left: 1px solid #fff;
}
.nav02,
.nav04{
border-left: 1px solid #fff;
border-right: 1px solid #999999;
}
<nav>
<div class="wrapper">
<div class="nav-global">
<ul>
<li class="nav01">go1</li>
<li class="nav02">go2</li>
<li class="nav03">go3</li>
<li class="nav04">go4</li>
<li class="nav05">go5</li>
</ul>
</div>
</div>
</nav>
Nav bar
Hello, everyone, I have the problem to design the nav bar very first and the last border. I want to make borders like in the shared picture. I can't figure it out how to design nav01 first border and nav 05 last border because I want a combination of two borders as I did in nav02,nav03 and nav04. Please help me
One way is to use border and use different properties of border to get your desired result. You can experiment and be as creative as you can. Just for once, go through all the possibilities and what CSS is capable of. Then you can easily figure out which properties to combine to make your own prototype into code.
nav {
width: 100%;
background: #e4e4e4;
font-family: 'arial';
}
.navbar-ul a {
text-decoration: none;
list-style-type: none;
display: block;
float: left;
font-size: 20px;
width: 120px;
border: 1px solid #000;
text-align: center;
margin: 10px 0px;
border-left: none;
border-top: none;
border-bottom: none;
color: #1f1f1f;
}
ul a:last-child {
border-right: none;
}
li {
margin: 5px;
}
a:hover {
text-decoration: none !important;
}
li:hover {
margin: 5px;
background: #1f1f1f;
color: white;
text-decoration: none !important;
transition: all .2s;
border-radius: 4px;
}
.navbar-ul a:hover {
cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="clearfix">
<ul class="navbar-ul">
<a>
<li>Home</li>
</a>
<a>
<li>Profile</li>
</a>
<a>
<li>Contact</li>
</a>
<a>
<li>Blogs</li>
</a>
</ul>
</nav>
I got issue with my border right in my <li>
as you see the yellow right border is a bit trimmed at the bottom,I tried find a solution for this but I could not, this happen when the user zoom in the browser.
any ideas what can be?
this is my jsfiddle:
https://jsfiddle.net/veft8jw9/
You could use box shadows instead of borders like so:
.sidebar-nav li {
box-shadow: inset 0 -1px 0 0 blue;
padding: 15px;
}
.sidebar-nav li:hover {
box-shadow: inset 0 -1px 0 0 blue, inset -3px 0 0 0 red;
cursor: pointer;
}
it's the default rendering of border. when the borders are applied on same element, this is how they connect with adjacent border
You can use :after on li tags and display it on hover as shown in fiddle below.
div {
width: 200px;
height: 200px;
border: 50px solid;
border-color: red blue green yellow;
}
/* your solution */
.sidebar-nav li {
position: relative;
border-bottom: 1px solid blue;
padding: 15px;
}
.sidebar-nav li:hover:after {
content: '';
display: block;
border-right: 5px solid yellow;
position: absolute;
width: 5px;
height: 100%;
right: 0;
top: 0;
}
<div></div>
<h1>your solution</h1>
<ul class="sidebar-nav">
<li>link 1</li>
<li class="active" au-target-id="34">
link 2</li>
<li class="" au-target-id="34">
</ul>
CSS borders all have chamfers at their ends to fit with the connecting border.
I would suggest applying a wrapper around the bordered div with a yellow background. Then apply right padding to the bordered div to get the yellow area.
you can provide border with pseudo css, please use below css for same html.
.sidebar-nav li {
border-bottom: 1px solid blue;
padding: 15px;
position:relative;
}
.sidebar-nav li:hover {
cursor: pointer;
}
.sidebar-nav li:hover:after {
content:"";
position:absolute;
width:5px;
top:0px;
bottom:0px;
right:0px;
background:#f00;
}
I am trying to replicate the hover effects in my left navigation menu to my right sidebar as well. Currently, I have got so the hover box only covers the text. I want the hover box to fully cover the link area like in the left menu.
Website: http://chemipharmaceutical.com/wp/
CSS for the right side bar links:
#widget-link:hover, #widget-link.active {
background: none repeat scroll 0 0 #a00101;
line-height: 1.5rem;
}
.widget a, .widget a:link {
color: #fff;
padding: 10px 20px;
}
Any input is appreciated. Thank you
1) your #nav_menu-2 must have padding:0; (atleast for left and right)
2) your <a> in the menu must have display: block;
and that's it. Than you just have to play with margins and so one, to have identical spaces like in the left sidebar.
It looks like you are looking for the hover effects to be on the parent div, instead of the child div you are looking for.
Below is an example of a navbar with some transitions like the one you are looking at, and note the structure of it.
<li class="active">
<a href="#">
<span class="icon-home"></span>
<span class="text">home</span>
</a>
</li>
You are more than likely wrapping your hover effect around the <a> attribute, instead of the <li> tag
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Try a navbar like this example shows
It's even dynamic, as it collapses if the screen is resized.
$('li').click(function() {
$(this).addClass('active')
.siblings()
.removeClass('active');
});
* {
box-sizing: border-box;
}
body {
height: 100%;
background-color: #444;
}
h1 {
font-size: 1em;
text-align: center;
color: #eee;
letter-spacing: 1px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.nav-container {
width: 300px;
margin-top: 10px;
box-shadow: 0 2px 2px 2px black;
transition: all 0.3s linear;
}
.nav {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
height: 50px;
position: relative;
background: linear-gradient(#292929, #242424);
}
a {
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid black;
text-decoration: none;
display: block;
height: 100%;
width: 100%;
line-height: 50px;
color: #bbb;
text-transform: uppercase;
font-weight: bold;
padding-left: 25%;
border-left: 5px solid transparent;
letter-spacing: 1px;
transition: all 0.3s linear;
}
.active a {
color: #B93632;
border-left: 5px solid #B93632;
background-color: #1B1B1B;
outline: 0;
}
li:not(.active):hover a {
color: #eee;
border-left: 5px solid #FCFCFC;
background-color: #1B1B1B;
}
span[class ^="icon"] {
position: absolute;
left: 20px;
font-size: 1.5em;
transition: all 0.3s linear;
}
#media only screen and (max-width: 860px) {
.text {
display: none;
}
.nav-container,
a {
width: 70px;
}
a:hover {
width: 200px;
z-index: 1;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid black;
box-shadow: 0 0 1px 1px black;
}
a:hover .text {
display: block;
padding-left: 30%;
}
}
#media only screen and (max-width: 480px) {
.nav-container,
a {
width: 50px;
}
span[class ^="icon"] {
left: 8px;
}
}
<h1>Slowly resize screen to see the width transition</h1>
<div class="nav-container">
<ul class="nav">
<li class="active">
<a href="#">
<span class="icon-home"></span>
<span class="text">home</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-user"></span>
<span class="text">about</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-headphones"></span>
<span class="text">Audio</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-picture"></span>
<span class="text">Portfolio</span>
</a>
</li>
<li>
<a href="#">
<span class="icon-facetime-video"></span><span class="text">video</span>
</a>
</li>
</ul>
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Without seeing your markup here (i don't do external site links, apart from jsfiddle/codepen), then it's hard to advise any further