Hatena Blog Tags
はてなブログ トップ
text-shadow
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

text-shadow

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
Little Strange Software•4年前

【CSS】桜の花、開く季節に…【枠装飾】

どうも！LSSです！！ 最近、桜のつぼみが開くのを待ちながら撮影散歩していました。 ようやく神戸でもソメイヨシノが開き始めたところで、春っぽいCSSネタを考えてみました！ サンプル コード CSSセレクタについて 文字に対する指定 サンプル 桜の花、開く季節に… コード <style>.hnbr{border-radius:10px;padding:10px;border:6px groove #ffcccc;background-image:radial-gradient(at 90% 50%,#ffffffff 7%,#ffffff00),repeating-conic-gradient(…

#CSS#装飾#conic-gradient#text-shadow

ネットで話題

もっと見る
518ブックマークCSS3のtext-shadowを使ったテキスト装飾のサンプル集 - かちびと.netkachibito.net
391ブックマーク[CSS]text-shadowでここまでできる、かっこいいエフェクト集text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; レタープレスのテキストエフェクトcoliss.com
368ブックマークtext-shadowを使ってテキストにさまざまなスタイルを与える全23種類のスタイルシートのまとめ | コリスText Shadow Compilation デモは全部で23種類、かっこいいスタイルをはじめ、使い方が限定されたアレなものまで、さまざまなスタイルがあります。 基本のHTML HTMLの基本はclassを付与したh1要素のみです。 classを変更して、利用してください。 <h1 class="basic">Basic</h1> 以下、各デモのキャプチャとスタイルシート...coliss.com
247ブックマーク[CSS]エレガントからレトロまで、text-shadowを使った美しいエフェクト集text-shadowを使った美しい4種類のエフェクトを紹介します。 エフェクトはCSSのみで、もちろん画像は使っていません。 HTML <h1 class="elegantshadow">Elegant Shadow</h1> CSS まずは、各見出し共通のスタイルシートから。 h1 { font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGoth...coliss.com
101ブックマークユニークなエフェクトを実現するtext-shadowの設定いろいろ | IDEA*IDEAwww.ideaxidea.com
89ブックマーク自由自在！CSS3のtext-shadowを使ってをロゴ作ってみる｜Webparkweboook.blog22.fc2.com
73ブックマークCSS3のtransitionとtext-shadowで作る様々なリンク装飾weboook.blog22.fc2.com
68ブックマークUsing CSS Text-Shadow to Create Cool Text Effectsline25.com
65ブックマークcss3のtext-shadowだけでモナリザを描いてみた - Cherenkovの暗中模索にっきcherenkov.hatenadiary.org

関連ブログ

Little Strange Software•5年前

【CSSサンプル】八方に飛び散る星

どうも！LSSです！！ 【CSSサンプル】text-shadowが霧散するサンプルを作ってみました【小ネタ】 - Little Strange Software のコメント欄にて、 421miyako(id:m421miyako) いいですね。カーソルをあてると、四方八方に星が飛び散るなんていうのはどうでしょう？とんでもないこと言いだしてすみません。 とのコメントをいただきました^^ パッと思いつくのは、before要素やafter要素に★を置いて、その要素だけにtext-shadow効果をつけて、それをアニメーションで位置変化させれば出来るかな？と。 それって出来るんだっけ？？と思ったので、…

#CSS#CSSサンプル#text-shadow#before要素#after要素
Little Strange Software•5年前

【CSSサンプル】text-shadowが霧散するサンプルを作ってみました【小ネタ】

どうも！LSSです！！ 【CSSサンプル】ふりむきカーン【ほぼジョークｗ】 - Little Strange Software でoutlineのオーラが広がって消えていくものを作りましたが、 「text-shadowとanimationを使えば、文字がまとったオーラが動く様子が表現できるのでは？」 と、試してみました^^ text-shadowが霧散するサンプル コード ちょびっとコード解説 text-shadowが霧散するサンプル さぁ、夏のあつさを、ふきとばそう！ コード <style><!--@keyframes txtshda{0%{text-shadow:0px 0px 10px …

#CSS#CSSサンプル#text-shadow#animation#keyframes
プログラミングとウェブデザインの勉強メモ•5年前

CSS|text-shadowプロパティの使い方

text-shadowプロパティの基本的な使い方について書きます。text-shadowプロパティは、テキスト(文字列)に影を付けるプロパティです。具体的な書き方は、サンプルコードを確認してください。 記述の仕方 text-shadowプロパティの基本情報 サンプルコード 表示例 表示の比較 まとめ 記述の仕方 /* 記述例 */ セレクタ名{ text-shadow: 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色; } text-shadowプロパティの基本情報 text-shadowプロパティが取る値について説明します。 水平方向の距離 水平方向の影の距離(px、emなど) 正の…

#CSS入門#CSS#text-shadow
Little Strange Software•5年前

【コード生成】text-shadow調整ツール

どうも！LSSです！！ 今回は、コード生成ツール「text-shadow調整ツール」を公開します！ ブログなどで「影つき文字」を使いたい時にちょっと手間が省けるかも？なツールです。 text-shadow調整ツール 使い方 …という小ネタなんですが text-shadow調整ツール 文字色 文字サイズ太字 影色 影位置・横影位置・縦影ぼかし コード 使い方 「文字色 文字サイズ 太字」で、装飾対象となる文字の設定ができます。 「影色 影位置・横 影位置・縦 影ぼかし」でtext-shadow部分の設定ができます。 お好みの設定ができましたら、「コード」内の文字列をコピペして、文章部分を書き換え…

#JavaScript#CSS#text-shadow#ツール
自分方位研究所•5年前

ブログのヘッダに画像挿入。四苦八苦。

chromeの検証モードを見ながら色々やってみました。 とりあえず、タイトル文字のもやもやの解除と、大きすぎるアイコンを小さくしました。 タイトル文字とアイコンの位置を入れ替えたいのですが、 background-position: left center; の命令が 効いていないようで、今後の課題です。 変更前 変更後 画像部分が収まる範囲のサイズが高さ200px となっていましたので、100pxに縮小し、その大きさに自動で合わせるように画像のサイズ指定を background-size: contain; としました。 ブログタイトルとブログの説明文は、color プロパティにて、文字の色…

#CSS#header-image-enable#background-position#text-shadow