possible to use css to have zebra stripe as background without using image?
Yes you can, with something like
ul li {
background-color: #fff;
}
ul li:nth-child(even) {
background-color: #efefef;
}
See:
http://reference.sitepoint.com/css/pseudoclass-nthchild
http://reference.sitepoint.com/css/understandingnthchildexpressions
Edit
You really should've stated clearly what you meant by zebra strips ;)
If you need gradient backgrounds without using images, see:
http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/
Basically, the syntax you'll be using will look something like:
background-image: -moz-linear-gradient(left, #fff, #999);
background-image: -webkit-gradient(linear, #fff, #999);
See:
https://developer.mozilla.org/en/CSS/-moz-linear-gradient
http://webkit.org/blog/175/introducing-css-gradients/
For more details
It's a little hard to understand what you're after, but I would suggest maybe looking into Base64 encoded images in css
Base64 Encoding Image
or alternatively using canvas or the svg namespace to draw it yourself
Not really in the context I think you are referring to. You can use CSS3 selectors to target alternating items.
ul li {
background-color:#000;
}
ul li:nth-child(odd) {
background-color:#FFF;
}
Even though you stated no image, the best solution would be to use a 1 pixel wide image with 2 rows that you repeat across x and y axis.
Related
I want to create horizontal line as shown in below image using css. but unable to create so, i have never seen such line before using css.
Can anyone who are export in css can help me with this?
I know basic like this
Update
Note: Actually, i have to put this in my email template, so i am avoiding images. Just pure css
The only CSS I can think of, is a stretched (transformed) dotted border:
div {
border-bottom: 1px dotted black;
transform: scale(1,10);
}
<div></div>
If it's for an email (see comments section):
use <img src="bars_300x10.png" style="display:block; width:300px; height:10px;">
with an image exactly cut as the expected email design.
Using simply a 3x1 px background base64 .gif:
hr{
border:0;
background: url('data:image/gif;base64,R0lGODlhAwABAIAAAAAAAP///yH5BAAAAAAALAAAAAADAAEAAAICRFIAOw==');
height:10px;
}
<hr>
One posibility that gives you absolute control about the results is a gradient
div {
width: 300px;
height: 40px;
background: linear-gradient(to right, black 0px, black 5px, white 5px, white 30px);
background-size: 30px 100%;
}
fiddle
You can adjust the size of the pattern, the width of the black strip, the color ...
I commented but, seems like it would work to use vertical pipes (|) and then to control their size/color/spacing using css font techniques. I'll post some examples. It's not clear to me if using pure css is a requirement for you or not.
span {display:block;}
.a { color:blue; font-size:2em; letter-spacing:.2em; }
.b { color:red; font-size:1em; letter-spacing:2px; }
.c { color:green; font-size:8px; letter-spacing:1px; }
<span class="a">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
<span class="b">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
<span class="c">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
Another option, if you don't need much variance in the appearance would be to create a single bar "image", then set it as the background-image of a <div/>, and finally apply repeat-x on it.
I have an issue with this site in IE: http://www.coachjoelleinc.com/
In all other browsers the JS rotator in the top right gives me correctly styled teal colored buttons. In IE 9 the buttons change to Black and White. Any ideas? I'd love to know if there is something I can do to plan for this in future projects.
It's because you're adding the gradient using Mozilla prefix, which is not understood by IE:
-moz-linear-gradient(#6BA4B4, #26687B);
Therefore, IE will fall back on the background-color:black; that is also defined for the same CSS classes (.wt-rotator .thumbnails li, .wt-rotator .play-btn, .wt-rotator .prev-btn, .wt-rotator .next-btn)
Try setting this instead (as described here):
.wt-rotator .thumbnails li, .wt-rotator .play-btn, .wt-rotator .prev-btn, .wt-rotator .next-btn {
background: -moz-linear-gradient(#6BA4B4, #26687B);
background: -webkit-linear-gradient(#6BA4B4, #26687B);
background: -o-linear-gradient(#6BA4B4, #26687B);
background: -ms-linear-gradient(#6BA4B4, #26687B);
background: linear-gradient(#6BA4B4, #26687B);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#6BA4B4', endColorstr='#26687B');
}
I wonder if it is possible in pure css to have a stencil effect:
A block with a background color, and color "transparent" that would reveal the background of the parent block.
For example, I have a parent block with a gradient or pattern as background, and I want to overlay a block with a black background where the text content would leave see the gradient of the parent block.
I haven't found a way to get this to work, but maybe someone has an idea or a tip?
EDIT
Sorry, I should not be precise enough.
Here is a picture of the desired result:
May be you can use CSS3 background-clip. write like this:
HTML
<p>T</p>
CSS
p{
font-size:50px;
font-family:impact;
background: url(http://lorempixel.com/output/technics-h-c-1414-1431-2.jpg);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
position:relative;
width:80px;
height:80px;
text-align:center;
padding-top:10px;
}
p:after{
content:'';
position:absolute;
background:rgba(0,0,0,0.8);
width:80px;
height:80px;
border-radius:100%;
top:0;
left:0;
z-index:-1;
}
body{
background: url(http://lorempixel.com/output/technics-h-c-1414-1431-2.jpg);
}
Check this http://jsfiddle.net/rD6wq/6/
Something using an embedded font, such as http://www.google.com/webfonts/specimen/Allerta+Stencil may be close to what you want. By changing the background and text colours, you should get what you are looking for
#element_id {
opacity:0.4;
filter:alpha(opacity=40);
}
this will set the opacity of the div or whatever you apply it too 40% of its original opacity (which is usually 100% unless you apply this to .png or .gif images with reduced opacity already)
As far as I know, you can use SVG for that, but it won't be trivial.
This (and this) might be the closest implementation of what you need. The problem is that it doesn't work the same in every browser, though you may try deeper research.
Upd: Lea Verou has presented a simple and elegant solution in her article: Text masking — The standards way
You can play with the CSS3 text-shadow property.
p{ text-shadow:0px 0px 2px #000 }
See my example here.
Detailed info about the property here.
I have an image over a table that has been style with CSS. When I have my image on the table without a href it is fine, once I apply an href the transparency is no longer working. Any way around this?
Table css
table.list_data {
background-color:#F3F3F3;
border:1px outset #A1A1A1;
border-collapse:collapse;
border-spacing:2px;
font-family:'MS Shell Dlg';
font-size:13px;
font-style:normal;
font-variant:normal;
font-weight:normal;
width:100%;
}
Happens in Chrome and FF, haven't tried IE but I expect the same.
html.....
<td><img alt="Add A job" src="images/add.png"/></td></tr><tr><td>joe bloggs</td>
try adding the following:
a{
background: transparent !important;
}
a img{
background: transparent !important;
}
This is not a terribly good idea to do in a production site. This indicates that there is something wrong with your css code. Try looking through the css and find whatever is causing your anchor tags to have a non-transparent background.
If you want to assure that you have transparent PNGs no matter how the code is, use TweakPNG.
http://entropymine.com/jason/tweakpng/
I have a CSS rule like this:
a:hover { background-color: #fff; }
But this results in a bad-looking gap at the bottom on image links, and what's even worse, if I have transparent images, the link's background color can be seen through the image.
I have stumbled upon this problem many times before, but I always solved it using the quick-and-dirty approach of assigning a class to image links:
a.imagelink:hover { background-color: transparent; }
Today I was looking for a more elegant solution to this problem when I stumbled upon this.
Basically what it suggests is using display: block, and this really solves the problem for non-transparent images. However, it results in another problem: now the link is as wide as the paragraph, although the image is not.
Is there a nice way to solve this problem, or do I have to use the dirty approach again?
Thanks,
I tried to find some selector that would get only <a> elements that don't have <img> descendants, but couldn't find any...
About images with that bottom gap, you could do the following:
a img{vertical-align:text-bottom;}
This should get rid of the background showing up behind the image, but may throw off the layout (by not much, though), so be careful.
For the transparent images, you should use a class.
I really hope that's solved in CSS3, by implementing a parent selector.
I'm confused at what you are terming "image links"... is that an 'img' tag inside of an anchor? Or are you setting the image in CSS?
If you're setting the image in CSS, then there is no problem here (since you're already able to target it)... so I must assume you mean:
<a ...><img src="..." /></a>
To which, I would suggest that you specify a background color on the image... So, assuming the container it's in should be white...
a:hover { background: SomeColor }
a:hover img { background-color: #fff; }
I usually do something like this to remove the gap under images:
img {
display: block;
float: left;
}
Of course this is not always the ideal solution but it's fine in most situations.
This way works way better.
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
text-decoration: none;
border: 0 none;
background-color: transparent;
}
No cumbersome classes that have to be applied to each image. Detailed description here:
http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/
Untested idea:
a:hover {background-color: #fff;}
img:hover { background-color: transparent;}
The following should work (untested):
First you
a:hover { background-color: #fff; }
Then you
a:imagelink:hover { background-color: inherit; }
The second rule will override the first for <a class="imagelink" etc.> and preserve the background color of the parent.
I tried to do this without the class="", but I can't find a CSS selector that is the opposite of foo > bar, which styles a bar when it is the child of a foo. You would want to style the foo when it has a child of class bar. You can do that and even fancier things with jQuery, but that may not be desirable as a general technique.
you could use display: inline-block but that's not completely crossbrowser. IE6 and lower will have a problem with it.
I assume you have whitespaces between <a> and <img>? try removing that like this:
<a><img /></a>
I had this problem today, and used another solution than display: block thanks to the link by asker. This means I am able to retain the link ONLY on the image and not expand it to its container.
Images are inline, so they have space below them for lower part of letters like "y, j, g". This positions the images at baseline, but you can alter it if you have no <a>TEXT HERE</a> like with a logo. However you still need to mask the text line space and its easy if you use a plain color as background (eg in body or div#wrapper).
body {
background-color: #112233;
}
a:hover {
background-color: red;
}
a img {
border-style: none; /* not need for this solution, but removes borders around images which have a link */
vertical-align: bottom; /* here */
}
a:hover img {
background-color: #112233; /* MUST match the container background, or you arent masking the hover effect */
}
I had the same problem. In my case I am using the image as background. I did the following and it resolved my problem:
background-image: url(file:"use the same background image or color");