آموزش گرادیان در CSS3

3 سال پیش

آموزش گرادیان در CSS3

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش گرادیان در CSS3 خواهیم پرداخت.

گرادیان چیست؟

گرادیان ترکیبی از دو یا چند رنگ را نشان می دهد همانطور که در زیر نشان داده شده است –

Curiosity blue

Ukraine

Green to dark

Fresh Turboscent

Koko Caramel

Virgin America

Portrait

Turquoise flow

Vine

Flickr

Instagram

Twitch

Pastel Orange at the Sun

Endless River

Predawn

Purple Bliss

Talking To Mice Elf

Hersheys

Crazy Orange I

Between The Clouds

Metallic Toad

Martini

Friday

ServQuick

Behongo

SoundCloud

Facebook Messenger

Shore

Cheer Up Emo Kid

Amethyst

Man of Steel

Neon Life

Teal Love

Red Mist

Starfall

Dance To Forget

Parklife

Cherryblossoms

Shadow Night

Ash

Virgin

Earthly

Dirty Fog

The Strain

Reef

Candy

Autumn

Winter

Forever Lost

Almost

Moor

Aqualicious

Misty Meadow

Kyoto

Sirius Tamed

Jonquil

Petrichor

A Lost Memory

Vasily

Blurry Beach

Namn

Day Tripper

Pinot Noir

Miaka

Army

Shrimpy

Influenza

Calm Darya

Bourbon

Stellar

Clouds

Moonrise

Peach

Dracula

Mantle

Titanium

Opa

Sea Blizz

Midnight City

Mystic

Shroom Haze

Moss

Bora Bora

Venice Blue

Electric Violet

Kashmir

Steel Gray

Mirage

Juicy Orange

Mojito

Cherry

Pinky

Sea Weed

Purple Paradise

Sunrise

Aqua Marine

Aubergine

Bloody Mary

Mango Pulp

Frozen

Rose Water

Horizon

Lemon Twist

Emerald Water

Man of Steel

Colour 1: #780206

Colour 2: #061161

Add your gradient
Adding a gradient is easy. All gradients are read from a gradients.json file which is available in this project's repo. Simply add your gradient details to it and submit a pull request.

Get the CSS Code

  background: -webkit-linear-gradient(90deg, #780206 10%, #061161 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #780206 10%, #061161 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #780206 10%, #061161 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #780206 10%, #061161 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #780206 10%, #061161 90%); /* W3C */
        
Copy to clipboard

انواع گرادیان ها

گرادیان های خطی (پایین / بالا / چپ / راست / مورب)
گرادیان شعاعی
گرادیان های خطی

از گرادیان های خطی برای ترتیب دو یا چند رنگ در قالب های خطی مانند بالا به پایین استفاده می شود.

بالا به پایین

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(pink,green);
            background: -o-linear-gradient(pink,green);
            background: -moz-linear-gradient(pink,green); 
            background: linear-gradient(pink,green); 
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

چپ به راست

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(left, red , blue);
            background: -o-linear-gradient(right, red, blue); 
            background: -moz-linear-gradient(right, red, blue);
            background: linear-gradient(to right, red , blue);
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

مورب

مورب از دکمه بالا سمت چپ و راست شروع می شود.

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            background: -webkit-linear-gradient(left top, red , blue); 
            background: -o-linear-gradient(bottom right, red, blue); 
            background: -moz-linear-gradient(bottom right, red, blue);
            background: linear-gradient(to bottom right, red , blue); 
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

چند رنگ

<html>
   <head>
      <style>
         #grad2 {
            height: 100px;
            background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink); 
            background: linear-gradient(red, orange, yellow, red, blue, green,pink); 
         }
      </style>
   </head>

   <body>
      <div id = "grad2"></div>
   </body>
</html>

گرادیان شعاعی CSS3

گرادیان شعاعی در مرکز ظاهر می شود.

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-radial-gradient(red 5%, green 15%, pink 60%); 
            background: -o-radial-gradient(red 5%, green 15%, pink 60%); 
            background: -moz-radial-gradient(red 5%, green 15%, pink 60%); 
            background: radial-gradient(red 5%, green 15%, pink 60%); 
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

CSS3 تکرار گرادیان شعاعی

<html>
   <head>
      <style>
         #grad1 {
            height: 100px;
            width: 550px;
            background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%); 
            background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: repeating-radial-gradient(blue, yellow 10%, green 15%); 
         }
      </style>
   </head>

   <body>
      <div id = "grad1"></div>
   </body>
</html>

منبع.

لیست جلسات قبل آموزش CSS

نویسنده مطلب erfan molaei

آموزش گرادیان در CSS3

آموزش گرادیان در CSS3

گرادیان چیست؟

انواع گرادیان ها

بالا به پایین

چپ به راست

مورب

چند رنگ

گرادیان شعاعی CSS3

CSS3 تکرار گرادیان شعاعی

لیست جلسات قبل آموزش CSS

دیدگاه شما

بدون دیدگاه

آموزش گرادیان در CSS3

گرادیان چیست؟

انواع گرادیان ها

بالا به پایین

چپ به راست

مورب

چند رنگ

گرادیان شعاعی CSS3

CSS3 تکرار گرادیان شعاعی

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه