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

saber

4 سال پیش

امتیاز دهید post

آموزش گرادیان در 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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

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

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

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

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

بالا به پایین

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         #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); 
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;div id = "grad1"&gt;&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

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

</body>

</html>

چپ به راست

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         #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);
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;div id = "grad1"&gt;&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

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

</body>

</html>

مورب

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

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         #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); 
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;div id = "grad1"&gt;&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

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

</body>

</html>

چند رنگ

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         #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); 
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;div id = "grad2"&gt;&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

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

</body>

</html>

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

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

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         #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%); 
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;div id = "grad1"&gt;&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

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

</body>

</html>

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

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         #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%); 
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;div id = "grad1"&gt;&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

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

</body>

</html>

منبع.

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

امتیاز دهید post

نویسنده مطلب saber

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

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

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

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

بالا به پایین

چپ به راست

مورب

چند رنگ

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

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

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

دیدگاه شما

بدون دیدگاه

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

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

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

بالا به پایین

چپ به راست

مورب

چند رنگ

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

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

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

دیدگاه شما

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

بدون دیدگاه