ساخت انواع shape با CSS

See the Pen Yin Yang by irDevs.com by Softafzar (@softafzar) on CodePen.


 
سلام. در این پست میخوام چندین shape که با CSS ساخته شدن رو بذارم. از این اشکال میشه در طراحی ها استفاده کرد.
 
ادامه

آموزش 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 – استایلینگ(CSS)

CSS یک زبان Style Sheet (به فارسی “زبان شیوه نامه”) است که با استفاده از این زبان میشه ظاهر یک صفحه وب رو تعریف کرد که باید به چه شکلی باشه. حالا CSS همه جا وجود داره! رنگ بندی صفحات وب و چیدمان اونها، رنگ و اندازه فونت ها و … همه با CSS انجام میشه.

ما الان نمیخوایم CSS درس بدیم و فرض میکنیم که شما تا حدی بلدید، اگر هم بلد نیستید نحوه استفاده از اون رو یاد میگیرید. در این درس فقط میخوایم نحوه استفاده از CSS رو در HTML رو آموزش بدیم.

استایل بندی HTML با CSS

CSS همزمان با HTML 4 معرفی شد تا راه بهتری برای استایل بندی HTML وجود داشته باشه.

برای استفاده از CSS در HTML چند را وجود داره:

  • Inline(درون خطی) – استفاده از مشخصه Style موجود در المنتهای HTML.
  • Internal(داخلی) یا Embedded(جاسازی شده) – استفاده از المنت <Style> در قسمت head صفحه.
  • External(خارجی) – لینک دادن به یک فایل CSS برای بارگذاری در صفحه.

توجه کنید که شما از همه این راهها هم میتونید استفاده کنید و هیچ محدودیتی ندارید.

چه وقت از کدومش استفاده کنم؟

بجز روش اول، از روش دوم و سوم همیشه میتونید استفاده کنید اما چون در روش سوم به یک فایل خارجی لینک میدیم و باعث خوانایی بیشتر کد و تفکیک کدها میشه، این روش رو بهترین روش اضافه کردن CSS به HTML میدونن.

همونطور که گفتم روش سوم به فایل خارجی لینک میدیم اما یه وقتایی هم هست که دوست داریم همه کدها رو بصورت یکجا داشته باشیم در این مواقه روش دوم استفاده میشه.

اما روش اول چه مشکلی داره؟

روش اول فقط یکبار میتونه استفاده بشه چون مستقیما داخل المنت مورد نظر قرار میگیره  و فقط استایل همون المنت رو تغییر میده و نمیتونه روی بقیه المتها تاثیر بذاره پس نمیتونه بجای روشهای دوم و سوم استفاده بشه. معمولا از این روش برای باز نویسی یا Override کردن یک یا چند Property(ویژگی،خاصیت) CSS که قبلا برای المنت تعریف شده استفاده میشه. اما محدودیت های دیگه ای هم داره مثلا در این روش شما نمیتونید از Selector های CSS  استفاده کنید.

با انواع راههای استفاده CSS آشنا شدید حالا برای یادگیری بهتر از هر کدوم از روش ها براتون مثال میزنم.

ادامه

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

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

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>

ادامه