Posts Tagged ‘CSS’
8 Layout Solutions To Improve Your Designs
The organization of content is probably one of the most important and influential aspects of any good web design. Organizing information into a well-built layout is the basis of a website, and should always come before styling concerns. Without a good layout, the website doesn’t seem to flow correctly, and nothing connects the way it should. Read the rest of this entry »
45+ Excellent Code Snippet Resources and Repositories
The beauty of code snippets is their ability to save you time when developing a site. Whether you keep a file with your own often-reused snippets or turn to one of the many online repositories, snippets can really speed up your site development. Read the rest of this entry »
The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development. Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements – particularly if you want to reduce your server load. And if you haven’t heard of CSS sprites before, now is probably a good time to learn what they are, how they work and what tools can help you create and use the technique in your projects.
What Are CSS Sprites?
The term “sprite” (similar to “spirit,” “goblin,” or “elf”) has its origins in computer graphics, in which it described a graphic object blended with a 2-D or 3-D scene through graphics hardware. Because the complexity of video games has continually increased, there was a need for smart techniques that could deal with detailed graphic objects while keeping game-play flowing. One of the techniques developed saw sprites being plugged into a master grid (see the image below), then later pulled out as needed by code that mapped the position of each individual graphic and selectively painted it on the screen.
Sprites were displayed over a static or dynamic background image, and the positioning of the sprite was controlled simply by the hardware controllers. The term was coined because the sprites seemed to “haunt” the display and didn’t really exist in the graphic memory.
The Pokemon Sprite Sheet, consisting of over 1000 graphic objects. Found here. You can click on the image for the larger version (thanks, Ryan!).
Take Your Design To The Next Level With CSS3
Cascading Style Sheets were introduced 13 years ago, and the widely adopted CSS 2.1 standard has existed for 11 years now. When we look at websites that were created 11 years ago, it’s clear that we are a thousand miles away from that era. It is quite remarkable how much Web development has evolved over the years, in a way we would never have imagined then.
So why is it that, when it comes to CSS, we’re stuck in the past and so afraid of experimenting? Why is it that we still use inconvenient CSS hacks and JavaScript-dependent techniques for styling? Why can’t we make use of the rich CSS3 features and tools available in modern Web browsers and take the quality of our designs to the next level?
It’s time to introduce CSS3 features into our projects and not be afraid to gradually incorporate CSS3 properties and selectors in our style sheets. Making our clients aware of the advantages of CSS3 (and letting older deprecated browsers fade away) is in our power, and we should act on it, especially if it means making websites more flexible and reducing development and maintenance costs.
In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we’ll know a bit of what to expect from CSS3 and how we can use its new features in our projects.
35 CSS-Lifesavers For Efficient Web Design
CSS-design is not easy. We need to find workaround across browser inconsistencies, not that easy CSS-concepts and quite counterintuitive CSS-solutions. However, there are effective and useful CSS-tools and Smashing Magazine reviewed many of them in our previous posts. Now it’s time to present you with some fresh (or not mentioned earlier) tools that can assist designers in their work.
Today, we will look at 35 new and useful CSS tools, generators and resources that can significantly improve your workflow and reduce your time efforts for CSS-coding. Whether you’re writing, compiling, refining or experimenting with CSS code – or all of the above – these tools can help you get the job done faster and better than ever before.
10 Useful CSS/JS-Coding Solutions For Web-Developers
Often creative and truly remarkable design solutions remain unknown because we, designers, simply overlook them. Being busy with our own projects, we sometimes try to grasp the intuition behind (probably) complex and cluttered code of other designers to understand how they manage to implement particular design ideas. In fact, by just observing the code of other developers we can learn a lot from them; we can find interesting ideas and improve the quality of our work.
Over the last months we’ve been paying closer attention to interesting design techniques and coding solutions and tried to understand how each of these solutions work and how they can benefit other designers and developers. Such designs are often hard to find, so it would be great if you could suggest some solutions that are worth exploring in detail – we’ll certainly cover them in our next posts!
So let’s take a closer look at 10 useful CSS & Javascript techniques and coding solutions that can turn out to be useful for your next project. You should have at least a basic knowledge of CSS and JavaScript before you read the entire article.
CSS-Based Navigation Menus: Modern Solutions
Navigation menus have to be intuitive, precise and easy-to-use. One simple, basic principle, which is common for all kinds of nav bars you would ever want to use for your projects. In fact, navigation menu is probably the most important element in web design: after all, it is being used more often than any other element on a given page. Therefore it’s important to make sure that your visitors will find they way around the site structure – however complex the latter might be.
So how do designers cope with a challenging task to create an attractive and usable menu? Which results can be achieved? OK, that’s a tough one. Let’s take a look around.
Below you’ll find 53 beautiful and user-friendly Navigation Menus and solutions web-designers came up with using basic CSS styling.
PS: Over the last few months we’ve reviewed CSS-Based Techniques, CSS-Based Forms and CSS-Based Tables and CSS-Based Footers (yes, some of these techniques use not only CSS, but also JavaScript and PHP). You’ll find even more CSS-related articles in our CSS Section.
PSS: We have included some DHTML- and JavaScript-based navigation menus in this list by mistake. Sorry for inconvenience.
53 CSS-Techniques You Couldn’t Live Without
CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts – and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actually, it is.
Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time – of course, if you are able to find them in time. Below you’ll find a list of techniques we , as web-architects, really couldn’t live without. They are essential and they indeed make our life easier. Let’s take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites. Links checked: June/11 2008.
