Any chance this is available? Every time I search for something of the sort, all of the results are just about debugging css.
There is no CSS entity like the image you've included. As others have commented, since you have the image, you can include it in your CSS via content. Another way is to base 64 encode it and add it as a background image.
.bug {
display: inline-block;
height: 1rem;
width: 1rem;
background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZGF0YS1uYW1lPSJNYXRlcmlhbCBFeHBhbmQiIGlkPSJNYXRlcmlhbF9FeHBhbmQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNi4xODgsNTIuMTczQTIsMiwwLDAsMCw1LDU0djhIOVY1NS4zbDYuOTkyLTMuMTA4YTE3Ljk2OCwxNy45NjgsMCwwLDAsMzIuMDE2LDBMNTUsNTUuM1Y2Mmg0VjU0YTIsMiwwLDAsMC0xLjE4OC0xLjgyN2wtOC4zOS0zLjcyOWExNy44NTgsMTcuODU4LDAsMCwwLC41MTEtMy4xMTVsNy44NzktMy41QTIsMiwwLDAsMCw1OSw0MFYzMkg1NXY2LjdsLTUsMi4yMjNWMzAuM2w3LjgxMi0zLjQ3MkEyLDIsMCwwLDAsNTksMjVWMTdINTV2Ni43bC01LjMyNSwyLjM2N0E2LjAwNiw2LjAwNiwwLDAsMCw0NCwyMkg0MlYxOGE3Ljk0MSw3Ljk0MSwwLDAsMC0uOTktMy44NDdsMy4yMzktMi41OTFBMiwyLDAsMCwwLDQ1LDEwVjVINDFWOS4wMzlsLTIuNzQ3LDIuMkE3LjkzOSw3LjkzOSwwLDAsMCwzNCwxMEgzMGE3LjkzOSw3LjkzOSwwLDAsMC00LjI1MywxLjIzN0wyMyw5LjAzOVY1SDE5djVhMiwyLDAsMCwwLC43NTEsMS41NjJsMy4yMzksMi41OTFBNy45NDEsNy45NDEsMCwwLDAsMjIsMTh2NEgyMGE2LjAwNiw2LjAwNiwwLDAsMC01LjY3NSw0LjA2N0w5LDIzLjdWMTdINXY4YTIsMiwwLDAsMCwxLjE4OCwxLjgyN0wxNCwzMC4zVjQwLjkyM0w5LDM4LjdWMzJINXY4YTIsMiwwLDAsMCwxLjE4OCwxLjgyN2w3Ljg3OSwzLjVhMTcuODU4LDE3Ljg1OCwwLDAsMCwuNTExLDMuMTE1Wk0xOCw0NFYzNEgzMFY1Ny44NEExNC4wMDksMTQuMDA5LDAsMCwxLDE4LDQ0Wk0zNCw1Ny44NFYzNEg0NlY0NEExNC4wMDksMTQuMDA5LDAsMCwxLDM0LDU3Ljg0Wk0yNiwxOGE0LDQsMCwwLDEsNC00aDRhNCw0LDAsMCwxLDQsNHY0SDI2Wm0tNiw4SDQ0YTIsMiwwLDAsMSwyLDJ2MkgxOFYyOEEyLDIsMCwwLDEsMjAsMjZaIi8+PC9zdmc+") no-repeat center center;
}
<p>It looks like you have a <span class="bug" aria-label="bug icon"></span>! Do something about it.</p>
Related
I just want the html file in that area , I dont want to use or any of those i just have the Curiosity and persistence on doing it using css pseudo .
I have seen a website did it already as i think in his navigation bar
visit https://www.nationalww2museum.org?
i tried many methods but it seems impossible by my knowledge.
** THAT'S HTML **
<li id="upper-header-content-nav-ul-li" style="margin-left: 30px;">
SELECT LANGUAGE
</li>
** THAT'S CSS **
#upper-header-content-nav-ul-li-a[href="#select"]::before{
background-image: url(world1.svg) ;
content: '';
height: 22px;
width: 27px;
margin-top: 1px;
display: inline-block;
size: contain;
background-repeat: no-repeat;
vertical-align: middle;
}
I have seen a website did it already as i think in his navigation bar visit https://www.nationalww2museum.org
The navigation bar of this site uses icon fonts, not SVG images. It is not possible to change the color of an external SVG integrated by URL.
I'm making a userscript for a game that allows a player to choose a flair from a menu. I have a picture that contains each flair that looks like this:
Without separating each flair into its own image, how can I make a layer of buttons on top of each flair in a sort of grid-like fashion? That way when the user presses the button on top of a flair, I can know which button was pressed and get the necessary information to select it.
I'm thinking of putting the picture in an <img> tag and making a table that lies right over the image, but I'm worried about how to line up the table correctly.
It sounds like you want to use a sprite map
Quick example
Pluck the only part of the image that you want out of it.
CSS like this
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
HTML like this
<div id="home"></div>
You'll define a css id or class for each image in img_navsprites.gif
Reduced CSS example
This way we reduce the required CSS (at the cost of more verbose html). Bootstrap does similar things with glyphicons.
CSS
.sprite {
// Assuming equal width and height of all sprites in the map
width: 46px;
height: 44px;
background: url(img_navsprites.gif);
}
.sprite-first {
background-position: 0 47px;
}
.sprite-second {
background-position: 0 93px;
}
.sprite-third{
background-position: 0 139px;
}
HTML
<span class="sprite sprite-second"></span>
Source
CSS Image Sprites
I use a p:rating tag like this.
<p:rating id="ratingID" value="#{manageBean.clientDetails.level}" styleClass="rating"/>
I want to change the image instead of star. I surfed google and got the below code.
.rating .ui-rating-star a, .ui-rating-cancel a {
background-image:url(../Images/fire.jpg);
display: block;
height: 15px;
width: 16px;
}
But it is not working for me.
Is their any other way for this?
I was able to change the "on" (the yellow star) image using this:
.rating .ui-rating-star-on a{
background-image: url("#{resource['images:new-document.png']}") !important;
display: block;
height: 15px;
width: 16px;
background-position: center;
}
If you want to change also the other images would be more tricky. Apparently checking the example in the Primefaces showcase website I can see this is what they are using:
I think if you would just create the same image picture as that and following the size (16X80) as well then replace the pictures accordingly, you can achieve achieve your desired effect.
Haven't tried it though on my end.
I want to show images on the page but I don't want to hardcode the references to the images in html.
Is it possible to do something like:
HTML:
<span id="got-easier"></span>
CSS:
#got-easier { image: url(/i/trend-down.gif); }
(IE6 should be supported)
Yes, use a background image :)
#got-easier { background-image: url(/i/trend-down.gif); }
Remember to set a span to display: block; and set width/height of your image if you use it.
As David Dorward pointed out, if it's an image relevant to the information, it should be included in the document with an <img> tag and alt attribute.
Heya, the common term for it is css Image Replacement technique (or IR). Here are the commonly used methods currently. Just choose any of the two ;)
/* Leahy Langridge Method */
span#imageName {
display: block;
height: 0 !important;
overflow: hidden;
padding-top: 0px; /* height of image */
width: 0px; /* width of image */
background: url(url/of/image.jpg) no-repeat
}
/* Phark Method */
span#imageName {
display: block;
width: 0px;
height: 0px;
background: url(url/of/image.jpg) no-repeat;
text-indent: -9999px
}
In case you want to display the images inline, position:absolute does the trick:
#got-easier {
display:inline;
position:absolute;
width:img-Xpx;
height:img-Ypx;
background:url(/i/trend-down.gif) no-repeat;
}
The only problem with this is that, since the image position is absolute, it will overlay whatever is next to it (in IE6 it might appear behind), and the workarounds that I found to fix this (with both CSS and jQuery) aren't supported in IE6. Your image-container will have to be followed by new line.
This might be useful when, for instance, you'd like to place a (?) image next to a form caption or a button (that usually have nothing next to them) to display help with onmouseover.
Like this one:
Or should I do like this instead and change the font-size to zero:
Home
Edit:
No one here seems to understand my question. So I'll post some CSS too:
#logo {
display: block;
width: 326px;
height: 69px;
background-image: url(images/logo.gif);
background-repeat: no-repeat;
}
#logo:hover {
background-image: url(images/logo-hover.gif);
}
It looks like that, so I can't replace it with an image because then the hover wouldn't work. Seems like there is no solution to this so I guess I'll skip it.
Not including descriptive text of one form or another (text, title or description) would be a serious accessibility failure regardless of any SEO issues.
Edit: If you're asking how to hide the text of a link given a desire to use a background image, there's a few ways to do that. My preferred option (where possible) is to provide a fixed height and then a line height ~3 times as large and turn overflow off. You can also adjust letter spacing to reduce the width towards zero, e.g. from production code:
background: transparent url(../images/sprites/icons.gif) no-repeat;
a.foo
{
width: 16px;
height: 16px;
display: block;
overflow: hidden;
line-height: 666px;
letter-spacing: -1.1em;
}
As I understand, Google does use link text to rank pages. A page with an incoming link text of "foo" will give that page a higher search result position when searching for "foo".
Using your example, you could do the following:
Use a descriptive text in the link:
Foo
<style type="text/css">
a.foo {
display: block;
text-indent: -999em; /* Hide the text, using a negative indent (only works on single lines) */
background: url(foo.png) no-repeat;
width: 329px;
height: 69px;
}
a.foo:hover {
background-position: 0 -69px; /* Using spites to switch between normal and hover state */
}
</style>
Use an image in the page:
<img src="foo.png" width="329" height="69" alt="Foo" />
<style type="text/css">
a.foo:hover {
background: url(foo-hover.png) no-repeat;
}
a.foo:hover img {
visibility: hidden; /* Hide the image on hover, so the background of the link is shown, but dimensions and page flow stay the same */
}
</style>
Which method you choose, depends on what you want to do with it. For example: if you're creating an print style sheet, using the image would be preferred, because background images won't be printed (by default).
You should provide either an image or text for the link. If you go the image route, be sure to have alternate text as well that describes the image and/or the link destination.
Failure to provide ANY context for the link, which is what you are doing now, having nothingness be a link, is poor usability as there is no visual hint for a user using a conventional browser or any way for a screen-reader to handle the link.
A better approach may be to put an image in the a tag; the a:hover CSS can still work with this (at least with some browsers). As a simple example,
a { color: #30f; }
a:active, a:hover {
text-decoration: none;
color: #F30;
background: yellow;
}
can cause a yellow bar to appear adjacent to an image in an a href.
In the terms of SEO, Atl tag is needed as long as it involves images.