What is css slicing

What is css slicing

For people who make websites

And what does this have to do with the web?#section2

Everything old is new again, and though the rise of 3D games has made sprite maps
obsolete, the concurrent rise of mobile devices with 2D gaming capabilities
have brought them back into vogue. And now, with a bit of math and a lot of CSS,
we’re going to take the basic concept and apply it to the world of web design.

Specifically, we’re going to replace old-school image slicing and dicing (and the
necessary JavaScript) with a CSS solution. And because of the way CSS works, we’re
going to take it further: by building a grid of images and devising a way to get each
individual cell out of the grid, we can store all buttons/navigation items/whatever we wish
in a single master image file, along with the associated “before” and “after” link states.

How do CSS Sprites work?#section3

As it turns out, the basic tools to do this are built into CSS, given a bit of creative
thinking.

Let’s start with the master image itself. Dividing a rectangle into four items, you’ll
observe in this master image that our intended “before” link
images are on the top row, with “after” :hover states immediately below. There’s
no clear division between the four links at the moment, so imagine that each piece of text is
a link for now. (For the sake of simplicity, we’ll continue to refer to link images as
“before” images and the :hover state as “after” for the rest of this article.
It’s possible to extend this method to :active , :focus , and
:visited links states as well, but we won’t go into that here.)

Those familiar with Petr Stanicek’s (Pixy)
Fast Rollovers may
already see where we’re going with this. This article owes a debt of gratitude to Pixy’s
example for the basic function we’ll be relying on. But let’s not get ahead of ourselves.

On to the HTML. Every good CSS trick strives to add a layer of visuals on top of a clean
block of code, and this technique is no exception:

This code will serve as a base for our example. Light-weight, simple markup that degrades
well in older and CSS-disabled browsers is all the rage, and it’s a trend that’s good for the
industry. It’s a great ideal to shoot for. (We’ll ignore any text inside the links for the
time being. Apply your favorite
image replacement
technique later to hide the text you’ll end up adding.)

Applying the CSS#section4

With those basic building blocks, it’s time to build the CSS. A quick note before we
start — because of an IE glitch, we’ll be tiling the after image on top of the before image when we need it, instead of replacing one with the other. The result makes
no real visual difference if we line them up precisely, but this method avoids what
otherwise would be an obvious “flicker” effect that we don’t want.

#skyline < width: 400px; height: 200px; background: url(test-3.jpg); margin: 10px auto; padding: 0; position: relative;>#skyline li < margin: 0; padding: 0; list-style: none; position: absolute; top: 0;>#skyline li, #skyline a

instead. You’ll see why in a moment.

The rest of the CSS in the above example sets things like the dimensions of the #skyline
block and the list items, starting positions for the list items, and it turns off the
unwanted list bullets.

Positioning the links#section5

#panel1b #panel2b #panel3b #panel4b

At this point we have a basic image map with links, but no :hover states.
See the example. It’s probably easier to see what’s happening
with borders turned on.

Hovers#section6

In the past we would have applied some JavaScript to swap in a new image for the after
state. Instead our after states are in one image, so all we need is a way
to selectively pull each state out for the appropriate link.

If we apply the master image to the :hover state without additional values,
we make only the top left corner visible — not what we want, though clipped by the link
area, which is what we want. We need to move the position of the image somehow.

We’re dealing with known pixel values; a little bit of math should enable us to offset
that background image enough both vertically and horizontally so that only the piece
containing the after state shows.

That’s exactly what we’ll do:

#panel1b a:hover < background: transparent url(test-3.jpg) 0 -200px no-repeat;>#panel2b a:hover < background: transparent url(test-3.jpg) -96px -200px no-repeat;>#panel3b a:hover < background: transparent url(test-3.jpg) -172px -200px no-repeat;>#panel4b a:hover

Where did we get those pixel values? Let’s break it down: the first value is of course
the horizontal offset (from the left edge), and the second is the vertical.

Each vertical value is equal; since the master image is 400 pixels high and the after
states sit in the bottom half, we’ve simply divided the height. Shifting the whole background
image up by 200px requires us to apply the value as a negative number. Think of the top
edge of the link as the starting point, or 0. To position the background image 200 pixels
above this point, it makes sense to move the starting point -200px.

It’s a bit cumbersome to explain the process, but playing around with the values will
quickly show you how the offsets work, and once you’re familiar it’s not all that hard to
do.

So there you have it. Single-image CSS rollovers, degradable
to a simple unordered list.

Buttons#section7

There’s no reason why we have to leave the links touching each other, side-by-side as they
were in the previous example. Image maps may be convenient in some spots, but what about
separating each link into its own stand-alone button? That way we can add borders and
margins, let the underlying background show through, and generally treat them as separately
as we need to.

for placing the original background image, we’ll end up
applying it to all
s instead and offsetting each the same way we
offset the after states in the prior example.

Note that in this example we’ve added 1px borders which, of course, count toward the final
width of the links. This affects our offset values; we’ve compensated by adding 2px to the
offsets where appropriate.

Irregular shapes#section8

Up till now we’ve focused only on rectangular, non-overlapping shapes. What about the more
complex image maps that image slicers like Fireworks and ImageReady export so easily? Relax,
we’ve got you covered there too.

and turning off list item bullets and setting widths and so forth.
The big difference is where we position the
s; the goal is to
surround each graphical element with a box that tightly hugs the
edges.

, we’re able to precisely place our links exactly where we want them. Now
all that’s left is to set up the hover states.

Worth noting is that in this case, a single set of before and after images wasn’t enough.
Because of the overlapping objects, relying on only one after state would show pieces of
surrounding objects’ after states. In fact, it would show precisely the pieces that fall
within the link’s borders. (Easiest to just see it in action.)

How to avoid this? By adding a second after state, and carefully selecting which objects go
where. The master image in this case has split the purple and blue
objects into the first after state, and the green, orange and yellow objects into the second.
This order allows boxes to be drawn around each object’s after state without including
pieces of the surrounding objects. And the illusion is complete.

Benefits and pitfalls#section9

A couple of final thoughts. Our new CSS Sprite method tests well in most modern browsers.
The notable exception is Opera 6, which doesn’t apply a background image on link hover states.
Why, we’re not sure, but it means that our hovers don’t work. The links still do, and if
they’ve been labeled properly, the net result will be a static, but usable image map in
Opera 6. We’re willing to live with that, especially now that Opera 7 has been around for a
while.

The other concern is familiar to anyone who has spent time with
FIR. In the rare cases in which users
have turned off images in their browsers but retained CSS, a big empty hole will appear
in the page where we expect our images to be placed. The links are still there and clickable,
but nothing visually appears. At press time, there was no known way around this.

Then there’s file size. The natural tendency is to assume that a full double-sized image must be heavier than a
similar set of sliced images, since the overall image area will usually be larger. All image
formats have a certain amount of overhead though (which is why a 1px by 1px white GIF
saves to around 50 bytes), and the more slices you have, the more quickly that overhead adds up.
Plus, one master image requires only a single color table when using a GIF, but each slice
would need its own. Preliminary tests suggest that all this indicates smaller total file
sizes for CSS Sprites, or at the very least not appreciably larger sizes.

And lastly, let’s not forget that our markup is nice and clean, with all the advantages that go
along with that. HTML lists degrade wonderfully, and a proper image replacement technique
will leave the text links accessible to screenreaders. Replacing the sprite imagery is dead
simple, since all of our dimensions and offsets are controlled in a single CSS file, and all
of our imagery sits in a single image.

Recently by Dave Shea

CSS Sprites2 – It’s JavaScript Time

In 2004, Dave Shea took the CSS rollover where it had never gone before. Now he takes it further still—with a little help from jQuery. Say hello to hover animations that respond to a user’s behavior in ways standards-based sites never could before.

Further reading about Browsers

Now THAT’S What I Call Service Worker!

If you’re looking to achieve the single-page app level performance without the overhead (and boot time) of a huge JavaScript library or having to completely rewrite your website in a new technology, Jeremy Wagner shares a clever approach combining Service Worker and streamed web page partials you’re sure to love.

Request with Intent: Caching Strategies in the Age of PWAs

Caching media files, especially images, seems like an obvious way to improve performance, but should we? To provide a more performant UX without abusing users’s network connections or hard drives, Aaron Gustafson puts a spin on classic best practices, experiments with media caching strategies, and shares smart Cache API tricks.

About the Author

Dave Shea

Dave Shea runs his own studio Bright Creative in (not very) sunny Vancouver. He blogs sometimes at Mezzoblue and Flickrs a bit more often than that. Oh, and he’s done other stuff too.

Источник

HTML + CSS project: website slicing

Let’s take a break from following courses and doing online exercises: instead, let’s make a project from scratch! When you start learning frontend technologies, HTML becomes clear the fastest, followed by CSS — and JS is a big journey of its own. Here we will leave JS challenges for later, and we will focus on integrating the visual part of the frontend in a simple project.

Why you should do projects

Working on projects is a great exercise, and it allows you to practice the skills in an environment more similar to real-world work. Projects:

• are focused on results: things that you are expected to deliver;
• use technology as a tool to achieve the goal: this forces you to focus on what matters; and
• are usually much bigger than challanges you find in courses or books.

Projects allow you to apply your skills to create something meaningful. They let you gain confidence in your skills, and they are tangible things that you can show off to let others know what you can do. After getting the basics from courses, projects are a great step toward improving your skills.

What is slicing?

Slicing is turning a design into a website. You take the output of a graphic designer, most likely in the form of a PSD file or Figma design, and you make an HTML + CSS website with that look. It requires all the skills you’ve been using for tweaking the look of website elements, plus building the main structure of the website—keeping the header, footer and menus in place.

Template sources

For an exercise project, you don’t need a custom design—you just need some design. Luckily, there are websites where people share free design files you can use for your project: example 1, example 2.

Make sure to check the license of the files you use. Probably the license will require you to:

No matter the licenses, you can always play with the design locally, but it is good to make sure you can share your work publicly as well.

Git & GitHub

As you work on your project, you can share it on GitHub. It’s a great way of getting some visibility for your effort and getting feedback if you happen to work with a mentor. If you are not yet on GitHub, it makes sense to register there as soon as you start learning to program.

Describe your project with a README

Another great addition to your project is sharing information about its context. The standard place to do so is a README file, and you can follow this guide to make it stand out.

Deploy to GitHub pages

With GitHub, you can make your projects easily available for testing with GitHub pages. You can learn more here.

Share your project!

Do you have any HTML + CSS projects? Share in the comments so that I and other readers can take a look at it!

Источник