آموزش gradient و shadow در CSS3

آموزش gradient و shadow در CSS3

 

ما میتوانیم برای زیبایی بیشتر در صفحه خود، بر روی المان ها سایه اعمال کنیم.

به مثال زیر دقت کنید.

 

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="lesson.css">
</head>
<body>
  <div id="main">
    <div>تخصصی ترین مجموعه آموزشی و پژوهشی آنلاین ایران – ارائه آموزش‌های ویدئویی و فیلم‌های آموزشی شبکه ، سیسکو ، مایکروسافت ، لینوکس ، امنیت ، طراحی وب ، تست نفوذ ، زبان انگلیسی ، زبان فرانسه ، زبان ترکی استانبولی و دروس تخصصی دانشگاهی فنی و مهندسی
    </div>

    <div>تخصصی ترین مجموعه آموزشی و پژوهشی آنلاین ایران – ارائه آموزش‌های ویدئویی و فیلم‌های آموزشی شبکه ، سیسکو ، مایکروسافت ، لینوکس ، امنیت ، طراحی وب ، تست نفوذ ، زبان انگلیسی ، زبان فرانسه ، زبان ترکی استانبولی و دروس تخصصی دانشگاهی فنی و مهندسی
    </div>
    
    <div>تخصصی ترین مجموعه آموزشی و پژوهشی آنلاین ایران – ارائه آموزش‌های ویدئویی و فیلم‌های آموزشی شبکه ، سیسکو ، مایکروسافت ، لینوکس ، امنیت ، طراحی وب ، تست نفوذ ، زبان انگلیسی ، زبان فرانسه ، زبان ترکی استانبولی و دروس تخصصی دانشگاهی فنی و مهندسی
    </div>

  </div>
</body>
</html>

 

#main{
  background-color: rgba(0, 255, 247,0.4);
  width: 500px;
  height: auto;
  text-align: right;
  margin-left: 30%;
}
 div{
 	border-radius: 30px;
 	margin: 20px;
 	padding: 20px;
 }

div:nth-child(2n){
  background-color: blue;
}

div:nth-child(2n+1){
  background-color: yellow;
}
آموزش gradient و shadow در CSS3
 

حال برای رنگ پس زمینه ترکیب چند رنگ با دستور background: linear-gradient(blue,aqua,white); به وجود آورید که از رنگ آبی شروع شده و به فیروزه ای و در نهایت به سفید کشیده میشود.

 

body{
  background-color: #eee;
}

#main{
  background-color: rgba(0, 255, 247,0.4);
  width: 500px;
  height: auto;
  text-align: right;
  margin-left: 25%;
  background: linear-gradient(blue,aqua,white);
}
gradient و shadow در CSS3
 

همچنین میتوانید با دستور زیر درصدی مشخص کنید که از چه درصدی به بعد رنگ مورد نظرتان شروع شود.

background: linear-gradient(blue 20%,aqua,white);

gradient و shadow در طراحی سایت
 

و میتوانید با دستور زیر تکرار به وجود آورید.

background: repeating-linear-gradient(blue 20%,aqua,white,blue);

استفاده از gradient و shadow در css
 

یا اینکه رنگ ها با درجه خاصی نمایان شوند.

background: repeating-linear-gradient(45deg,blue 20%,aqua,white,blue);

gradient و shadow در css
 

میتوانید متون را سایه بزنید و از دستور text-shadow: #333 0 3px 3px; استفاده کنید که مقدار اول رنگ مورد نظر و مقدار دوم یعنی هیچ مقدار به سمت راست حرکت کن و مقدار سوم ۳px به سمت پایین و مقدار نهایی به چه میزان سایه را پخش کن.

 

div{
 	border-radius: 30px;
 	margin: 20px;
 	padding: 20px;
 	text-shadow: #333 0 3px 3px;
 }
استفاده از gradient و shadow در طراحی وب سایت
 

و همچنین برای هر box سایه تولید کنید با دستور زیر.

 

div{
 	border-radius: 30px;
 	margin: 20px;
 	padding: 20px;
 	text-shadow: #333 0 3px 3px;
 	box-shadow: #333 3px 3px 20px, #333 3px 3px 20px;
 }
آموزش استفاده از shadow و gradient در css
 

برای دیدن آموزش های بیشتر جزوات CSS را دنبال کنید.

 

قسمت قبل آموزش (آموزش border and multiple images در CSS3)

قسمت بعد آموزش (آموزش transition در CSS3)

 

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد.