[CSS]画像無しで三角形を作成する仕組みとそれを応用するチュートリアル
画像無しで三角形を作成するスタイルシートの解説と、それを使って吹き出しや折り返しを作成するチュートリアルを紹介します。 CSS Quick Tip: CSS Arrows and Shapes Without Markup デモページ（当方作成） [ad#ad-2] 下記は各ポイントを意訳したものです。 CSSで三角形を作成する仕組み CSSで作成した三角形を使って吹き出しを作成 CSSで作成した三角形をさらに応用 対応ブラウザ CSSで三角形を作成する仕組み まずは基本となる三角形の作り方です。 三つにStepを分けて、解説します。 デモページ（当方作成） CSS：Step 1 三角形の元となる四角形を作成します。 三角のサイズは「border:10px;」で決まります。高さはそのまま、幅は倍です。 height, widthは仮のものです。 .step1{ height:20px; w
CSSで実装する矢印アイコン付きボタンのアニメーションエフェクト - NxWorld
フラットやゴーストといったようにシンプルで一見ボタンと認識しずらい感じのボタンデザインを使う場合、それが少しでもボタンだと分かるように矢印等のアイコンを付けることが多いと思います。 今回はそんな矢印付きボタンを実装する際、ホバー時に矢印にちょっとしたアニメーションエフェクトを実装したサンプルで、いずれも実装にはCSSのみを使用しています。 サンプルの記述内容について CSSで記述している内容はこのサンプルの見た目に関する記述も多いので、矢印の動きのみ抜き出したい場合はボタンとなる要素にposition: relative;を追記し、::before, ::afterで記述している内容や:hoverで記述している部分を使ってもらえれば同じ動きを再現できるかと思います。 また、紹介しているボタンに付いている矢印アイコンは、いずれもCSSのborderを使って実装をしています。 サイトによっては
CSSで作るシンプルな矢印アイコン29個 | 株式会社プレスマン
最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。 CSSでデザインの実装を行う場合、｢カスタマイズやメンテナンスが容易」｢レスポンシブWebデザインとも相性が良い」｢画像を読み込まないのでモバイルユーザーにも優しい」｢Retinaディスプレイなど高解像度の環境で見ても綺麗」等、制作側とユーザーの両方にメリットがあります。 今回は、フラットデザインのWebサイトなどでよく見かける、シンプルな矢印アイコンのCSSをいくつかご紹介したいと思います。 目次： 共通HTML＆CSS シンプルな矢印アイコン シンプルな矢印アイコン シンプルな矢印アイコン（大） シンプルな太い矢印アイコン シンプルな太い矢印アイコン（大） 斜めの矢印アイコン 右上向きの矢印アイコン 右上向きの矢印アイコン（大） 右下向きの矢印アイコン 右下向きの矢印アイコン
フリーデザイン素材「シンプル矢印アイコン25種×10サイズ」 (PIXEL LAB)
シンプルな矢印アイコンセットを公開・配布します。 もともとは個人的にちょこちょこ作成してきたものを、まとめてみました。 Fireworks用のPNGファイルと、Photoshop用のPSDファイルを用意したので、 自由にデザインワークで使ってください。 特徴 25種類×10サイズ 矢印アイコンのフリー素材は、ネットにたくさんありますが、 このアイコンセットでは、25の基本シェイプをベースに、それぞれ10サイズづつ用意してます。 各サイズごとに、ピクセルを最適化し、どのサイズにおいても、シャープに見えるように調整しています。 背景付き、枠付きなど、別パターンも収録 アイコンを使う場合は、裸でつかうより、四角背景の白ヌキだったり、 枠付きで使う場合も多いので、それぞれ、代表的なデザインで用意しました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで実装する次のコンテンツへと促すスクロールダウンボタン 10 - NxWorld
