Posts Tagged ‘Techniques’

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

Styling Elements With Glyphs, Sprites and Pseudo-Elements

In 2002, Mark Newhouse published the article "Taming Lists", a very interesting piece in which he explained how to create custom list markers using pseudo-elements. Almost a decade later, Nicolas Gallagher came up with the technique pseudo background-crop which uses pseudo-elements with a sprite.

Displaying icons in links and as custom list markers

[fblike]

Today, on the shoulders of giants, we'll try to push the envelope. We'll discuss how you can style elements with no extra markup and using a bidi-friendly high-contrast proof CSS sprite technique (you'll find an example below). The technique will work in Internet Explorer 6/7 as well.

Read more...

Technical Web Typography: Guidelines and Techniques

The Web is 95% typography, or so they say. I think this is a pretty accurate statement: we visit websites largely with the intention of reading. That’s what you’re doing now — reading. With this in mind, does it not stand to reason that your typography should be one of the most considered aspects of your designs?

[fblike]

Unfortunately, for every person who is obsessed with even the tiniest details of typography, a dozen or so people seem to be indifferent. It’s a shame; if you’re going to spend time writing something, don’t you want it to look great and be easy to read?

Read more...

Syncing Content With HTML5 Video

One of the main changes from HTML4 to HTML5 is that the new specification breaks a few of the boundaries that browsers have been confined to. Instead of restricting user interaction to text, links, images and forms, HTML5 promotes multimedia, from a generic <object> element to a highly specified <video> and <audio> element, and with a rich API to access in pure JavaScript.

Screenshot

[fblike]

Native multimedia capability has a few benefits. For instance, end users have full control over the multimedia. The native controls of browsers allow users to save videos locally or email them to friends. Also, HTML5 video and audio are keyboard-enabled by default, which is a great accessibility benefit.

Read more...

Useful Photoshop Tips And Tricks For Photo Retouching

When it comes to designing in Photoshop, there is a myriad of ways one could use to achieve a certain result, especially when it comes to photo retouching. Designers use technique they are most confident as well as comfortable with, which is great because it's always useful to peek into the workflow of our colleagues and learn new design approaches. We have had articles on cloning, compositing, masks and obscure Photoshop time-savers in the past. This article is different.

More realistic results with the blending mode Color Dodge

I'll be covering some of the useful techniques and tricks which I've learned from my experience. You may know some of them, but hopefully not all of them. All images used in this article were purchased and are used according to their licenses. The second part of this post will be published in 2 weeks.

Read more...

In Search Of The Perfect CAPTCHA

CAPTCHAs, or Completely Automated Public Turing Tests to Tell Computers and Humans Apart, exist to ensure that user input has not been generated by a computer. These peculiar puzzles are commonly used on the web to protect registration and comment forms from spam. To be honest, I have mixed feelings about CAPTCHAs. They have annoyed me on many occasions, but I’ve also implemented them as quick fixes on websites.

reCAPTCHA

[fblike]

This article follows the search for the perfect solution to the problem of increasing amounts of human-generated spam. We’ll look at how and why CAPTCHAs are used and their effect on usability in order to answer key questions: what is the perfect CAPTCHA, and are they even desirable?

Read more...

CSS: Innovative Techniques and Practical Solutions

Although CSS isn't that difficult, useful CSS techniques are not easy to find. Sometimes finding a cross-browser solution might take time, but you don't have to reinvent the wheel every single time. Other designers may have had the same problem in the past and thus the main goal of this round-up is to share with you a goldmine of new techniques which you will hopefully find very useful and valuable. We also hope that these tutorials and articles will help you solve common design problems and find new ways of approaching tricky CSS issues.

Screenshot

[fblike]

The main goal of the article is to present powerful new CSS techniques, encourage experimentation in the design community and push CSS forward. Please notice that we feature both experimental demos and practical techniques in this article. Next week we will present even more useful new tools and resources for front-end developers. We sincerely appreciate the efforts of the design community — thank you, guys!

Read more...

The Bright (Near) Future of CSS

This article is an excerpt from Eric Meyer's recent book Smashing CSS, published by Wiley in cooperation with Smashing Magazine.

In this article, the focus is on what's coming: styling techniques you'll use in the immediate and near-term future. From styling HTML 5 elements to rearranging layout based on display parameters to crazy selection patterns to transforming element layout, these are all techniques that you may use tomorrow, next month, or next year. With partial browser support, they're all on the cutting edge of Web design.

The Bright (Near) Future of CSS

[fblike]

Accordingly, be careful not to get cut! A number of useful sites can help you figure out the exact syntaxes and patterns you need to use these techniques. Furthermore, a number of JavaScript libraries can extend support for advanced CSS back into older browsers, in some cases as far back as IE/Win 5.5.

Read more...

↑ Back to top