My blog is https://www.firozemistry.com based on the Blogger Emporio theme (with custom domain).
When viewed on Desktop/Laptop, on the homepage when the cursor is hovered over a snippet, the snippet highlights with a drop-shadow.
How can I make this drop-shadow permanently visible on all snippets, even when the cursor is not hovering over a snippet. If possible I would like the drop-shadow to be visible on Mobile view also.
However the snippet image dims slightly when the drop-shadow is visible. I would like the snippet to not dim while at the same time having the drop-shadows visible.
I would be most grateful if an expert would kindly guide me on how to achieve this.
Add this CSS .feed-view .post-wrapper
.feed-view .post-wrapper{
box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
}
Related
Working on a clients site which they seem to have changed some code by accident. The slider content now seems to have a strange boxed border around it ! You can see this on www.happyorganic.org
I have checked the CSS which has been applied to it but there seems to be no border on it. The slider is created with the plugin for WP called wordpress slider plugin.
Any Ideas?
Remove box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); in .flexslider and remove box-shadow: 0 0 1px 1px #888888; in .ssp_no_chrome_slider_default
I am using this:
<span class='fa fa-fw fa-stop'></span>
But it shows a very big square. Does anyone know if it possible to make it show just the outline of the square?
Another solution is given here, which can be used for all font-awesome icons:
Is it possible to color the fontawesome icon colors?
The css looks like this:
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #666;
color: transparent;
Unfortunately not, the icons which are provided as outline only have an additional -o in the name e.g: fa-arrow-circle-o-left - the stop icon doesn't have that option.
You could use the fa-square-o which is: http://fortawesome.github.io/Font-Awesome/icon/square-o/ which would achieve what you need - but it's not specifically the stop icon but just outlined.
You could either use fa-square-o, or you could use fa-stop and using CSS color and border rules to achieve the effect for a box with no rounded corners.
Here is a link:
http://jsfiddle.net/5mcddx2q/
.fa {
color:rgba(0,0,0,0);
border:1px solid red;
}
Or you could search for an outlined box in another set of font icons that is not font-awesome, thereare a few on bootstrap.
The problem with the webkit-based solutions is that they'll only work in webkit browsers. A slightly more portable solution would be to set the color of the icon to the same as the background (or transparent) and use text-shadow to create an outline:
.fa-outline-dark-gray {
color: #fff;
text-shadow: -1px -1px 0 #999,
1px -1px 0 #999,
-1px 1px 0 #999,
1px 1px 0 #999;
}
It doesn't work in ie <10, but at least it's not restricted to webkit browsers.
For people coming across this in the future: I was solving a similar problem and came up with a tangential solution that may work depending on your scenario and the specific icon. I had a blue background and wanted a white checkmark outline, with the blue inside preserved. What I ended up doing was creating two checkmark icons- one that was white, and another that was blue but slightly smaller. I then used css to position the blue checkmark inside of the white one which achieved the desired effect. It may take some fiddling and it may not work for all use cases, but it worked for me in mine.
I have downloaded the foundation framework from http://foundation.zurb.com/ with the default theme.
I dont know how to change the colors of various things like navigation bar, buttons, add background and box with shadow for the body ! etc.
I tried to add the following to the app.css but it did not work
body {
background-color: #333;
position: relative;
font-family: helvetica, arial, sans-serif;
color: #666666;
border-right: 1px solid #333;
border-left: 1px solid #333;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
Please suggest what to do.
There is something about scss+foundation but i am not sure what it is... scared to try it also , looks kinda scary.
Din think using Foundation Framework was going to be this and complicated .
What you should do is utilize tools such as Firebug (For Firefox) to inspect the element that you are interested in. This will clearly let you see what CSS is actually in effect for the element and what file/line that code is in so that you can change it. You can also override new values into the code right there in Firefox to see what effect it would have on your page.
This is easy but needs a bit of work ... app.css does the trick by over riding the values inside foundation.css !!
But finding out which element or selector should be overridden is a not easy and especially without knowing most of css. But there is a way around this... i.e. firebug for firefox !
Its a wonderful application that tells me which style is being used anywhere in the website.
I have a dropdown menu using css, I open with firefox that look ok. But when I try to open using IE 9, dropdown menu show, but it look transparent and content not show.
Here it's after I checked in my CSS, if I remove this code, in IE ok. But I want to keep this code. So how can I do that ?
background-repeat:repeat-x;
filter:progid:dximagetransform.microsoft.gradient(
startColorstr='#00a1bc',
endColorstr='#008ba2',
GradientType=0);
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25),
inset 0 -1px 0 rgba(0,0,0,0.1);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25),
inset 0 -1px 0 rgba(0,0,0,0.1);
box-shadow:0 1px 3px rgba(0,0,0,0.25),
inset 0 -1px 0 rgba(0,0,0,0.1);
Can't tell for sure because I'd need to see more of the code, but looking at the image it looks like it could possibly be a problem with the z-index. It looks to me as though the table looking content is sitting on top of the dropdown, thus blocking anything within it.
If you are using the position property on the dropdown and also the content that appears to be above/behind it, then make sure that the dropdown has a higher z-index than that of the other content.
Please try adding an -ms- vendor prefix for the gradient.
I'm trying to get an effect like an inset drop shadow effect in CSS that looks like the following image:
(source: gyazo.com)
Does any body know how I can get that effect with CSS?
The key here is multiple box shadows, a larger darker one inset from the top left and a very subtle shadow below thats slightly brighter than the background.
Notice the form of box-shadow is "x-offset, y-offset, blur, color"
Learn to use the blur amounts and multiple shadows and you can make some really nice effects.
Example style (for display on a background of #222):
.button {
display:inline-block;
padding: 10px 15px;
color: white;
border-radius: 20px;
box-shadow: inset 2px 3px 5px #000000, 0px 1px 1px #333;
}
The answer has already been given to you (box-shadow: inset ..), so here's a quick demonstration of how it could work:
http://jsfiddle.net/L6nJj/
The important part is box-shadow: inset 2px 2px 3px 0 red.
For an explanation of the available options: https://developer.mozilla.org/en/css/box-shadow#Values
Be sure to take into account the browser support for box-shadow, which is that it doesn't work in older versions of IE, but works "everywhere" else: http://caniuse.com/css-boxshadow
Have a look at the CSS3 box-shadow property, in particular, inset box shadows. Example L in this article should provide the effect you're looking for.