Recent Post

Dear reader, this blog has been moved to here

Monday, 5 August 2013

How to create re-sizable div or textarea like div using CSS3



Hi all

Latest HTML5 and CSS3 has made web designing easy for us, I pray soon Jquery will fade off. Now with CSS3 you can create  a text area like div, the best thing i like about HTML5 is the placeholder in text fields.

Now lets create re-sizable div using CSS3, copy the code below and save with test.html and open with your browser
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .test
  6. {
  7. border:2px solid;
  8. padding:10px 40px;
  9. width:300px;
  10. resize:both;
  11. overflow:auto;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div class='test'>Testing re-sizable div</div>
  17. </body>
  18. </html>
Now run and see!

Works in Mozilla, Opera and Chrome only!

Email Newsletter



Smiley :)
:D
:)
:[
;)
:D
:O
(6)
(A)
:'(
:|
:o)
8)
(K)
(M)

No comments:

Post a Comment