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

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

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;
}

  ادامه

دکمه زیبای CSS

HTML

<button>hover & click</button>

CSS

 

body {
  background : #1b1b1b;
}

button {
  position: relative;
  display : block;
  padding : 15px 60px;
  margin  : 70px auto;
  overflow   : hidden;
  transition : all .2s;
  font-size  : 20px;
  font-weight: bold;
  font-style : italic;
  font-family: georgia;
  color      : #000;
  cursor     : pointer;
  border-radius : 10px;
  background    : -webkit-linear-gradient(top , #eed200 , #eed200);
  background    : -moz-linear-gradient(top , #eed200 , #eed200);
  border        : 1px solid #ff0;
  box-shadow    : 0 7px 0 0 #880;
  text-transform: capitalize;
  text-shadow   : 1px 1px 0 rgba(255, 255, 255, 0.5);
}

button:after {
  display : block;
  content : '';
  width   : 60px;
  height  : 100%;
  position: absolute;
  top     : 0;
  left    : -68px;  
  background : -webkit-linear-gradient(left,#ffff05 10% ,transparent 0 ,  transparent 20% , #ffff05 0);
  background : -moz-linear-gradient(left,#ffff05 10% ,transparent 0 ,  transparent 20% , #ffff05 0);
  z-index    : 1;
  transform  : skew(-18deg);
  transition : left .5s cubic-bezier(1,0,0,1);
}

button:hover:after {
 left  : 103%;
  transition : left .3s linear;
}

button:active {
  box-shadow : none;
  transform  : translateY(7px);
  transition : all .3s;
}

ادامه

کاورهای انیمیشنی

HTML

<div class="container">
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (1).jpg');">
      <div class="one"></div>
      <div class="details">
        <h3>#1</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (2).jpg');">
      <div class="two"></div>
      <div class="details">
        <h3>#2</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (3).jpg');">
      <div class="three"></div>
      <div class="details">
        <h3>#3</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (4).jpg');">
      <div class="four"></div>
      <div class="details">
        <h3>#4</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (5).jpg');">
      <div class="tl5"></div>
      <div class="br5"></div>
      <div class="details">
        <h3>#5</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (6).jpg');">
      <div class="tl6"></div>
      <div class="tr6"></div>
      <div class="bl6"></div>
      <div class="br6"></div>
      <div class="details">
        <h3>#6</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (7).jpg');">
      <div class="seven"></div>
      <div class="details">
        <h3>#7</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (8).jpg');">
      <div class="eight"></div>
      <div class="details">
        <h3>#8</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (9).jpg');">
      <div class="nine"></div>
      <div class="details">
        <h3>#9</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (10).jpg');">
      <div class="ten i"></div>
      <div class="ten ii"></div>
      <div class="ten iii"></div>
      <div class="ten iv"></div>
      <div class="details">
        <h3>#10</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (11).jpg');">
      <div class="eleven i"></div>
      <div class="eleven ii"></div>
      <div class="eleven iii"></div>
      <div class="eleven iv"></div>
      <div class="details">
        <h3>#11</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (12).jpg');">
      <div class="twelve i"></div>
      <div class="twelve ii"></div>
      <div class="twelve iii"></div>
      <div class="twelve iv"></div>
      <div class="details">
        <h3>#12</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (13).jpg');">
      <div class="thirteen-l"></div>
      <div class="thirteen-r"></div>
      <div class="details">
        <h3>#13</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (14).jpg');">
      <div class="fourteen-l"></div>
      <div class="fourteen-r"></div>
      <div class="details">
        <h3>#14</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('http://www.mseyedi.ir/gallery/1 (15).jpg');">
      <div class="t"></div>
      <div class="r"></div>
      <div class="b"></div>
      <div class="l"></div>
      <div class="details">
        <h3>#15</h3>
        <p>this is a description for your picture in the your gallery.</p>
        <h6>time & date</h6>
      </div>
    </div>
  </div>
</div>

ادامه

فرم لاگین بسیار زیبا

HTML

<form action="">

  <h1>Flock</h1>
  <input class="user" type="text" placeholder="username" />
  <input class="pass" type="password" placeholder="password" />
  <input class="btn"  type="submit" value="SIGN IN" />

  <hr style="background-color : #bebebe;"/>
  <hr style="background-color : #FFF; "/>

  <h5>Forgot your password? <a href="">click here</a></h5>

<div class="setting">
    <a class="icon-cog" href="#"></a>
    <h6  class="set">settings</h6>
    <div class="middle" style="left : 6px;"></div>
    <div class="middle" style="left : 18px;"></div>
    <div class="middle" style="left : 30px;"></div>
    <div class="middle" style="left : 42px;"></div>
    <div class="side left"></div>
    <div class="side right"></div>
  </div>

</form>

ادامه

منوی بسیار زیبا با قابلیت باز و بسته شدن

HTML

<nav class="vertical">
  <input type="checkbox" id="toggle2" />
  <label for="toggle2">
    <span class="icon-reorder"></span>
  </label>
  <menu>
    <li><a class="icon-home" href="#"></a></li>
    <li><a class="icon-user" href="#"></a></li>
    <li><a class="icon-picture" href="#"></a></li>
    <li><a class="icon-facetime-video" href="#"></a></li>
  </menu>
</nav>
<nav class="horizontal">
  <input type="checkbox" id="toggle" />
  <label for="toggle">
    <span class="icon-reorder"></span>
  </label>
  <menu class="cover">
    <li><a class="icon-home" href="#"></a></li>
    <li><a class="icon-user" href="#"></a></li>
    <li><a class="icon-picture" href="#"></a></li>
    <li><a class="icon-facetime-video" href="#"></a></li>
  </menu>
</nav>

ادامه

آموزش ساخت صفحه عضویت امن با PHP

با سلام
امروز قصد دارم آموزش ساخت یه صفحه ثبت امن با PHP و توابع MySQLi رو براتون بذارم. MySQL دیگه خیلی قدیمی شده و الان دیگه باید از توابع MySQLi استفاده کنیم.
برای اینکه بتونیم صفحه ثبت نام رو امن کنیم باید داده هایی که کاربر روارد میکنه روبا توابع خاصی چک کنیم ، این کاریه که همیشه باید برای امن نگه داشتن انجام بدیم.

 

صفحه عضویت

مرحله اول – ساخت دیتابیس ،جدول و اطلاعات مربوطه

نام دیتابیس: satestdb
نام جدول : users
اولین کار اینه که دیتابیسمون رو بسازیم، برای اینکار از نرم افزار phpMyadmin استفاده کنید.

phpmyadmin

حالا به تب SQL رفته و این کد ها رو اجرا کنید:

 

CREATE TABLE `satestdb`.`users` (
    `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
    `username` VARCHAR(30) NOT NULL,
    `password` CHAR(128) NOT NULL,
    `email` VARCHAR(50) NOT NULL,
    `salt` CHAR(128) NOT NULL
) ENGINE = InnoDB;

phpmyadmin

 

ادامه