Do you really understand CSS linear-gradients?
Want a nice gradient background on your site? background-image: linear-gradient(red, blue); BOOM, done! Ok, it’s a little boring. So if you want more, I recommend this css-tricks article and MDN page. Still here? Alright, let’s go and have a look at some of the details of how linear-gradients actually work. First of all, let’s remind ourselves of the syntax allowed in the linear-gradient function:
CSS Gradients with background-blend-mode
The CSS background-blend-mode property blends the backgrounds of an element: colors, images, and gradients, together with Photoshop-like blend modes (multiply, screen, overlay, etc). It is very new and is curently supported by the latest releases of Chrome, Firefox, and Opera. The property is coming to Safari soon but not available in Internet Explorer. CSS gradients are already immensely powerful
Gradient Animation Trick
You can't animate gradient colors in CSS. No, really. There are a lot of animatable properties, but the one used for gradients, background-image, is not on the list. Fortunately, if you were looking to animate a simple light-to-dark gradient fade, then there's a decent workaround. Use background-size to stretch your gradient to be taller than the element it's on. Now you can animate background-pos
Create Striped Backgrounds With Gradients (and A Sass Mixin) | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Kitty Giraudel. Hugo has written several times for CSS-Tricks including an article about a rather clever Pie Timer and several entries for the Almanac. I’m glad to have him back, this time explaining some pretty hardcore Sass stuff with a really practical app
戻らない - jsdo.it - Share JavaScript, HTML5 and CSS
<!--[if gte IE 9]> <style type="text/css"> .gradient { filter: none; } </style> <![endif]--> <h2>drop-shadow</h2> <div class="button1"> <div class="△"></div> <div class="□">戻らない</div> </div> <h2>box-shadow</h2> <div class="button2"> <div class="△"></div> <div class="□">戻らない</div> </div> <h2>box-shadow+α</h2> <div class="button3"> <div class="mask_l"> <div class="△"></div> </div> <div class="mask_r
forked: Pure CSS Image Generator - jsdo.it - Share JavaScript, HTML5 and CSS
// forked from akm2's "Pure CSS Image Generator" http://jsdo.it/akm2/sz2T // Configs // STEP_SIZE = 1, BLUR_SIZE = 0 で写真そのまま var DOT_SIZE = 1; var STEP_SIZE = 1; // ステップサイズ, box-shadow spread-radius プロパティの値, 小さいほど詳細 var BLUR_SIZE = 1; // ぼかしのサイズ, box-shadow blur-radius プロパティの値 var PIXEL_LIMIT = 5000; // 許容ピクセル数, この値を超える画像はリサイズされる, 0 でリサイズしない // サンプル画像 from http://www.sxc.hu/ var IMG_URL = 'http://
クロスブラウザな css3 linear-gradient が面倒になりそうな件について - ほむらちゃほむほむ
2012 年の 4月に CR(勧告候補) になった，CSS Image Values and Replaced Content Module Level 3 とそこで規定されてる，Linear Gradients: the ‘linear-gradient()’ notation の幾つかのブラウザでの対応具合が面倒な事になってるなぁってお話． 経緯とか 最初期 もともと，グラデーションだーと提案された頃には，WebKit の独自実装としてこんな感じの書式だった．(cf. Introducing CSS Gradients) background: -webkit-gradient(linear, left top /* 始点 */, left bottom /* 終点 */, from(#000) /* 始点の色 */, to(#FFF) /* 終点の色 */); 途中にもっと色を挟むと
Learn To Create A Camera Lens In Photoshop
In todays detailed tutorial I'll be showing you how to create a cool camera lens in photoshop. The camera lens later could be used as an icon or illustration, lets get going... What We’ll Be Creating Creating A New Document Create a new document (Ctrl + N) 1130×700 pixels with any colored background. Set your foreground color to #af86b5 and background color to #644a68 then select the “Gradient Too
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Randomized CSS3 Gradient Generator
http://www.designskilz.com/css3-gradients/
Colorful stripes made with linear-gradients (Example)
Grad3
CSS Gradients