متن سه بعدی با جاوا اسکریپت

HTML

<body>

  <div id="viewport" >
		<div id="world" >
			<div id="container" >
				<p>hello world!</p>
				<p>hello world!</p>
				<p>hello world!</p>	
				<p>hello world!</p>
				<p>hello world!</p>
				<p>hello world!</p>	
				<p>hello world!</p>
				<p>hello world!</p>
				<p>hello world!</p>	
			</div>
		</div>
	</div>
</body>

  ادامه‌ی خواندن

تغییر اندازه اتوماتیک متن در کادر متنی

این کد متن داخل کادر متن را بصورت خودکار تغییر اندازه میده ا تو کادر متن جا بگیره.

HTML

<input type='text' id='resizer' placeholder='Fill me with text.'>

CSS

/* 
  CSS 
  -  None of this is required for resizer to work.
*/

body {
    background-image: url(http://i.imgur.com/iWUM6.jpg);
    width: 100%;
    background-size: fit;
}

input[type='text']{

    color: #333;
    width: 280px;
    height: 38px;
    margin-left: -150px;
    margin-top: -19px;
    position: fixed;
    left: 50%;
    top: 50%;
    padding-left: 10px;
    padding-right: 10px;

    transition: box-shadow 320ms;

    box-shadow: 0px 0px 8px 10px rgba(0,0,0,0.1);

    border-radius: 3px;
    font-size: 18px;
    border: 0px;
}

input[type='text']:focus {

    outline: 0px;
    outline-offset: 0px;
    box-shadow: 0px 0px 1px 5px rgba(0,0,0,0.12);
}

input:-moz-placeholder {
    color: #cccccc;
}

  ادامه‌ی خواندن