I wonder if its possible to use the browsers cursor as an image.
So for example that I could use somewhere on the page the resize image of the cursor.
I tried to find some answer to this, all I could find is how to use an image as a cursor.
And interesting enough,
Microsoft uses images to show the cursors:
https://msdn.microsoft.com/en-us/library/aa358795.aspx
Mozilla also uses images:
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
Which makes sense, since one might have complete different set of cursors (maybe even a broken set - not having all variants) defined in the Operating System. And so it wouldn't show what they actually wanted to show. So my hopes are still up that there is some way.
I suppose what I want is not possible, but I thought lets ask.
Maybe its very simple and I am really overlooking something I hope.
It is simply not possible to use the image which is used by the browser.
As a web developer, I have to cut a layout similar to this (example website by Ruben Bristian):
Should I bother with cutting multiple small images like a logo:
a label:
and so on? Or should I just make one big background image with all elements like this:
and make a positioned <a href> with display: block; for a linked logo?
A single image has smaller size than multiple elements altogether. What are the other pros and cons?
Use separate images.
Here are a few reasons why:
Maintenance:
It's going to be much easier to maintain in the future, if/when there comes a point when you want to build on what you already have. Furthermore (and subjectively), the background image is not critical to the design. It wouldn't look broken if parts of the background were clipped. It would look broken however, if the logo were distorted.
Bear in mind also that newer, sharper displays are being developed. It's much easier to display the standard resolution background (it's already blurry, so clarity is not essential), and maintain two versions of the logo. One for standard displays, one for HD.
Semantics: What if the user has images disabled? Sure, it's unlikely, but what about Google? You should have some proper markup with real content. Your site needs real textual content in order for Google's crawlers to gather information about it. Use CSS image-replacement techniques to build the interface.
Another note on HD displays:
It's convention to serve larger images to HD (retina) displays, and use CSS to downsize them, effectively increasing their dots-per-inch. If you use just one image, the user will have to download a considerably large image. More bandwidth used by you, and slower experience for your users.
Furthermore, the text will look horrible on HD displays. It makes much more sense to allow the browser to render razor-sharp text to the user.
Accessibility: For a start, screen readers won't have a clue what your site is about. That might not be so relevant in this case, but it's best practice to build and accessible website. If you want to include some smaller text on the site, some users may be unable to read it. Normally they would increase the font-size, but if you use images, they're powerless.
I may have over-dramatised this answer, but the advice is well-intentioned.
I would honestly try a little bit of a different approach. The "photo" part of the image would be one image, the logo another, and maybe the double bar on either side of the heading another (but might not be necessary.
I would use the photo part as a bg image on a div, and within code the rest.
I wouldn't make the text part of the image at all. Try using a service like Google Web Fonts to get a good font.
The approach will save you lots of maintenance time, and also help with performance.
PROS:
Total bytes loaded is lower.
You do not have to worry about how little images are put together to become the total image.
if you just use 1 image you will find that it will be much easier to maintain the fluidity of the layout. You will not have padding/alignment issues, rendering issues, etc. Realistically the load time should be the same either way, maybe a tad longer for multiple images as the browser would have to render more css, but i imagine it would not be very noticable. In the end it really comes down to what is better for the job. I pretty biased towards 1 clean image :)
I guess you have to think about how you are going to use each element individually, and how they are going to change in the future.
You might want to change the logo, animate it, or want to re-use it elsewhere. The background image might change, or become multiple images in some sort of transitional gallery.
If this its never going to change (unlikely), then, yes, flatten it in a single image.
I personally would have as a separate background image. Then perhaps have the logo and the label on another transparent png and utilise css sprites to re-use them throughout the site. This will halve the number of requests required to download the logo/label, and allow you to optimise each image separately ie the complex background photo, and the more simple logo/label.
What is a good 'image spriting' tool to turn single images into one big sprite with different background-position?
I know about http://spriteme.org/ but it doesn't seem to produce a result as nice as:
goDaddy's or Behance's
I've been doing it by hand for small hovers and icons but doing the entire website would take a while to hand-code all the background-position properties.
Thanks
You can try SASS/COMPASS. Even if you are only using the sprite functionality (called sprite mixin) it is worth using it. There are some nice tutorials like this one.
A while ago I found an article which discussed a solution to an alternative to the traditional way in which CSS sprites are used and designed.
A common issue is that you need to leave space around a part of the sprite if you don't want to accidentally have other parts of the sprite "bleed" into certain elements. Thus you can use diagonal layouts and things to alleviate this problem, but they all require a lot of open white space.
This article demonstrated an alternative which let you create zero white space sprites, and let you define the exact area and dimensions of the image you want to use without worrying about bleeding. I believe it used the CSS content property in the method, but I can't be sure.
I really want to find this article again but I can't seem to find it :(
I'm sorry for my vague description, but for anyone else who saw the article, they'll know what I'm talking about. Any help finding the link? Thanks!
I think what you're referring to might be creating font icons. It allows you to have retina-ready images, while at the same time restricting you to 1 color. There are currently two good solutions to do that:
http://fontawesome.io
http://icomoon.io
There's also the way of creating SVG modifiable shapes, which in turn allows you to use shapes of almost unlimited colors and complexity. This solutions however is not perfect, as it's based upon SVGs, which are not supported by older browsers
I'm a real noob with css and have seen many times, many little icons in a larger file. I'd like to know if I can use something like this for a rating system that I'm making. 5 stars being the best and one being the worst. I'd like to be able to use a single file that contains all of the stars and then based on the rating, show the proper rating. I'm used to doing it the old way by slicing up the images and then showing the rating that way.
What is this and where can I find more info on it?
This is a technique known as CSS sprites. The main advantage is that you save some (or sometimes, a lot) of HTTP requests.
You can read about them here, for example, and one good article to read is also this one on diagonal CSS sprites.
When you come to building your own, there's a lot of tools around that will assemble smaller pictures for you and also generate matching CSS with the proper background-position values.
Try searching for CSS sprites - here's a decent intro
http://css-tricks.com/css-sprites/
and SpriteMe is is a funky little bookmarklet that does the heavy lifting of creating the sprite image for you
http://spriteme.org/
Both links point in turn to other reading for you
It's called css sprites.
its called "css sprites" look on this article, with example how to do it to rating image:
http://www.last-child.com/image-sprites-flexible-and-accessible-packages/