こんにちは！！エレクアライズ 制作技術局 ハイパーメディアクリエイター(HMC)の吉永です。
久々の更新ですので、最近感動したCSS技術を一つご紹介します。
前回の記事はコチラ
ってかそもそもそれってできるの？できます。
CSSを使えば。
CSSって何？って方はこちら
例えばこんな感じ
種明かしすると背景の色をグラデーションさせながらアニメーションしてます。
種明かしすると背景の色をグラデーションさせながらアニメーションしてます。
今回も動作確認用のデモを用意したので、色々設定して遊んでみましょう。
ちなみに「-webkit-background-clip: text;」と「color: transparent;」を組み合わせることでテキストの輪郭で背景を切り抜くことも可能です。
※動作するブラウザの制限はあります。
■テキストでもできます■
色1
色2
色3
色4
色5
色6
色7
色8
グラデーション角度
px
テキスト
テキストサイズ
px
CSSプロパティはここをコピペすると簡単に自分でも使用できますよ。
background-image: linear-gradient(60deg, #f79533,#f37055,#ef4e7b,#a166ab,#5073b8,#1098ad,#07b39b,#6fba82);
font-size: 100px;
font-weight: bold;
animation: animatedgradient 3s ease alternate infinite;
background-size: 300% 300%;
color: transparent;
-webkit-background-clip: text;
-webkit-text-stroke: 4px rgba(0,0,0,0.5);
background-image: linear-gradient(60deg, #f79533,#f37055,#ef4e7b,#a166ab,#5073b8,#1098ad,#07b39b,#6fba82);
font-size: 100px;
font-weight: bold;
animation: animatedgradient 3s ease alternate infinite;
background-size: 300% 300%;
color: transparent;
-webkit-background-clip: text;
-webkit-text-stroke: 4px rgba(0,0,0,0.5);
ではまた次回のネタを探して見つかり次第ウプします。
see you
← ツナガルチップス No.30へ
→ ツナガルチップス No.32へ
###########################################
Android開発アプリ一覧
リバーシ
４色リバーシ
リバーシプレミアム
４色リバーシプレミアム
iOS開発アプリ一覧
シーバリ for Y.Y Magic
４色シーバリ for Y.Y Magic
シーバリプレミアム for Y.Y Magic
４色シーバリプレミアム for Y.Y Magic
吉永 祐太
###########################################
人気ブログランキングに投票
にほんブログ村のランキングに投票
クリックしていただけると励みになりますm(_ _)m
Comments