I want to take the hover effect on the word "Dropdown" on this template (the gray/black box that appears when you put the cursor on it) and put it on the nav menu of this other template (from the same site)
I'm a beginner, I tried a lot of things but I just can't achieve the same effect. I tried copying the #nav code from the first template .css and pasting it on the another template css but it just copies the text, font, color but the hover effect is not there.
Thank you in advance and sorry for the stupid-ish question
The dropdown effect on the first template is achieved using Javascript rather than pure CSS. You'll need to find the .js file in that template which is controlling it. I took a look at the source, which you can do by right clicking on the page and selecting View Source. The dropdowns are being controlled by a jQuery plugin called Dropotron.
https://github.com/n33/jquery.dropotron
If you add this to the new template you wish to use, you can achieve the same effect.
EDIT:
3 things are happening to create the hover effect on the word itself.
Background Color
Curved Corners
Inset White Border to make a slight 3D effect.
These are achieved with three CSS rules:
background
border-radius
box-shadow
The exact CSS is:
border-radius: 6px;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.15);
box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.024) inset, 1px 1px 0px 0px rgba(255, 255, 255, 0.024);
The background-color on the new theme's header is white, so you don't need the shadow. You would just insert this into the CSS file:
#nav ul li a {
border-radius:6px;
}
#nav ul li a:hover {
background:rgba(0, 0, 0, 0.15);
}
You can change the color if you want of course.
Related
On my index page, I have a background image which is added to the div dynamically by some javascript.The inline style added is the following.
element.style {
background: rgba(0, 0, 0, 0)
url("http://www.myshop.com/wp-content/themes/mytheme/images/media/bg-footer.jpg")
no-repeat scroll 50% -287.5px;
}
I have changed that background image using the following class
.footer-bg{
background: rgba(0, 0, 0, 0)
url("http://www.myshop.com/wp-content/uploads/2014/01/blue-living-room.jpg")
no-repeat scroll 50% -59.5px !important;
margin-top: 20px;
}
I have used !important for overriding the background style loaded by the javascript and it worked.After changing this site is bit slower than earlier.My doubt here is that Will the site load both style or will it completely ignore the first one?
If the site loads both styles and apply the one with !important then it needs some loading time right?
Do these style overriding directly affects site loading speed.Please guide me.
Thanks
If that background add on the same class (.footer-bg) then you can override with below method-
.footer-bg [style]{
background: rgba(0, 0, 0, 0) url("http://www.myshop.com/wp-content/uploads/2014/01/blue-living-room.jpg") !important;
}
Hope it will helps you.
Assuming I have a set font color that I must maintain, and that it overlays content that can be of any color, how can I make sure the font is readable no matter what it's overlaying?
Here is a jsFiddle to demonstrate the effect I am trying to describe.
http://jsfiddle.net/4AUDr/
#overlay
{
position: relative;
top: -150px;
color: #860101;
}
Meme captions utilize white text with a black outline to make it readable over any hypothetical meme image, however I don't think there is a cross-browser compatible CSS only method of achieving that, and it would potentially look quite horrible with smaller fonts.
What solutions are there to this problem?
While text-shadow is nice, it doesn't actually give the result you want. A shadow is a shadow and what you need to have for most readable text is a "text border". Unfortunately. there is no such thing as text-border in css, but we can make one !
I am surprised by how much unpopular multiple shadows are. This is a case where by multiple shadows you can do miracles :
CSS
p {
color: white;
font-size: 20px;
text-shadow:
0.07em 0 black,
0 0.07em black,
-0.07em 0 black,
0 -0.07em black;
}
This style will simply add a thin shadow (as thin as 7% of your actual font-size) around your text (up, down, left, right).
But are four shadows enough ? Maybe you can get a better result with eight ? It looks like the answer is yes, makes sense to me, but it could also be that we are overkilling things here. Note that in this case I also decreased each shadow's size :
CSS
p.with-eight {
text-shadow:
0.05em 0 black,
0 0.05em black,
-0.05em 0 black,
0 -0.05em black,
-0.05em -0.05em black,
-0.05em 0.05em black,
0.05em -0.05em black,
0.05em 0.05em black;
}
Then in this markup in a colourful background you have a nicely readable text:
HTML
<html>
<body>
<p>This text is readable on any background.</p>
<p class="with-eight">This text is using eight text-shadows.</p>
</body>
</html>
JSFiddle example here
You can experiment with text-shadow property (MDN doc), for instance:
text-shadow: white 0px 0px 10px;
(jsFiddle)
It's supported in IE10. For IE9, you can use proprietary Internet Explorer filters as per this answer.
You can use the css3 property text-shadow
Warning: Browser compatibility problems (IE9 no support)
http://caniuse.com/css-textshadow
a simple example:
.shadow {text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);}
http://jsfiddle.net/H4JtR/
If you use white shadow over black fonts, or vice-versa, your text will be readable no matter what is overlaying.
Another option is to use a background-color with transparency (you may want to apply this to an inline element like a span or a p instead of a div because background-color is going to apply to the whole div area even where there is no text)
background: rgba(33, 33, 33, .9);
http://jsfiddle.net/LSRkE/
Just use a transparency that contrasts with your font color. Then you can lower the alpha-channel value so the image from the background will be visible enough.
Related answer here https://stackoverflow.com/a/5135033/953684
Perhaps this CSS was not around at the time this question was answered, but you can use stroke to add a nice border around text. Like this:
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgba(0, 0, 0, 1);
I am trying to increase the width of a text.I am not trying to make it bold.I am trying to keep the inside of the text empty.My idea is to fill the text with a color,and ,onhover change the color.
Here is a picture of what i am trying to accomplish:
http://img.ctrlv.in/50eee77779a5b.jpg
The issue is that I cant find a way how to increase text width using css.(i found it via javascript,but then the text assumes properties of an image)(and hence onhover effect is not possible)(I found a way to increase font width using javascript in a w3schools tutorial here
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_text2)
I am looking for a html solution(not canvas)
I know there is a shortcut in CSS3/HTML 5 to achieve this effect,but not able to recollect/search sites where i saw the effect.
Any help would be appreciated
Thanks in advance
May not be perfect but not sure of a css selector that can increase letter width, you could try something like:
a:hover {
letter-spacing: 0.2em;
color: #07C;
}
This increases distance between letters, also use css rather than jquery for hover event, its easier!
As far as I can see, you actually want to stroke the text. The width of the font can stay the same so long as the stroke happens outside the boundaries of the text, right?
Well, CSS Tricks has an article which talks about stroking text using webkit-text-stroke and/or text-shadow. An example is given here.
So, you would end up with something like:
/* CSS from tutorial */
.stroke {
/* WebKit (Safari/Chrome) Only */
-webkit-text-stroke: 1px black;
/* If we weren't using text-shadow, we'd set a fallback color
and use this to set color instead
-webkit-text-fill-color: white; */
color: white;
text-shadow:
3px 3px 0 #000,
/* Simulated effect for Firefox and Opera
and nice enhancement for WebKit */
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
/* The colour changing bit - added by me */
.stroke:hover {
color:blue;
}
I'd like to develop a generalizable solution for creating etched lines. The goal is to be able to not have to manually pick closely related colors for every color scheme where I want etching. The issue seems that the color of the indented part in relation to the color of the background is somewhat critical for creating the 3 dimensional effect.
Below is an example in blue (the lines above the comment bubble/underneath the number "11"). I think I need to use box-shadow but not sure if this is the best way.
If box-shadow is what I should use, does anyone know how to set its CSS values such that would would work for say a gray line would also work for say a blue line?
You could use borders with semi-transparent black/white colors (using rgba) that will darken/lighten the underlying color.
Example at http://dabblet.com/gist/4182495
Adding pseudo elements with :after/:before gives you extra power in adding second level borders etc..
Here's the slightly simplified CSS for that comment indicator, which I found using the Chrome Web Developer tools:
.media-bar .count-badge {
padding: 0 7px;
background: #1C5380;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(0, 0, 0, 0.2);
border-radius: 12px;
}
If you visit the page and inspect the count-badge element, you'll be able to turn the box-shadow styles on and off, which will show how they create the inset effect.
I guess there are two borders together:
border-bottom: 1px solid #1C5380;
border-top: 1px solid rgba(255, 255, 255, 0.12);
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.