45 Powerful CSS/JavaScript-Techniques

Advertisement

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.

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!

We are aware that many readers are tired of “lists” floating around in the Web, but we are confident that the vast majority of our visitors will benefit from this post format and will find at least some of the techniques featured in this post useful.

Interesting CSS Techniques

Building the New Visual Annotations
These note overlays are composed of two main elements, an overlay with the shine and a border with the transparency. A very interesting, yet simple technique by the ZURB Design Agency, designers who have written a series of articles on Smashing Magazine as well.

 Building the New Visual Annotations

Sexy Music Album Overlays
This aticle shows how to style your music streams and provides you some graphics to do so.

Sexy Music Album Overlays

A Colorful Clock With CSS and jQuery
This tutorial describes how one can create a clock using basic CSS and JavaScript.

A Colorful Clock With CSS and jQuery

How To Create Depth And Nice 3D Ribbons Only Using CSS3
We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds. RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.

How To Create Depth And Nice 3D Ribbons Only Using CSS3

Advanced Event Timeline With PHP, CSS and jQuery
This Advanced Event Timeline is used with the help of PHP, MySQL, CSS and jQuery. The result: a nice time line with clickable events. Adding new ones is going to be as easy as inserting a row in the database.

Advanced Event Timeline With PHP, CSS and jQuery

CSS Navigation Menus

CSS 3D Meninas
“I’ve took the classic paint The Maids of Honour (Las Meninas) and created a CSS pseudo-3D / Parallax effect. It is pure CSS, no JavaScript or Flash is involved. It has been tested and is working on Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 and Konqueror 3.5, and it validates, too.

 CSS 3D Meninas

Sproing! – Make An Elastic Thumbnail Menu
“In an ongoing attempt to offer alternative methods to spruce up menus, I’ve pieced together an elastic thumbnail menu. It magnifies menu items when they are hovered over and menu items expand upwards.

Sproing! - Make An Elastic Thumbnail Menu

How to Create Simple and Effective Sub Navs with Definition Lists
“When we need simple and effective on-page navigation, to either jump to content on the page or flip to another view, we use the dl element. Its sub elements, the dt and dd, make it very easy for us to create inline links with a clear label. Here we’re going to share with you a fast, lightweight method for how we’ll use CSS to do it.”

How to Create Simple and Effective Sub Navs with Definition Lists

Sticky SideNav Layout with CSS
Learn how to create a fixed sidenav layout for your blog or website. Having a fixed sidenav comes in handy when dealing with blog style websites where the content is extremely tall and there is a need for good amount of scrolling. The fixed navigation allows the user to cruise through the content without scrolling back up to the top to navigate through the rest of the site.

Sticky SideNav Layout with CSS

Unobtrusive Dropdown Page Changer
Using a <select> dropdown menu to create navigation isn’t as common as it once was, but it’s still around. It got ripped on pretty good for being an inaccessible / obtrusive. Indeed a lot of the scripts you’ll find out there for creating a menu like this are this way. Bummer. Let’s make one that works with or without JavaScript.

Unobtrusive Dropdown Page Changer

CSS Navigation: No JavaScript, jQuery or Image Required, Free CSS Navigation / Pagination with Tooltip
CSS-based navigation / pagination bar without JavaScript. There is a tooltip on hover for the ‘previous’ and ‘next’ page’s bullets that makes navigation easier.

CSS Navigation: No JavaScript, jQuery or Image Required, Free CSS Navigation / Pagination with Tooltip

How to Code an Overlapping Tabbed Main Menu
Main navigation menu is that part of a website design that makes the whole site look lively and complete. But the most common type of navigation menu style still being used a lot is the tabbed navigation menu. Here is a tutorial on how to code an overlapping tabbed menu.

How to Code an Overlapping Tabbed Main Menu

Solution For Very Long Dropdown Menus
“I like to be confident with post titles, but the reality in this case is a possible solution for very long dropdowns. The problem with long dropdowns is that the dropdown itself can go below the “fold” of the website. That is, below the visible area of the browser window. So in order to access those menu items down below, you need to scroll your browser window. For those of us with scroll wheels of some kind on our mice (mouses?), it’s not a big deal. For those without, those lower menu items are totally inaccessible, because to use the browser scrollbar means mousing off the menu (and probably having it close).”

Solution For Very Long Dropdown Menus

Mega Drop Down Menu w/ CSS and jQuery
When used properly, mega drop down menus can be quite efficient for large scale websites. Let’s experiment with different ways of implementing this technique. A tutorial by Soh Tanaka, Smashing Magazine’s regular author.

Mega Drop Down Menu w/ CSS and jQuery

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.

How to Create a Cool Anaglyphic Text Effect with CSS

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.

Typographic work planner

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.

Thinning Text in Webkit (Safari)

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.

Pseudo Drop Caps

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.

How to Create Perfect 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.

Improve your web typography with baseline shift

Typograph – Scale and 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.

Typograph - Scale and Rhythm

Fancy Quotes With jQuery, AJAX and 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.

Fancy Quotes With jQuery, AJAX and CSS

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.

How To Create Simple, Stylish and Swappable Image Captions

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.

  Styling photo captions with 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.

Image captions on Web pages

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.

CSS Lists

Create a Microsoft Word-Style Outline with CSS
As you can see, the browser doesn’t bother to vary the indentation style much, or change the list type from roman numerals to alphabetical characters and so on… all the things we’re so used to seeing because Microsoft Word and other writing programs do them by default. So let’s use a bit of CSS ingenuity to make a Microsoft Word-styled outline using ordered lists!

Create a Microsoft Word-Style Outline with CSS

Pure CSS Timeline
“I wanted to build a CSS timeline for the “About” section of my site while using some clean and simple markup. I wanted to avoid using images as much as possible, so I spent a few minutes prototyping some options and came up with a solution using unordered lists. The result is a simple and clean looking timeline with some very straight forward markup. In this article I’ll share my approach to creating a timeline out of CSS and HTML which results in a nice looking, simple timeline.”

Pure CSS Timeline

Automatic numbering with CSS Counters
When writing documents, it is often useful to number sections and have a table of contents. You can number these by hand, directly in the markup, but this can be time consuming if the order changes and you have to edit all the numbers. CSS2.1 gives us a automated way to generate numbers using CSS counters, and this article will walk you through how to use them. One word of note before we start is that CSS counters are not yet implemented in IE, although they are on the roadmap for IE8.

Automatic numbering with CSS Counters

CSS tricks for custom bullets

CSS tricks for custom bullets

Elastic Calendar Styling with CSS
A traditional calendar is a grid of numbered boxes on a page. As a web designer, you might go right for a table, and I wouldn’t fault you for that. Tables, though, can sometimes be tough to muscle into shape. The CSS purist in me gets pissed when I set the width of a table (or a cell) and it decides it knows better and grows or shrinks as it sees fit.
You can tackle calendar styling with pure CSS, and I feel it makes just as much sense semantically as a table does. What is a calender, if not an ordered list of days? By using CSS, we can even do some cool things like do all our sizing with ems so our calendar layout will be elastic. That is, grow in both width and height when text is resized in browsers, while greatly increasing accessibility.

Elastic Calendar Styling with CSS

Style a List with One Pixel
A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can use that to create a depth-chart looking unordered list.

Style a List with One Pixel

Style Your Ordered List
By default, most browsers display the ordered list numbers same font style as the body text. Here is a quick CSS tutorial on how you can use the ordered list (ol) and paragraph (p) element to design a stylish numbered list.

  Style Your Ordered List

Simulating a Table Using an Unordered List
Your first question immediately might be, “why would I want to simulate a table with a list, why not just use a table?” With the raise in popularity of AJAX sortable list elements, using list items to represent a multiple column data table can allow for easy sorting of various more “tabley” information. So let’s get started.

Simulating a Table Using an Unordered List

8 different ways to beautifully style your HTML lists with CSS
“The use of HTML lists (<ol> for an ordered list, <ul> for an unordered list) is very common these days. Today, we’re going to look a little bit further than creating regular lists, by showing 8 different ways to beautifully style your HTML lists with CSS. We’ll use some pure CSS techniques to make a bored list look awesome (and even have some extra functionality).”

8 different ways to beautifully style your HTML lists with CSS

Quick Tip – Simplify List Margins with CSS
Have you ever set default margins for a layout, and then had to go back and manually adjust all of your lists? By default, list item markers have a negative positioning in relationship to the list item itself. This means that zero-ing out margins automatically leads to an overflow if the list is contained inside anything else. Wouldn’t it be easier to put the list item marker at the same starting point as other elements instead? Lucky for us, there’s a style to help do just that. Let’s see what can be done with the list-style-position property.

Quick Tip - Simplify List Margins with CSS

Sexy HTML List Tricks
Behold the ubiquitous list elements, <ul> and <ol>. These two sexy elements help millions of websites display lists of information in clean, semantic fashion. Without them, we’d be crawling around like filthy cavemen, eating dirt and howling at the moon. But these list elements aren’t just sexy, they are also extremely flexible, enabling us humble designers to create robust list configurations that are semantically versatile and highly customizable.

Sexy HTML List Tricks

Clickable <li>
I originally coded the markup to be a table, but discovered a problem when I tried to make the whole row clickable. I ended up with a list of articles instead.

Clickable li

CSS Buttons

Simply-Buttons v2
This technique presents buttons of the size that always fits the content. There are 3 states: inactive, active and hover. The technique works in all major browsers and doesn’t require JavaScript.

  Simply-Buttons v2

How to make sexy buttons with CSS
This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day.

How to make sexy buttons with CSS

Liquid and Color Adjustable CSS Buttons
When working on a large site with multiple buttons, it can be quite tedious to make all the buttons in Photoshop. Making future adjustments on the verbiage and colors can be also be time consuming. By having dynamic buttons, this scenario is much easier to handle, and by having liquid and color adjustable buttons with CSS, we are able to change the verbiage and colors in a flash.

Liquid and Color Adjustable CSS Buttons

Create a Button with Hover and Active States using CSS Sprites
Too many designers neglect the click state (active-property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it or are plain lazy. It’s a simple effect that improves usability by giving the user some feedback as to what they’ve clicked on but can also add depth to a design.

 Create a Button with Hover and Active States using CSS Sprites

Recreating the button
“I thought it would be interesting to provide a portion of the background on buttons here, and discuss some of the iterations we’ve been through so far to get to the current state.”

Recreating the button

Rounded form buttons

Rounded form buttons

Google’s Imageless Buttons
An interesting discussion about various buttons design techniques to reconstruct Google’s imageless buttons.

Stay tuned!

This is the first part of our large round-up of fresh CSS/JavaScript-techniques. 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!


↑ Back to top

The Smashing Team loves high-quality content and cares about little details. Through our online articles, books and eBooks and Smashing Conferences, we are committed to stimulating creativity and strengthening the Web design community’s creative forces.

  1. 1

    Nice, fresh list of some of the best tutorials out there which display the power of CSS and javascript.

    2
  2. 2

    Always love a good list of tutorials, cheers!

    0
  3. 3

    This article has brought a convergence to my CSS sense.

    0
  4. 4

    Amazing! I’m always looking for new CSS/Javascript techniques and this is definitely helpful. I bookmarked it to use as a reference for certain effects that I want to accomplish but am not sure how to do. Thanks SM!

    0
  5. 5

    Let’s settle this right here: if you can’t have sex with it, then it can’t be “sexy”.

    Let’s stop calling websites, interfaces and software “sexy”

    0
  6. 6

    I’m particularly interested in the timeline effects. I think those are awesome.

    0
  7. 7

    Bookmarked! thanks again folks…

    0
  8. 8

    With CSS 3, the modern browser is like 2D canvas. :)

    0
  9. 9

    “Typographic work planner” is amazing, i should use it :)

    0
  10. 10

    Everytime I turn there’s a new article. I love the dedication the Smashing team has . Keep it up!

    0
  11. 11

    excellent new list for css and js …. timline is awesome …

    0
  12. 12

    Complete list here, great round up and bookmarked it for further need! Thanks!

    0
  13. 13

    Very brilliant collection. A great post after a long time on Smashing Magazine.
    PS: The last one was on Page Load Speed Analysis!

    0
  14. 14

    So usefull !

    Thanks for these great tutorials. It would be nice you guys make an article about CSS 3 in the next weeks !

    0
  15. 15

    Very usefull !
    Thanks for this article.

    0
  16. 16

    Great post!!! I love all info you post for us. I liked CSS navigations.

    0
  17. 17

    What an amazing list. Now all I have to do is find some time to make my way through them all. Also, I had not come across the Rhythm and Scale tool yet — so thank you!

    0
  18. 18

    Simply Amazing !

    I love to visit smashingmagazine for all latest updates related to Designinig & Development activities. You guyz are CHAMPS !

    0
  19. 19

    Great Roundup..
    Thanks :)

    0
  20. 20

    Dear Smashing Team,

    Great Post, You have saved our time lot, thank you…

    Everyday you are posting different topics, how you are getting ideas… really great service you are doing…

    Thank for your wonderful work
    Regards
    Anand

    0
  21. 21

    ys…very gud article. amazing…!!!!
    keep writing.

    0
  22. 22

    Great post. Good roundup. It is shows strength of CSS & JavaScript.

    0
  23. 23

    Freaking awesome! Like the CSS 3D Meninas very much. Thanks for the article.

    0
  24. 24

    V nice post , i like the one pixel list the most :)

    0
  25. 25

    Awesome! Thx!

    0
  26. 26

    This is good stuff. Will have to study it in more depth and apply some of those techniques to my future projects.

    0
  27. 27
  28. 28

    Those Sexy Album Overlays works perfectly! I already am using them for a while on my blog, hooked up to the Last.FM Api: 17031986.nl/music

    Great post!

    0
  29. 29

    awesome………….

    0
  30. 30

    i love Mr. Soh Tanaka…he’s give trick and tutor easy to understand…and others is good too
    Thanks for great information ^_^

    0
  31. 31
  32. 32

    No more list posts, please …

    You need more articles like the “Image Compression” one. That was great :-)

    0
  33. 33

    thank you for sharing this curated list. and please, more ZURB articles, excelent!

    0
  34. 34

    great list of items

    0
  35. 35

    Great post !!! Very interesting.

    0
  36. 36

    Kind of all over the place… but some useful stuff.

    0
  37. 37

    Nice collection,
    New CSS effects always excites me….
    Thanks

    0
  38. 38

    I loved this article. So many things in a single article. Cheers

    1
  39. 39

    Great post! I am going to direct my CSS students to your site. Thanks!

    1
  40. 40

    that is a very great article, thx…

    1
  41. 41

    Typographic work planner” is amazing, i should use it

    1
  42. 42

    I can always welcome the list, so far I have not found a boring list at smashing magazine.

    1
  43. 43

    Excellent collection of resources. I’ve been wanting/needing to expand my CSS and Javascript techniques. This post could not have come at a better time. Thanks!

    1
  44. 44

    Nice selection of Java stuff.

    Thanks.

    1
  45. 45

    Awesome collection great work……Thanks

    1
  46. 46

    Great ideas for future projects. Thank you very much!

    1
  47. 47

    There are some really great techniques here! Thank you! I can’t wait to fix up my image captions on my blog– they’ve been the bane of my existence, trying to figure out how to style them, but keep them accessible and understandable for screen readers.

    0
  48. 48

    Very cool. I’ve been wondering for a while how to do those 3D Ribbons

    0
  49. 49

    Great post! thx :)

    0
  50. 50

    Awesome list. Love the jQuery Timeline and Zurbs DL sub nav. They’ll be appearing on one of our web hosting brand’s websites in the next couple of weeks!

    P.S: Just gotta say how consistently awesome we all think SM is here at Ecenica HQ.

    0
  51. 51

    it’s CSS3 and it’s NOT useful yet.

    0
  52. 52

    This article is very good, thx!

    0
  53. 53

    Absolutely great post! I will be referencing this for future projects, thank you!

    0
  54. 54

    Great Collection. Definitely some very good articles here.

    On a side note, can’t wait until CSS 3 becomes widely supported. Simple things like Rounded Corners and Drop Shadows controlled through CSS will be such a time saver.

    1
  55. 55

    Ok, pretty good, but maybe you should link to the original articles instead of agregation sites….
    For example “Sticky SideNav Layout with CSS” should link directly to http://designm.ag/tutorials/sticky-sidenav-layout/

    Pretty disappointed that SM would do something like that…

    (SM) Thank you, Jonathan, the link was updated.

    0
  56. 56

    as usual…nice post

    0
  57. 57

    It’s so nice and very usefull………………..thanks…………

    0
  58. 58

    Very helpful, thanks!

    0
  59. 59

    Thanks, i think some of these are basic which is great, and some are a little advanced. i like how they cater to both levels of users and learners.
    i would definitely like to see more css tricks, and not so much javascript and Query

    0
  60. 60

    Excellent collection of resources. I’ve been wanting/needing to expand my CSS and Javascript techniques

    0
  61. 61
  62. 62

    Now, that’s something I love.
    Loved and enjoyed reading.
    Many thanks ! :)

    0
  63. 63

    nice collection
    i am loving it :D

    0
  64. 64

    Very nice collection, saves me lots of time.
    Thanks alot!!!

    0
  65. 65

    Simon Johnstone

    May 14, 2010 9:47 pm

    every nice cheers.

    0
  66. 66

    Hi! I saw your blog at Google and have learned a lot from it. Thank you very much for the useful and detailed posts. Will be coming back soon.

    0
  67. 67

    A lot of very good techniques. Matt Bango’s CSS Timeline was especially interesting, but logically (for the web) wouldn’t you want a vertical scrolling timeline? It is more natural and can hold much more content. Plus it can work for mobile if designed responsively. I created my own CSS Timeline with these consideration.

    It is solid semantically, easily styleable and looks nice.

    0
  68. 68
  69. 69

    abhishek @ http://xpressabhi.com

    April 20, 2010 9:36 pm

    Yes Sumeet,
    I also didn’t see such a long post containing a lot of material. I know javascript from last two years only I coded for few websites but generally I don’t go in details or shortcut because I was able to do those things in traditional way, but after reading this post I must explore more about javascript shortcodes and write an efficient javascript.

    0
  70. 70

    Uhm… No. Those tricks are not good.

    Why?

    #1: Why would you wanna disable right-click? When is that ‘a good idea’? Do you think it’s a good idea if I stole you car keys, removed the steering wheel, locked the car and put your car keys back?

    #2 Blink-tag … really? I wonder why it was removed like ten years ago….

    #3 Can’t see where that’ll come handy. Put your JS near the </body>tag and you will be golden…

    #4 Browser detection? Nope that’s a bad idea. Go with feature detection instead. Detecting what browser a user has says nothing about what features they might have disabled…

    #5 Ok… this could be useful. But make sure that odd cases don’t slip through and that you will always get zero…

    0
  71. 71

    Thats great! Thank you!

    -2
  72. 72

    Exactly my thought! It’s a ridiculous word to use to describe a website.

    0
  73. 73

    If you get turned on by it, doesn’t that make it sexy? I see sexy design all the time! I think it just depends on how you personally respond.

    0
  74. 74

    Wrongo! Make it degrade buddy – make it degrade..

    0
  75. 75

    soenome January 23, 2009 Did you base number 8 entirely on that Yahoo! Answers thing? Because Yahoo! Answers is clogged with the stupidest people capable of using the internet.Some memorable questions include How do I scan a mirror and use it as my background , Where can I find scuba-diving equipment for my horse and I heard on TV that there’s a war in Georgia, when do we evacuate (The person lived in the state Georgia of the US, the war was in the country Georgia halfway across the world.) It’s also likely that a lot of the people there are being asses on purpose.Yeah, this post’s main purpose was just to rant on Yahoo! Answers ) But I think our reputation is more on being ignorant and too prideful. Not to mention kurakot.

    0
  76. 76

    All these ppeloe repeating that Greg’s a print designer who doesn’t understand CSS just don’t get it.They have adopted themselves to the css mentality, instead of adapting the technology to design needs.Most miss the point altogether, like:Greg I just want to ask you what if I told you that Quark will no longer be supporting style sheets? Would you be ok with that? Even if you were working on a 120 page document? I’d be pissed, just like I would be pissed if they took away CSS.This is irrelevant. Greg has not talked against the general idea of stylesheets, he talked against the CSS concept and implementation in particular. His points are specific and razor sharp, and could be used in designing a BETTER stylesheet language for the web. Like this point:CSS captures styles not semantics or design intention. A design intention would be something like: I want to balance these two columns or perhaps This text should line up with the logo image in the first column. When designers do things like this:#content{position:relative;top:32px;left:20%;width:40%;}They are capturing the style specifics not the design intention. Why 32 pixels? Why 40%? Perhaps the logo is 32px tall? Perhaps the other column is 60% wide? When the logo changes size or placement how will you know what styles to touch? There is a basic concept called parametric design that can be used to specify the parameters of the design.Right on!And since a lot of web pages nowadays are web apps , are you css ppeloe familiar with actual programming for GUIs? If you know GTK, QT, Java or what have you, they all have MULTIPLE layout models. CSS only has one, and a cripled one at that, the box model. A single model cannot solve all needs. (btw, almost all languages offer a table or grid layout manager, without sacrificing fluidity ).Some points:a) The concept of styles is correct. It’s CSS that has it all wrong.b) Design should be intention based and parametric. Hell, CSS does not even have parameters! If I want 20 design elements in my stylesheet to be 200px (or 20% or anything), I have to repeat myself 20 times over. When I want to change it to 200px it’s 20x times the work actually needed).c) A lot of stuff should have been built in, in CSS and HTML and easier. Rounded corners? Blow me, just have something like:#box {curve-top-right: 20px }or have a way to define such effects in code blocks and share them.etc

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top