آموزش 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;
}

حال برای رنگ پس زمینه ترکیب چند رنگ با دستور 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);
}

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

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

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

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

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

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

میتوانید متون را سایه بزنید و از دستور 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)

Post Views: 290