When I hover over one of these buttons it flashes a black border and then it disappears. There is no border in the code. I am also using Chrome if that causes any issues. I do not want the border here.
Here is the code:
body {
background: #5544aa;
}
nav {
background: rgba(0, 0, 0, .2);
border-radius: 0px;
box-shadow: 2px 2px 3px rgba(255,255,255,0.1), -2px -2px .5px rgba(0,0,0,0.3);
}
nav ul {
width: 950px;
margin: 0 auto;
}
nav ul li {
list-style-type: none;
width: 150px;
margin-top: 15px;
float: left;
border: none;
text-align: center;
}
li a {
text-decoration: none;
color: #555555;
border-radius: 0px;
box-shadow: 0 0 0 #000;
text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
line-height: 50px;
display: block;
transition: all ease-in-out 250ms;
}
li a:hover {
background: rgba(255, 255, 255, .1);
box-shadow: 0 8px 8px -6px #333, inset 0 0 3px rgba(0,0,0,0.1);
color: #222222;
padding: 0px 0px;
text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
<nav>
<ul>
<li> Home
</li>
<li> Products
</li>
<li> Contacts
</li>
<li> About
</li>
</ul>
</nav>
It will be your box-shadow transitioning. To stop it, you'll need to edit your transition from all to just the CSS rules you want to transition.
I fixed it. I needed to delete the box-shadow: 0 0 0 #000; in the li a { } part. Now it works just fine.
Related
I have parent div and four child divs. the parent element is a container and child elements are buttons. I set the CSS property of the button to increase its border-width when I hover on it. the actual problem is whenever the button increases its border-width; the entire webpage moving. how can I make the webpage stable?
#theme-options-wrapper {
display: flex;
justify-content: center;
}
.theme-button {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: black;
margin: 5px;
cursor: pointer;
border: 2px solid #000000;
-webkit-box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69);
-moz-box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69);
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69);
}
.theme-button:hover {
border-width: 5px;
}
#light-mode {
background-color: #ffff;
}
#blue-mode {
background-color: #192734;
}
#green-mode {
background-color: #78866b;
}
#purple-mode {
background-color: #7e4c74;
}
<div id="theme-options-wrapper">
<div data-mode="light" id="light-mode" class="theme-button"></div>
<div data-mode="green" id="green-mode" class="theme-button"></div>
<div data-mode="purple" id="purple-mode" class="theme-button"></div>
<div data-mode="blue" id="blue-mode" class="theme-button"></div>
</div>
here the page URL link
https://nanthu0123.github.io/portfolio/
image of buttons (child elements)
buttons-img
here the source code
https://github.com/nanthu0123/portfolio
hey, add box-sizing: border-box; property to your .theme-button class.
UPDATE:
also if you want make your button larger add transform: scale(1.3); to your pseudo class (.theme-button:hover)
One option is to simply not use the border to draw the border, instead use the box-shadow property, which can take a comma-separated list of box-shadow definitions; below I've added a 2-pixel 'fake border' after the definition of the original box-shadow:
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 2px #000;
And, within the :hover pseudo-class expanded that 2-pixel size to 5-pixels:
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 5px #000;
As the box-shadow doesn't take space in the document it won't force elements to reflow (though obviously a repaint is required to show the changed shadow).
#theme-options-wrapper {
display: flex;
justify-content: center;
}
.theme-button {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: black;
margin: 5px;
cursor: pointer;
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 2px #000;
}
.theme-button:hover {
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 5px #000;
}
#light-mode {
background-color: #ffff;
}
#blue-mode {
background-color: #192734;
}
#green-mode {
background-color: #78866b;
}
#purple-mode {
background-color: #7e4c74;
}
<div id="theme-options-wrapper">
<div data-mode="light" id="light-mode" class="theme-button"></div>
<div data-mode="green" id="green-mode" class="theme-button"></div>
<div data-mode="purple" id="purple-mode" class="theme-button"></div>
<div data-mode="blue" id="blue-mode" class="theme-button"></div>
</div>
This can also be transitioned/animated – the colour, length or both – if required, with a single line:
transition: box-shadow 0.2s linear;
#theme-options-wrapper {
display: flex;
justify-content: center;
}
.theme-button {
height: 30px;
width: 30px;
border-radius: 50%;
background-color: black;
margin: 5px;
cursor: pointer;
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 2px #000;
transition: box-shadow 0.2s linear;
}
.theme-button:hover {
box-shadow: -3px 3px 5px -1px rgba(0, 0, 0, 0.69), 0 0 0 5px #000;
}
#light-mode {
background-color: #ffff;
}
#blue-mode {
background-color: #192734;
}
#green-mode {
background-color: #78866b;
}
#purple-mode {
background-color: #7e4c74;
}
<div id="theme-options-wrapper">
<div data-mode="light" id="light-mode" class="theme-button"></div>
<div data-mode="green" id="green-mode" class="theme-button"></div>
<div data-mode="purple" id="purple-mode" class="theme-button"></div>
<div data-mode="blue" id="blue-mode" class="theme-button"></div>
</div>
Reference:
box-shadow.
transition.
In this button a shadow appearing and it looks like another button border there. I tried to use box-shadow property but I failed.
I used this CSS
a {
padding: 10px 40px;
border-radius: 30px;
font-size: 18px;
color: #fff;
border: 1px solid #fff;
box-shadow: 5px 5px 0px #2CBFBB;
}
Can anyone please help me?
You can achieve this effect with filter: drop-shadow and a transparent background:
body {
background: #76D7C4;
}
button {
text-transform: uppercase;
padding: 10px 20px;
color: white;
cursor: pointer;
background: transparent; /* no background! */
border: 1px solid white;
border-radius: 100px;
filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.25));
}
<button>Learn More</button>
Based on chazsolo's answer. It's possible to get shadow on button without shadow on text using absolutely positioned pseudoelement and CSS property inheritance:
body {
background: #76d7c4;
}
button {
text-transform: uppercase;
padding: 10px 20px;
color: white;
cursor: pointer;
background: transparent; /* no background! */
border: 1px solid white;
border-radius: 100px;
position: relative; /* new */
}
button:after {
content: "";
position: absolute;
/* Making pseudoelement the same size as container */
left: 0;
right: 0;
top: 0;
bottom: 0;
/* Inheriting border properties */
border-radius: inherit;
border: inherit;
/* Applying filter with shadow */
filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.25));
}
<button>Learn More</button>
You can also do it by combining box-shadow: ... and box-shadow: inset .... Just adjust the box-shadow so it fits your needs.
Example
body {
background: #32DBD7;
}
button {
background: transparent;
color: #fff;
border: 3px solid #fff;
border-radius: 35px;
padding: 10px 40px;
font-size: 34px;
box-shadow: 3px 3px 4px rgba(0, 0, 0, .25), inset 3px 3px 4px rgba(0, 0, 0, .25);
-moz-box-shadow: 3px 3px 4px rgba(0, 0, 0, .25), inset 3px 3px 4px rgba(0, 0, 0, .25);
-webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .25), inset 3px 3px 4px rgba(0, 0, 0, .25);
}
<button>Learn More</button>
.test { margin-top: 2em; }
a {
padding: 10px 40px;
border-radius: 30px;
font-size: 18px;
color: #fff;
border: 1px solid #fff;
box-shadow: 5px 5px 0 darkgray;
text-decoration: none;
}
body {
background-color: #2CBFBB;
}
<div class="test">
Learn More
</div>
How to i reduce the height of the background color to be almost the same height as the link and i tried to use height on CSS but it didn't work
CSS
.login {
color: #4CAF50;
background-color: #a0ce4e;
}
.login a {
cursor: pointer;
display: inline-block;
background: #a0ce4e;
border-radius: 1px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
padding: 10px 15px;
color: #ffffff;
text-decoration: none;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.login a:hover {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
HTML
<div class="login">
<ul class="nav navbar-nav">
<li class="active">
<a class="page-scroll" href="#">Login</a>
</li>
</ul>
</div>
Remove padding:
.login a {
padding: 0px; /* or 1.. */
}
Those look like bootstrap classes, so I would say you likely need to remove padding and/or margins from navbar-nav.
You can do this by adding your own class to it and using that to add overriding styles. For example:
CSS:
.navbar-nav.navbar-nospace {
margin: 0px;
padding: 0px;
}
HTML:
<ul class="nav navbar-nav navbar-nospace">
This is CSS/html based Slider is but i want in reverse direction.. first < li > image should come up and so on... in fact i want direct of slides should be from LEFT to RIGHT.. not right to left...
http://jsfiddle.net/Qrw76
HTML Code here
<div class="accordian">
<ul>
<li>
<div class="image_title"></div>
<img src="http://placehold.it/640x348"/>
</li>
<li>
<div class="image_title"></div>
<img src="http://placehold.it/640x348"/>
</li>
<li>
<div class="image_title"></div>
<img src="http://placehold.it/640x348"/>
</li>
<li>
<div class="image_title"></div>
<img src="http://placehold.it/640x348"/>
</li>
<li>
<div class="image_title"></div>
<img src="http://placehold.it/640x348"/>
</li>
</ul>
</div>
CSS here
===========
* {
margin: 0;
padding: 0;
}
.accordian {
width: 820px; height: 348px;
overflow: hidden;
/*Time for some styling*/
margin: 100px auto;
box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
/*A small hack to prevent flickering on some browsers*/
.accordian ul {
width: 2000px;
/*This will give ample space to the last item to move
instead of falling down/flickering during hovers.*/
}
.accordian li {
position: relative;
display: block;
width: 120px;
float: left;
border-left: 1px solid #888;
box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
/*Transitions to give animation effect*/
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
/*If you hover on the images now you should be able to
see the basic accordian*/
}
/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;
}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 600px;
}
.accordian li img {
display: block;
}
/*Image title styles*/
.image_title {
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0; bottom: 0;
width: 640px;
}
.image_title a {
display: block;
color: #fff;
text-decoration: none;
padding: 20px;
font-size: 16px;
}
I've made a css drop down menu for my web, basically it is a hidden div <div id="category_list"> with display: none; property set initially. Once someone hovers over <li id="category_drop"><a class="st_nav_menu" href="#"> it sets display: block; to hidden div. It works fine, but once I add <a></a> tags to hidden div all drop down thing stops working and I have no idea why.
Here is jsFidle with my code withouth <a></a> tags inside <div id="category_list">
http://jsfiddle.net/JCZbt/ (Hover over "Categories" to see a drop down menu)
And this is my code.
HTML
<div id="headbar-wrap">
<p id="back-top"><span></span></p>
<div id="head-bar">
<h1>website</h1>
<ul class="main-menu">
<li><a class="st_nav_menu" href="index.php">Home</a></li>
<li id="category_drop"><a class="st_nav_menu" href="#">Categories
<div id="category_list">
</div>
</a></li>
<li><a class="st_nav_menu" href="top.php">Top</a></li>
<li><a class="st_nav_menu" href="anti-top.php">Anti Top</a></li>
<li class="st_add_button">Add Story</li>
</ul>
<ul class="main-2-menu">
<li><a><span style="color: red; font-weight: bold; font-size: 16px; line-height: 44px; padding: 0 10px 0 10px;">Website is under construction.</span></a></li>
</ul>
</div>
</div>
CSS
/* Header */
.st_add_button {
display: block;
padding: 15px 16px 15px 16px;
}
.st_add_button a {
color: #fff;
background: url("/images/st_add.png") no-repeat 4px 0 #3fab3c;
padding: 5px 5px 5px 37px;
text-shadow: 0 -1px #328c30;
font-weight: bold;
font-size: 12px;
line-height: 11px;
border: 1px solid #000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.st_add_button a:hover {
background-color: #4dc24a;
}
#headbar-wrap {
background-color: #222;
min-width: 896px;
border-bottom: 1px solid #333;
border-top: 1px solid #333;
box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4);
position: fixed;
width: 100%;
z-index: 15;
top: 0;
}
#head-bar {
height: auto;
max-width: 896px;
margin: 0 auto;
}
#head-bar a {
-webkit-transition: color .2s linear;
-moz-transition: color .2s linear;
}
#head-bar h1 {
float: left;
}
#head-bar h1 a {
display: block;
padding: 14px 18px 10px 0;
height: 20px;
line-height: 20px;
font-size: 18px;
width: 110px;
text-indent: -9999px;
overflow: hidden;
background: url("/images/logo.png") no-repeat 0 7px;
border-right: 1px solid #333;
box-shadow: -1px 0 #000 inset;
-moz-box-shadow: -1px 0 #000 inset;
-webkit-box-shadow: -1px 0 #000 inset;
}
#head-bar h1 a:hover {
background-position: 0 -64px;
}
#head-bar h1 a:active {
background-position: 0 -62px;
}
#head-bar ul {
list-style-type: none;
overflow: hidden;
}
#head-bar ul.main-menu {
float: left;
}
#head-bar ul.main-menu li{
float: left;
}
.st_nav_menu {
color: #999;
display: block;
font-weight: bold;
font-size: 12px;
line-height: 11px;
height: 10px;
padding: 17px 16px 17px 16px;
border-right: 1px solid #333;
box-shadow: -1px 0 #000 inset;
-moz-box-shadow: -1px 0 #000 inset;
-webkit-box-shadow: -1px 0 #000 inset;
text-shadow: 0 -1px #000;
}
#head-bar ul.main-menu li a:hover {
color: #fff;
text-shadow: 0 1px #000;
}
#head-bar ul.main-2-menu {
float: right;
overflow: visible;
border-left: 1px solid #000;
border-right: 1px solid #333;
}
#head-bar ul.main-2-menu li {
float: left;
height: auto;
border-left: 1px solid #333;
border-right: 1px solid #000;
}
/*CSS Drop Down */
#category_list {
display: none;
height: 200px;
width: 400px;
padding: 10px;
background: #1c1c1c;
position: absolute;
z-index: 999;
top: 45px;
margin-left: -211px;
border: 1px solid #000;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
box-shadow: 1px 1px 4px #333;
-moz-box-shadow: 1px 1px 4px #333;
-webkit-box-shadow: 1px 1px 4px #333;
}
#category_drop .st_nav_menu:hover #category_list, #johan {
display: block;
}
Can anyone suggest why drop down stops working once <a></a> tags are added to hidden <div id="category_list"> ?
shouldn't the closing </a> tag be directly after the categories text and not after the <div id="category_list"></div>. As it stands you'd be trying to put anchors within anchors and that could well be the problem.
so...
<li id="category_drop"><a class="st_nav_menu" href="#">Categories
<div id="category_list">
</div>
</a></li>
would be
<li id="category_drop"><a class="st_nav_menu" href="#">Categories</a>
<div id="category_list">
</div>
</li>
<li id="category_drop"><a class="st_nav_menu" href="#">Categories
<div id="category_list">
</div>
</a></li>
List item - anchor - div - close div - close anchor - close List item.
As of HTML5 you can get away with the <a> <div> </div> </a>. Prior to HTML5 that's invalid markup.
No version of HTML allows <a><a></a></a> or <a><div><a></a></div></a>. You're attempting to nest an anchor inside another anchor and that simply won't work.
You never put <a> tag inside of an <a> tag now it's render by browsers as
<li id="category_drop">
Categories
<div id="category_list">
</div>
</li>
instead of
<li id="category_drop">
<a class="st_nav_menu" href="#">Categories
<div id="category_list">
fdsf
</div>
</a>
</li>