長野市松本市上田市ホームページ制作アプリコットデザインお問合せ

長野市・上田市・松本市・塩尻市・安曇野市でホームページ制作(WEBサイト制作)ならアプリコットデザイン

BRAND LIST

CSSのネタ帳~グラデーション編#3~

Posted:2017.04.21 | Category:

こんにちは、最近は通勤中、満開の桜に癒されている佐藤です。
しかしお花見に出かけたら花粉の猛攻撃にあってしまいました。

さて、CSSのネタ帳グラデーション編第3回となりました。

CSSでグラデーションテキストをつくる

まずはHTMLにテキストを用意します。
<body>
<p class="text-gradation">Gradation</p>
</body>

そしてこの文字にどうやってグラデーションカラーを適用するかというと、
「グラデーション背景を、文字の形で切り抜く」という仕組みで再現できます。
CSSでテキストにグラデーション CSSの記述はこちら。
.text-gradation {
    background: linear-gradient(#ff0, #f0f);
    -webkit-background-clip: text;
}
background: linear-gradient(開始色,終了色)で背景にグラデーションをつくり、
-webkit-background-clip: text; この記述によってtextでbackgroundをクリップ(切り抜き)しています。
こちらは-webkit-が必須ですので注意。

しかしフラットなデザインが主流の昨今、グラデーションテキストが活躍できそうな場面は、ほぼ無いかもしれませんね…;;

グラデーションを使った応用編

グラデーションの位置指定を利用することで、こんなことも出来ます。
グラデーション応用編
.border {
    width: 100px;
    height: 100px;
    background: linear-gradient(0deg, #999 50%, #ccc 50%);
    background-size: 10px;
}
linear-gradient(
0deg,//グラデーションの角度
#999 50%,//開始点から50%の位置に色#999を指定
#ccc 50%//50%から終了点の位置に色#cccを指定
);
こんな記述で、背景をぱきっと2色に分けることができます。
そしてその背景のサイズを好みの大きさにしてrepeatさせることによってボーダー柄をつくることができます。
グラデーション角度を90degとすると縦のストライプになります。

こちらは少し複雑な斜めのストライプの記述。
.stripe {
    width: 100px;
    height: 100px;
    background: linear-gradient(
    45deg,//グラデーションの角度45度
    #fff 25%,//開始点~25%まで#fff
    #ccc 25%, #ccc 50%,//25~50%まで#ccc
    #fff 50%, #fff 75%,//50~75%まで#fff
    #ccc 75%, #ccc//75~終了点まで#ccc
    );
    background-size: 10px;
}
頭の体操になりました…

長野市・松本市・上田市でホームページ制作・通販サイト制作
各種印刷物デザインならアプリコットデザイン

株式会社アプリコットデザイン

[長野オフィス]
〒381-2246 長野県長野市丹波島1-805
TEL.026-217-2184

[松本オフィス]
〒399-0036 長野県松本市村井町南4-12-26
TEL.0263-87-7486

この記事を書いた人Who is writen blog

Sato Tomoe /

SEARCH

  • デザインで全ての人を幸せに
  • ブランド戦略型WEBサイト
  • タブロイド紙作ります
  • 開業・企業パック
  • ブランディング
  • 信州ファーム
  • アプリコットマグ

AREA

対応エリア

長野市、松本市、上田市、岡谷市、飯田市、諏訪市、須坂市、小諸市、伊那市、駒ヶ根市、中野市、大町市、飯山市、茅野市、塩尻市、佐久市、千曲市、東御市、安曇野市、小海町、川上村、南牧村、南相木村、北相木村、佐久穂町、軽井沢町、御代田町、立科町、青木村、長和町、下諏訪町、富士見町、原村、辰野町、箕輪町、飯島町、南箕輪村、中川村、宮田村、松川町、高森町、阿南町、阿智村、平谷村、根羽村、下條村、売木村、天龍村、泰阜村、喬木村、豊丘村、大鹿村、上松町、南木曽町、木祖村、王滝村、大桑村、木曽町、麻績村、生坂村、山形村、朝日村、筑北村、池田町、松川村、白馬村、小谷村、坂城町、小布施町、高山村、山ノ内町、木島平村、木島平村、信濃町、小川村、飯綱町、栄村など長野県内全域

北海道、青森、岩手、宮城、秋田、山形、福島、東京、神奈川、埼玉、千葉、茨城、栃木、群馬、山梨、新潟、長野、富山、石川、福井、愛知、岐阜、静岡、三重、大阪、兵庫、京都、滋賀、奈良、和歌山、鳥取、島根、岡山、広島、山口、徳島、香川、愛媛、高知、福岡、佐賀、長崎、熊本、大分、宮崎、鹿児島、沖縄まで全国

TOPICSトピックス

TOPICSトピックス

PICK UPピックアップ

  • デザインノートに掲載されました
  • デザインで人を幸せにする会社
  • ブランド戦略型ホームページ制作
  • 開業起業される方へ
  • アプリコットデザイン
  • コーポレートサイト
  • 信州ファームデザイン
  • 信州ファームマーケット
  • ポケット
  • アプリコットマグ
  • ブランシュール

CONTACTお問合せ

デザインで人々を幸せにしたい。
デザインにはその力があります。I want to make people happy by design.
Design has that power.

デザインが全てだとは決して思いません。
デザインの良し悪しだけで、ビジネスが左右されるとも思っていません。
だけど、デザインの力はとても大きいことも知っています。
私たちが考える良いデザインとは、お客様の伝えたい想いを
より的確に、効果的に表現する手段だと考えます。
伝えたい想いは、間違った伝え方をしてしまうと伝わりません。
また、人を惹きつけるデザインでないと見てもらうことすら困難です。
私たちは日々努力を重ね、今日もそれらデザインに磨きをかけています。
そして制作する過程において、デザインを作ることよりも、お客様の伝えたい想いを
汲み取る事の方が制作するよりも重要だと考えます。
それらの結果、見た目も効果も併せ持った、優れたデザインとなります。
優れたデザインはビジネスの成長を促し、収益をもたらします。
私たちは、デザインを通して、一人でも多くの人を幸せにしたいと考えます。
デザインには人を幸せにする力があると信じています。

アプリコットの想いアプリコットの想い