A Collection of Page Transitions with CSS Animations
A Collection of Page Transitions with CSS Animations
ブラウザ標準のフォームUI(チェックボックスやセレクトボックス)のデザインは、標準ゆえに「フォーム」だと分かりやすいデザインですが、どうしてもサイトカラーに合わずに野暮ったい印象になるときがあります。そういった場合にデザインを自由に変更できるといいのですが、フォームUIへのスタイル適用は制限があり、自由に変更できません。 そういったときに、実際のフォームUIを隠し独自のフォームUIを表示し、それに対して行ったアクションを隠してあるフォームUIに反映させる手法があります(ここでは擬似フォームUIと呼びます)。 本コラムでは主にスマートフォン向けにCSS3とJavaScript(jQuery)を使い、画像を使わない擬似フォームUIの作り方を4回に分けて紹介していきます。 ※PCではGoogle Chromeのみ動作確認をしています。 第01回目の今回はCSS3を使った装飾と後ほどjQueryで
I'm Hakim El Hattab, a Swedish front-end developer and interface designer. I co-founded and am working on Slides. +++ Slides is a platform for creating, presenting and sharing slide decks. Sign up for free or check out this demo presentation. ResumeFilter.AI Upload a job description + resumes and ResumeFilter will tell you who's the best fit. Plus, get an individual report including strengths, wea
こんにちは! しょこたんです。 HTML5の対応も着々と進み、開発をしてみよう! とはいっても、なんだかんだで気になるのは、 クロスブラウザ問題。 特にIEは9にならないとHTML5の恩恵は受けられないとのこと。 せっかくHTML5のコードを書いても、 それでscriptエラー! なんて出したら、台無しです。 今までは、そういった問題に対して、ブラウザのバージョンを調べて判断し、 遷移をかえることをやっていました。 たとえば <span class="rem"><!--[if lte IE 6.0]></span> <span class="rem"><meta http-equiv="refresh" content="0;url=./endosnipe_ie6.html" /></span> <span class="rem"><![endif]-->
Tomomi Imura An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer. Twitter LinkedIn Instagram Github Flickr My articles are licensed u
For today I have selected 15 fresh and useful CSS3 tutorials for your next project. CSS3 and HTML5 are the topics that you see and hear everyday and I think it is the right time to start diving into it. While there is no freedom in expressing our ideas in CSS3 prior to weak support in major browsers we want to be the first ones when it is fully supported right? Besides chasing the trends you will
Breadcrumbs are an essential navigation feature on websites, helping users understand their position within a hierarchy and simplifying the process of navigating to higher-level pages. By implementing breadcrumbs, you can enhance the user experience and reduce the number of steps required for users to find their way around your site. In this tutorial, we’ll explore how to create visually appealing
CSS3を使うにあたっていつも問題になるのが Internet Explorer(IE)です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか? ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。 1. CSS3の対応状況を確認する まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。 CSS3 & HTML5 Browser Support CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。 2. CSS3セレクタに対応する セレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何?」「CSS3セレクタってどういうもの
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries(メディアクエリ)。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました! 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries(メディアクエリ)を使って、iPad、iPhone など、いろんなデバイスに対応(対応というか、一応見れる程度)にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
この記事は、2010年8月3日に Jason Grigsby によって書かれた CSS Media Query for Mobile is Fool’s Gold を翻訳したものです。 画像・表・リンクなどは掲載していませんし、翻訳が怪しい場所がところどころにありますので、ちゃんと読みたい方は原文を参照してください。 翻訳部分は次のセクションとなります。 CSS Media Query for Mobile is Fool’s Gold Ethan Marcotte の記事「Responsive Web Design」はウェブ開発者たちの想像力を刺激し、いくつかの後続の記事はモバイルに最適化されたウェブサイトを構築する方法として、CSS Media Queries をもてはやしました。 私もまた「iPad Orientation CSS」という記事でこの流行に貢献した罪があります。 残念な
Making layouts responsive using CSS3 Media Queries are a big part of the work that I’m doing for the Hardboiled Web Design site in the run up to the book’s launch. Since I started using Media Queries extensively over the last few months, I’ve revised the queries several times for each project, so it made sense to build a boilerplate to use as a starting point. These hardboiled CSS3 Media Queries a
CSS3のtransitionとtext-shadowでオンマウス時のリンクを楽しく装飾してみます。すべてのリンクに使うとわずらわしいですが、タイトルロゴなんかだとこれくらい凝ってもいいのかなと思います。 transition(時間的変化をつける) hoverなどでスタイルが変化する際、通常はすぐに切り替わりますが、transitionを使うと時間をかけて変化するなど様々な設定をすることが可能になります。 適応するプロパティの「all」、変化の仕方「ease」、変化の始まるタイミングの「0」は初期値となるので省略しても大丈夫です。 transitionはFirefoxとwebkit系のChromeやSafariで先行実装されている機能ですので、-moz-や-webkit-などのベンダープレフィックス付ける必要があります。 text-shadow(テキストに影をつける) その名の通りテキスト
Can I Use ? Data on support for the default feature across the major browsers from caniuse.com.
この記事の最初の公開後、さらに調査を続けていたところ、内容に不正確な部分があることがわかりましたので、訂正いたしました。詳細は本文中の追記・訂正をご覧ください。(2010/06/01) 先日、Google から、画期的なウェブフォントサービスの Google Font API が発表されました。既にたくさんの方々が、様々な実験をしたり記事を書いたりいらっしゃいますが、そんな昨日。 「Google Font API で日本語が表示出来ない」という話を小耳に挟みました。 もとより、Google Font API で提供されるフォントは現時点では欧文フォントのみで、日本語の字形データは含んでいませんが、仮にそうしたフォントが日本語を含む文字列に指定されたとしても、本来そこで期待されるのは「指定フォントで表示できない文字は、表示できる別のフォントで表示する」という挙動であって、真っ白になってしまう
What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe
Typography is everyone’s favorite toy in web design. One particularly fun tool that CSS gives you to play with your type is text-shadow, which seems simple enough at first but can be used to create some remarkable effects with a little ingenuity and creativity. Today we’re going to run through several text-shadow examples that you can copy and paste for your own work. The Ultimate Designer Toolkit
文字を選択したときの、背景色って、 普通はブルーですよね? デフォルトだとこんなかんじです。 この背景色を、変更するCSSをご紹介します。 /*反転時の文字色・背景色 */ ::selection { background: #F8E6AF; /* 背景色*/ color:#666666; /* 文字色*/ } /* Firefox対応*/ ::-moz-selection { background: #F8E6AF; /* 背景色*/ color:#666666; /* 文字色*/ } CSS3をサポートしたブラウザ以外は無視されます。 IEとかIEとか、あとIEとかでは見れないので、気をつけてください。(あと、IEもネ!) 早速、このブログにも導入してみました。 うん、イイかんじ! 上の赤字の部分をコピーして、CSSに追加すれだけで反映されるので、 ブログ等にも簡単に導入でき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く