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
Related
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;
}
This question already has answers here:
Add outward curving border to elements like this: ◝◟___◞◜
(3 answers)
Closed 7 years ago.
I can't find a non-ugly (no extra markup or fixed width) way to do draw the Firefox tab shape with CSS.
Even Mozilla use a png image.
if you use a basic <nav> or a list (<ul>) , you could achieve this from a single link(<a>) and pseudo-elements DEMO
nav,
ul {
padding: 0 0 0.25em;
}
li {
display: inline-block;
padding: 0 1.2em;
}
li a {
display: inline-block;
line-height: 2em;
color: white;
padding: 0 0.5em;
border-radius: 0 0 2em 2em/2.5em;
position: relative;
}
li a:before,
li a:after {
content: '';
position: absolute;
height: 2em;
width: 1.25em;
top: 0;
}
li a:before {
right: 100%;
border-radius: 0 1em 0 0/1.5em
}
li a:after {
left: 100%;
border-radius: 1em 0 0 0/1.5em
}
nav {
background: #0976B8;
}
li a:hover,
li a.active {
background: white;
color: #0976B8
}
li a:hover:before,
li a.active:before {
box-shadow: 0.5em -1em 0 white;
}
li a:hover:after,
li a.active:after {
box-shadow: -0.5em -1em 0 white;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
tune the border-radius to the shape you look for
Codepen Demo
Okay, I have come up with an extremely messy solution, but, it only requires a single HTML element:
#charset "UTF-8";
body, html {
margin: 0;
width: 100%;
height: 100%;
background: #079FD9;
}
div {
background: white;
/*Note that if you change this color, make sure you change the background of the pseudo elements*/
display: inline-block;
padding: 10px;
padding-right: 20px;
/*These paddings are to make sure the pseudo elements do not overlap the text*/
padding-left: 20px;
border-radius: 0 0 10px 10px;
position: relative;
margin-left: 30px;
color: #079FD9;
font-family: open sans;
/*This is, of course, optional*/
font-size: 16pt;
}
div:before, div:after {
content: "•";
/*Very Hacky*/
font-family: Times New Roman !important;
/*Makes sure the font won't mess it up*/
color: #079FD9;
/*Change this to the background color *around* the element*/
font-size: 200px;
line-height: 7px;
position: absolute;
overflow: hidden;
top: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 30px;
height: 30px;
background: white;
}
div:after {
right: -19px;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
div:before {
left: -19px;
-webkit-transform: rotateY(180deg) rotateX(180deg);
transform: rotateY(180deg) rotateX(180deg);
}
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div>Mozilla</div>
It is a very hacky solution, and uses a bullet(•) to cover the div. But it works.
You will have to play around with it until you find how you want it to work.
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.
You know how to do this using CSS?
In my navbar I would like to see a transparent triangle to the active link.
If I create a PNG image with a transparent triangle and use it like this:
background: rgba (0,0,0,0.4) url (triangle.png) no-repeat bottom center;
this does not work properly because under my triangle shows the transparent rgba color rgba(0,0,0,0.4) ...
I would like to do this to make a nice effect when scrolling the page. It is possibile?
Demo
You can use the :before and :after pseudo elements to achieve this effect.
<nav>
<ul>
<li class="active">homepage</li>
<li>option2</li>
<li>option3</li>
</ul>
</nav>
nav {
position: fixed;
background-color: rgba(0,0,0,.7);
display: block;
width: 100%;
padding: 10px 0;
color: white;
font-size: 1.5em;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li {
float: left;
width: auto;
padding: 0 20px;
position: relative;
}
nav li:before,
nav li:after {
content: '';
position: absolute;
bottom: -35px;
left: 0;
right: 0;
height: 5px;
border: 10px transparent solid;
border-top-color: rgba(0,0,0,.7);
border-left-width: 0;
border-right-width: 0;
}
nav li:before {
right: 50%;
}
nav li:after {
left: 50%;
}
nav li.active:before {
border-right-width: 10px;
}
nav li.active:after {
border-left-width: 10px;
}
nav li:last-child:after { /* covers the bottom of the navigation bar all the way to the right */
right: -9999999px;
}
Another solution using links:
<nav>
<ul>
<li>homepage</li>
<li>option2</li>
<li>option3</li>
</ul>
</nav>
write css style for :active class
js. No jQuery and you even get the hover effect for free.
i think this will help you..
same concept but used differently for further reference refer here :
stackoverflow.com/questions/17327076/how-to-create-a-ul-with-a-triangle-for-the-active-row
Will post my solution. It's pretty complicated and though I don't know if there is other simpler way to make li>a nested elements be transparent for the background under ul. This solution uses :before/:after pseudo attributes.
I used this markup (how to avoid helper <i></i>?):
<header>
<ul class="clearfix">
<li><a class="active" href="">HOMEPAGE <i></i></a></li>
<li>CONTACT <i></i></li>
<li>GET OUT <i></i></li>
</ul>
</header>
and CSS:
header li a {
text-align: center;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
display: inline-block;
padding: 25px;
color: #FFF;
position: relative;
}
header li a:hover {
background: rgba(255, 255, 255, .2);
}
header li a i:after, header li a i:before {
content:'';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
display: none;
background: url(http://subtlepatterns.com/patterns/escheresque_ste.png);
background-attachment: fixed;
border-top: 15px solid rgba(0, 0, 0, .5);
}
header li a.active i:after, header li a.active i:before {
display: block;
}
header li a:hover i:after, header li a:hover i:before {
display: block;
border-top-color: rgba(255, 255, 255, .1);
}
header li a i:before {
margin-left: -15px;
border-right: 15px solid transparent;
}
header li a i:after {
border-left: 15px solid transparent;
}
Hopefully someone will get inspired one day.
Demo: http://jsfiddle.net/R9pKq/
<figure>
<div><div>
</figure>
css
figure{
width:400px;
height:320px;
background:skyblue url(http://img1.wikia.nocookie.net/__cb20140301204257/disney/images/4/49/Elsa-Anna.jpg);
border:4px solid rgba(0,0,0,.8);
margin:40px auto;
position:relative;
}
figure div{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:200px;
background:rgba(255,255,255,.1);
}
figure div:before{
content:'';
position:absolute;
width:0px;
height:0px;
left:50%;
top:-40px;
margin-left:-40px;
border-bottom:40px solid rgba(255,255,255,.1);
border-left:40px solid transparent;
border-right:40px solid transparent;
}
Demo
or if you want to apply it to a menu
<menu>
<li><a>Home</a></li>
<li><a>Work</a></li>
<li><a>Projects</a></li>
<li><a>Infos</a></li>
</menu>
css
menu{
margin-top:40px;
}
menu li{
float:left;
list-style:none;
position:relative;
}
menu li{
padding:20px; 40px;
}
menu li:hover:before{
content:'';
position:absolute;
width:0px;
height:0px;
left:50%;
top:-20px;
margin-left:-20px;
border-bottom:20px solid rgba(0,0,0,.8);
border-left:20px solid transparent;
border-right:20px solid transparent;
}
Demo with Hover
to use the active class jst change menu li:hover:before to menu li.active:before
I've created a custom breadcrumb in jsfiddle http://jsfiddle.net/jimbodeni/Ata9k/ . When you shrink the width of the page the text is on 2 lines on the last 2 breadcrumbs but is only on one line on the first breadcrumb. This causes the grey background to be out of line on the first breadcrumb with the other 2.
How can I get this to always be the max height of the largest breadcrumb so they're all uniform height no matter if one has got one line of text and another 2 lines of text?
<div id="breadcrumb-container">
<ul class="breadcrumb">
<li>Surgery Started</li>
<li class="current">Surgery Started</li>
<li>Surgery Compl'd</li>
</ul>
</div>
div#breadcrumb-container {
width:100%;
}
div#breadcrumb-container li {
width: 33%;
}
div#breadcrumb-container li:last-child {
width: 34%;
}
.breadcrumb {
list-style: none;
overflow: hidden;
font: 13px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
background: #C7C7C7;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 5px 5px 5px 45px;
position: relative;
display: block;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #C7C7C7;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #001940;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 3px;
left: 100%;
}
.breadcrumb li:first-child a {
padding-left: 12px;
border:none;
}
.breadcrumb li:last-child a:after {
border:none;
}
.breadcrumb .current {
background:#007ACC; color:#fff;
pointer-events: none;
cursor: default;
}
.breadcrumb .current a:after {
border-left-color:#007ACC;
pointer-events: none;
cursor: default;
}
.breadcrumb li a:hover { background: #007ACC; }
.breadcrumb li a:hover:after { border-left-color: #007ACC !important; }
Also, how do I get all 3 breadcrumbs to be exactly the same size? At the minute the first one is bigger than the other 2.
Thanks in advance to anyone who can help!