Frontrend - Qiita Advent Calendar 2014 - Qiita書く内容 Front-endに関したもの ※投稿はQiitaではなく、お持ちのブログとかに書いてもらってももちろん大丈夫です。 参加資格 Front-endを愛する人 Frontrendも好きな人 Frontrendに参加したことのある人 我が名はFrontrendだ！な人 究極のFront-endと至高のFront-end
[CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ
divやp、hrなどで実装された囲いや区切りのスタイルに、一手間加えた素敵なデザインにするスタイルシートのテクニックを紹介します。 かわいいデザインからスタイリッシュなものまで、実装のアイデアが素晴らしいものばかりです。
![[CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a545d68e72312cfa64f79c7d1932afa3d3078686/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014120205-19.png)
ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
美しいグラデーションが簡単に利用できる！グラデの種類が豊富に揃ったmixinとスタイルシートのまとめ -SuperGradient
垂直・水平のベーシックなグラデーションをはじめ、放射状や斜め方向のグラデーションなど、さまざまな美しいグラデーションを描くmixinをまとめた「SuperGradient」を紹介します。 ↓4色を使った斜めのグラデーション、美しいですね！ SuperGradient SuperGradient -GitHub SuperGradientではグラデーションのタイプとカラー、そのカラーが始めるポイントを指定するだけで、簡単に美しいグラデーションが描けるSassのmixinがまとめられています。 下記に、そのmixinの使い方とスタイルシートでの記述も添えてみました。 Vertical, 2 colors 2色を使った垂直方向のグラデーション mixinの使い方 @include sgradient( $colors: ( (#31B7D7, 0%), (#EDAC7D, 100%) ) );
[続編] 効率的になった！最近のサイトで使われていたCSS小技集 - コムテブログ
TL;DR 前回（あのサイトでさりげなく使われていた CSS 小技集）の続きとなります。今回はマウス操作によりインタラクティブな動きを出したり、簡単にボックスを等間隔・等幅にしたりと CSS のみで実現できる方法を書いておきます。 インタラクティブ １．マウスオーバーで自動スクロールさせる 最近、マウスオーバーで縦長のページを部分的に見せる WordPress テーマが少しづつ出てきました。こちらは簡易的ながらマウスオーバーにて縦長の画像を見せるコードです。長めの画像を用意してはみ出した部分はoverflow: hidden;で隠しながらtransitionで遅延させ擬似的にスクロールしているように見せます。 html <div class="box-fixed"> <div class="field-wrap"> <div class="field-detail"></div> </di
![[続編] 効率的になった！最近のサイトで使われていたCSS小技集 - コムテブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/25fee8f1468dfd9f1f2b34b6da4ca43e4f44c4df/height=288;version=1;width=512/https%3A%2F%2Fcommte.net%2Fwp-content%2Fuploads%2Fai_css_interactive_trends.png)
[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック
三連リングのようなカワイイ囲いをスタイルシートで実装するテクニックを紹介します。 左のSingleだと、divは一つだけ！ 左のSingleを例に、実装方法を紹介します。 HTML div一つにclassを加えます。 <div class="hoja">SINGLE</div> CSS 複数のリングは、box-shadowで作成します。アニメーションさせたくない場合は、keyframesは必要ありません。 ※利用する際は、ベンダープレフィックスを加えてください。 参考：面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free .hoja { color: #dcdce2; position: absolute; top: 50%; left: 50%; margin-left: -180px; margin-top: -90px; width: 180px
![[CSS]box-shadowを使って、三連リングのようなカワイイ囲いを作るテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/bef7bf928dc917611c060c7f63ae5b39c925d844/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112601.png)
新鮮なアイデアが満載！アニメーションやスクロールを使った実装テクニックのまとめ
見るだけでワクワクする、そんな素晴らしいアイデアが満載のアニメーションやスクロールを使った実装テクニックをCodePenから紹介します。
[CSS]スクリプト無し、CSSで実装されたパタッと開くアニメーションがかわいいスタイルシートのテクニック
スクリプト無し、CSSで実装されたパタッと開くアニメーションがかわいいスタイルシートのテクニックを紹介します。 パタッは2種類、↓の一つ目から二つ目を想像してみてください。 Reading Is Fundamental 見事に再現されていますね。 HTML 一つ目に紹介したデモ、半分からパタッとなるHTMLから。 開く時のテキストの区切れはspanで実装します。 <article> <a class="btn-fold-2" href="#"> <span>Don</span><span>ate</span> </a> </article> 二つ目のスライドしてパタッと開くのもHTMLの構造は基本的に同じです。 <article> <a class="btn-fold-1" href="#"> <span>Donate</span><span>to RIF</span> </a> </ar
![[CSS]スクリプト無し、CSSで実装されたパタッと開くアニメーションがかわいいスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/299530ef13666321db52a40926f6128520049172/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014100204.gif)
自由な形に画像の切り抜きができるSVGのclip-path polygonを CSSで行う | 9ineBB
CSSで画像の切り抜きをする SVG の ClipPath で polygon というものがあり 3点以上の座標をX点とY点で指定することで、その領域を切り抜くことが出来ます 画像編集ソフトでクリッピングするようなものです これを CSS で行うことが出来ます img要素やdiv要素に適応出来て画像をそのまま切り抜きが出来ます 使うのは clip-path: polygon(); polygon() のなかに座標を入れていきます 座標はpxで指定 -webkit-clip-path: polygon(103px 17px,235px 81px,214px 287px,28px 246px,26px 63px); 座標は％での指定でも可能です それぞれの座標は XとYはスペースで区切り カンマで一つの座標を区切ります DEMO (Chrome、operaでのみ動作確認してます) clip-p
CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう | Webクリエイターボックス
CSS3アニメーションに挑戦！色が移り変わる背景を実装しようフラットデザインが流行ってからは、背景を一色で塗りつぶしたデザインのサイトが多くなりました。しかしそれだけではなんだか味気ない！という事で、CSS3のアニメーションを使って、徐々に色を変化させてみましょう！色の組み合わせや順番を調整して、パッと目を引くデザインに！ Themifyではホームのファーストビューでビビッドな色を少しずつ変えながら表示しています。今回目指すのはこんな感じの背景です。このサイトでは JavaScript により色の移り変わりを実装しているようですが、CSS3 のキーフレームアニメーションだけでも表現できます！ CSS3 キーフレームアニメーションの基本まずは要素を徐々に変化させるアニメーションについて覚えていきましょう！CSS3 の animation プロパティでは、キーフレームを設定して細かい動きを描画
知っておいてよかった！Web制作時に効率上げる「便利」なCSSテクニック - コムテブログ
TL;DR 少し前にサイト制作でさりげなく使われている CSS テクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。 Photoshop ののように、乗算・オーバーレイなど背景色と背景画像を混ぜあわせたり、写真に色々な効果を付与することができるbackground-blend-modeプロパティ。シンプルな例では、以下のように背景写真と背景色を合成することが可能です。 .blended { background-image: url(face.jpg); background-color: red; background-blend-mode: multiply; } 効果一覧：multiply／screen／overlay／darken／lighten／color-dodge／color-burn／hard
[JS]実装が簡単！要素にclassを加えるだけでCSS3アニメーションを自在に使えるスクリプト -CSS3 Animate It
アニメーションの一覧 CSS3 Animate Itの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/animations.css" type="text/css"> </head> <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src='js/css3-animate-it.js'></script> </body> Step 2: HTML HTMLはまずは、通常通りに各エレメントを配置します。 <div> <h2>見出し</h2> </div> 親要素に「.animat
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック
作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形
スクロールやクリックした際に、おおっ！と思わせるクリエイティブな7つのエフェクトがかっこいいっ！
ユーザーがページを表示し、スクロールやボタンをクリックした際に、おおっ！と思わせるクリエイティブなエフェクトを7つ紹介します。 Inspiration for article intro effects 7つのエフェクトをアニメーションgifにしてみました。 ページはフルスクリーンサイズの画像が最初に表示され、そこをスクロールボタンクリックでさまざまなエフェクトがおきます。派手すぎず、センスあるかっこいいエフェクトばかりです！ 各エフェクトのソースは上記ページからまとめてダウンロードできます。
IEでも再現可能！簡単にエフェクトがきいたホバーボタンを作る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです。 今回CSS3で実装されたCreative Button Styleエフェクトが素敵だったのでjQueryで再現してみました。 実装の仕方をご紹介いたします✌(´ʘ‿ʘ｀)✌ HTMLとCSSの準備 今回jQueryで実装するために修正をいたしました( ˘ω˘) HTML HTMLは参考サイトをそのまま使用します( ˘ω˘) <button class="btn btn-1 btn-1b">Button</button> CSS CSS3独自のtransition要素を削除して、ホバーはjsで実装するため削除をしました。( ˘ω˘) 参照元 .btn { border: none; font-family: inherit; font-size: inherit; color: inherit; background: none; cursor: pointer; paddin
CSSのみで実装するキャプションエフェクト 20 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ChromeでCSS Transform使用時にエッジがジャギった時 - Qiita
CSSやSVGで実装するローディングアニメーション - NxWorld
Toptal's CSS3 Generator Tool allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.
