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;
}
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 want to have a Tags input (just like the stackoverflow's one) where users can type their chosen tags and it shows inside the input.
I decided to do it inside of a ul where the input is the last li:
<ul class="tag-box">
<li class="tags" *ngFor="let tag of tags">{{tag.name}}<a class="close"></a></li>
<li class="new-tag"><input class="input-tag" type="text"></li>
</ul>
But the problem is the width of the input is always small by default while I want it to take all the remaining width:
my css:
.tag-box {
list-style: none;
padding: 3px;
margin: 0;
display: inline-block;
font-family: arial;
width: 100%;
border: 1px solid #F39F19;
border-radius: 4px;
}
.tag-box li {
padding: 4px 6px;
float: left;
display: inline-block;
}
.tag-box li.tags {
background: #F1C617;
color: #fff;
border-radius: 4px;
margin: 4px 3px;
position: relative;
}
.tag-box li .input-tag {
color: #000;
height: 24px;
vertical-align: middle;
border: none;
outline: none;
background: none;
}
Is there a way where my input my input can take whatever left of space as width according to the loop?
Here's one way you could do it, I'm adding 3 things. You'll eventually want to give it a min-width and make it wrap though.
.tag-box {
display: flex;
}
.tag-box .new-tag {
flex: 1
}
.tag-box li .input-tag {
width: 100%;
}
How do I make li elements not move around when applying transitions using :hover? The circles are made applying height and border-radius to the li elements. I've tried making the ul container bigger, but that didn't seem to work. Thanks for your help.
Code:
body {}
main {
display: flex;
background: #eeeeee;
min-height: 100vh;
padding: 1em;
}
h1 {
font-family: arial;
font-size: 1.4em;
padding-left: 1em;
}
ul {
padding-top:50px;
min-height: 600px;
position:relative;
}
li {
position:relative;
background-color: purple;
border-radius: 50%;
width: 50px;
height: 50px;
padding: 1em;
text-align: center;
list-style: none;
display: inline-block;
line-height: 50px;
border: 5px solid red;
margin-right: -1em;
z-index: 0;
transition: width 0.5s, height 0.5s, background-color 1s, line-height 0.5s;
}
li:hover {
display: inline-block;
position:relative;
width: 90px;
height: 90px;
z-index: 10;
background-color: green;
line-height: 90px;
}
<body>
<main>
<h1>
My animated Menu
</h1>
<div class="menu">
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</div>
</main>
</body>
Use CSS3 transforms, this way the element can freely move or scale into the DOM without affecting the layout size.
A nice bonus: the animation will be more efficient in terms of fps as the layout won't be re-computed on each frame (an the GPU will be used)
ul {
padding-top: 50px;
}
li {
background-color: purple;
border-radius: 50%;
width: 50px;
height: 50px;
padding: 1em;
text-align: center;
list-style: none;
display: inline-block;
line-height: 50px;
border: 5px solid red;
margin-right: -1em;
z-index: 0;
transition: transform 0.5s, background-color 1s;
}
li:hover {
display: inline-block;
position: relative;
transform: scale(1.5);
z-index: 10;
background-color: green;
}
<div class="menu">
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</div>
i want to make circles connected by a line in CSS. I have achieved that thanks to an answer here at Stackoverflow. But I want to scale the circles to twice their size on hover. But when I am doing so, the line before the circle is also getting scaled.
Given below is my styling
li {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 1em;
background: dodgerblue;
margin: 0 1em;
display: inline-block;
color: white;
position: relative;
}
li:hover {
transform: scale(3);
}
li::before {
content: '';
position: absolute;
top: .9em;
left: -4em;
width: 4em;
height: .2em;
background: red;
z-index: -1;
}
li:first-child::before {
display: none;
}
.active {
background: dodgerblue;
}
.active~li {
background: lightblue;
}
.active~li::before {
background: lightblue;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
When you use ::before on an element (here li), the dynamically added content will become the first child of that element. Hence, when you apply a scale to your lis, the scaling will also apply to the line added with ::before.
Solution: Wrap the numbers in another element, for example a span, then scale the span instead of the li. This way, the line will not be affected anymore.
li {
display: inline-block;
position: relative;
margin: 0 1em;
}
li span {
display: inline-block;
position: relative;
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
color: white;
background: dodgerblue;
border-radius: 1em;
}
li span:hover {
transform: scale(3);
}
li::before {
content: '';
position: absolute;
top: .9em;
left: -4em;
width: 4em;
height: .2em;
background: red;
z-index: -1;
}
li:first-child::before {
display: none;
}
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
</ul>
Alternatively, if you can't or don't want to use additional markup, you could also make use of li:hover::before in addition to li::before in order to create a properly sized and positioned line for the hovered circles. However, I would recommend against the use of transform in that case and instead just overwrite the lis width, height and border-radius properties instead.
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/