Posts Tagged ‘Essentials’

We are pleased to present below all posts tagged with ‘Essentials’.

Guide to CSS Font Stacks: Techniques and Resources

CSS Font stacks are one of those things that elude a lot of designers. Many stick to the basic stacks Dreamweaver auto-recommends or go even more basic by just specifying a single web-safe font. But doing either of those things means you're missing out on some great typography options. Font stacks can make it possible to show at least some of your visitors your site's typography exactly the way you intend without showing everyone else a default font. Read on for more information on using and creating effective font stacks with CSS.

Screenshot

There are a huge variety of font stacks recommended. It seems every designer has their own favorites, what they consider to be the "ultimate" font stack. While there is no definitive font stack out there, there are a few things to keep in mind when using or creating your own stacks.

First of all, make sure you always include a generic font family at the end of your font stacks. This way, if for some strange reason the person visiting your site has virtually no fonts installed, at least they won't end up looking at everything in Courier New. Second, there's a basic formula to creating a good font stack: 'Preferred Font', 'Next best thing', 'Something common and sorta close', 'Similar Web-safe', and 'Generic'. There's nothing wrong with having more than one font for any of those, but try to keep your font stack reasonably short (six to ten fonts is a pretty good maximum number).

Read more...

The Z-Index CSS Property: A Comprehensive Look

Most CSS properties are quite simple to deal with. Often, applying a CSS property to an element in your markup will have instant results — as soon as you refresh the page, the value set for the property takes effect, and you see the result immediately. Other CSS properties, however, are a little more complex and will only work under a given set of circumstances.

Usejquery.com's Unique Gallery

The z-index property belongs to the latter group. z-index has undoubtedly caused as much confusion and frustration as any other CSS property. Ironically, however, when z-index is fully understood, it is a very easy property to use, and offers an effective method for overcoming many layout challenges.

In this article, we'll explain exactly what z-index is, how it has been misunderstood, and we'll discuss some practical uses for it. We'll also describe some of the browser differences that can occur, particularly in previous versions of Internet Explorer and Firefox. This comprehensive look at z-index should provide developers with an excellent foundation to be able to use this property confidently and effectively.

Read more...

Backgrounds In CSS: Everything You Need To Know

Backgrounds are a core part of CSS. They are one of the fundamentals that you simply need to know. In this article, we will cover the basics of using CSS backgrounds, including properties such as background-attachment. We'll show some common tricks that can be done with the background as well as what's in store for backgrounds in CSS 3 (including four new background properties!).

Screenshot

We have five main background properties to use in CSS 2. They are as follows: background-color, background-image, background-position, background-repeat and background-attachment. These properties can all be merged into one short-hand property: background. One important thing to note is that the background accounts for the contents of the element, including the padding and border. It does not include an element's margin. This works as it should in Firefox, Safari and Opera, and now in IE8. But in IE7 and IE6 the background does not include the border, as illustrated below.

Read more...

Mastering CSS, Part 2: Advanced Techniques and Tools

CSS is one of the most basic building blocks of modern web design. It creates the structure and style that surrounds your content and is capable of making your site a joy to use or a pain in the neck. Mastering CSS is one of the most important things a web designer can do, and has really become an essential criteria for being a successful designer.

Menu List with CSS

In Part 1: Styling Design Elements we covered the basics of web design with CSS. In Part 2 we're offering up some more advanced techniques and effects you can achieve with CSS. Everything from creating your own online apps (like calendars) to styling web pages for use with the iPhone to some basics of working with CSS3 is covered here.

Read more...

Mastering CSS, Part 1: Styling Design Elements

CSS is one of the most important building blocks of modern web design. Standards demand the use of CSS for formatting and styling pages, and with good reason. It's lighter-weight and capable of much more than older methods like tables.

 Create an Image Rotator with Description (CSS/jQuery)

And CSS isn't nearly as tricky as some people tend to believe. Below are fresh tips and techniques for creating and styling design elements with CSS. They're a good place to start if you're new to CSS but are valuable even if you're a veteran designer. Not all the techniques are strictly CSS; some include integration with JavaScript or XHTML to extend the functionality of your site.

Read more...

The Definitive Guide to Using Negative Margins

Since the recommendation of CSS2 back in 1998, the use of tables has slowly faded into the background and into the history books. Because of this, CSS layouts have since then been synonymous with coding elegance.

Negative margins motion on static elements

Out of all the CSS concepts designers have ever used, an award probably needs to be given to the use of Negative Margins as being the most least talked about method of positioning. It’s like an online taboo—everyone’s doing it, yet no one wants to talk about it.

Read more...

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.

CSS Sprites Screenshot

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.

You may want to take a look at the following related posts:

Read more...

Mastering WordPress Shortcodes

Introduced in WordPress 2.5, shortcodes are powerful but still yet quite unknown WordPress functions. Imagine you could just type "adsense" to display an AdSense ad or "post_count" to instantly find out the number of posts on your blog. WordPress shortcodes can do this and more and will definitely make your blogging life easier. In this article, we'll show you how to create and use shortcodes, as well as provide killer ready-to-use WordPress shortcodes that will enhance your blogging experience.

WordPress Shortcodes

Using shortcodes is very easy. To use one, create a new post (or edit an existing one), switch the editor to HTML mode and type a shortcode in brackets, such as [showcase]. It is also possible to use attributes with shortcodes. A shortcode with attributes would look something like [showcase id="5"]. Shortcodes can also embed content, as shown here: [url href="http://www.smashingmagazine.com"]Smashing Magazine[/url]. Shortcodes are handled by a set of functions introduced in WordPress 2.5 called the Shortcode API. When a post is saved, its content is parsed, and the shortcode API automatically transforms the shortcodes to perform the function they’re intended to perform.

Read more...

Improving Code Readability With CSS Styleguides

Once your latest project is finished, you are very likely to forget the structure of the project's layout, with all its numerous classes, color schemes and type setting. To understand your code years after you've written it you need to make use of sensible code structuring. The latter can dramatically reduce complexity, improve code management and consequently simplify maintainability. However, how can you achieve sensible structuring? Well, there are a number of options. For instance, you can make use of comments — after all, there is always some area for useful hints, notes and, well, comments you can use afterwards, after the project has been deployed.

CSS Styleguides

Indeed, developers came up with quite creative ways to use comments and text formatting to improve the maintainability of CSS-code. Such creative ways are usually combined into CSS styleguides — pieces of CSS-code which are supposed to provide developers with useful insights into the structure of the code and background information related to it.

This article presents 5 coding techniques which can dramatically improve management and simplify maintainability of your code. You can apply them to CSS, but also to any other stylesheet or programming language you are using. You can browse through the references listed under the article — they containt further information about how you can achieve a well-organized and well-structured code.

You may also be interested in the articles

Read more...

CSS Specificity: Things You Should Know

Apart from Floats, the CSS Specificity is one of the most difficult concepts to grasp in Cascading Stylesheets. The different weight of selectors is usually the reason why your CSS-rules don't apply to some elements, although you think they should have. In order to minimize the time for bug hunting you need to understand, how browsers interpret your code. And to understand that, you need to have a firm understanding on how specificity works. In most cases such problems are caused by the simple fact that somewhere among your CSS-rules you've defined a more specific selector.

CSS Specificity isn't simple. However, there are methods to explain it in a simple and intuitive way. And that's what this article is all about. You'll understand the concept if you love Star Wars. Really.

CSS Specificity Wars

Let's take a look at some important issues related to CSS Specificity as well as examples, rules, principles, common solutions and resources.

  • You can find the most important things you should know about CSS specificity in a brief overview at the beginning of the article.
Read more...

↑ Back to top