How can I add a blur effect to my menu bar?
Is it even possible using css?
Its transparent right now but I want to add a blur to it.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
opacity: 0.85;
position: fixed;
top: 0;
left: 0px;
width: 100%;
border-bottom: 100%px solid #737373;
box-shadow: 0 3px 5px rgba(0, 0, 0, 10);
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
I believe you can use the CSS:
-webkit-filter: blur(5px);
filter: blur(5px);
to add a blur to your menu bar. This is just off the top of my head though
A lot of cool filters (including blur) are used on http://www.cssfilters.co/ so i assume this will work for menu bars as well as images demonstrated.
You can achieve this by using text-shadow in CSS3
li {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
See Pen HERE
You would use the filer: CSS property with the blur(px) attribute. Find more HERE.
You would apply this to your Navigation <div>, whatever container that may be.
Note: You will have to have an opacity above 0 for the effect to work, However setting it to a desirable blurred color wouldn't be hard i.e. White, Black or Grey. You WILL also have create your navigation content OUTSIDE of that div and position it absolute over the blurred div. If not your content will also inherit the blur filter.
Related
I want it to be like this:
Currently, it is like this:
So, as shown most of the background is highlighted in white but there is a small left and right section which is purple.
The code I have so far which correspond to the menu items is:
.collapsible-menu ul
li:hover:not(:last-child) {
background-color:white;
width:100%;
color: #4C27B3;
text-decoration: none;
outline:none;
}
It is probably a quick fix but I need a second pair of eyes to pinpoint the issue. Many thanks in advance.
All code can be seen here:
https://codepen.io/JoyFulCoding/pen/EzXowL
in Css
.menu-content{
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-weight: bold;
padding: 0 0 0 50px;
/* add this margin left & right to make hover white full screen*/
margin-left: -79px;
margin-right: -30px;
}
in Css
.collapsible-menu {
background-color: #4C27B3;
border: none;
box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}
Remove Padding from this class in code
I'm using bootstrap to make some buttons containing images.
But when I click them, a strange horizontal line appears, as well as a dotted bounding box on FF.
i have tried outline: none;,but it doesn't change anything...
how can i re-arrange the html (or edit the css) to fix this? I don't want those boxes (especially the horizontal one in the middle)
thanks
html
<div class="button frontbutton col-md-4">
<a href="/tips">
<img src="url.png" class="buttonPic">
<span data-i18n="buttons.tips">Tips</span>
</a>
</div>
css
.frontbutton {
padding: 15px;
}
.button {
display: inline-block;
color: #444;
border: 1px solid #CCC;
background: rgba(210, 210, 210, 0.62);
box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
margin: 0px;
cursor: pointer;
vertical-align: middle;
text-align: center;
}
a {
color: #199ACE;
outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
img.buttonPic {
width: 95%;
}
thanks
https://jsfiddle.net/pLkyqz0x/
UPDATE
while making the fiddle, i noticed what caused the gray bar (box shadow on a:active)
but the red box on FF remains....
This is the a:focus { } style. So you can remove it by setting a:focus { outline: none; } however this is not considered best practice as the focus style is an accessibility requirement. You should instead redefine focus styles that work for you. (For further reading on why this is bad practice: http://www.outlinenone.com/)
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have already found an answer, but I am not sure this is the best approach for my problem. My page has two panels: one sidebar and one content view. I want to have a shadow over the sidebar as if the content view was producing it:
The problem is that my sidebar is a menu with buttons, icons, etc. So if I try to set the (inset) shadow there:
.sidebar {
box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
I get:
So, where I have the buttons, they hide the shadow. If I do it the other way so the content view actually produces it:
.content {
box-shadow: -7px 0 9px -7px rgba(0,0,0,0.7);
}
I get the shadow along with the content, but if the content is "shorter" than the total height of the screen, the shadow disappears. Similar to the previous case.
My final approach was to set a manual height for the content view or with Javascript, to adapt it to the viewport height. But I am not sure this is the best way to do it. I would like to know if there is a more CSS way to do it, without having to set things manually or getting shadows cut.
EDIT
While creating a fiddle for better understanding my problem I realized that I had a background-color on the buttons. But since I have a hover and a transition on the button, it still hides the shadow. Check it out: http://jsfiddle.net/h3cp59qd/
Check this out: http://jsfiddle.net/h3cp59qd/3/
Use position:absolute for both sidebar and content:
body, html {
background: #D8D8D8;
height: 100%;
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100%;
position: relative;
}
#sidebar {
width: 20%;
z-index: 1;
position: absolute;
top: 0;
bottom: 0;
background: #C8C8C8;
}
#sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#sidebar ul li {
padding-left: 20px;
height: 60px;
text-transform: uppercase;
color: white;
font-weight: 900;
font-size: 12pt;
line-height: 60px;
vertical-align: middle;
}
#sidebar ul li:hover {
background: #c0c0c0;
color: #EEE;
}
#content {
width: 80%;
position: absolute;
z-index: 100;
left: 20%;
top: 0;
bottom: 0;
padding: 0 50px;
box-shadow: -7px 0 9px -7px rgba(0,0,0,0.7);
}
just change your background color to gradient:
http://jsfiddle.net/anshalexander/h3cp59qd/2/
background:-webkit-linear-gradient(left, #c0c0c0 0%,#c0c0c0 97%,#555 100%);
You can change the last color to match your shadow color
Maybe just a shadow background image with a repeat-y could do the trick in your css stylesheet.
background-image:url('your-image.jpg');
background-repeat:repeat-y;
Your image should be the shadow 1px height and as larger as you need.
Your header/footer can easily hide the shadow with their proper backgrounds.
EDIT
I saw your edit, here is mine :)
#sidebar ul li:hover {
background-color: #C0C0C0;
color: #EEE;
box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
There are a few things that need to be corrected. First, remove the padding from #content (it's messing up the width and forcing that div to the bottom).
Add the same box-shadow from #sidebar to your #sidebar ul li:hover style:
#sidebar ul li:hover {
background-color: #C0C0C0;
color: #EEE;
box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
Then on #app add position: absolute and height: 100%:
#app {
width: 100%;
height: 100%;
position: absolute;
}
Finally, on #sidebar remove min-height: 800px and add height: 100%, and that should fix it right up. See updated fiddle.
You'll notice that this adds a little bit of an edge to the buttons when they're being hovered over. This is due to the blur being greater than the offset. I think it looks good, but it can be fixed by increasing the (absolute values of) x-offset and spread values (the -7s) to greater than the blur-radius (the 9), e.g.:
box-shadow: inset -11px 0 9px -11px rgba(0,0,0,0.7);
I'm trying to have it so that an image of a yellow cog sits inside a div with a yellow border and a white background, and then upon hover the cog changes to white and the background changes to yellow. I'm currently setting the first image as the background of the div, and then using div:hover to change the background on hover, however the spacing etc. doesn't quite work and the border doesn't go around the image properly. Is it possible to have it so the image is inside a link rather than as the background of the div? Here is the code I'm using:
HTML:
<div id="settings">
</div>
CSS:
#settings {
border: 4px solid #ffff00;
padding: 10px 20px 10px 20px;
background: #fff url(img/cog_yellow.png) 0 0 no-repeat;
}
#settings:hover {
background: #ffff00 url(img/cog_white.png) 0 0 no-repeat;
}
Any ideas?
It is possible although not very efficient. You can have two images and show and hide them based on hover:
HTML
<div class="button_link">
<img src="http://www.placecage.com/50/50"/>
<img src="http://www.placecage.com/60/50"/>
</div>
CSS
.button_link a:last-child{
display: none;
}
.button_link:hover a:first-child{
display: none;
}
.button_link:hover a:last-child{
display: block;
}
FIDDLE
If you can post a fiddle recreating the issue with the images you're using there is probably a more efficient way of doing this with just CSS and no additional HTML involved
UPDATE
This is how I would do this, with just CSS:
NEW FIDDLE
You can use this instead:
#settings a{
display:block;
width:100px; /* adjust your width */
height:100px;/* adjust your height */
border: 4px solid #ffff00;
padding: 10px 20px 10px 20px;
background: url(img/cog_yellow.png) 0 0 no-repeat;
}
#settings a:hover {
background: url(img/cog_white.png) 0 0 no-repeat;
}
I am trying to create a box that has a 'highlight' down the sides of it, and at the top.
The CSS for the box was pretty simple, however, now that I introduced this 'highlight' to the design, it has added another level of complexity to the CSS...
I have tried a lot of things, not sure if they will help but here is my most recent:
/* Define the Main Navigation Drop Downs */
#mn_navigation .dd {position:relative;width:226px;padding:29px 0 0;background:transparent url("//beta.example.co.uk/_images/_global/dd_handle.png") no-repeat;z-index:1000;}
#mn_navigation .dd nav {padding:30px 0;background:#3E5032 url("//beta.example.co.uk/_images/_global/dd_bg.png");border-radius:3px;}
#mn_navigation .dd nav a {font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#fff !important;height:25px;line-height:25px;}
Please note I have posted the above to show that I have actually tried to sort this myself. The above code will probably not even help as a starting point as a restructure of the HTML may be necessary!
Here is the current HTML (probably needs to be restructured):
<div id="dd_foo" class="dd">
<nav>
LINK
</nav>
</div>
Here is a possible restructure (something like):
<div id="dd_foo" class="dd">
<div class="handle"><!-- Dropdown Handle --></div>
<nav>
LINK
</nav>
</div>
This is what I need the box to look like (notice the faint white border at the top and half way down the sides):
I have also included the box split into its separate elements (handle and background)
I think I can see how this can be done with clever overlaps and nested divs, but ideally I don't really want to resort to this... Can anybody suggest an alternative solution?
Simplest approach
You can try achieving this using a simple box shadow:
.plaque {
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);
/*...*/
}
An Example
Here's an example using 1 class and a div on jsbin.
Copy paste code
This code is only for modern browsers; it might cause ie < 9 and other non supporting browsers to explode.
.plaque:after {
top: -9px;
content: " ";
height: 11px;
width: 30px;
position: absolute;
pointer-events: none;
left: 50%;
margin-left: -15px;
display: block;
background-repeat: no-repeat;
}
.plaque {
width: 250px;
height: 100px;
display: block;
border: 0;
outline: 0;
padding: 12px 16px;
line-height: 1.4;
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);
border-radius: 5px;
border: 1px solid transparent;
font-family: sans-serif;
color: white;
font-size: 1.2em;
text-overflow: ellipsis;
position: relative;
top: 6px;
}
/* Use whatever background you want */
.plaque { background-color: green; }
.plaque:after { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcJJREFUeNqMUktPU0EU/mZuL6Up1RCjC4oRau4t4FJ84EKID/ZAjI9/6Mo/4MadG5dqJGjBatpyuY+2UNreeXDOBE0MNHGSSWZyzvnOd77zicdbd+EVJKyxGPSHmC4XIYSAMQYCoJhn81wJKSnHWhR8D1oZl69yhamiD8GBSefpywc2XKzjy7fP+PDuk5iUJxnksvvkxX1buxkgThOEt5exvr1qJ+XKy5CfvXpow9oSsn6GdqeF40EPK+GKY/ZfTNa3Vm1AI6TdFAeNfQgp0CKgrJehVg1AGl5gJLTWfxGfv15zI3BBnB5CehJGG5Cw8EjY6tw8KjNXsfv9K96//SguMOERgoU6+ic9NH8eQClNGzDQBMLb4FU1fzdxFB+hev0WNnbu2X802TxnkGQJoriNymwZHrFgAbhdidbOK+YTxR0ojLEc3sHmm0dOI8Gq10n9OI1xGLVcMvuGGYyHOYqlKcfK9wvOF3/i12ZvoFK+gsavPUgGSLsJkm4En4xDTqMi45iUZqZdd34zJY7L8was2enoGMHCEmS3l6LxYx9qrJ2I7FTNelBxPlKuYDgYu9nzUe6cenoygqF/J2o7AmcCDACumSjtgWp8aAAAAABJRU5ErkJggg==); }