I have some text in my header which can be hard to see on different viewports. So, I want to highlight it as if you select it on a website (but black with opacity instead of the default blue).
I currently styled my header text like this:
header .header-content .header-content-inner h1 {
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase;
font-weight: 700;
(site: topsok [dot] nl).
I tried some different things with <mark> and background: in my stylesheet, but I wasn't able to add opacity to the selection. I would like it to look exactly the same way it looks now when you manually select the text on the header.
Any help would be appreciated! Thanks.
Something like this?
h1 {
background: rgba(0,0,0,0.8);
display: initial;
}
Related
I am stuck with this simple thing. Basically, i want to make something like this:
but my username view covers the whole width of the page and i get something like this:
My css style:
h3{
font-weight: bold;
color: #675eaf;
background-color: #f2f2f2;
padding: 8px;
font-size: 1.5vw;
}
Ok, so i set the max-width to about 20% and added margin:auto and it works.
I am trying to create a pre-styled button using a div with a class of .red-button. Some buttons need to have a littel magnifying glass on them so I am thinking I can use the CONTENT property to display this on those buttons that need it by simply adding "features" to the class.
<div class="red-button features">Find a Home</div>
CSS looks like this:
.red-button {
background: none repeat scroll 0 0 #A20335;
color: #FFFFFF;
font-size: 70%;
font-weight: normal;
padding-left: 10px;
text-transform: uppercase;
width: 193px;
}
.red-button.features, .red-button.floor-plans {
margin-right:20px;
content:url("http://www.abc.com/popeye/wp-content/uploads/construct/icon-magnifier.png");
}
So why is my magnifying glass not showing up?
I know the link is right because when I add ":before" to the css it shows up.
.red-button.features:before
Here is the page I am working on: http://splitlightdesigns.com/megatel/?page_id=379
Many thanks,
Houston
content can only be used with the ::before and ::after pseudo-elements. https://developer.mozilla.org/en-US/docs/Web/CSS/content
I want to change the color of the text (link) in a box. This is the CSS code I'm using:
.boxed-1 {
background-color: #e8ecf4;
border: 1px solid grey;
padding: 15px;
margin-top: 1px;
margin-bottom: 10px;
margin-right: 25px;
margin-left: 0px;
}
When I call for div class boxed-1, all the text displays blue. How can I change it?
I've tried a bunch of different suggestions from my google search to no avail.
My site is: http://mikediane.com
Links are set to the color blue by the browser, thus they do not inherit from their parent like most other elements do.
You will need to apply a color: #?????? to the a itself, like this:
.boxed-1 a {
color: #??????;
}
See this JSFiddle for a demonstration.
Typically if you want to set the text in an element just apply the CSS style color.
In your case,
.boxed-1 {
color: /*Whatever color you want*/
}
The problem is that your anchor tag's color is being applied to the text. If you create a rule like
.boxed-1 a { color: #hexcode; }
I'd expect this to work.
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 am new to GWT/uiBinder (latest version of GWT and testing under latest Eclipse) and really puzzled. My CSS for buttons is ...
/* --button-- */
.gwt-Button {
font-size: 16px;
font-weight: normal;
color: #0F0;
background: #F00; /* this gets ignored */
}
The background does nothing, the rest works.
I have tested that this CSS entry does something by changing the color and seeing that it works. I have also tried "background-color" (I have seen both in various docs). The background never changes.
I also tested a gwt-TextBox as follows and it works just fine.
/* --text box-- */
.gwt-TextBox {
font-size: 16px;
font-weight: normal;
color: #0F0;
background: Beige;
}
Note: I know that sometimes while testing you have to refresh the web page to see your changes.
Note: I can set the button background by using a CSS entry called "myButton" and using styleName='myButton' it in the uiBinder entry.
Note: The button is in a Layer in a LayoutPanel in a north:DockLayoutPanel in an east:DockLayoutPanel.
Help!
https://stackoverflow.com/a/7833358/635411
You can use a more specific selector like the other answer suggests:
/* --button-- */
button.gwt-Button {
font-size: 16px;
font-weight: normal;
color: #0F0;
background: #F00;
}
Personally, I try to avoid overwriting the default styles because of the precedence issues.
I think this should solve your problem
.gwt-Button {
font-size: 16px;
font-weight: normal;
color: #0F0;
background: #F00 !important;
}
You need to include this line before you make any changes to the background of gwt-Button
background-image:initial !important;
The problem you're having is that you're trying to set a background color, when gwt-Button uses a background image, so the image goes over your background color, making it seem like your css is being ignored.
there is a simpler way
you need to remove the gwt-Button style and then add whatever color you like
`
Button button=new Button();
button.removeStyleName("gwt-Button");
button.getElement().getStyle().setbackgroundColor("#F00");
//incase you need to remove the default border style aswell
button.getElement().getStyle().setBorderStyle(BorderStyle.NONE);
`