タグ

webとcssに関するtartvfのブックマーク (36)

  • オンラインカジノの主な特徴と魅力

    オンラインカジノは、リアルにあるカジノの世界を、ネット上でエンジョイする事が出来る、ギャンブルゲームです。 現実の上でのカジノと変わらず、インターネット上と言いましても、リアルマネーをかけることが可能となっています。 したがって、ギャンブルを満喫する事が行なえるので、とてもスリリングな世界観を満喫できます。 そして、オンラインカジノについては、賞金額もかなり高いのが持ち味だと言えます。 オーソドックスなギャンブルとして市民権を得ている、パチンコやスロットのケースでは、稼ぐことができたとしても、1日あたり数十万円ぐらいになります。 しかしながら、オンラインカジノについては、1日あたり数千万の高額当選も想定でき、具体的に1億円を的中させたプレイヤーもいます。 ひと晩で億万長者になれることが望めるギャンブルとなっています。 そして、オンラインカジノについては、好きな時間に好きな場所で満喫する事が

  • The Shapes Of CSS | CSS-Tricks

    DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into

    The Shapes Of CSS | CSS-Tricks
    tartvf
    tartvf 2011/08/13
  • フリーで美しいCSSデザインのサイトテンプレート20:phpspot開発日誌

    20 Free CSS Web Templates Which You Can Use Today フリーで美しいCSSデザインのサイトテンプレート20。 いい感じのテンプレートがまとまっていましたのでご紹介です。 ありがたく使わせていただきましょう! 関連エントリ 一見の価値ありなフレッシュなCSSデザインされたWEBサイト21 超使えそうな新しめでフリーのHTML/CSSデザインテンプレート集 CSSデザインの実用的な管理画面テンプレート10個 クールなCSSデザインのポートフォリオサイト20

  • [CSS]すぐに利用できる、美しいボックスシャドウと角丸のスタイルシートのまとめ

    一昔前はPhotoshopを使用しないと作成できなかったデザインをCSS3で実装するシリーズのナビゲーション編から、すぐに利用できるボックスシャドウと角丸のスタイルシートを紹介します。 CSS3 vs. Photoshop: Rounded Corners and Box Shadows [ad#ad-2] 下記は、その中からボックスシャドウと角丸に関するスタイルシートをピックアップしたものです。 ボックスシャドウ -box-shadow 角丸 -border-radius 対応ブラウザ ボックスシャドウ -box-shadow HTMLはsection要素を使用していますが、これはdiv要素などでもそのまま利用できます。

  • JavaScriptとCSSファイルのHTTPリクエストを最小限にし圧縮・キャッシュする -BoxJSとBoxCSS

    ウェブサイトで使用する複数のJavaScriptCSSファイルのHTTPリクエストを少なくし、圧縮・キャッシュするサービスを紹介します。 [ad#ad-2] 複数のJSファイルをまとめる -BoxJS 複数のCSSファイルをまとめる -BoxCSS 複数のJSファイルをまとめる -BoxJS BoxJSは一つのJSファイル(box.js)を利用し、モジュール式のローディングシステムで複数のJSファイルをロードできます。 BoxJS BoxJSの使い方 最初に、box.js(1.4kb)を外部ファイルとして指定します。 <script src="http://www.boxjs.com/box.js"></script> ロードするJSファイルを指定します。 Box('http://mywebsite.com/scripts/', [ 'plugins/jquery.js', 'plugi

  • [JS]奥行きを生み出す『パララックス』を簡単に実装できるスクリプト -Smart3D

    複数の画像のスクロールのタイミングをずらして表示するパララックスを簡単に実装できるjQueryのプラグインを紹介します。 jQuery.Smart3D デモページ [ad#ad-2] パララックスはそれぞれのタイミングをずらして視差効果を生み出し、奥行き感を出すものです。 上記デモでは背景と人物の画像2枚をそれぞれマウスに合わせてずらして表示しています。 使用画像 5枚の画像を使用したパララックス Smart3Dの実装 一番最初に紹介したデモの実装方法です。 HTML 各画像をリスト要素で配置します。 <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS スタイルシートでサイズを設定し、好みでborderなどのデザイン

  • [CSS]可変でも固定でも対応できる、シンプルなグリッドシステム -Grid

    FruidレイアウトでもFixedレイアウトでも、入れ子でも対応できる、シンプルなグリッドシステムを実装するスタイルシートを紹介します。 デモページ:入れ子のグリッド Gridの使い方 Gridは、使い方も簡単です。 コンテナとなる要素のclassに「grids」を加えます。 子要素に望むサイズのclassを指定します。 Gridのスタイルシート 2011年7月1日リリース版のスタイルシートです。 グリッドは、2分割、3分割、4分割、5分割が用意されています。 /* * Grid * A simple, flexible, fluid grid system that can flow nicely inside a fluid or a fixed container or play good with another Grid system. * Brajeshwar, http://

  • HTMLとスタイルシート(CSS)の業務スキルレベル 判別表 (5段階) - 主に言語とシステム開発に関して

    スキルチェックの目次へ HTMLおよびスタイルシート(CSS)を利用したWebページ制作の,簡易スキルチェックのための調査表。印刷用。 マークアップ・エンジニアとしてのレベルを測定する。 これは,「Webページをコーディングして作る人」全般に当てはまる。 レベルは,0から4までの5段階。 (0) 非エンジニア (1) 初学者(入門書を学習してゆく段階) (2) ノーマル(基礎的な知識があり,ある程度の画面を作れるようになった段階) (3) 中級者(Webアプリの開発プロジェクトで1人月としてカウントできる水準) (4) 上級者(メインPG/デザイナとして,Web UIの主担当を任せられる水準) Webアプリのプロジェクト開始時に作業振り分けをするにあたって,新規メンバ全員にこれを渡して回答してもらうという用途を想定。 なお,システム開発上のスキルをチェックする事が主眼なので,アーティスト(

    HTMLとスタイルシート(CSS)の業務スキルレベル 判別表 (5段階) - 主に言語とシステム開発に関して
  • [CSS]シンプルで使いやすいGitHub風のボタンを簡単に実装できるスタイルシート

    GitHubスタイルのシンプルで使いやすいボタンをclassの指定だけで簡単に実装できるスタイルシートを紹介します。 CSS3 GitHub Buttons [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページはボタンの文言を日語にし、シンプルしたものをアップしました。 デモページ(当方日語化) 普通のボタン 注意を促すボタン 大きいボタン グループ化したボタン グループ化したものをまとめたボタン アイコンを伴ったボタン 対応ブラウザ ライセンス 普通のボタン 普通のボタンは、a要素、button要素、input要素などあらゆる要素で作ることができます。 ボタンを作るためには、「class="button"」を加えるだけです。 デモページ(当方日語化) <a href="#" class="button">Post comment</a> <input class="

  • [CSS]6つの代表的なCSSレイアウト方法の長所と短所を学んで使いこなす

    スタイルシートで実装する6つの代表的なCSSレイアウト方法、それぞれ実例を見ながら、その長所と短所を紹介します。 Pros And Cons Of 6 CSS Layout Patterns: Part 1 Pros And Cons Of 6 CSS Layout Patterns: Part 2 [ad#ad-2] 下記は各ポイントを意訳したものです。 Fixed-Widthレイアウト Fluid/Liquidレイアウト Elasticレイアウト Hybridレイアウト Responsiveレイアウト Fluid/Elastic Gridsレイアウト Fixed-Widthレイアウト Firxed-Widthは、幅の全体を絶対値(px)で指定するスタティックなレイアウトです。このレイアウトを使用する場合には、ユーザーのために最適な幅を調査し、設定する必要があります。 典型的な例では大き

  • CSSの制作・検証に役立つChromeの機能拡張のまとめ

    CSSの制作時や検証時に役立つGoogle Chromeの機能拡張を紹介します。 いくつか機能がかぶっているので、お好みのものをご利用ください。

  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
  • [CSS] CSS and CSS3 buttons, 110 best sets ! - CSSボタンセット110選

    [CSS] CSS and CSS3 buttons, 110 best sets ! – CSSボタンセット110選 Pocket Tweet CSSCSS3で記述されたボタンパーツが110セットも集められた記事。いやこのまとめ記事スゴいっす。この手のボタンパーツをまとめた記事ってたまに見かけるけど、これほど多くの作例が集められてるのは見たことないっす。各作例はコーディング済みのものなので、DLしてからの設置も簡単そう。単純にボタンデザインのネタ帳としても使えそうです。いやーしかしよくこれだけ集めましたね。スゴい。 CSS and CSS3 buttons, 110 best sets !

  • 【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。 - CSS HappyLife

    前回の更新日が見たくない程に時が流れている今日この頃・・・。 ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。 こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。 なので、これからはちょろっとでもネタが有れば更新していきたいなーと。 何をモチベーションに更新するかはまだ見つかってないけど>< さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。 【スマートフォン向け】新規でサイトを

    【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。 - CSS HappyLife
  • これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例:phpspot開発日誌

    CSS: Elastic Videos これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。 ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。 解像度の違う、iPhone等でも動作を確認しているそうで、どんな環境でも動画をページにフィットさせたい用途に有用です。 通常サイズ。ブロックいっぱいに広がる動画 幅をiPhoneなみに小さくしてみた例。動画も縮んでます。 IEでも動くみたいです。 これは覚えておいたほうがよさそうです。 関連エントリ フリーで新しめのXHTML/CSSで書かれたサイトテンプレート45 ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ56 Ajaxスタ

  • 複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」:phpspot開発日誌

    複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」 2011年05月25日- JSONSelect 複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」 jQuery成功の背景には、そのDOMへのアクセスのしやすさがひとつの要因だと思いますが、JSONSelectを使うと、JSONデータへのアクセスをCSSセレクタっぽく、jQueryっぽく簡単にアクセスできます。 例えば、次のようなJSONデータがあったとしましょう。 JSONSelectで、「.languagesSpoken .language」として選択すると、次のように要素を選択できます。 例えば、検索結果などで、同じ構造の要素がリストとして帰ってくるようなケースにおいて、同じ名前の属性リストをサクッと取得可能。 上位階層が指定できるた

  • クロスブラウザはもう古い! HTML5+CSS3時代のプログレッシブ・エンハンスメント

    IE 9が登場! ユーザーの閲覧環境がますます多様化! 4月26日、ついに日でもInternet Explorer(以下、IE) 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome(以下、Chrome)など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何? Webブラウザや端末などの閲覧環境が多様化してきていま

    クロスブラウザはもう古い! HTML5+CSS3時代のプログレッシブ・エンハンスメント
  • [CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ

    IEの各バージョンごとに異なるスタイルシートを適用する方法はいくつかあります。それらの利点・欠点を検討し、さらにIE9へどのように対応したらよいのかを紹介します。 In defense of CSS hacks — introducing "safe CSS hacks" [ad#ad-2] 下記は各ポイントを意訳したものです。 Conditional stylesheets -条件付きコメント:スタイルシート Conditional classnames -条件付きコメント:class名 CSS hack -安全なCSS hackとは 条件付きコメント:class名とCSS hackのコンビネーション [ad#ad-2] Conditional stylesheets -条件付きコメント:スタイルシート 条件付コメントはInternet Explorerの特定のバージョンでロードさせるべ

  • 40 Creative CSS3 Text Effects and Tutorials

    CSS3 with all of it’s possibilities, is a revolution in web development. The new CSS3 properties gives web designers a wonderful opportunity to enhance their designs in a way that’s quick and easy, yet visually impressive. What’s more, almost all of the major browsers now support most CSS3 features so that’s another reason for mastering these new techniques. One of the spheres CSS3 has changed dra

    40 Creative CSS3 Text Effects and Tutorials
  • (5月20日)今日の「簡単海外記事」

    5月20日の「簡単海外記事」です。 この記事は不定期に「英語が 分からなくても理解できる 海外有益コンテンツ」 を紹介していくコーナーです。 今日は5記事です。 横スクロールするタイプの美しいWebサイトの例 珍しい横スクロールタイプ、ですが最近かなり見かけるようになりました。 40+ Beautiful Examples of Horizontal Scrolling Websites css3で作るテキストエフェクトのサンプル 同じくdesignmodoからcss3のチュートリアルのまとめ。 20+ Amazing CSS3 Text Effect Tutorials and Experiments 50のポスターデザインチュートリアル 素敵なポスターデザインのチュートリアルまとめ 50 Useful Poster Designing Tutorials 背景に白や黒を用いた例 白黒ベ

    (5月20日)今日の「簡単海外記事」