Posts Tagged ‘Techniques’

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

How to Drastically Improve Your Designs

Design is everywhere. We see it in on billboards as we drive down the street. When we go to a restaurant and look at the menus, we see it. When we sit down on our couch and watch television, it's visible on the commercials, advertisements, and even the movies and TV shows.

It is all around us and it stimulates and motivates much of our decisions subconsciously every day. The encyclopedia refers to graphic design as, “the process of communicating visually using text and images to present information. Graphic design practice embraces a range of cognitive skills, aesthetics and crafts, including typography, visual arts and page layout. Like other forms of design, graphic design often refers to both the process (designing) by which the communication is created and the products (designs) which are generated.”

Read more...

50 Brilliant CSS3/JavaScript Coding Techniques

CSS3 is coming. Although the browser support of CSS 3 is still very limited, many designers across the globe experiment with new powerful features of the language, using graceful degradation for users with older browsers and using the new possibilites of CSS3 for users with modern browsers. That's a reasonable solution — after all it doesn't make sense to avoid learning CSS3 (that will be heavily used in the future) only because these features are not supported yet. The point of this article is to give you a glimpse of what will be possible soon and what you will be using soon and provide you with an opportunity to learn about new CSS3 techniques and features.

CSS3

In this post we present 50 useful and powerful CSS3/jQuery-techniques that can strongly improve user experience, improve designer's workflow and replace dirty old workarounds that we used in Internet Explorer 6 & Co. Please notice that most techniques presented below are experimental, and many of them are not pure CSS3-techniques as they use jQuery or other JavaScript-library.

Read more...

45 Powerful CSS/JavaScript-Techniques

CSS and JavaScript are extremely powerful tools for designers and developers. However, sometimes it's difficult to come up with the one excellent idea that would solve a problem that you are facing right now. Good news: almost every day designers and developers come up with fresh and clever CSS tricks and techniques and share them with other developers online. We regularly collect all these tricks, filter them, sort them, revise them and prepare them for Smashing Magazine readers.

 Building the New Visual Annotations

In this post we present 45 useful CSS/JavaScript-techniques that may help you find clever solutions to some of your problems or just get inspired by what is possible with CSS. We cover interesting CSS-techniques, navigation menus, CSS typography, CSS lists and CSS buttons. The focus of this post lies on CSS; please notice that some of the techniques use JavaScript or PHP for enhanced functionality.

Please notice that this is the first part of our large round-up of fresh CSS/JavaScript-techniques. Other techniques (CSS tables, CSS layouts, CSS for Mobile and CSS forms) will be featured in an upcoming article. So don't forget to subscribe to our RSS-feed and follow us on Twitter for similar articles and a stream of useful resources. Please also let us know what we should change or improve in our future posts!

Read more...

Styling HTML Lists with CSS: Techniques and Resources

In an online world now dominated by CSS layouts, CSS-styled HTML lists have become invaluable tools in a CSS developer's toolbox, due to the HTML lists versatile and graphically flexible nature. All this despite some of the obvious browser inconsistencies that can affect the styling of the different types of lists available in HTML coding.

Stepmenu in Styling HTML Lists with CSS: Techniques and Resources

If you're new to CSS, this article should provide a good overview of the different types of lists available, as well as some of the browser quirks that occur in relation to HTML lists, with some helpful advice that should prevent those quirks from becoming major road blocks to good design.

In addition, we'll look at a showcase of various uses, techniques, and tutorials that utilize HTML lists. All of this should put strong emphasis on the importance of using lists in modern web design, reminding even experienced coders how HTML lists can improve the flexibility and maintainability of a website.

Read more...

Pushing Your Buttons With Practical CSS3

CSS3 is the partially implemented sequel to the CSS2 spec we all know and love. It's already popping up in new browsers such as Firefox 3.5, Safari 4 and Chrome. In this article, the first of the articles that explore practical (and even far-fetched) implementation of CSS3, we start by applying CSS3 to something we all have to create: buttons.

Screenshot

Calls to action are critical for any website, and a compelling, attention-grabbing, clickable button goes a long way toward driving that engagement. In the past, really awesome buttons needed extra markup, sliding doors or other trickery. We'll show you here how to create nice button styles without any hacks or cheats.

Read more...

5 Useful Coding Solutions For Designers And Developers

This post is the the next installment of posts featuring "Useful Coding Solutions for Designers and Developers", a series of posts focusing on unique and creative CSS/JavaScript-techniques being implemented by talented professionals in our industry. A key talent that any Web designer must acquire is the ability to observe, understand and build on other people's designs. This is a great way to develop the skills and techniques necessary to produce effective websites.

Screenshot

With that in mind, let's look at some clever techniques developed and used by top professionals in the Web design industry. We can use their examples to develop our own alternative solutions.

Read more...

Designing CSS Buttons: Techniques and Resources

Buttons, whatever their purpose, are important design elements. They could be the end point of a Web form or a call to action. Designers have many reasons to style buttons, including to make them more attractive and to enhance usability. One of the most important reasons, though, is that standard buttons can easily be missed by users because they often look similar to elements in their operating system. Here, we present you several techniques and tutorials to help you learn how to style buttons using CSS. We'll also address usability.

Screenshot

Before we explain how to style buttons, let's clear up a common misconception: buttons are not links. The main purpose of a link is to navigate between pages and views, whereas buttons allow you to perform an action (such as submit a form).

Read more...

How to Mix Faces in Adobe Photoshop

Adobe Photoshop is my favorite software. One of the reasons why I love it is because asides from being able to make a living creating designs from the software, I can use it to have a little fun as well. In this tutorial, you will learn how to use Photoshop to mix people's faces or put a person's face on another person's head. Anyway, let us get started right away.

Read more...

Rich Typography On The Web: Techniques and Tools

Let's face it: Web-safe fonts are very limiting. Maybe a dozen fonts are out there that are widely enough adopted to be considered "Web safe," and those ones aren't exactly spectacular for much other than body type. Sure, Georgia, Arial or Times New Roman work just fine for the bulk of the text on your website, but what if you want something different for, let's say, headings? Or pull quotes? What then?

You have a few options. Many people just opt for more elaborate CSS font stacks, with their preferred fonts up front. But that still leaves a big chunk of your visitors seeing the same old Web-safe fonts.

Typekit

Enter dynamic text replacement. In addition to font stacks, why not replace the heading text with an image, embedded font, or bit of Flash? The methods described below are easier than they sound. And the end result is that the vast majority of users will see the beautiful typography you want them to see. A word of warning, though: don't use dynamic text replacement for all of the text on your page. All that would do is slow it down and frustrate your visitors. Instead, save it for headings, menu items, pull quotes and other small bits of text.

Read more...

CSS Wishlist: New Ideas, Debates and Solutions

The future of CSS is arriving fast, and many tools, languages, and solutions have been developed that make CSS a job not just for Web designers but developers, too. In many ways, the job could become more complex and confusing, but in many other ways, the new changes will provide more opportunity and better technology for the future of the Web.

Less CSS

CSS will get a number of new changes. Among them are alternative syntaxes, CSS programming concepts and the ability to allow more common design techniques without using images. In this article, we'll go over some current solutions, what we'd like to see in the future and the pros and cons of them all.

Also consider our previous articles:

Read more...

↑ Back to top