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/
Related
I'm trying to add a separator between my navigation menu(header).
So basically make it A|B|C
I tried to add this code:
This is an edit:
So my snip, from where the title and url are retrieved looks like this:
<li class="dropdown{% if link.active %} selected{% endif %}{% if submenu_type == 'menu_two_columns' %} tt-megamenu-col-02{% elsif submenu_type == 'megamenu' %} megamenu{% else %} tt-megamenu-col-01{% endif %}" {{ block.shopify_attributes }}>
{{ link.title }}
And I added this code in my theme.css
.link {
position: relative;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 20px;
color: #333;
text-decoration: none;
background-color: #ddd;
transition: all 0.2s ease;
}
.link:before {
content: '|';
position: absolute;
left: -1px;
line-height: 40px;
}
.link:first-child:before {
content: '';
}
.link:hover {
background-color: #aaa;
color: #000;
}
However, I am not getting the |
you set width:1px to link class so content of that class is not appears, just replace your css code
.link{
height: 40px;
width: 1px;
margin: 0 5px;
overflow: hidden;
background-color: #DDD;
border-right: 2px solid #FFF;
}
with
.link{
height: 40px;
width: auto;
margin: 0 5px;
overflow: hidden;
background-color: #DDD;
border-right: 2px solid #FFF;
}
Try this.
ul{
overflow:hidden;
}
li{
list-style:none;
position:relative;
float:left;
padding:0 15px;
}
li:first-child{
padding-left:0;
}
li:last-child{
padding-right:0;
}
li:not(:last-child):after{
position:absolute;
border:1px solid #000;
height:100%;
content:"";
right:0;
}
li a{
text-decoration:none;
}
<div>
<ul>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
</div>
Add your border on the left of each link:
.link {
border-left: 2px solid #fff;
}
Then add a CSS rule that cancels that border on the first link using the first-child selector:
.link:first-child {
border-left: none;
}
It's important your links are behaving like links, taking up enough space, etc. I used my own approach here, feel free to take what you like.
.menu {
background: red;
display: flex;
}
.link {
position: relative;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 20px;
color: #333;
text-decoration: none;
background-color: #ddd;
transition: all 0.2s ease;
}
.link:before {
content: '|';
position: absolute;
left: -1px;
line-height: 40px;
}
.link:first-child:before {
content: '';
}
.link:hover {
background-color: #aaa;
color: #000;
}
<nav class="menu">
Home
About
Contact
Blog
</nav>
Use a Horizontal rule between tags
.menu {
background: #ddd;
display: flex;
}
.link {
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 30px;
color: #333;
text-decoration: none;
background-color: #ddd;
transition: all 0.2s ease;
}
hr{
margin:0px;
color:blue;
}
.link:first-child {
border-left: none;
}
.link:hover {
background-color: #aaa;
color: #000;
}
<nav class="menu">
Home<hr>
About<hr>
Contact<hr>
Blog<hr>
</nav>
Whats the catcher just place a hr tag between each link and you get the line. hr means horizontal line but since the display is set to inline block and the height is set it can be used as a vertical line
Edit
I've taken your exact updated CSS and placed a few .link anchors inside a nav container. You can see the generated content (separator bar) working as you've styled. The only thing I've changed, which doesn't affect the render, is replacing content: '' with content: none.
.link {
position: relative;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 20px;
color: #333;
text-decoration: none;
background-color: #ddd;
transition: all 0.2s ease;
}
.link:before {
content: '|';
position: absolute;
left: -1px;
line-height: 40px;
}
.link:first-child:before {
content: none;
}
.link:hover {
background-color: #aaa;
color: #000;
}
<nav>
A
B
C
</nav>
jsFiddle
Here's an example for you using a pseudo class to create the bar separator (|) in CSS content. This is the preferred way to handle details like this because you have more control over the content styling and positioning. I'm also using CSS negation to not add the separator after the last child. To vertically center the generated content, I've used top: 50% and a transform: translateY(-50%) to account for half the height of the actual separator.
.link{
margin: 0 5px;
background-color: #DDD;
position: relative;
}
.link:not(:last-child)::after {
content: '';
position: absolute;
display: block;
right: -10px;
top: 50%;
transform: translateY(-50%);
border-right: 2px solid #000;
height: 100%;
}
<nav>
A
B
C
</nav>
jsFiddle
I've got an interesting one: I was testing methods to get the list-item elements of a nav bar to spread evenly across the length of a nav. I used the display:table and display: table cell method to get the most even spread and that seemed to work fine.
When I went to add an ::after element so I could add a top-bar and have a smoother on-hover effect, I found that the bar extended past where I wanted it to -- I was trying to have it just to the end of the words "Communication Design". So I thought I'd just resize the nav container holding my list-elements but because it's a table/table-cell, when the nav resizes, the list-items shink along with it and I can never shore up the last element in the list.
Is there a way to either affect the size of the last table cell or only show a percentage of the ::after element?
Code:
HTML:
<h3>Test & Co.</h3>
<p id="title2">Communications Design</p>
<div id="navContainer">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
CSS:
*
{
padding: 0;
margin: 0;
}
h3
{
padding-left: 140px;
display: inline-block;
padding-top: 10px;
padding-bottom: 25px;
}
#title2
{
display: inline-block;
float: right;
font-size: 16px;
margin-right: 252.5px;
padding-top: 14px;
padding-bottom: 25px;
}
#navContainer
{
//border: 1px solid black;
width: 643px;
margin-left: 140px;
height: 30px;
background: white;
}
#navContainer ul
{
list-style:none;
display: table;
width: 100%;
}
#navContainer ul li
{
display: table-cell;
height: 30px;
line-height: 30px;
font-family:arial;
font-size: 12px;
text-align: left;
//border: 1px solid black;
transition: color .2s ease-in-out;
position: relative;
}
#navContainer ul li::after
{
content: "";
display: block;
float: right;
position: absolute;
margin: auto;
height: 1px;
top: 0;
width: 100%;
background: #ccc;
transition: background-color .2s ease;
}
#navContainer ul li:hover::after
{
background: #8c8c8c;
}
#navContainer ul li:hover
{
color: #A6CFEB;
}
I don't know if I named the title right or have the right terminology but I'm using LESS.
What I want is to apply arrows on some <ul>s while the default is no style. So anytime I want arrows, I want to somehow explicitly say so in code.
I tried adding a pseudo class called .arrow:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
.arrow{
content: "";
border-color: transparent #111;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9em;
position: relative;
}
}
Then tried to apply it like this:
<ul className="arrow">
<li><span className="ink-badge black small">Consulting</span></li>
</ul>
but no luck. I'm not doing this right; any ideas here?
className is the IDL attribute. In HTML you should use the content attribute, which is called class.
And .arrow is a class selector, not a pseudo-class.
And in selectors, place ancestors at the left (outer block in LESS).
body {
margin-left: 2em;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.arrow > li {
content: "";
border-color: transparent #111;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1em;
top: 0.9em;
position: relative;
}
<ul class="arrow">
<li><span class="ink-badge black small">Consulting</span></li>
</ul>
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>
I am trying to make a mobile version of a menu. So I have a list of item. The li with class nav-current is only displayed.With the help of pseudo :after I create an arrow after the link of that li. I try to display all the li items when the arrow is clicked.
My html :
<ul class="top-nav">
<li>
<a href=#>Textbla</a>
</li>
<li class="nav-current">
<a href=#>Textlpops</a>
</li>
<li>
<a href=#>Google Res</a>
</li>
</ul>
and my sassy css:
$depends:none;
.top-nav {
float: none;
margin: 10px;
li,li.user-tools {
display:$depends;
float:none!important;
border-bottom: 1px solid #666;
&:last-child {
border-bottom:0 none;
}
&.nav-current {
display:block;
border-bottom:0 none;
a:after {
content:'arrow';
color:#1a1a1a;
position:absolute;
top:10px;
right:20px;
height:12px;
background: transparent url(../images/custom/arrow_down.png) no-repeat left top;
}
a:target:after {
$depends:block;
}
}
}
}
I don't want to use any javascript, so I search for an only css solution. Can this be done in sass? Or is there any css3 trick that I could take advantage of and make that happen?
The target selector does not work the way you are expecting I think. What you describe is, to my knowledge, not possible in css.
New Answer
I reread your question and realized you were seeking this for mobile browsers. They may not be recognizing pointer-events either. This new solution does not rely on pointer-events except as an enhancement, but does require a bit more mark up. So far I have tested in FF, Chrome, and IE8/9, and it works well. (I'm curious if my zero opacity on the hover-shield may need to be 0.01 in some browsers). You'll have to test your mobile application.
HTML
<div class="hidden-nav">
<div class="nav-expander"></div>
<div class="hover-shield"></div>
<ul class="top-nav">
<li>
<a href=#>Textlinks Adv</a>
</li>
<li class="nav-current">
<a href=#>Textlinks Publ</a>
</li>
<li>
<a href=#>Google Shopping</a>
</li>
</ul>
</div>
CSS
.hidden-nav {
position: relative;
display: inline-block;
}
.nav-expander { /* the activator arrow container */
width: 16px;
height: 8px;
position: absolute;
top: 5px;
right: 2px;
z-index: 4;
}
.nav-expander:before { /* the activator arrow */
content: '';
display: block;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid blue;
position: absolute;
top: 0;
left: 0;
}
.hover-shield { /* keep activation by the arrow only */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
background-color: white; /* needs background to act as hover shield */
filter: alpha(opacity=0); /* no opacity needed */
-moz-opacity: 0;
opacity: 0;
}
.nav-expander:hover + .hover-shield {
z-index: 0;
}
.top-nav {
padding-right: 20px; /* make space for arrow */
background-color: yellow;
position: relative;
z-index: 1;
}
.top-nav:hover {
z-index: 3;
}
.top-nav li {
display: block; /*not "none" as we want widest li to size the nav*/
visibility: hidden;
height: 0;
white-space: nowrap; /*keep the link text in one line*/
}
.top-nav .nav-current {
visibility: visible;
height: auto;
pointer-events: none; /* for browsers that recognize it, the user is prevented from reclicking the page they are on */
}
.nav-expander:hover ~ .top-nav,
.top-nav:hover {
height: auto; /*once triggered, let it be its height*/
}
/*show the nav if expander is hovered, or once that is done, the nave itself is hovered */
.nav-expander:hover ~ .top-nav li,
.top-nav:hover li {
visibility: visible;
height: auto;
}
Original Answer
However, I have worked up a pure css solution using hover on the arrow that works great in FF and Chrome (tested), works okay in IE8/9 (it does not recognize the pointer-events property on the nav-current, so it opens nav on hover of the nav-current); IE7 works like IE8/9 only without the arrow since :after is unrecognized.
One extra li is needed.
HTML
<ul class="top-nav">
<li class="nav-expander"></li>
<li>
<a href=#>Textlinks Adv</a>
</li>
<li class="nav-current">
<a href=#>Textlinks Publ</a>
</li>
<li>
<a href=#>Google Shopping</a>
</li>
</ul>
CSS
.top-nav {
float: left; /*fit to width of longest li*/
padding-right: 20px; /*make space for arrow*/
position: relative;
background-color: yellow;
height: 0; /*do not want expand on hover of nav-current*/
}
.top-nav li {
display: block; /*not "none" as we want widest li to size the nav*/
visibility: hidden;
height: 0;
white-space: nowrap; /*keep the link text in one line*/
position: relative;
}
.top-nav .nav-current {
visibility: visible;
height: auto;
z-index; 0;
pointer-events: none; /*don't want hover on this to open nav*/
background: inherit; /*show background to collapsed nav*/
}
.nav-current:after { /*fake background to collapsed nav*/
content: '';
position: absolute;
width: 20px; /*= top-nav right padding*/
top: 0;
bottom: 0;
left: 100%;
background: inherit;
}
.nav-current a {
color: red;
}
.top-nav a:hover {
color: #555555;
}
.top-nav .nav-expander {
visibility: visible;
display: block;
position: absolute;
top: 0;
right: 0;
z-index: 1; /*cover nav-current when open*/
}
.top-nav .nav-expander:hover {
left: 0; /*these cause coverage of nav-current on expansion*/
bottom: 0;
}
.top-nav:hover {
height: auto; /*once triggered, let it be its height*/
}
.nav-expander:after { /*the activator arrow*/
content: '';
display: block;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid blue;
position: absolute;
top: 5px;
right: 2px;
}
/*show the nav if expander is hovered, or once that is done, any li is hovered*/
.top-nav:hover li,
.nav-expander:hover ~ li {
visibility: visible;
height: auto;
z-index: 2;
}
/*keeps z-index 0 on current; would use the :not(nav-current) selector to the above code, but IE8 does not recognize that*/
.top-nav:hover li.nav-current,
.nav-expander:hover ~ li.nav-current {
z-index: 0;
}