SCSSとCompassでおしゃれなCSSパーティクルを作ってみた - ICS MEDIA
Webサイトを構築する際、角丸、グラデーション、アニメーション等、従来では画像やプログラミング言語を使わないと不可能だったデザイン表現が、CSS3を使うことで可能となりました。さらに、CSSの拡張言語であるSCSSや、SCSSのフレームワークであるCompassと組み合わせると、CSSによる表現の幅が広がります。今回は、CSSのみでのデザイン表現をテーマとし、SCSSやCompassの便利な機能を活用した幾何学模様の作り方をご紹介します。 別画面でデモを再生する ソースコード(SCSS) なぜSCSSやCompassを使うのか プログラミングを使って図形を描く場合、基本的な四則演算や三角関数といった数学的な処理や、繰り返し文（for文）、条件分岐（if文）等が扱えると便利です。しかし、CSSではcalc()メソッドを使った簡易な計算しかできず、繰り返し文や条件分岐等は実装されておりません。
CSS謝罪文 - jsdo.it - Share JavaScript, HTML5 and CSS
CSSによるインデックスされない謝罪文 CSSに本文が書いてあるので、画面上は表示されているがGoogleでのキーワード検索には引っかからない 「流出」などの嫌な単語は:beforeと:afterに「流」「出」を分けて書くことで、自然言語解析を回避 #s { p:first-child { font-weight: bold; font-size: 120%; } p:not(:first-child) { text-indent: 1em; } p:nth-child(1):before{ content: "お 詫"; } p:nth-child(1):after{ content: " び"; } p:nth-child(2):before{ content: "平素は弊社のサービスをご利用いただき、誠にありがとうございます。"; } p:nth-child(3):before{ c
[CSS]コンテンツを水平・垂直にぐぐぐっと傾けてナビゲーションを表示するスタイルシート
最近ちらほら見かける、コンテンツをアニメーションでぐぐぐっと傾けて、ナビゲーションを配置したサイドバーやヘッダを表示するスタイルシートを紹介します。 実装 Step 1: HTML パースペクティブで表示するコンテンツをdivなどのラッパーを使って配置します。 <div class="wrapper"> <div class="menu"> <div class="hover-icon"> <i class="icon-align-justify"></i> </div> <ul> <li class="category"><a href="#">HOME</a></li> <li class="category"><a href="#">SEARCH</a></li> <li class="category"><a href="#">ABOUT US</a></li> <li class
[JS]円グラフにピッツァのようなかわいいアニメーションを与えるスクリプト -Pizza Pie Charts
円グラフをピッツァやドーナツに見立て、ホール状のものから1ピースを抜き出すようなアニメーションがかわいいエフェクトを備えたjQueryのプラグインを紹介します。 円グラフは、確かにホールのピッツァに似てますねｗ Pizza Pie Charts Pizza Pie Charts -GitHub Pizza Pie Chartsのデモ Pizza Pie Chartsの使い方 Pizza Pie Chartsのデモ デモはChrome, Safari, Firefox, Operaなどのモダンブラウザ、IEは9+でご覧ください。 ダウンロードファイルのデモ Pizza Pie Chartsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="stylesheets/pizza.css" media="
[CSS]アイデアにセンスを感じる、アニメーションがかわいいナビゲーションを実装するチュートリアル
ナビゲーションの各アイテムをホバーすると、光源が移動するラーヴァランプ風エフェクトをスクリプトは使用せずに、スタイルシートで実装するチュートリアルを紹介します。 矢がハートを射貫くのかわいいですね。 デモページ 実装 実装は共通パートと3つのデモで異なるパートに分けて紹介します。 Step 1: 共通 HTML HTMLは3つとも基本的には同じです。 classの「nav」は共通で、「ph-line-nav」を変更して利用します。 <div class="nav ph-line-nav"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Gallery</a> <a href="#">Contact</a> <div class="effect"></div> </div> Step 2: 共通 CSS 3つのデモの共通のスタイ
[CSS]主要ブラウザの特定ブラウザのみに有効なCSSハック集
Internet Explorer、Firefox、Safari、Chrome、Operaなど主要ブラウザの中の特定ブラウザのみに有効なCSSハックをbradKELLETTから紹介します。 Documenting the Hacks: CSS Browser Targeting CSSハックは使用しないに越したことはありませんが、必要がある場合には最小限簡潔に記述しておくようにします。 各ブラウザの新しいバージョンがリリースされた際、これらのハックが無意味なものになることも念頭においてください。 Internet Explorer 6 IE6のみに適用します。 <textarea name="code" class="css" cols="60" rows="5"> #selector { _property: value; } </textarea>
![[CSS]主要ブラウザの特定ブラウザのみに有効なCSSハック集](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
