I am Trying to add a box shadow a:hover to a facebook icon image.
I thought this would be easy but as usual i was incorrect.
I am using a child theme in wordpress as I only started a couple of months ago and thought it would be a easy way to start. I thought this may be causing the problem but then i found JSFiddle and was unable to add a box shadow there either.
Code from JSFiddle:
http://jsfiddle.net/6P2sB/
HTML
Example 1
<a href="..." target="_blank">
<img class="icon" src="..." alt="facebook icon" align="right" />
</a>
Example 2
<div class="icon">
<a href="..." target="_blank"><img src="..." alt="facebook icon" align="right" />
</a></div>
CSS
.icon {
text-align: right;
box-shadow: none ! important;
border-radius: 7px;
margin-left: 5px;
margin-top: -5px;
margin-right: 10px;
height: 45px;
width: 45px;
}
.icon a:hover {
border-radius: 7px;
box-shadow: 5px 5px 5px rgba(0, 255, 0, 0.1);
}
Any suggestions would be greatly apreciated. Cheers guys!
The link can also be seen at http://www.a2zenyoga.com/events/#link
You are applying the box-shadow on the anchor. But you need to apply that on img when someone hover over a. So, your code should looks like this -
.icon a:hover img {
box-shadow: 5px 5px 5px rgba(0, 255, 0, 0.1);
}
I've fixed your fiddle.
I removed
: none !important;
Which prevents changes to be made, since you include the !important which overrides all.
and I changed .icon a:hover to .icon:hover'
Oh and one last thing, you might want to change rgba(0,255,0,0.1) the 0.1 is very low, and might not be visible.
I changed it only so you could see the difference
DEMO
Related
Based on this question add a class without jquery if hover another class
I have a div which will display by hover of a span element. That works fine.
I have another div in the site which is animated with animate.css
If the div from above, is changed from display:none to display:block, the div is blinking/flutter.
(if I change the CSS by using jQuery, the div doesn't blink - what is the difference?)
In this snippet it works fine, I don't know why on my page it did not work?
.cl_maindiv>.cl_span_icon:not(:hover)+.cl_icon_content{
/*Styles without :hover*/
display:none;
}
.cl_maindiv>.cl_span_icon:hover+.cl_icon_content{
/*Styles with :hover*/
display:block;
text-align: center;
position: absolute;
font-size: 9px;
top: 1px;
margin: 0px;
right: 14px;
background-color: rgba(68, 68, 68, 0.90);
border-radius: 2px;
border: 1px solid rgba(50, 197, 210, 0.90);
box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.25);
min-width: 30px;
color: #ddd;
text-shadow: 0 -1px 0 #111;
}
<div id="maindiv" class="cl_maindiv" style="float:left;border:1px solid #ff0000;">
<label>123</label>
<span class="cl_span_icon"> :-)) </span>
<div id="icon_content_div" class="cl_icon_content"> more happy faces :-))</div>
</div>
<link rel="stylesheet" href="https://www.4u.tools/assets/plugins/animate.css-master/animate.min.css">
<div id="animdiv" class="animated pulse" style="animation-iteration-count: infinite; float:left;border:1px solid #ff0000;"> <h2>I'm a animated div!</h2></div>
Is there a way to prevent this?
i've find the answear in the css of another div beside of them.
Adding: overflow: hidden; solved that blinking ;-)
Thanks a lot!
I am trying to line images up row by row but for some reason the outcome is not what I want it to be. The only time the images break to a new line is when I fill the page. I tried overflow:hidden, but then when the images expand, they are covered by white space. I can't tell if there is something wrong with my code or if I'm just doing it wrong. I have an poorly drawn image and the the code below.
figure {
width: 150px;
float: left;
margin: 0 20px 0 0;
background: white;
border: 10px solid white;
-webkit-box-shadow: 0 3px 10px #ccc;
-moz-box-shadow: 0 3px 10px #ccc;
-webkit-transition: all 0.7s ease;
-moz-transition: all 1s ease;
position: relative;
}
figure img {
width: 100%;
}
figure:hover {
-webkit-box-shadow: 0 3px 10px #666;
-moz-box-shadow: 0 3px 10px #666;
}
figure.tall:focus {
outline: none;
-webkit-transform: scale(3.0);
-moz-transform: scale(3.0);
-webkit-box-shadow: 0 3px 10px #666;
-moz-box-shadow: 0 3px 10px #666;
z-index: 9999;
}
<section class="image-gallery">
<div class="wrapper">
<figure class="tall" tabindex=1>
<img src="Gallery/image.jpg" alt="" />
</figure>
<figure class="tall" tabindex=2>
<img src="Gallery/image.jpg" alt="" />
</figure>
</div>
<div class="wrapper">
<figure class="tall" tabindex=3>
<img src="Gallery/image.jpg" alt="" />
</figure>
<figure class="tall" tabindex=4>
<img src="Gallery/image.jpg" alt="" />
</figure>
</div>
</section>
Any help or suggestions is appreciated.
P.S. I apologize for my lack of paint skills.
Just add this to your code and it should work fine.
.wrapper {
clear:left;
}
Because the contents of the wrapper are floated you need to force the subsequent wrapper to clear any content to its left, otherwise they just carry on floating one after the other.
Update:
You can also include the text as you stated in your drawing. If you use <figcaption> within the <figure> it all lines up as expected. I've updated my jsFiddle to reflect that.
If you want text between the two rows of images, as opposed to being associated with the images above it, you will need use clear:left; again to push the text beneath the first row of images.
I'm having a bit of a problem with my codes. I have a transparent/glassy looking navigation bar on my page. I am trying to add a logo over it, however when I do, the logo as well is transparent and can see through it.
I think the problem may be that the navigation bar is coming before the logo, but in my codes, I have the logo coming first.
#nav {
background: #000;
height: 40px;
opacity: 0.15;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}
<div style="border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
box-shadow: 0px 0px 7px #000000;
width: 960px;">
<div id="nav">
</div>
</div>
The logo image is just a regular < img > tag with a bit styling centering it in the center.
Your question indicates the logo is outside the navigation container, but your symptoms indicate that it is a child of the nav bar. Even if it is not, your code is flawed, and you will soon experience similar issues on the children of the nav element.
The CSS opacity setting changes the opacity of the whole element, including children. Try setting a background color using rgba:
#nav {
background: #000;
background: rgba(0,0,0,.15);
height: 40px;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}
The rgba background will fail in older browsers (IE8 and before), the #000 background is a fallback for them.
You could also create a semi-transparent png file and set it as the fallback background, this will work for IE7 and later (and IE6 if you use a png transparency hack):
#nav {
background: url('semitransparent.png');
background: rgba(0,0,0,.15);
height: 40px;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}
If you have the logo inside of the "#nav" it will be transparent. you will have to give the logo a:
.logo{position:absolute;}
And move it over the navigation.
You can try raising the z-level of the image so that it "floats" above the other elements in the visual order.
<img src="image.png" style="z-index: 1000" />
Although it sounds like your image is inheriting styles from the parent element. If you're placing the image inside the #nav element, then this is probably the case. Make sure you set opacity: 1; on the image style in that case.
Side note: You might also want to extract that styling out of the element tag and into your CSS to make it clearer.
i think u should want this .
CSS
#nav {
background: rgba(0,0,0,0.1);
height: 40px;
border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
color:black;
margin:10px 0 0 0;
position:relative;
padding-left:110px;
}
.logo{
position:absolute;
top:0;
left:0;
width:100px;
height:25px;
background:green;
}
HTML
<div style="border-bottom-right-radius: 0.6em;
border-bottom-left-radius: 0.6em;
box-shadow: 0px 0px 7px #000000;
width: 960px;margin:10px 0 0 10px;">
<div id="nav">
<div class="logo">Logo here </div>
your navi here
</div>
</div>
Live demo http://jsfiddle.net/rohitazad/yNMbt/
can anyone provide insight or a sample of how to create a css based bubble container for html to go inside it?
im looking to make a rounded table. that is to say i want the result to look like a table but with rounded edges. and it would be great to have a slight gradient inside as well.
i found one sample on this site: http://www.seekdotnet.com/
see on the right where they have the "We Are Here to Help!" section.
It is generally called rounded corners. You can do that using css only. Here is a great list of techniques. Also if you want to use javascript or jQuery in specific, there is a plugin for that called rounded corners (note: javascript is not a mandatory for doing what you want, but it is definitely a easy way).
The boxes can be given curvy or round corners using the border-radius attribute in CSS.
Example:
#myBtn {
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
box-shadow: 3px 3px 3px black;
}
#myBtn:hover {
background-color: orange;
}
#myBtn2 {
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
box-shadow: 3px 3px 3px black;
}
#myBtn2:hover {
background-color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title> Test </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="myBtn">
Button
</div>
The above is a button with curved corners.
<div id ="myBtn2">
Button
</div>
The above is a button with pointed corners.
</body>
</html>
The more the number of pixels in border-radius, the rounder the corners get.
To know more about border-radius, please visit https://www.w3schools.com/css/css3_borders.asp
Hope this helps...
Depends. if you need it to fully compatible with browsers that don't support CSS3, then try Here
if you want css3 rounded corners then try here for:
#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}
I may have misread the question and, if so, please accept my apologies.
As far as I can tell, the rounded corners in the example you give are, like I previously said in a comment, done by images. You should look into #Teja's answer as he points you in the right direction but, just for you reference, here goes the HTML and CSS used to recreate the layout you mention:
<div id="chat-panel"><h3>We Are Here to Help!</h3>
<p>We are extremely proud of our support and are available to help you at anytime.</p>
<span class="panel-bottom">
<a href="javascript: var e = window.open('http://livechatserver.seekdotnet.com/SightMaxAgentInterface/PreChatSurvey.aspx?accountID=1&siteID=1&queueID=2','chatWindow','width=490,height=404,resizable=0,scrollbars=no,menubar=no,status=no');">
<img alt="Click Here to chat with us" src="/images/button/btn_chat_new.gif">
</a>
</span>
</div>
#chat-panel {
background:url("http://www.seekdotnet.com/images/sidepanel_repeat.png") repeat-y scroll 0 0 transparent;
margin-bottom:1em;
text-align:center;
}
#chat-panel {
background:url("http://www.seekdotnet.com/images/sidepanel_repeat.png") repeat-y scroll 0 0 transparent;
margin-bottom:1em;
text-align:center;
}
#chat-panel p {
padding:0 10px;
}
#chat-panel .panel-bottom, #special-offer .panel-bottom {
background:url("http://www.seekdotnet.com/images/sidepanel_bottom.png") no-repeat scroll left bottom transparent;
display:block;
padding-bottom:10px;
}
after looking over all the notes here and searchign the web high and low i came to the conclusion that this is the best way to get rounded corners...
http://blog.benogle.com/2009/04/29/css-round-corners/
using lines of variable length to create the top and bottom curves.
feedback?
For browsers that support rounded corners, it's dead easy with a simple CSS function:
border-radius:10px;
To support older versions of Firexfox, you will need -moz-border-radius as well.
Internet Explorer doesn't support rounded corners in CSS, but you can use CSS3Pie as a hack to allow it to support them. See the CSS3Pie website for more info on exactly how to use it.
However note that rounded corners on a table element are likely to be problematic. You'll want to wrap your table with a <div> and put the rounded corners on that instead.
A CSS3 rounded corner example to get you started:
<div class="mysexaybox">
<p>Cos boxes were made to be sexay!</p>
</div>
.mysexaybox {
background: #ccc;
background: -moz-linear-gradient(top, #ddd, #bbb);
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#bbb));
border: 1px solid #bbb;
color: #000;
padding: 4px 8px;
text-shadow:0 -1px 0 rgba(255, 255, 255, 0.4);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}
DD_roundies is a decent solution if you absolutely must support IE6-8 (IE9 will support the rounded corners above)
This is the best example and explanation I have seen of box with rounded corners.
The All-Expandable Box
There are many ways to do it, use this as some inspiration.
I'm looking at the buttons used on twitter's home page, specifically the big orange 'signup' button. I see it is defined like this:
<p id="signup-btn">
<a id="signup_submit" href="/signup">
<span>Sign Up</span>
</a>
</p>
are they just using css to give the orange button appearance (which may just be a jpg), and also using css to specify the roll-over appearance (another jpg), and finally a third state for mouse-click (another jpg) to give the impression of a real clickable button?
If that's how it works, what should I look for to do the same thing? In my case I just want to make a button I guess, like:
<div class='mybutton'>Hello!</div>
.mybutton {
bgcolor: red;
bgcolor-mouseover: yellow;
bgcolor-mousedown: green;
}
yeah something like that would be great,
Thanks
Look at their CSS:
background: #FA2 url(http://s.twimg.com/a/1275412898/images/fronts/bg-btn-signup.png) repeat-x 0px 0px;
border: 1px solid #FA2;
border-bottom-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-top-right-radius: 5px 5px;
color: #333;
display: block;
font: normal normal bold 18px/normal Arial, sans-serif;
padding: 8px 10px;
text-align: center;
text-decoration: none;
text-shadow: #FE6 0px 1px 0px;
Haven't looked at it specifically, but that is entirely possible with CSS; they probably have a named style using the #signup-btn designation in CSS. To find out, you can use IE or FireFox with FireBug to examine the CSS and see exactly what they do for the button style. I would highly recommend that.
HTH.
I'd use a BUTTON element and CSS sprites. That way, you can style it however you like, and don't have to screw around with click() events in JS. Just use it wherever you'd use a regular button in a form.
EDIT: Coronatus, you should probably read this: Rediscovering the Button Element. They're remarkably easy to make visually consistent across browsers using a little CSS.