CSS and JavaScript are two indispensable elements for any Web site, also for any web designers and web developers. Sometimes, they come up with some problems, or a few technical problems.

But the good news you need to know that the stronger growth of the Internet, web designers and web developers, every day, always find the solutions and tips for these problems, and share them together. This JavaScript article give you 45 tips and tricks to solve CSS, JavaScript problems quickly. If you know more, you can share it at here.

• Demo
• Enlarge
• Reload
• New window

CSS Typography and Body Copy

How to Create a Cool Anaglyphic Text Effect with CSS
Anaglyphs are those amazing 3D images that are created by offsetting two of the red, green and blue channels, and are viewed with those nerdy looking 3D glasses with different coloured lenses. I don't know if this effect works for real, as I've unfortunately misplaced my 3D specs, but it's a pretty cool text effect nevertheless! Let's take a look at how a similar style can be created for sprucing up your web designs, while taking into consideration semantics and avoiding the repetition of any markup.

Typographic work planner
Enter this, a little HTML/CSS typographic work planner. By using some super-semantic HTML and a dash of CSS you can craft a beautiful looking yet incredibly simple work planner for you and your staff.

Thinning Text in Webkit (Safari)
Safari has a not-so-lovely way of bulking up text using sub-pixel rendering. On previous versions of Safari, this was fixed with a text-shadow declaration, but since Snow Leopard that method no longer works. Fortunately, there is an alternative.

Pseudo Drop Caps
They've been around for a while now, appearing in magazines, print and now the web. Designers and developers alike have experimented with multiple workarounds from using inline styles to using image replacement but with both of these solutions there are problems. For example, what happens when you recreate your site and decide that you no longer want to upload the drop cap images, you're now going to left with a broken image at the start of every single post that you had previously created, this is obviously assuming you haven't used text-indent. If you decided to go down on the inline style route then your are just bad, just very bad.

How to Create Perfect Pre Tags
If you operate a website that features lots of code examples, you know how important it is to spend some quality time styling the &tl;pre> element. When left unstyled, wild <pre> tags will mangle your preformatted content and destroy your site's layout. Different browsers treat the <pre> tag quite differently, varying greatly in their default handling of font-sizing, scrollbar-rendering, and word-wrapping. Indeed, getting your preformatted code to look consistent, usable, and stylish across browsers is no easy task, but it certainly can be done. This article explains everything you need to create proper <pre> tags.

Improve your web typography with baseline shift
The baseline is an invisible line onto which all type characters sit, although of course some characters (including 'j', 'p', 'g' and 'y') have descenders that hang below the baseline. Baseline shift involves moving characters up or down in relation to the baseline and using it effectively can make a huge difference to the professional look of your type. Although baseline shift has traditionally been a part of using tools like InDesign or Quark, there are ways to accomplish the same results using CSS.

Typograph - Scale & Rhythm
This page is both an essay and a tool. It sets out to explore how two, intertwined concepts, often playful but sometimes cheeky, can be encouraged to dance in web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you are about to play upon it.

Fancy Quotes With jQuery, AJAX & CSS
Learn how to create a fancy quote rating system that will display a number of famous quotes and will enable site visitors to rate their favorites.

How To Create Simple, Stylish and Swappable Image Captions
Most image caption solutions require a lot of excessive HTML, make it difficult to redesign or don't communicate clearly that they belong to an image. Let's see what we can do to address these problems.

Styling photo captions with CSS
Sure, some photos are self-explanatory, but most photos are best served with text captions. It's true for traditional media like newspapers and magazines, and just as true for blog posts and web articles. Here's a quick tip on using photo captions and styling them nicely with the magic of CSS.

Image captions on Web pages
This document suggests three ways of presenting an image with a caption in HTML. Styling in CSS is also discussed.

Styling Post Headings That Stick Out
"Recently, I've noticed a trend in blog post headings where it sticks out of its base layout. I would like to share this technique for those who would like to give their post headings a new style. One tip to keep in mind when designing this is to make sure it fits your target audience screen resolution size. Note that this technique may vary depending on your design. My goal is for you to grasp the main concept in this tutorial so you can experiment and apply it to your own projects."

Using ellipsis with HTML and CSS
If the text is too wide to fit into a container, a nice solution can be to have ellipsis to show there's more information available. While not currently part of the official HTML specifications, it is possible to have ellipsis defined in CSS and it works for Internet Explorer, Safari, Chrome and Opera. It doesn't work for Firefox but there's a workaround that can be done with jQuery.

5 Message Boxes to Style your Notifications with CSS
This article presents free notification boxes to use/customize as well as a very simple technique to create your own ones inspired from this roundup.

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New