[B! テキスト][image] daizu6110のブックマーク

daizu6110 id:daizu6110

テキストとimageに関するdaizu6110のブックマーク (3)

[JS]Lightboxの進化形！操作性が快適でフラットなデザインにもぴったりなレスポンシブ対応のスクリプト -Strip
スマホなどの小さいスクリーンでは昔からあるLightbox風の体験を与え、より大きいスクリーンではページ上にインタラクションのスペースを残すよう設計された、画像や動画をアニメーションで拡大表示させるjQueryのプラグインを紹介します。フラットなデザインにも相性が非常によく、操作も快適でエレガントです！しかも、IE7+にも対応。 Strip Strip -GitHub Stripのデモ Stripの使い方 StripのデモデモはChrome, Safari, Firefox, Opera, IEは7+、iOS5+, Android3+でご覧ください。各画像をクリック・タップすると、拡大画像がスライドして表示されます。拡大時はそのまま他の画像も表示できるギャラリー機能にも対応しています。デモ：幅780pxで表示スライド表示させるのは画像だけでなく、YouTubeやVimeoなど
daizu6110 2014/10/06
image

jpg

スライド

lightbox

フラット

テキスト
リンク
[CSS]テキストの天地に美しいグラデーションのボーダーと背景を適用するスタイルシート
p要素などで実装したテキストの天地に、美しいグラデーションのボーダーと背景を適用するスタイルシートのデモを紹介します。カルピスもちはおやつにもらったのがおいしかっただけで、スタイルシートには何の関係もありません。上記は当方でテキストやサイズを変更したもので、デモは下記にあります。 Gradient Borders 実装はシンプルなので、他にも応用がききそうですね。 HTML p要素をdivで内包します。 <div class='backbox'> <p>This is the future.<br>Live it & love it.</p> </div> CSS まずは、Webフォントと背景カラーの設定です。 @import url(http://fonts.google apis.com/css?family=Josefin+Slab); html { background-colo
daizu6110 2013/07/03
スタイルシート

背景

グラデーション

css

テキスト

HTML

image

color

font
リンク
シンプルイズベスト！おしゃれなモーダルウィンドウを実装できる「SIMPLE MODAL」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です、ももこです。おしゃれなWebサイトでコンテンツの表示に、モーダルウィンドウを使うと格好よく映えたりしますよね。今回はクールなモーダルウィンドウを簡単に設置出来るJavaScript「SIMPLE MODAL」※すでに提供を終了していますをご紹介したいと思います。「SIMPLE MODAL」デモ用意されているデモは全部で8種類あります。その中でも特に使用頻度が高そうな5つのデモをご覧ください。 ALERT シンプルなアラート風ウィンドウ商品紹介などに使えそうな基本的なウィンドウ MODAL　AJAX AJAXを使用し、コンテンツにアコーディオンを含めているウィンドウ MODAL IMAGE LightBox風に画像を表示するウィンドウ VIDEO EMBED 動画を埋め込んで再生するウィンドウ記述ウィンドウ内のテキストや画像は全てスクリプトの中に含めます。「
daizu6110 2013/02/13
IE

Ajax

テキスト

コンテンツ

画像

lightbox

メディア

image

日本語
リンク
1