반응형

식사의 즐거움은
먹는 것에만 있는 것이 아닙니다.
요리하는 과정이 기분 전환도 되고
의외로 재미있습니다. 가끔 울적한 날에는
좋아하는 식재료를 듬뿍 사용해 제 마음대로
'속상한 날 먹는 파스타'를 만듭니다.
여기에는 마늘도 잔뜩 들어갑니다.


- 바쿠@정신건강의의 《기분 좋은 일은 매일 있어》 중에서 -


* 옛날 엄마들은
속상하면 빨래를 하셨습니다.
양잿물 비누 넣고 팍팍 삶아 방망이로 내리쳐대며
하얗게 하얗게 빨아 탈탈 털어 빨랫줄에 널었습니다.
풀 먹여 빳빳하게 만들어 다듬잇돌 위에 펴두고,
방망이로 팡팡 두드리며 마음을 다스렸습니다.
세탁기가 다 말려주기까지 하는 요즘,
속상하면 빨래 대신 마늘 팍팍 넣고
파스타를 만드는 것도
좋겠습니다.

반응형
반응형

How to Turn jQuery Accordion into CSS3 Accordion

http://css.dzone.com/articles/how-turn-jquery-accordion-css3


Have you ever used ordinary accordion plugins in your projects? I would believe so! Most of them use javascript to work (or jQuery). Usually we use such plugins (accordions) to build a promo with images, a little photo gallery, or in case we have to build an advertisement with a list of product features. We did some research and came to the conclusion that sometimes we don’t need to use any script in order to build accordions. We can just use the power of CSS3. We can handle the OnClick event and use custom animation.

download sources

I prepared three versions with accordions. For the first demonstration we use jQuery to build an accordion. I selected liteAccordion jQuery plugin (http://nicolahibbert.com/demo/liteAccordion/) as an accordion plugin for out test purposes. See how it works:

Live Demo


That’s all, our own CSS3-based accordion is complete! You can check it in action:

CSS3 accordion demo

But that’s not all for today, as a bonus, I prepared a third demo for you with an animated accordion.


animated accordion demo

In order to do it I recommend disable onclick behavior, and apply new animation:

Conclusion

Now that is all for today. We have just created three different demos: the first one with jQuery, the second and the third – with pure CSS3. I hope that you like it. Good luck!


반응형

+ Recent posts