I want to create a line with circles. Can this be done with background-repeat? Or do I need to set a picture as background? The circles should have a 5px radius.
p:after {
content: '';
background: 'rounded div of size 10x10px' repeat-x
width: 50%;
}
This is the only solution without using background-image or border-image encoded in base64 or using external files.
https://jsfiddle.net/3r6xsr0m/
html:
<div class="line"></div>
css:
.line:before {
content: "..................................................................................................";
display: block;
font-size: 60px;
font-family: Georgia;
color: #aaa;
max-width: 100%;
overflow: hidden;
}
Dots may differ depending of browser font rendering algorithm.
You'll have to create a 10px x 10px image of the dot and then use your method of repeating the background using either pseudo or just a new element. I'd go with a new div element if you can to prevent any issues across browsers like IE8. You'll also have to give your element a width if you go pseudo.
Related
I have inserted an icon with an image inside.
In chrome I see the icon
But in IE icon disappear.
Here's my CSS
<div class="infoIcon"></div>
.infoIcon {
content: url('/assets/img/info-sign.png');
background-color: #919191;
width:15px;
border-radius: 8px;
margin-left:10px;
display: inline;
vertical-align: sub
}
you can achieve this using HTML entity.
.infoIcon {
font-size: 40px;
}
<div class="infoIcon">ⓘ</div>
In css "content" applies to ::before & ::after pseudo selectors.
As to why it Chrome is showing the image, Chrome tends to be flexible with css syntax most of the times. IE and FireFox are not showing the image because it is not the right syntax.
Edit:
Example
If you want to keep 'content' You'll have to move your content to
.:before
.icon:before{
content: url('src');
}
However you'll need to scale your image to the right size. (Icon libraries use fonts where they can change the font-size easily)
Second option is continue as you are now but switch to background-image
.info{
background-image:url('icon.svg.png');
background-size: 100% 100%;
width:40px;
height: 40px;
}
I have the following problem: I have to use an HTML->PDF conversion service to render a piece of HTML. However, this service is a bit limited in it's functionality, so I need a way to "work around" it.
I'm mainly just printing text, so it's not a big deal, but the only problem is that I have to print some "unticked" and some "ticked" check boxes, my converter is failing at this. In particular I've tried:
Using the unicode ☐ ("☐") and ☑ ("☑") characters, but the converter doesn't render them (probably the font it's using doesn't
have them)
Using the WingDing characters þ and ¨ but again, the wingding font is not recognized
The converter doesn't support images, so can't just use an image
I was thinking, at this point, to "simulate" a checkbox by using spans with borders, something like:
<span style="border: 1px solid black; height: 12px; width: 12px;"></span>
However, I can't make it look correct (no fault of the converter this time, even browsers show the above as just one vertival line.
Can anyone help me "draw" checkboxes using just "basic" html elements? What would be the cleanest way?
PS: checkboxes need to be inline with the text.
You're on the right track.
Using HTML and CSS:
/* The standalone checkbox square*/
.checkbox {
width:20px;
height:20px;
border: 1px solid #000;
display: inline-block;
}
/* This is what simulates a checkmark icon */
.checkbox.checked:after {
content: '';
display: block;
width: 4px;
height: 7px;
/* "Center" the checkmark */
position:relative;
top:4px;
left:7px;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
<div class="checkbox"></div> Unchecked<br><br>
<div class="checkbox checked"></div> Checked
The reason YOUR code didn't work was because you were using a span element, which is an inline element. You can use a span for this, but you'll need to add the style of display: block to the element (making it act as a block element instead of an inline element).
The div tag is a block, so no need for setting it's display style. If you would like the div to display inline, set the display: inline-block
Try this :
<div style="border: 1px solid black;
width: 10px;
height: 10px;
display: inline-block;
margin-right: 4px;">
</div>
https://jsfiddle.net/8rt4dqfc/
I've an issue by using an base64-encoded SVG. I used the following SVG:
Menu Icon from iconmonstr
I passed this file through:
SVG Optimiser
& Base64 Encoder
Finally I created an a-element with two classes
.ui-icon-btn {
display: block;
background-color: red; //just a randomly picked color
}
.ui-icon-menu {
display: block;
width: 48px;
height: 48px;
background: url('data:image/svg+xml; base64, [...]');
}
When I open Chrome's DevTools, it tells me, that the color has been overwritten. How can I avoid this?
Example on JSFiddle
Just place .ui-icon-btn after .ui-icon-menu in the CSS.
It was being overwritten as the stylesheet is read from top to bottom.
jsFiddle example
.ui-icon-menu {
display: block;
width: 48px;
height: 48px;
background: url("");
}
.ui-icon-btn {
display: block;
background-color: red;
}
Alternatively, you could use background-image to add the image as opposed to just background thus, it then wouldn't be overwritten. jsFiddle example
The background: line is a shorthand for setting background-image, background-color, background-position etc. If you change it to background-image: instead, it won't overwrite the background-color style.
You have a space between image/svg+xml; and base64. That's not allowed as per spec. See this corrected fiddle: http://jsfiddle.net/53Zsr/2/
Apart from that, set only the background-image property, if you want to keep the color intact.
I'm creating PHP, Javascript based photo-gallery from scratch
The problem is, I want to make difference between simple picture and photo-album.
So simple picture borders look like that
Is that possible to create facebook like photo-album borders (double borders, which creates multiple images effect) via css or CSS3?
P.S Don't know if it will be possible with old css standarts. I mean, CSS3 probably can do it but it will not be backward compatible. In other hand, currently my php side generates 100x100 px thumbs. I need something that will not be ruined if I will increase size of thumbs.
Thx in advance
Use a pseudo element like :before or :after, for example:
Turns out, most browsers don't like :before on images because it's not a text-containing element. You could still do this if you did it on an alternative element, like a div, and set the div's background to the original image. Or, you could try:
http://jsbin.com/otivaj/edit#html,live
Is this what you're looking for?
jsfiddle
HTML:
<div class="facebook-album"></div>
CSS:
.facebook-album, .facebook-album:before
{
background: red;
width: 100px;
height: 100px;
margin: 20px;
border: 3px solid #FFF;
box-shadow: 0 0 0 1px #999;
position: relative;
}
.facebook-album:before
{
margin: 0;
content: "";
position: absolute;
top: -7px;
left: -7px;
background: white;
z-index: -1;
}
You could just look at Facebook's source to figure it out. This will also work:
http://jsfiddle.net/g9A6a/
Yep, you can definitely do this with CSS. It looks like all your images are the same size, too, which will make this very straightforward. Simply place your <img> inside a containing element with position: relative; and an offset. Both the container and image should have a border, with padding and offsets you so desire. Set the width and height of the containing element based off the child image's dimensions.
Here is a
DEMO on jsfiddle
I'm not sure you can achieve that effect with simply CSS2. If adding more markup is an option, I would do something like this:
<ul>
<li><img></li>
</ul>
li {
position: relative;
border: 1px solid gray;
}
img {
padding: 6px;
border: 1px solid gray;
position:absolute;
top:6px;
left: 6px;
background-color:white;
}
Chrome and Safari are displaying a border around the image, but I don't want one. There is no border in Mozilla. I've looked through the CSS and HTML, and I can't find anything that is fixing it.
Here is the code:
<tr>
<td class="near">
<a href="../index.html"class="near_place">
<img class="related_photo" />
<h4 class="nearby"> adfadfad </h4>
<span class="related_info">asdfadfadfaf</span>
</a>
...
CSS:
a.near_place {
border: none;
background: #fff;
display: block;
}
a.near_place:hover{
background-color: #F5F5F5;
}
h4.nearby {
height: auto;
width: inherit;
margin-top: -2px;
margin-bottom: 3px;
font-size: 12px;
font-weight: normal;
color: #000;
display: inline;
}
img.related_photo {
width: 80px;
height: 60px;
border: none;
margin-right: 3px;
float: left;
overflow: hidden;
}
span.related_info {
width: inherit;
height: 48px;
font-size: 11px;
color: #666;
display: block;
}
td.near {
width: 25%;
height: 70px;
background: #FFF;
}
Sorry, I copied some old code before. Here is the code that is giving me trouble
Thanks in advance
Now I don't know if this is a bug with Chrome or not but the grey border appears when it can't find the image, the image url is broken or as in your case the src isn't there. If you give the image a proper URL and the browser finds it then the border goes away. If the image is to not have a src then you will need to remove the height and width.
sarcastyx is right, but if you want a workarround you can set the width and height to 0 and a padding to make space for your image.
If you want a icon of 36x36, you can set width and height to 0 and pading:18px
I know it is an old question. But another solution is to set the src to a 1x1 transparent pixel
<img class="related_photo"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
This works for me.
.related_photo {
content: '';
}
This may happen when the image is planted dynamically by css (e.g. by http://webcodertools.com/imagetobase64converter) in order to avoid extra HTTP requests. In this case we don't want to have a default image because of performance issues. I've solved it by switching from an img tag to a div tag.
img[src=""]{
content: "";
}
Lazy image solution (img loading="lazy")
If you are using lazy image loading you may notice this thin thin border before the image has loaded more than if you didn't.
You're more likely to see this for a horizontal scrolling gallery than a normal vertical scrolling webpage.
Why?
Lazy loading unfortunately only works on the vertical axis. I'm assuming this is because there's a high likelihood that you're going to scroll down, but not left to right. The whole point of lazy loading is to reduce images 'below the fold' from consuming unnecessary bandwidth.
Soution 1:
Detect when the user has scrolled (eg. using intersection observer) and then set loading="eager" on each image you want to immediately load.
I haven't actually tested this, and it's possible some browser's won't immediately load images - but it should be fine.
Solution 2:
Detect when the image has finished loading loaded and then fade it in.
img.setAttribute('imageLoaded', 'false');
img.onload = () =>
{
img.setAttribute('imageLoaded', 'true');
};
Then with css hide the image until it's loaded, after which it fades in nicely:
img
{
opacity: 1;
transition: opacity .5s;
}
img[imageLoaded='false']
{
opacity: 0; // hide image including gray outline
}
Also this behavior is subject to change, the browser may be clever enough to detect a horizontal scrolling element in future - but right now Chrome and Safari both seem to have a zero pixel window for looking for horizontal lazy images.
img.related_photo {
width: 80px;
height: 60px;
**border: solid thin #DFDFDF;** //just remove this line
margin-right: 3px;
float: left;
overflow: hidden;
}
Inside img.related_photo, you need to change border: solid thin #DFDFDF; to border: 0.
I have fixed this issue with:
<img src="img/1.jpg" style="height:150px; position: absolute; right: 15px;">
The right: 15px is where you want the image to be shown, but you can place it where you want.
I just added src="trans.png", trans.png is just a 100x100 transparent background png from photoshop.
Worked like a charm no borders
To summarise the answers given already: your options to remove the grey border from an img:not([src]), but still display an image using background-image in Chrome/Safari are:
Use a different tag that doesn't have this behaviour. (Thanks #Druvision) Eg: div or span. Sad face: it's not quite as semantic.
Use padding to define the dimensions. (Thanks #Gonzalo)Eg padding: 16px 10px 1px; replaces width:20px; height:17px; Sad face: dimensions and intentions aren't as obvious in the CSS, especially if it's not an even square like #Gonalo's example.