The 30 CSS Selectors you Must Memorize

05 Nov 2010 No Comments

by Davidin Tech Tags: ,

So you learned the base id, class, and descendant selectors – and then called it a day? If so, you’re missing out on an enormous level of flexibility. While many of the selectors mentioned in this article are part of the CSS3 spec, and are, consequently, only available in modern browsers, you owe it to yourself to commit these to memory.

1. *

view plaincopy to clipboardprint?
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }

Let’s knock the obvious ones out, for the beginners, before we move onto the more advanced selectors.

The star symbol will target every single element on the page. Many developers will use this trick to zero out the margins and padding. While this is certainly fine for quick tests, I’d advise you to never use this in production code. It adds too much weight on the browser, and is unnecessary.

The * can also be used with child selectors.

view plaincopy to clipboardprint?
  1. #container * {
  2. border: 1px solid black;
  3. }

This will target every single element that is a child of the #container div. Again, try not to use this technique very much, if every.

View Demo

2. #X

view plaincopy to clipboardprint?
  1. #container {
  2. width: 960px;
  3. margin: auto;
  4. }

Prefixing the hash symbol to a selector allows us to target by id. This is easily the most common usage, however be cautious when using id selectors.

Ask yourself: do I absolutely need to apply an id to this element in order to target it?

id selectors are rigid and don’t allow for reuse. If possible, first try to use a tag name, one of the new HTML5 elements, or even a pseudo-class.

View Demo

45+ Very Functional Javascript Sliders and Scrollers

06 Oct 2010 No Comments

by Davidin Tech Tags: , ,

1. jquery Thumbnail Scroller, Demo

2. JCoverflip, Demo

3. COIN SLIDER

4. loopedSlider, Demo

5. Nivo Slider

6. Automatic Image Slider w/ CSS & jQuery, Demo

7. Lof SiderNews, Demo

8. Advanced jQuery background image slideshow, Demo

9. jqFancyTransitions, Demo

10. jQuery Blinds Slideshow using CSS Sprites

ajax and design

12 Jun 2010 1 Comment

by Davidin Life, Words Tags: , , ,

Ajax and Design

Ajax and Design

CS5 好像蠻不錯的﹐Photoshop, Illustrator and Dreamweaver 改良了不少﹐load得亦比CS4快。

過去的日子都在努力學習著Ajax, 她太powerful了﹐沒有CSS和她﹐想在web design上一直糊口下去﹐我想比較困難了。只要砌layout就能活口的一定不是我﹐但我會是平均值最好的那一群。

預計過多半個月﹐我就要想辦法把自己推回Design那一邊。那裡有機會就往那裡走。

互聯網的世界真的無窮無盡﹐資訊萬千﹐創意無限﹐iPhone､ iPad､ facebook､ 微博､ photography､ web design, youtube…吸引得讓人睡覺的時候都差不多沒了。

要更好地把握時間﹐運用時間和捉著機會。

thousands of one

31 May 2010 1 Comment

by Davidin Life Tags: ,

我看見﹐有更多好玩有趣的東西接踵而來。

8 Amazing Javascript Experiments of Physic and Gravity Simulation

14 May 2010 No Comments

by Davidin Tech Tags: , , , ,

In this list they have gathered 8 examples/experiments that apply physics and gravity to demonstrate the power of Javascript. Some of the examples are simply stunning and incredible!

Introduction

In this list I have gathered 8 examples/experiments that apply physics and gravity to demonstrate the power of Javascript. Few years back, all of these experiments must be done using Java or Flash, I don’t think we can implement this using Javascript because of the standard and browsers.

A lot of stunning examples in this list, personally, I like the Cloth Simulation a lot, I just can’t believe it’s built with Javascript.

  • Cloth Simulation

    This amazing javascript experiment demonstrate the power of javascript. Few years back, this wasn’t achievable and I think you only can do it with Java or flash. Pretty impressive and the creator uses javascript physics library called Processing.
  • Random Arboretum

    Yet another physic experiment that uses the javascript physic library called Processing. Everytime you click on it, it will generate a radom branch. Look at the way it shakes and move, it’s really nice.
  • Box2DJS

    Box2D is an open source physics engine written primarily for games. As the name suggests, Box2D is a purely 2D engine. BOX2DJS is a Javascript port of BOX2D.
  • Ball Pool

    Start by shaking the browser, then create new balls (click on empty space), move some others (drag) and reset the screen (double click). Stunning gravity and physic demonstration!
  • Google Gravity

    What will happen when we put gravity on every single elements in Google’s homepage?
  • Wavy Scrollbars

    A very creative use of scrollbar to simulate wave effect. Best view with chrome, firefox is a bit laggy.
  • Waterfall

    Balls falling on an hidden random terrain. This experiment is using physic simulation trought the library box2djs.
  • physicSketch

    When you draw something on a canvas, it starts moving under the Newtonian law.

copy from http://www.queness.com/post/3296/8-amazing-javascript-experiments-of-physic-and-gravity-simulation

unexpected www future!! Looking forward…

Prev Older Entries