この記事は何？Webデザインを作る上で、見出しやボックスなどを「部分的」に参考にしたいときに、サッと確認できるサイトを集めました。
Webデザインの"パーツ"を見れるギャラリーサイト11選。 - もぐもぐ食べるおいしいWebデザイン。 - もぐでざ
この記事は何？Webデザインを作る上で、見出しやボックスなどを「部分的」に参考にしたいときに、サッと確認できるサイトを集めました。
Luxbar Demo
Then customize the look of it (color, menu alignement, etc) with the options below. The navbar will update realtime accordingly. After everything looks the way you want, grab the generated HTML code from the bottom and drop it into your project. Please note that that the dropdown can't be configured throught the demo app (yet!) so if you want to know how to implement it check out this link.
Hover.css - A collection of CSS3 powered hover effects
2D Transitions Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward Backward Background Transitions Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top
マテリアルデザインのサイトを簡単に作るためのフレームワーク８選
マテリアルデザインは、Googleが推奨しているデザインの概念です。GoogleのウェブサイトやAndroid OSは、マテリアルデザインをベースとしています。 最近では、マテリアルデザインを簡単に作ることができるCSS・JavaScriptフレームワークも充実してきており、誰でも簡単にマテリアルデザインを導入することができるようになっています。 そこで今回はいくつかある候補の中から、人気がありなおかつGithubへのコミットも活発にされているマテリアルデザインをベースとしたフレームワークを紹介します。 Materialize Materializeは、マテリアルデザインのCSSフレームワークとして人気のものの１つです。Bootstrapとほぼ同じような命名規則なので、Bootstrapを使ったことがある人であれば、すぐに理解できると思います。 ShowcaseページにはMateriali
食材宅配のショクブン｜夕食の配達で時間も食費も節約
ショクブン公式 youtube・SNSはこちら 島谷ひとみさんが ショクブン公式アンバサダーに就任！ 最新動画はyoutubeで配信中！
テクノロジー×アナログをかけあわせ、 見たことのない世界と体験を作り出す 現代の“魔法使い” - 落合陽一 | Qreators.jp[クリエイターズ]
QREATORS FIREBUGの前身である2015年5月に設立した 「QREATOR AGENT」は、 さまざまな分野で活躍する”クリエイター”の PRエージェンシーとして、 これまで250名を超える”クリエイター”の プロデュースを行ってまいりました。 その才能が世の中に認知され、 目覚ましい活躍を見せる方々も増えてきています。 この世界を”前進”させようと 人生をかけて取り組む人を応援したい。 その人がつくるコンテンツや商品、サービスを 世の中に届けるお手伝いがしたい。 QREATOR ＝ QuantumLeap × Creator QREATORSがいろいろな方とつながることで 世界に新しいワクワクが生まれることを期待しています。
【Win・Mac】Sassを導入＆初めてScssを使ってみる | vdeep
Rubyのインストール SassをインストールするためにRubyが必要です。Rubyが何かよく分からなくても大丈夫なので、ここは気にせずにRubyのインストールを進めましょう。 Macの場合、Rubyはデフォルトでインストールされているため、そのままSassのインストールの項目まで進んでください。 Windowsの場合は、下記サイトから実行ファイルをダウンロードします。 LINKDownloads 今回は、2015.11現在の最新版である「Ruby 2.2.3 (x64)」をダウンロードしました。 ダウンロードが済んだら、ダブルクリックでインストーラーを実行しましょう。 『インストール先とオプションの指定』まで進み、次のとおりに設定します。 『Td/Tkサポートをインストールする』はGUIアプリケーションの作成を可能にするオプションです。ここでは不要なのでチェックしませんでした。 『Rub
CSSのクラス名を決めるときに使うリストをつくりました
CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitHub 以下投稿時の内容です。 名前をつけることは難しいですが、とても重要なことです。 CSSには設計思想が必要ですが、実践するにあたり、名前と機能の意味がとおり、名前のつけ方にブレがないようにするべきです。 このドキュメントでは、CSSでよく使われる単語を分
Bootstrap3でnavbar-navをセンタリングする - Qiita
@media (min-width: 768px){ .navbar-nav{ margin: 0 auto; display: table; table-layout: fixed; float:none; } } Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
CSSの疑似要素afterに対して、:hoverを設定することは可能でしょうか？何か方法は存在するのでしょうか？.tableView__item:after { font-family: ’FontAwesome’; content: "...
CSSの疑似要素afterに対して、:hoverを設定することは可能でしょうか？ 何か方法は存在するのでしょうか？ .tableView__item:after { font-family: ’FontAwesome’; content: "\f054"; position: absolute; top: 50%; right: 10px; margin-top: -7px; font-size:16px; color: #ccc; } ■一応試したけど上手く行かない .tableView__item:after:hover { color: #000; /* こんな感じで色を変えたい！！ */ }
スタイルシート［CSS］/テキスト・フォント/領域からはみ出た場合に「...」を表示する - TAG index
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>文書のタイトル</title> <style type="text/css"> p { width: 200px; height: 3em; border: 1px #808080 solid; overflow: auto; white-space: nowrap; } p.example1 { text-overflow: clip; } p.example2 { text-overflow: ellipsis; } </style> </head> <body> <p class="example1">領域からはみ出ている場合に省略符号を付
CSSで計算式を可能にするcalc()ファンクション
Updated 2014.03.23 / Published 2013.10.28 CSS3にcalc()というファンクションがあるのをご存知ですか？CSSにおいて計算式を可能にしてくれる便利なcalc()ファンクションのサポート状況や使い方について紹介します。 「横幅にパーセンテージ値を用いつつ、その横幅から指定ピクセル(px)分だけ引けたら...」こんなことを思われたことがあると思います。それをCSS拡張メタ言語を使うわけでもなく、CSS単独で実現できてしまうのがcalc()ファンクションです。 参考：Mathematical Expressions: 'calc()' calc()ファンクションの実装状況 IEIE9よりサポート ChromeChrome19より25まで-webkit-のベンダー識別子付きで先攻実装 Chrome26よりサポート FirefoxFirefox4より15
background-blend-mode - 背景色と背景画像をブレンドする
<div id="bg-image"><p>背景画像</p></div> <div id="bg-color"><p>背景色</p></div> body { background-image: url( "/character.png" ) ; background-color: #D36015 ; background-blend-mode: screen ; min-height: 600px ; } #bg-image , #bg-color { width: 100px ; height: 100px ; position: absolute ; top: 0 ; border: 1px solid #888 ; text-align: center ; font-weight: 700 ; font-size: .8rem ; } #bg-image { background-
背景画像の複数指定(multiple background images)をしてselect要素を装飾する - Qiita
以下のようなプルダウンメニューの装飾をmultiple background imagesとbackground-positionのpx指定を利用して作成します。 multiple background imagesは文字通り、1つの要素に背景画像の複数指定を示しています。具体的な方法は以下のコードを見てもらえば分かると思いますが、,(カンマ)で区切っていくだけです。 注意点としては、上のレイヤーにくるものを先に書いてあげないと、思った通りの表示ができない可能性があります。 今回でいうと、三角形のアイコンの指定を先に書かず、グラデーションの指定を先にしてしまうと、グラデーションの下にアイコンが配置されるような形になるため、表示されなくなってしまいます。 次にアイコンの位置の指定ですが、background-positionでright 10pxのような指定が可能になり、要素の右や下から相対
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Font Awesome
demo:CSS image hover effects
CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld
Font−familyのベストな書き方 2015年版 | それからデザイン スタッフブログ
fontawesomeのアイコンをcssの:before/:afterで挿入する - Qiita
404