taxytaxyのブックマーク / 2018年3月7日

taxytaxy id:taxytaxy

2018年3月7日のブックマーク (2件)

CSSで作るシンプルな矢印アイコン29個 | 株式会社プレスマン
最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。 CSSでデザインの実装を行う場合、｢カスタマイズやメンテナンスが容易」｢レスポンシブWebデザインとも相性が良い」｢画像を読み込まないのでモバイルユーザーにも優しい」｢Retinaディスプレイなど高解像度の環境で見ても綺麗」等、制作側とユーザーの両方にメリットがあります。今回は、フラットデザインのWebサイトなどでよく見かける、シンプルな矢印アイコンのCSSをいくつかご紹介したいと思います。目次：共通HTML＆CSS シンプルな矢印アイコンシンプルな矢印アイコンシンプルな矢印アイコン（大）シンプルな太い矢印アイコンシンプルな太い矢印アイコン（大）斜めの矢印アイコン右上向きの矢印アイコン右上向きの矢印アイコン（大）右下向きの矢印アイコン右下向きの矢印アイコン
taxytaxy 2018/03/07
“.sample4-2::before{ width: 12px; height: 12px; -webkit-border-radius: 50%; border-radius: 50%; background: #7a0; } .sample4-2::after{ left: 5px; box-sizing: border-box; width: 3px; height: 3px; border: 3px solid transparent; border-left: 3px solid #fff; }”

css3
リンク
コピペでできるCSSボタンマウスオーバーエフェクト集 | aekana
CSSで表現できるボタンのマウスオーバーのエフェクトをまとめました。ボタンのデザインを充実させるとクリック率・コンバージョン率アップにも繋がります。そのままコピー＆ペーストできますので、時間短縮にぜひご活用ください。 ※デモはPC環境でご覧ください 2018/8　CSSボタンデザイン記事を追加しました。コピペでできる立体的なCSSボタンデザイン集 CSSだけで表現できる押したくなるボタンリスト 1. ボタン基本形まずはボタン基本形です。.btnに共通のCSS、.btn+連番にオリジナルのCSSを記述します。フォントの大きさや種類は適宜変更してください。 !importantは当サイトに合わせた記述ですので、基本的に外してください。 <a href="" class="btn btn01">HOVER</a> .btn { padding: 15px 70px; font-weig
taxytaxy 2018/03/07
“.btn10 { background-color: #3169d1; color: #fff !important; margin: 0 0 10px 0; box-shadow: 0 5px #3B4BA8;}.btn10:hover { -ms-transform: translateY(5px); -webkit-transform: translateY(5px); transform: translateY(5px); border-bottom: none; box-shadow: none;}”

css3
リンク
- 2018年3月8日
- 2018年3月7日
- 2018年3月6日