آموزش HTML – گروه بندی المنتها

ما تو HTML همیشه نیاز داریم که المنت ها رو گروه بندی کنیم تا روی اون گروه از المنتها کار خاصی انجام بدیم. این کار خاص میتونه اسایل بندی CSS مثل تغییر رنگ المنت ها یا تعیین مکان اونها در صفحه یا دستکاری اونها با جاوا اسکریپت باشه.

برای اینکار ما از دو تگ <div> (مخفف Division) و <span> استفاده میکنیم. همونطورکه تو درس قبلی گفتیم <div> یک المنت Block-level و <span> یک المنت Inline-level هست.  توجه کنید که منظور ما گروه بندی تو پشت صحنه است نه در ظاهر! برای اینکه گروه المنتها رو در ظاهر گروه بندی کنیم از المنت <fieldset> استفاده میکنیم.

 

گروه بندی با <span>

این المنت بصورت پیشفرض هیچ تغییری در صفحه ایجاد نمیکنه اما وقتی با استفاده از مشخصه(attribute) های class و id استفاده کنیم میتونیم با استفاده از CSS برای اونها استایلی تعیین کنیم.

مثالی از گروه بندی با <span>

<!DOCTYPE html>
<html>
<head>
<title>Softafzar.net | Grouping elements with span</title>
<style type="text/css">
span.benefit {
	color:green;
}
</style>
</head>
<body>
<p>Early to bed and early to rise makes a man 
  <span class="benefit">healthy</span>,
  <span class="benefit">wealthy</span> and 
  <span class="benefit">wise</span>.
</p>
</body>
</html>

خروجی:

Early to bed and early to rise makes a man healthy, wealthy and wise.

همونطور که میبینید ما در اینجا یکجور گروه بندی انجام دادیم و رنگ فواید رو با رنگ سبز مشخص کردیم توجه میکنید که ما نام کلاس همه <span> ها رو benefit گذاشتیم تا بتونیم با CSS همه اونها رو به رنگ سبز در بیاریم. در واقع در کد CSS گفتیم رنگ همه <span> هایی که کلاسی با نام benefit دارن رو سبز کن.

 

ادامه

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

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

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

  ادامه

Muscular Hydrostats با جاوا اسکریپت و CSS

Muscular Hydrostats

HTML

<header class="info">
  <hgroup class="about">
    <h1>Muscular Hydrostats</h1>
    <h2>Tentacle simulation using inverse kinematics</h2>
    <h3>Click creature to control</h3>
  </hgroup>
  <nav class="more">
    <a href="https://github.com/soulwire/Muscular-Hydrostats/zipball/master" target="_blank">Download</a>
    <a href="https://github.com/soulwire/Muscular-Hydrostats" target="_blank">View on Github</a>
  </nav></header>
<div id="container"></div>

ادامه

دکمه زیبای 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>

ادامه