CSSできれいな斜め線
CSSで斜めに線を引くようなことをするには多少なりとも工夫が必要だった。つまりCSSで作る吹き出し(もう5年前の記事だ)のようにborderプロパティーを使って頑張るしかなかったわけだ。今はlinear-gradient()があるので直観的に作ることができるようになった。しかしきれいに引くとなるとまだ工夫が必要そうだ。 Demo: CSS Diagonal Line borderプロパティーを使ったもの、linear-gradient()を背景で使ったもの、Data URI化したSVGを背景に使ったもの、以上の計3つのデモを作った。 .lg { background-image: linear-gradient( to right bottom, transparent 50%, #f0f 50% ); background-repeat: no-repeat; background-si
Re: レスポンシブデザインって本当に使える？レスポンシブを避けるべき3つの理由
2015年2月27日 著 レスポンシブデザインって本当に使える？レスポンシブを避けるべき3つの理由という記事を読みました。冒頭の最近では、新規にウェブサイトを構築する場合、避けた方が良い＝PCとスマホのページは分けて作った方が良いと考えられていますというくだりにしろ、末尾にある手間もコストもかかるわりに表示の不具合が多発するレスポンシブデザインは、導入を検討される企業はまだまだ多いものの、現在は下火になってきていますというくだりにしろ、自分の経験や認識とはだいぶ乖離しているように感じるのですが、それはさておき、挙げられていたレスポンシブを避けるべき3つの理由のどれ一つとっても、賛同できるものではありませんでした。 コストが増える？ 1つのファイルでPCとスマホのサイトをうまく表示させるのは、非常に複雑な作業です。CSSで調整を行っていくことになりますが、これは別々のサイトを作るよりも手間の
Circle Hover Effects with CSS Transitions | Codrops
A tutorial about how to create different interesting hover effects on circles with CSS transitions and 3D rotations. In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which
Custom Login Form Styling | Codrops
In this tutorial we will create some modern and creative login forms using some interesting CSS techniques and HTML5 goodness. Hi guys! I’m back with another CSS tutorial! After button switches and drop-down lists, let’s create some forms. In particular, we will be creating login forms. Nowadays, almost every web service, application, game etc. allows (or even requires) user subscription, which me
Caption Hover Effects | Codrops
A tutorial on how to create some subtle and modern caption hover effects. Today we want to show you how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button. For some of the effects we will use 3D transforms. The aim is to keep the effects
Almost Flat UI
Provides extra visual weight and identifies the primary action in a set of buttons
『モバイル時代におけるCSSの設計と実装』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、こんにちは。 ネット総合事業本部プラットフォームDivの斉藤です。 今回は私の所属している部署からは初の1pixelへの寄稿となるそうです。 CSS開発のアプローチほぼ同時期にモダンウェブ開発に欠かすことが出来ないと言われるようになったJavaScriptと比べると、CSSにおける設計、という話題はなかなか出てきません。 単純なウェブサイトを作る際にはあまり気にしてこなかった部分ですが、ウェブアプリを制作している我々の仕事には欠かすことが出来なくなってきています。 ほかのプログラミング言語に比べると圧倒的に非力な言語だからこそ、ほかのプ
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回 プログラマ向けデザイン勉強会 #design4p http://connpass.com/event/1185/ で発表させていただきました。 （#p4d プログラマ向けデザイン部 主催イベント http://prog4designer.github.io/） @mah_lab さんが ズルいデザインのRails gemを作って下さいました http://blog.mah-lab.com/2012/11/07/zurui-design-for-rails/ (Repository) https://git
[CSS]実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティス
実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティスをDev Snippetsから紹介します。 Styling your Lists: 20+ Brilliant How to's and Best Practices
リストをデザインするためのCSSプラクティス20+ – creamu
devSnippetsで、リストをデザインするためのCSSプラクティスが紹介されています。 ざっといくつかご紹介。 » Elastic Calendar Styling with CSS CSSでデザインしたカレンダー。↑のキャプチャはこちら » Simulating a Table Using an Unordered List ul,liでテーブルレイアウトを作る » How to Create a Block Hover Effect for a List of Links リンクのリストにブロックのhoverエフェクトをつける » Turning a list into a navigation bar リストをナビゲーションバーに » FORM elements design using CSS and list (ul and dl) ulとdlを使ってフォームを作成 » Pr
[CSS]基本から実用的なものまで、スタイルシートのスニペット集
基本から実用的なものまで、スタイルシートのスニペットを集めたサイトをAll Web Designre Sourcesから紹介します。
デザイナーのための素材サイト13選 – creamu
デザインに使える素材を探している。 そんなときにおすすめなのが、『13 Most Desirable Collection Of Free Resources For Every Designer』。デザイナーのための素材サイト13選だ。 以下にいくつかご紹介。 » フリーのデザインテンプレート&PSDファイル45選 » フリーのさびた金属のテクスチャ50選 » クオリティの高いWordPress2.7のテーマ15選 » あなたのブログを魅力的にするWordPressのプラグイン15選 » フリーのPhotoshopパターン集 » Webデザインに使えるフリーアイコンやPSDファイル45選 » 無料で使える背景パターンジェネレータ12選 その他のリストは以下から。 » 13 Most Desirable Collection Of Free Resources For Every Desi
Sass記法を用いたCSSフレームワーク·Compass MOONGIFT
CSSはプログラマ向けの言語ではないため、最初は理解しやすいが、複雑な記述が入り交じっていくとメンテナンスが困難になる。Webブラウザはよく出来ていて、何となく書いたものでも動作してしまうからさらにややこしい。 コマンドラインオプション そうした問題に対処するメタ言語として注目を集めているのがSassだ。そしてSassを実用的にプロジェクトに組み込めるのがCompassだ。 今回紹介するフリーウェアはCompass、SassをサポートしたCSSフレームワークライブラリだ。ソースコードは開示されているがライセンスは明記されていなかったのでご注意いただきたい。 Compassは単体でCSSフレームワークをなすわけではない。実際にはBlueprintやYUI、960といった有名なCSSフレームワークを利用している。そしてRailsやMerb、StaticMaticといったアプリケーションサーバと
どのブラウザでどのCSSハックが使えるか·CSS Selector Shell MOONGIFT
純粋なCSSだけで各ブラウザ間の表示互換性が保てればベストだが、実際の現場ではそのようなことがないのはよく知られている。そのため、各ブラウザ向けにCSSハックが登場しており、表示の互換性を保つために使われている。 どのハックが有効かチェック だがFirefoxの各バージョン、Google Chromeなど様々なブラウザに対してそれが有効であるか無効であるか知っている人は少ないはずだ。そんなときには使えるハックなのかどうか、CSS Selector Shellを使ってチェックしよう。 今回紹介するオープンソース・ソフトウェアはCSS Selector Shell、CSSテスターだ。 CSS Selector Shellでは二つのテキストエリアが表示されている。左側のテキストエリアには幾つかのCSSが記述されている。Geckoエンジン向けのハックや、IE7用、IE6以前用、WebKit用などの
Webタイポグラフィまとめ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド（“＆”） スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Thumbnail Grid with Expanding Preview
Escape Flight Travel Deals
Primer
IDEA * IDEA
IDEA * IDEA