[CSS3] TextShadowで作る文字の色々なデザイン（グロウ、エンボス、ベベル、袋文字、ぼかし、3D） - YoheiM .NET
[CSS3] TextShadowで作る文字の色々なデザイン（グロウ、エンボス、ベベル、袋文字、ぼかし、3D） こんにちは、最近はソーシャルゲーム開発中の@yoheiMuneです。 最近のWeb開発でCSS3を使って文字の装飾をすることが多くなってきました。 その中で今日は、CSS3のTextShadowを使った色々な文字装飾をブログに書きたいと思います。 CSS3のTextShadowとは TextShadowとは、その名前の通り、文字に陰を付けることが出来るCSSです。 例えば以下のような指定をCSSをすることで、文字の陰が付きます。 <style type="text/css"> .text1 { text-shadow: 2px 2px 2px rgba(30,30,30,1); -webkit-text-shadow: 2px 2px 2px rgba(30,30,30,1);
![[CSS3] TextShadowで作る文字の色々なデザイン（グロウ、エンボス、ベベル、袋文字、ぼかし、3D） - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/2e5cd8ce43c2de67cb958af6808208fc2f9083f6/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F173.jpg)
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ
Creating Different CSS3 Box Shadows Effects [ad#ad-2] デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ デモページ [ad#ad-2] 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effect</h3> </div> 基本となるCSS div要素とh3要素の基本となるスタイルです。 .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height
最適なCSSの横並びはどっち!? Flexboxとfloatのパフォーマンス比較 - ICS MEDIA
ボックス要素の横並びをCSSで行う場合、皆さんはどうしていますか？ 従来知られているfloatプロパティを使った方法の他に、CSS3から「Flexbox」を使用する方法も選択肢として加わりました。では、Flexboxとfloatはどちらの方が処理速度が早いのでしょうか？ 本記事ではこの2つをパフォーマンス面から比較し、最適なボックスレイアウト手法について検証します。 Flexboxとは？ Flexbox(CSS Flexible Box Layout Module)は、floatに代わる新しいボックスレイアウト方法。横並びはもちろん、ボックスを均等位置に配置したり、整列や中央揃えなど、柔軟なレイアウトが可能です。今やすべてのモダンブラウザーで使用することができ（※1）、Bootstrap 4の新たなレイアウト方法として採用される（※2）等、次世代の標準となっていくであろう技術です。 ※1
CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS MEDIA
mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。本記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。 そもそもブレンドモードとは？ ブレンドモードはクリエイティブな表現を作る上での基本機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、XDや、Figmaで搭載されていて、レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。本記事ではCS
animation－CSS3リファレンス
animationプロパティは、要素にキーフレームアニメーションを適用する場合に、 アニメーションについてまとめて指定する際に使用します。 animationプロパティでは、 animation-name、 animation-duration、 animation-timing-function、 animation-delay、 animation-iteration-count、 animation-direction の6つのプロパティの値を、組み合わせて指定することができます。 省略された値はそれらの初期の値に設定されます。 ■値 各プロパティの値をスペースで区切って指定 animation-nameの値、 animation-durationの値、 animation-timing-functionの値、 animation-delayの値、 animation-iterati
radial-gradient() - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
[css]折り返しリボンの作り方を解説するよ | xxxx7
colissさんのところで、心惹かれる記事を見つけました。 [CSS]h1一つだけでこんなにかわいいレトロ風リボンが実装できるスタイルシート この折り返しリボン、どうなってるんだろうと思って、仕組みを調べてみました。使われている小技を２つ紹介してから、リボンの本質的な構造を説明したいと思います。 斜線の出し方 リボンを描いていく途中で、斜線が出てきます。まずはこの部分をどうやって作るかをみていきます。 使うのは、borderです。上下左右それぞれに適当に色を付けてみます。わかりやすいように、普段は使わないような色の組み合わせで塗ってみます。 body { background: #B1E3E2; } h1{ border-top: 30px solid #999; border-right: 30px solid #990; border-bottom: 30px solid #909;
2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ
数多くのブログで2014年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 キーワードとしては、スマフォ・タブレットなどの小さいサイズのタッチデバイス、レスポンシブ（特に画像）、HTML5/CSS3、ビッグデータ、リスク管理が注目されています。 2014年、ウェブ制作業界全体の流れ ウェブデザインの2014年のトレンド 2014年に大きく変化するウェブデザインの7つの傾向 2014年、注目度の高いIT系の職種・役割 2014年、ウェブ制作業界全体の流れ まずは、2012, 2013年と的確な予測をだしてきたsitepointの2014年のウェブ制作業界の全体の流れから。 10 Web Predictions for 2014 スマートフォン中心の年 最終的にはデスクトップからのアクセスをスマフォが超える HTML5のウェブアプリ
SpinKit
.spinner { width: 40px; height: 40px; background-color: #333; margin: 100px auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg
CodePen - fade loading
based on previous pen: http://codepen.io/diegopardo/pen/JFBCn Thank you to all!...
スマートフォンなどに対応したレスポンシブデザインに関するCSSスタイル（font size自動調整をきるなど） - くらげだらけ
前にも一度、同じような問題に直面して調べて解決したような気がしたのですが、今回もおそらくその時と同じくGoogleで調べて解決したので、メモって忘れないようにしておこう。 font size自動調整をきる 最近ではレスポンシブデザインでいろんなデバイスに対応したりしますが、私もそんな感じの仕事をしていたわけです。最初はPC Chromeでwindowを伸び縮みさせながら作っていたわけですが、ある程度できた所でiPhone Mobile Safariでチェックしていたのです。Portrait mode（縦向き）では問題なく閲覧していたのですが、Landscape mode（横向き）にしたときにどうも文字サイズが変になります。 最近はiPhoneもリモートでWeb inspectorで見れたりしますから、細かく調べてみても数値的には問題無さそう。おかしいなってことで調べた後に、iPhoneでは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
たった3行で実現できるCSSの上下中央揃え（Flexbox） - Qiita
ゴーストボタンと相性が良さそうなホバーエフェクト 10＋ - NxWorld
CSSの素晴らしいアイデアが満載！2014年スタイルシートのテクニックのまとめ
CSSだけで画像を反転させる方法 | Stronghold Archive
http://unirry.com/sample/onmouse/index4.html
新しいCSSの仕様を色々調べてみた
Tridiv | CSS 3D Editor
mdlab.jp