画像をCSSで斜めにマスクした時の知見 - kojika17
サイト全体が斜めになったサイトで、画像をクリッピングする必要がありました。しかもレスポンシブWebデザインです。 その時の知見と、利用しませんでしたが、ちょっとしたテクニックを思いついたので、メモとして残しておきます。 画像を斜めクリップにする方法 画像を斜めクリップするイメージは、こんな感じです。 要素を斜めにする方法は、IE9以上から利用できます。 IE8もIEの独自フィルターを利用して頑張ればできるようですが、底が見えない感じだったので、IE8は斜めにせずに対応させていただきました。 要素を斜めにするCSSは、transformプロパティを利用します。 transformプロパティには、いくつかの関数が用意されており、主に「skewY()」を利用し、場合によっては「rotate()」も利用しました。 CSSの記述例 .foo { -webkit-transform: skewY(10
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
CSS3とjQueryでオリジナル画像のスプライトアニメーションを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ、フロントエンドエンジニアのはやちですよ( ˘ω˘)✌ 今回はスプライト画像を使用した、アニメーションの実装方法を2つご紹介いたします(´ʘ‿ʘ｀)✌ 実装する前に準備をしよう まず画像が必要ですね。今回はこのような画像を用意いたしました。 1つの絵に対して100×126で作っております。ズレがないようにご注意くださいまし( ˘ω˘)☝ HTML マークアップはこんな感じで、sectionの中のspriteを動かします( ˘ω˘)☝ <section class="section css"> <h2>CSS</h2> <div class="sprite"></div> </section> 準備はこれで以上になります( ˘ω˘)☝ 実装をしよう お次にそれぞれの実装方法をご紹介します( ˘ω˘) CSS3を使用した形での実装方法 CSS3ではanimationを使用します。
差がつくメニューアイコン 25個のCSSアニメーション (1/2)
随所に使用されているアニメーション 美しい建築写真が、存在感のあるタイポグラフィとともに目に飛び込んでくるサイト「Studio Songes（ステュディオ・ソンジュ：スタジオ夢）」。ダイナミックなページ全体の動きに加えて、ページの右上にある小さなメニューアイコンにもユニークな動きが取り入れられている。 メニューアイコンをマウスホバーすると、≡の3本のラインが整列し、クリックすると1本のラインに変化するギミック。CSSアニメーションを活用したサイトでは、こんな小さなメニューアイコンの動きにまでこだわるサイトが増えている。 今回は「Studio Songes」を参考に、CSSアニメーションを使ったメニューの開閉アイコンを作成する。アニメーション自体は小さな動きだが、メニューの開閉という大きな動作への導線でもある。覚えておくときっと役に立つはずだ。 STEP 1：アイコンの初期状態を作る メニュ
圧縮・難読化したCSSファイルを再整形してくれるツール「PROCSSOR」
先日ご紹介したCSSやJavascriptを圧縮するためのWebサービス「YUI Compressor」。 「後々編集することを考えるなら圧縮前のデータもとっておきましょう」と記しておきながらバックアップデータを白ヤギさんにむしゃむしゃいかれてしまった私。んもう…おっちょこちょいさんなんだからぁ…// で、どうにか復元しなければと思っていたところ、色々ある難読化されたCSSファイルの整形ツールの中から使いやすかった「PROCSSOR」をご紹介。 ProCSSor – Advanced CSS Prettifier なかなかしゃれたUIの「PROCSSOR」。プロセッサーと読ませるのでしょうか。しゃれてますね。 使い方は簡単。まずは難読化されたCSSを一番上のテキストボックスにコピペします。（Fileの読み込みやURLからの整形もできる様子） 次に、整形をどのように行うか、各種オプションを選
Magic CSS3 animations by miniMAC - minimamente
Come sapete, amo molto il linguaggio CSS ed in particolare mi piace sempre andare oltre, in questo caso ho voluto creare un pacchetto di animazioni in CSS3 che potrete usare liberamente per i vostri scopi e quindi nei vostri progetti web, si chiama Magic! Il progetto è hostato anche su GitHub, questo per avere i migliori pareri dai migliori sviluppatori e quindi migliorare il codice, renderlo il p
死ぬまでに見ておくべきCSSデザインサイト集まとめ - GIGAZINE
ということで、今まで数限りなくネットのあちこちで紹介されてきたCSSデザイン関連のサイトがリスト化されてまとめられたようです。これだけあれば当分はブログなどのデザインのネタに困ることはなさそう。インスピレーションを得るのに使うもよし、デザインの参考にするのもよし、知っておいて損はないものばかりです。 リストは以下の通り。 CSS Beauty | CSS Design, News, Jobs, Community, Web Standards http://www.cssbeauty.com/ CSS Drive- Categorized CSS gallery and examples. http://www.cssdrive.com/ Stylegala - Web Design Publication http://www.stylegala.com/ CSS Mania http:
SassとCompassでSprite画像を作る
やっべぇ、これ便利！って思ったので即共有！これまでSprite画像作る時って皆さんはどうしてましたか？僕はCSS Sprite Generatorというサイトを使って画像を生成していました！ しかし、さっき見てた記事でなんと、Compassを使ってSprite画像を生成する方法が紹介されていて、今さっき試したら結構ツボにハマったので、まずはこの興奮のまま皆さんともシェアさせて貰えれば嬉しいです！ 参考にさせて頂いた記事は以下なんですが、結構詳しくCompassで作るCSS Sprite画像の作り方が紹介されています。まずは僕も試してみた簡単な概要部分をちょっとご紹介させて頂きましょう！SassとCompassの基本的な使い方はググって頂ければ嬉しいです＞＜ How to automatically generate CSS sprites with Sass and Compass | C
Foundation for Sites | The most advanced responsive front-end frameworks in the world.
Responsive design gets a whole lot faster A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, includi
Awesome Bubble Navigation with jQuery | Codrops
In this tutorial we are going to create a bubbly navigation with jQuery. The idea is to have some round navigation icons that release a bubble when hovering over them. We will use the jQuery Easing Plugin for a even nicer effect. Ok, so let’s get started. Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek. The Ma
CSS： marginの正しい理解 - kojika17
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
CSSスプライトについてあれこれ。
「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要
Introduction to Sass and How to Setup with Mac + Coda
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
[CSS]シンプルで使いやすいGitHub風のボタンを簡単に実装できるスタイルシート
GitHubスタイルのシンプルで使いやすいボタンをclassの指定だけで簡単に実装できるスタイルシートを紹介します。 CSS3 GitHub Buttons [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページはボタンの文言を日本語にし、シンプルしたものをアップしました。 デモページ（当方日本語化） 普通のボタン 注意を促すボタン 大きいボタン グループ化したボタン グループ化したものをまとめたボタン アイコンを伴ったボタン 対応ブラウザ ライセンス 普通のボタン 普通のボタンは、a要素、button要素、input要素などあらゆる要素で作ることができます。 ボタンを作るためには、「class="button"」を加えるだけです。 デモページ（当方日本語化） <a href="#" class="button">Post comment</a> <input class="
リストに1pxのラインを追加するだけで、印象がぐっとよくなる
#sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみる このリストに1本ラインを加えるだけで全然印象が変わってきます。試しに下に白いラインを追加してみます。 #sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; bord
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
YUI Examples
これからのWeb制作に使いたい、最近のCSSフレームワークいろいろ
CSS Arrow Please - By Simon Hoejberg - @shojberg
http://www.css-lecture.com/log/css3/css3-border-radius.html