In the footer of my site http://www.stefaanoyen.be (left column) I have some social media icons which are an icon font. On hover, I want the circles red and the icons in it white. The red circles work, but there's a white square behind them. How do I limit the white to the shape of the icons/circles?
This is my HTLM:
<p class="share">l i g f</p>
And this is my CSS:
.share a {
color: #ececec;
text-decoration: none;
font: 50px 'socialicoregular', Helvetica, sans-serif;
}
.share:hover {
cursor: pointer;
}
.share a:hover {
color: #B61618;
text-decoration: none;
font: 50px 'socialicoregular', Helvetica, sans-serif;
background-color: #fff;
}
Thanks a lot for your help!
Stefaan
There is no simple solution for this one because you only rely on a font. You could try to add a border-radius (your font-size is set to 50px so radius of 25px will probably do it but you will have to play around with it) to the .share a:hover element.
The "Shape of the icons/circles" is actually a rectangle.
You're setting the white background to the link. The link is a rectangle.
You won't be able to directly style the background of a font/character.
Since your icons are all rounded, here's a little trick you could use:
border-radius: 50px;
That's simply a guessed figure. It doesn't mean it's the right one. Just find the one you need that matches your icons height/width.
(You might also need to work with your line-height to make sure your font is, or at least looks vertically centered.)
Related
I've created (copied and edited from online tool) a little box with a text here on the botton right corner
I would like to change also the color of the text in the box. But there's the command a:link, a:visited.
How could I bypass these commands and giving the color I would like to to the text, maintaining the link?
Thanks
Pseudo-selectors as a:link and a:hover (and many more) change the default behavior of the browser. You may omit them, but I'm pretty sure you don't want to.
a:link sets style of the anchor so it is not the default blue underlined.
a:hover sets style of the anchor when you move your mouse over the link.
Use search engine of your choice to learn more, try 'css pseudo selector'
Read the code, the color settings are all there:
.button {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 12px 24px;
border: 1px solid #28A26B;
border-radius: 8px;
background: transparent
linear-gradient(to bottom, #FFF, #FFF)
repeat scroll 0% 0%;
// this is what you're probably
// looking for - the color of the button body.
// It's set to transparent.
font: bold 20px arial;
color: #28A26B; // Color of the content
text-decoration: none;
}
.button:hover, .button:focus {
// these pseudo classes just make the js events onmouseover
// and onclick obsolete...
color: #28A26B;
text-decoration: none;
}
Set background to the color of your choice, remove the gradient part and you're done. Do NOT copy blindly.
After rule on line 77 of styles.css file put this one:
#call-to-action a:link, #call-to-action a:visited {
color:yellow ;
}
I would like content of my anchor links to be consistenly bold and underlined, but spans inside anchor tag should not be bold.
Sample markup:
<a>Hello, <span>fooooo</span> bar</a>
Styles:
a {
font-weight: bold;
text-decoration: underline;
}
span {
font-weight: normal;
}
(right click on image and select view/open in new tab to get a better view)
In IE8+, underline thickness is inconsistent: apparently it is determined by percentage of bold text inside link. Is there a way to make underlining look exactly the same for every link on the page?
Fiddle: http://jsfiddle.net/FfBGn/
Kinda hack-ish, but instead of text-decoration:underline, you could use this instead:
border-bottom:1px solid #000;
demo
Alternatively, if you have to use text-decoration:underline,
you could just make bold bolder.
font-weight:800;
demo
Maybe an easier way could be to set the border of the anchor instead of underline? That way you can dictate the thickness yourself?
border-bottom: 1px solid #000000;
So... I created this weird solution to a weird problem: I needed shadows with straight sides, like a gradient with clean sides instead of a box-shadow.
I used an :after element to attach a gradient to the bottom of the elements that needed it (in the sample, this is commented out). I then tried an inset shadow with negative size and this works the same way. These work perfectly except for one minor detail: I can't use it like a shadow because the elements it covers sometimes aren't clickable.
Sample: http://codepen.io/syren/pen/jlcym
Some things I've ruled out already:
1) Using inset-shadows on the elements underneath: It needs to be applied to the original element or else it won't function like it's shadow when things move. If I could figure out
2) Using a box-shadow with negative spread or size: This works, and I would use this except it doesn't look like how the designer wants it to.
3) Z-index: It's messy because it's a very dynamic page, so I can use it in some places but not in others because seeing as its a shadow, it should be over everything visually at least.
So, to recap, I want it to look exactly the way it does with the clean edges, and I need it to be attached to the element not the surrounding elements and I'd really like it to be a pure CSS solution, like with pseudo-elements.
Any ideas?
http://codepen.io/anon/pen/cuJqG
html:
<nav>
<h1>I'm an Example Header</h1>
</nav>
<section>
<h3>You can't click me because the shadow above is covering me!</h3>
css:
nav{
border-bottom:3px solid #000;
position:relative;
}
h1{
font-family: "Helvetica";
text-transform:uppercase;
margin: 20px 10px 10px;
}
h3{
font-family: Helvetica, sans-serif;
font-weight: 600;
padding:10px;
margin:0;
cursor: pointer;
width: 98.75%;
color: white;
background: #ff0000;
box-shadow: inset 0 20px 40px -20px #000;
}
I have a font that has outline only. It does not have any fill color. Here you can see this fone.
http://www.dafont.com/comica-bd.font
I am using this font in my webpage (fontface). When I change color of font, its outline is changed. Is there a way to change fill color as well using CSS? Or is my last option to use images?
This is what i want:
This is what I could do with CSS and fontface.
Any CSS property to fill background or something.?
No, there's no way to fill the font in css. The blank space can not be considered part of the font for css purposes.
** EDIT - I hadn't checked this in other browsers. It's a pretty gross implementation. I wouldn't recommend doing anything like this. **
This solution uses HTML5, CSS3 and, as such, has some browser support conditions.
See this codepen http://codepen.io/keithwyland/pen/tbfcE (code below if codepen doesn't work)
I've used the Google Web Font Jacques Francois Shadow (http://www.google.com/webfonts) and it's sister font Jacques Francois. Basically, the shadow font has an outline font like the one you're using. The other font is the same but not outline, it's filled in.
What I did was set a data- attribute to repeat the text of the element, then use that in the CSS. I'm also using a pseudo element to spit out the value of that data attribute. It's not perfect (mostly the spacing), but what would help is if your 2nd font could have the exact letter width as your original font and just be filled in instead of outline.
CSS
#import url(http://fonts.googleapis.com/css?family=Jacques+Francois+Shadow);
#import url(http://fonts.googleapis.com/css?family=Jacques+Francois);
body {
background-color: red;
font-family: 'Jacques Francois Shadow', cursive;
color: #000;
font-weight: bold;
}
h1 {
position: relative;
word-spacing: 2px;
font-size: 300%;
z-index: 1;
}
h1:after {
font-family: 'Jacques Francois', cursive;
content: attr(data-ttl);
position: absolute;
color: blue;
top: 0;
left: 0;
letter-spacing: 0.06em;
word-spacing: -0.055em;
text-shadow: 1px 0 blue;
z-index: -1;
}
p {
font-size: 300%;
}
HTML
<h1 data-ttl="Stuff with fill">Stuff with fill</h1>
<p>No fill</p>
I noticed I am not the first to ask about CSS sliding doors. However this seems (at least to me) to be a rather odd problem which I have not seen an answer for.
Trying to create a simple rounded corner link button:
html:
<span>Add A New Somthing</span>
css:
.link_button {
background: transparent url('img/backgrounds/bg-buttonRight.png') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial;
height: 41px;
margin-right: 6px;
padding-right: 14px;
text-decoration: none;
}
.link_button span {
background: transparent url('img/backgrounds/bg-buttonLeft.png') no-repeat top left;
display: block;
line-height: 31px;
padding: 5px 0 5px 14px;
}
.link_button:active {
background-position: bottom right;
color: #000;
outline: none;
}
.link_button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px;
}
results:
alt text http://www.codefruition.com/sandbox/img/buttonProblems/problemImageOne.jpg
The two images are overlapping, which is what I want, but why the discoloration? Why would one be darker? I tried using png jpg, gif, with and without transparency.
I posted the code here, along with another attempt using only one jpg instead of two, but still the same results.
Did I miss something?
Thanks in advance.
Your problem isn't your CSS. It's that the images generated for use in the CSS aren't seamless. The edges have a darker color that doesn't fade out in less than 14px, the width of the right "door."
There seems to be a bevel or an inner shadow on the button. If you are the designer and have the Photoshop document, check what the styling is on the button; you may have to shrink the aforementioned styles.
ethyreal, the two images are completely different colours, hence the discolouration. I suggest you actually try physically doing it yourself.
Open bg-buttonLeft.png and bg-buttonRight.png separately in Photoshop or some form of image editing software, then place bg-buttonRight.png over bg-buttonLeft.png and you should notice the two are actually different colours.
If you still can't see it, move your head vertically up and down to see you monitor from different angles.
Are you on a Mac using Safari? Mac's have 1.8 gamma value that wouldn’t match with (files created on) Windows’ 2.2 gamma value. This was fixed in Snow Leopard, which now has 2.2 by default.
Try previewing in Firefox and let us know if its the same?
Your image has a transparency set to the button. Look at your layer - maybe it is set to 90% transparency or something. When they overlap you get a little darker on the overlap image?