Lindbak IT tilbyr skreddersydd webdesign fra mennesker som er genuint opptatt av faget, tror på personlig service og leveranser av høy kvalitet. Nettsiden er selskapets hjem på nettet, og er ofte stedet nye kunders første møte med selskapet ditt. Vår oppgave er å bidra til at førsteinntrykket blir godt. Vi bistår kundene i hele prosessen fra kartlegging av mål og brukerbehov, til prioritering av i
豊かな「住まう」の舞台を、 ともに描き、確かなカタチに。 「住む」と「住まう」。同じようでいて、なにかが違う…。「住まう」の「う」は、継続を意味するのだとか。そう、そこに住む日々を続けていくことが「住まう」なんですね。数十年という長い時間の1コマ1コマに光を当てながら、毎日を丁寧に生き、楽しく味わい、豊かなものにしていく「住まう」という言葉を、わたしたちはそのように捉えています。そして、あなたのご家族にふさわしい「住まう」の舞台を、ともに描き、確かなカタチにすることが、わたしたちの願いです。 Detail
Scrollable Containers onScreenはさまざまなDOM要素に対応しており、パラグラフ、画像、コンテンツスライダーなどスクロールが可能な要素全てに利用できます。 スクロールして表示する際に、ちょっとだけCSSのエフェクトを加えるのかっこいいですね。 onScreenの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="lib/jquery.onscreen.min.js"></script> </head> Step 2: HTML onScreenを適用するエレメントは指定できるよ
classを変更するだけで、ツールチップを表示する方向、カラーを変更したり、フェードやスライドのアニメーションで表示したりなど、さまざまなスタイルのツールチップを実装できるSassでつくられたスタイルシートを紹介します。 実装にはSassの知識は必要なく、簡単に利用できます。 左から、角丸、半アロー、スライド、フェードの4種類 これらのスタイルはclassを変更するだけで、簡単に使い分けができます。他にもさまざまなスタイルが用意されています。 Simptipの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="simptip-mini.css" /> </head> Step 2: HTML ツールチップのスタイルはclassで、中身はdata
最近ちらほら見かける、コンテンツをアニメーションでぐぐぐっと傾けて、ナビゲーションを配置したサイドバーやヘッダを表示するスタイルシートを紹介します。 実装 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
円グラフをピッツァやドーナツに見立て、ホール状のものから1ピースを抜き出すようなアニメーションがかわいいエフェクトを備えたjQueryのプラグインを紹介します。 円グラフは、確かにホールのピッツァに似てますねw 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="
スマフォ・タブレットでよく見かける三本線のナビゲーションをはじめ、コンテンツをスライドしてかっこいいアニメーションで表示されるサイドバー、1ページで構成されたサイト用のナビゲーションなど、あなたの大切なコンテンツを効果的にナビゲートするjQueryのプラグインを紹介します。
ピクセルベースでデザインされた、かわいい柄やノート地、ドット、ヘキサゴン、波線などのパターン素材を紹介します。 最後には雪やツリー、プレゼントなどのかわいいクリスマス柄のパターン素材も!
選択しているのが2つかどうか Validettaは、以下の項目がチェックできます。 データが空かどうか。 電子メールのチェック。 数字のチェック。 クレジットカード番号のチェック。 フィールド内の文字数のチェック。 チェックボックスやセレクトボックスの選択数のチェック。 2つのフィールドが同じかどうか。 正規表現を使ったフィールドのチェック。 Validettaの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" > <script type="text/javascript" src="http://code.jquery.com/jquery-late
画像は一切使用せず、その文字をホバーするとパタっと開くエフェクトを実装するスタイルシートを紹介します。 単に開くだけでなく、シャドウも開きに応じて変化してるのがスゴイ! 日本語、しかも漢字でもOK 実装はこんな感じになります。 HTML 文字はspan要素で配置し、上に表示されるホワイトの文字はdata-letterに記述します。 <div class="foo"> <span class="letter" data-letter="A">A</span> <span class="letter" data-letter="B">B</span> <span class="letter" data-letter="C">C</span> ... ... </div> 日本語は、こんな感じです。 <div class="foo"> <span class="letter" data-lett
コントローラーとパンくず slidr.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして</body>の上あたりに記述します。 ... <script type="text/javascript" src="/path/to/slidr.min.js"></script> </body> Step 2: HTML 各パネルはinline, inline-block, blockのどの要素を使用しても構いません。ラッパーにidを付与するのを忘れずに。 <ul id="slidr-ul" style="display: inline"> <li data-slidr="one">apple</li> <li data-slidr="two">banana</li> <li data-slidr="three">coconut</li> </ul> <div id="s
テーマファイル「train」 Odometerの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 スタイルシートはさまざまなテーマが用意されています。 <link rel="stylesheet" href="odometer-theme-car.css" /> <script src="odometer.js"></script> 要素を指定する時にjQueryのセレクタを使用する時は、jquery.jsを加えます。 Step 2: HTML オドメーターを表示する要素を配置します。 「123」は初期表示の数字です。 <div id="odometer" class="odometer">123</div> Step 3: JavaScript innerHTMLで最終的に表示する数字を指定します。 テキストの場合は、innerTextで
プレゼンやインフォグラフィック、ウェブページのキャッチ用の画像など、印象的にデータや情報を見せる美しくかっこよくデザインされたビジュアルデータをdribbbleから紹介します。
幅780pxで表示 CircleTypeの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト、Lettering.jsを外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/lettering.js"></script> <script type="text/javascript" src="js/circletype.min.js"></script> FitText.jsを併用すると、表示サイズに合わせてテキストのサイズを変更することもできます。 Step 2: HTML HTMLはシンプル
もじの素について この度は、当サイト「もじの素」へお越しいただき誠にありがとうございます。 「もじの素」は和風筆文字素材専門のダウンロード販売サイトです。 ワンコインから購入できるミニサイズからプリント用途のフリーサイズ(EPS)まで、当社厳選の書家パートナー様の手書きによる多種多様な書体を随時追加しています。ウェブで利用するサムネイルやウェブデザイン、会社のロゴや印刷物デザイン、商品パッケージや墓石、年賀状印刷様の賀詞など、様々なデザインに合わせてご提供しておりますので、ぜひご活用ください!! 詳しいサイトの説明は以下から御覧ください。
HTMLファイ部のほんだです。シュッ 「ページ遷移」、聞くだけでゾクゾクしませんか? 僕は大好きです。 Web Creator's Contest Q(HTML、CSS、JavaScript エンジニアのためのコンテストサイト)では、 ページ遷移・画面遷移をテーマにしたコンテストを開催中です。 とても好評で、5回目となった当コンテスト。 今回のテーマも、力の入ったコードがたくさん投稿されています! 魅力的な画面遷移エフェクトのコード集! Cubic Transition ※「▶Play」ボタンをクリック!
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く