Call for inspiration using the purple hat for when you have inspiration blocks or need fresh new ideas. A great tool created by a deisnger for web professionals.
CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私(さかっちょ)がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを2つくらい(サイト名は忘れてしまいました。。)見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde
水色のスピン部分を上下にドラッグすると、テキストボックスの値が増減します。 上移動で増加、下移動で減少となります。 Webの方ではこういったコントロールはあまり見ないですが、Windows等のアプリケーションのコントロール等にはしばしばお目にかかります。 意外と汎用性が高いので、操作されている方にとっては、「欲しいな」って思われる方もいるでしょう。 特長 ・汎用性がある:1,2マスの細かな移動から、100,1000ピクセル単位のピクセル移動まで、何でも。 ・コンパクトに設置できる:テキストボックスの右に20ピクセル程のスペースに収まります。 ・利用環境に対応:ノートPC等でホイールが無くても大丈夫。基本的なマウス操作のみ。 設置方法 HowToSetupJapanese - jquery-dorag-spibox Google Code googleコードに置いてみました。チェックしてみて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く