Right now I am using an anchor tag to generate a question mark for the help icon. Looks like this
But I want the question mark to look like this:
I'm not exactly sure how I can style it with CSS to look like the 2nd one. How do you create a background that's 1) a circle and 2) has a gradient?
You can do it with css like this.
a {
color:#fff;
background-color:#feb22a;
width:12px;
height:12px;
display:inline-block;
border-radius:100%;
font-size:10px;
text-align:center;
text-decoration:none;
-webkit-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
-moz-box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25);
}
?
But Quentin are right that is a graphic problem not a programmer
Related
I cannot for the life of me figure out how to do this: subscription box.
Should be trivial for experienced devs... problem is the gradient bleeds onto the white of the box, and doesn't end vertically, like so.
It's a simple box underneath the email form, with a gradient applied, and then blur (a lot of it). Ideally, the gradient rectangle's positioning should be anchored to the box.
Example of the code for the box and the gradient can be found here
pastebin^
Maybe this one helps you
box-shadow: 0px 30px 10px 0px #EBEBEB ;
Also, you can see more here
although the below answer is correct! You might only want one side to have the inner shadow as well as use the inset keyword to have the shadow inside the element
.oneside{
-moz-box-shadow: inset 0 6px 6px -6px black;
-webkit-box-shadow: inset 0 6px 6px -6px black;
box-shadow: inset 0 6px 6px -6px black;
border-radius: 4px;
}
.allaround{
-webkit-box-shadow: inset 0 0 5px #000000 ;
-moz-box-shadow: inset 0 0 5px #000000 ;
box-shadow: inset 0 0 5px #000000 ;
border-radius: 4px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<body>
<input class="oneside">
one side
</input>
</br>
<input class="allaround">
all around
</input>
</body>
</html>
How would I make the image glow when hover? I would like to use white-color.
<img src="resources/img/email.png" class="img-circle">
image:
http://i.stack.imgur.com/Hx0kH.png
Can't post link. So, I would like to make it glow (inside), thanks. Any help would be great
I think what you are trying to do is accomplished with two versions of the same image (use of photo editing tools). Then use this code:
<img src="URL of darker image here"
onmouseover="this.src='URL of lighter image';"
onmouseout="this.src='URL of darker image here';">
</img>
You can give glow at the borders using
img:hover
{
-moz-box-shadow: 0 0 5px 5px #ddd;
-webkit-box-shadow: 0 0 5px 5px #ddd;
box-shadow: 0 0 5px 5px #ddd;
}
You can choose the color you want according to your requirements.
you can also visit http://codepen.io/anon/pen/ilqnb
or http://css3generator.com/
You can use box-shadow withInset property
.shadow { -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; }
Whats the best way you would suggest getting a glowing effect around a div of text? Can it be done through CSS?
I tried playing around with the box-shadow but couldn't quite get it how I wanted it.
You're looking for text-shadow - see http://caniuse.com/#feat=css-textshadow for info on what browsers support it, and the "Resources" tab there for links about how to use it
I think you want something like this:
-webkit-box-shadow: 0px 0px 19px -1px rgba(0,255,81,1);
-moz-box-shadow: 0px 0px 19px -1px rgba(0,255,81,1);
box-shadow: 0px 0px 19px -1px rgba(0,255,81,1);
Just play around with the controls at http://www.cssmatic.com/box-shadow until you get what you want.
div {
-webkit-box-shadow: 0px 0px 19px -1px rgba(0,255,81,1);
-moz-box-shadow: 0px 0px 19px -1px rgba(0,255,81,1);
box-shadow: 0px 0px 19px -1px rgba(0,255,81,1);
}
<div><p>Text</p></div>
This question already has an answer here:
Box-Shadow Only on Left and Right
(1 answer)
Closed 8 years ago.
This is css code
.one-edge-shadow {
width:200px;
height:200px;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
Using this style , as I show in this fiddle example , the shadow is at the bottom of the box .
I want to drop shadow to the left and right side of the box .
Actually , I'm little weak in CSS :)
Thanks !
You have to understand the parameters of box-shadow as well as how the drop shadow works (how the light works).
To do what you wish, you need two different shadows, as one light source cannot possible cast shadows on both sides (it could if it was in front of the box, but than you'd have shadow spreading around the up and down edge as well).
Here's the quick answer:
box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
Updated fiddle
What happens here is that you cast a shadow which is offset 10px both to the right and to the left (first parameter offset-x). This alone would achieve what you wish, however, you'd have a blocky shadow (example).
Since you want things to get a bit blurry, you'd have to add the third parameter (blur-radius). Once you do that, you will see the blur creeping from behind your box above and below: that's because behind your box there effectively is another same-sized box, which is however blurred.
To avoid this, you use the fourth parameter (spread-radius) with a negative value to effectively clip the size of the projected box behind your box, so that the top and bottom shadow will be hidden.
Hi Zey this is the code paste in your css and you will get what you want.
This is CSS
.one-edge-shadow {
width:200px;
height:200px;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
-moz-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
}
This is HTML
<div class="one-edge-shadow"></div>
and check it out in fiddle http://jsfiddle.net/MfV2Y/
Try this:
.one-edge-shadow {
width:200px;
height:200px;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
-moz-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
}
I have navigation menu and I would like to implement somehow a border which is the same as the background but when I try that the box shadow doesn't do the effect that I want.
This is what I want
can someone take a look at the fiddle http://jsfiddle.net/fmB5R/1/
border-bottom: 1px solid rgb(48, 48, 48);
box-shadow:0 0 18px rgba(0,0,0,0.6);
Use box-shadow's inset property to get that effect:
box-shadow:inset 2px 0 4px rgba(0,0,0,0.6);
Fiddle: http://jsfiddle.net/agconti/fmB5R/5/