I have created a slant style triangle using borders to use on navigation items, however the border that is used to define the length of the slant is fixed and it needs to adapt based on the content inside the list item. I also want to use the same css class for each list item.
Is this the best solution for what I am trying to achieve or is there an alternative method that has the same result?
I am open to JS solutions too.
I have used the following CSS so far:
li {
float: left;
position: relative;
height: 20px;
background: #a1a8ad;
padding: 5px 12px;
margin-right: 10px;
list-style: none;
}
li:before {
content: "";
position: absolute;
top: -3px;
width: 0;
height: 1px;
left: 0px;
border-right: 63px solid #a1a8ad; /* razorblade color */
border-top: 2px solid rgba(0, 0, 0, 0); /* transparent */
}
JSFiddle here
You can't use percentages for the border-width but you can use a rotated pseudo element to make the slanted top border :
li {
float: left;
position: relative;
margin-right: 10px;
list-style: none;
overflow: hidden;
padding-top: 8px;
}
li a {
display: block;
background: #a1a8ad;
padding: 5px 12px;
color: #000;
height: 20px;
text-decoration: none;
}
li:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 150%;
height: 30px;
background: #a1a8ad; /* razorblade color */
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
z-index: -1;
}
<nav>
<ul>
<li>Home
</li>
<li>About Us
</li>
</ul>
</nav>
Related
I want to draw a line below a link and apply animation on it, so I use pseudo element. It produces the line as expected, but if there is a large padding around the link, the line appears far away. Is there a way to ignore the padding and draw the line right below text?
a {
position: absolute;
padding: 20px 0;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
line-height: 20px;
}
a:after {
position: absolute;
bottom: 0;
left: 0;
width: 0;
content: '';
transition: width .3s;
display: block;
}
a:hover:after {
width: 100%;
border-top: 1px solid #333;
}
<a>Link Text</a>
You can just remove the absolute position since the pseudo is set on :after so that it's placed right after the text.
a {
position: absolute;
padding: 20px 0;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
line-height: 20px;
border: 1px solid aqua;
}
a:after {
content: "";
display: block;
border-top: 1px solid #333;
width: 0;
transition: width .3s;
}
a:hover:after {
width: 100%;
}
<a>Link Text</a>
Side note, you might encounter the double tap behavior for the kind of hover effects on touch devices such as phones, tablets. Add this to fix that:
#media (hover: none) {
a:hover:after {
display: none;
}
}
In addition, the effects can also be done with linear-gradient(), example:
a {
display: inline-block;
text-decoration: none;
border: 1px solid aqua;
font-size: 16px;
padding: 20px 0;
background-image: linear-gradient(to bottom, blue, blue);
background-position: 0 38px; /*adjust this based on font-size and padding*/
background-size: 0 1px;
background-repeat: no-repeat;
transition: background-size .3s;
}
a:hover {
background-size: 100% 1px;
}
Link text
I want to make background for menu list item looks as a tab, how can this be done in CSS and to add icon beside it
CSS
#cdnavheader .activeMenuItem span {
background-position: 100% -145px;
color: #2d83ab;
padding: 12px;
background-repeat: no-repeat;
color: #fff;
background-color: #2d489b;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
You can also use a pseudo and transform:
a {
display: inline-block;/* fallback*/
position: relative;
overflow: hidden;
border-radius:5px 5px 0 0;
padding: 1em 3em 1em 2em;
}
a:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 120%;
height: 200%;
z-index: -1;
background: tomato;
border-radius:inherit;
transform: skew(35deg)
}
nav {
display: flex;
margin: 1em;
}
<nav> some link
some link
some link
</nav>
Use a zero height DIV with a big border:
.tab {
width: 100px;
height: 0px;
border-right: 20px solid transparent;
border-bottom: 20px solid green;
}
<div class="tab"></div>
More info here: https://css-tricks.com/snippets/css/css-triangle/
I want to recreate this icon using css pseudo elements (as a toggle indicator):
I have created the nececcary pseudo elements using ::after, ::before and tried to rotate them using transform: rotate(90deg).
How can I tell them to rotate around their own center? I have tried transform-origin: 50% 50%; which does not work. Right now, both pseudo elements got the same right: 10px; but they are not placed above each other, instead they are next to each other.
You can check this JS FIDDLE to illustrate the problem.
First you can use :before and :after pseudo elements and create shape like this DEMO
After that you can rotate parent element for 45deg and get desired result.
.el {
margin: 50px;
position: relative;
transform: rotate(45deg);
display: inline-block;
}
.el:before,
.el:after {
content: '';
width: 30px;
height: 30px;
position: absolute;
}
.el:before {
border-top: 4px solid black;
border-left: 4px solid black;
top: -10px;
left: -10px;
}
.el:after {
border-bottom: 4px solid black;
border-right: 4px solid black;
top: 10px;
left: 10px;
}
<div class="el"></div>
Update: You can also add some transition on :hover like this
.el {
margin: 50px;
position: relative;
transform: rotate(45deg);
display: inline-block;
cursor: pointer;
}
.el:before,
.el:after {
content: '';
width: 30px;
height: 30px;
position: absolute;
transition: all 0.3s ease-in;
}
.el:before {
border-top: 4px solid black;
border-left: 4px solid black;
top: -10px;
left: -10px;
}
.el:after {
border-bottom: 4px solid black;
border-right: 4px solid black;
top: 10px;
left: 10px;
}
.el:hover:before {
top: -15px;
left: -15px;
}
.el:hover:after {
top: 15px;
left: 15px;
}
<div class="el"></div>
transform-origin works fine, it's just that
a) 50% 50% (the object's center) is the default, and
b) you have to center the content of the box. That's a bit tricky because the icon you use doesn't require the full line height. Try adding
::before, ::after {
padding-bottom: .17em;
}
modify the style of #pseudo::after as right: 0;
#div {
background: blue;
width: 80px;
height: 80px;
transform: rotate(45deg);
}
/* tested but not working */
#pseudo::after,
#pseudo::before {
/* transform-origin: 50% 50%; */
}
#pseudo::after {
content: '›';
font-size: 50px;
color: green;
right: 0;
position: absolute;
transform: rotate(90deg);
top: 40px;
}
#pseudo::before {
content: '›';
font-size: 50px;
position: absolute;
color: green;
right: 10px;
top: 10px;
transform: rotate(-90deg);
}
<div id="div"></div>
<div id="pseudo"></div>
I need to make something like this.
It´s not seen very much, bot the box with arrow is not a part of the button.It´s in the front of it. Is it possible to do this using :before selector? Buttons are classical navigation list. Thanks for your help
It most certainly is possible. You may also use an image instead of the appending the ">"
ul {
list-style: none;
}
li { background: gold;
width: 150px;
height: 30px;
line-height: 30px;
color: white;
}
li:before {
content: ">";
border-right: 1px solid white;
padding: 5px 10px 5px 10px;
margin-right: 10px;
}
<ul>
<li>Some text</li>
</ul>
Yes, you can. Make the :before element be an absolutely positioned block within the relatively positioned main button.
Then, simply give it the appropriate height, background color and border. You can use FontAwesome and the content property to set it to display an arrow.
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{padding: 20px;}
div{
margin-left: 64px;
position: relative;
background: orange;
height: 64px;
color: white;
line-height: 64px;
text-indent: 20px;
font-size: 20px;
font-weight: bolder
}
div:before{
content:'';
position: absolute;
left: -134px;
top: 0;
margin-left: 64px;
height: 64px;
width: 64px;
background: orange
}
div:after{
content: '';
position: absolute;
left: -90px;
top: 16px;
margin-left: 32px;
height: 20px;
width: 20px;
border-top: 8px solid white;
border-right: 8px solid white;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
<div>Some Text </div>
I would like to know if (and maybe how) some text-shadow like shown in following image is possible:
The shadow is decreasing over several list-elements. I was thinking to give each element different hover-classes depending on what element is being hovered on, but I am not even sure how to get such decreasing shadows with CSS. Would be really cool if someone would be able to teach me how to do that. If you want you can use my jsfiddle code.
You could try something like this
demo
(click a tab to select it and see the shadows)
and get the effect using box-shadow on pseudo-elements of the selected tab.
Should look like this
HTML:
<ul class='tabs'>
<li><a href='#' tabindex='1'>1st tab</a></li>
<!-- as many tabs as you would like -->
<li><a href='#' tabindex='1'>aaand another tab</a></li>
</ul>
Relevant CSS:
.tabs { overflow: hidden; margin-top: 7em; list-style: none; }
.tabs li { float: left; border-right: 1px dotted #222; }
.tabs a {
display: block;
position: relative;
padding: 1em .66em;
font: .66em/1.1 sans-serif;
text-transform: uppercase;
text-decoration: none;
}
.tabs a:focus {
z-index: 3;
outline: none;
box-shadow: 0 -.5em 1.5em black;
background: lemonchiffon;
}
.tabs a:focus:before, .tabs a:focus:after {
position: absolute;
bottom: -1px;
width: 30em; height: 1px;
box-shadow: 0 0 20px 1px black;
content: '';
}
.tabs a:before {
left: -30.5em;
transform: rotate(-3deg);
transform-origin: 100% 100%;
}
.tabs a:after {
right: -30.5em;
transform: rotate(3deg);
transform-origin: 0 100%;
}
You could augment an <li> to sit within the whole width of the <ul>, rotate it and give it a shadow..
HTML:
...
</li>
<li class="shadow">1</li>
</ul>
CSS:
ul
{
overflow: hidden;
height: 50px;
}
li.shadow
{
width: 100%;
height: 100%;
position: relative;
top: 15px;
box-shadow: 0px 0px 45px #000;
-webkit-transform:rotate(-1deg);
}
http://jsfiddle.net/Kyle_Sevenoaks/4Luet/1/