ドットインストール代表のライフハックブログ
CSS3で実現するアローアイコン スマートフォンなどでリンク領域を示すことなどで使われることが多いアローアイコン。これをCSS3を使って表現する方法を紹介します。 ちなみにアローアイコンとはこんなかんじのリストの右にある矢印。(アローアイコンの正式名称とかあるのかしら) まず、HTMLは次のようにします。今回は便宜的にアローアイコンを付けるa要素にclass属性「arrow」を付加しています。 <ul> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#">link</a></li> <ul> .arrowには以下のようなCSSを指定します。 li a
Page is Under Review The lab is awaiting moderator review and approval.
CSS3で作るボタンやバナーの決定版！グラデーションやストライプ、アイコンなどの自動生成可能なGrad3が秀逸すぎる 公開日：2012年3月27日 カテゴリ：Web制作が捗るツール 先日、ブラウザ上でCSSのグラデーションを直感的に生成できるGrad3が登場しましたね。各種ブラウザ対応、角丸、フォント、ストライプ、アイコン、などなど、このジェネレーターがあれば全て完了しちゃう優秀ぷりですよ。 Grad3 CSS3のグラデーションを自動生成 全て直感的に操作できるから楽ちん。 3/24にGrad3としてバージョンアップされましたが、前回のGrad2もなかなかの高機能っぷりでした。 CSS3のグラデーションを自動生成 | Grad2 -CSS3 Easy Gradation Editor- サンプルも豊富で、その生成された物を選んでカスタマイズすることも可能でした。作りやすかったですね。 先日
アイコンをマウスホバーすると、くるっと360度回転させて、ユーザーの目を引きつけるCSS3アニメーションのテクニックを紹介します。 デモページ 実装 HTML HTMLは非常にシンプルで、各ソーシャルメディアのリンクをdivタグで内包しているだけです。 <div class="spinning_icons"> <a href="http://www.twitter.com/paulund_" class="twitter" title="twitter">Twitter</a> <a href="http://www.twitter.com/paulund_" class="delicious" title="delicious">Delicious</a> <a href="http://www.twitter.com/paulund_" class="digg" title="digg
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く