画像の上に文字列を表示する方法 – いつか誰かの役に立つかもしれないweb制作屋の備忘録
CSSのpositionプロパティを使用して画像の上に文字列を重ねて表示する方法を示します。おまけとしてアニメーション機能を使用して文字列をスクロールさせます。重ねることにより文字の内容や位置の変更にも早く対応できて良いですね。 1.画像の上に文字列を表示する CSSの設定は、画像は「position:relative;」にして、文字列は「position: absolute;」とします。文字列はtop、bottom、left、right等を使用して位置を調整します。 サンプルでは写真の下の方に文字列を表示します。文字列のバックグランドに半透明の黒い帯を表示させます。 HTMLのサンプルソース <div class="photo"> <img src="image.jpg" /> <p class="text">きれいな風景を見て、ちょっと一息</p> </div> CSSのサンプルソース
cssで先頭から３つをnth-childで取得する：nth-childまとめ - それマグで！
テーブルのtd の先頭から３つを取得するCSS3 nth-childセレクタを作れたら嬉しいデスって話で盛り上がった。 td の先頭から３つに要素を適用したい <table> <tr> <td>1番目 <! -- ⇐背景色指定したい --> <td>2番目 <! -- ⇐背景色指定したい --> <td>3番目 <! -- ⇐背景色指定したい --> <td>4番目 <td>5番目 </tr> </table> 直ぐ思い浮かぶ回答 td:nth-child(1),td:nth-child(2),td:nth-child(3){ background-color: red; } 要素セレクタを並べて掛けば良い？？なんならjQueryでaddClassする？ 妥協・・・・したくない！ 負けた気がするよね？ なんか負けた気がする、nth-child理解できてないんじゃね？ 調べましょう MDNと
MonacaでQRコードリーダを作ってみた – BarcodeScannerプラグイン編
こんにちは、浦本です。 Monacaチームではユーザ様のご要望に応じて日々、機能追加を行っています。 先週のデバッガ＆フレームワークの新バージョンリリースでは、 PhoneGapのプラグインであるBarcodeScannerプラグインも搭載しました。 そこで今回は、このプラグインを用いて前回の記事で作成したQRコードリーダアプリと同様のアプリを作成してみたいと思います。 IDEを開いた様子 今回作成するアプリのスクリーンショット アプリ作成手順 Monacaにログイン後、ダッシュボードから新規プロジェクトを作成してください。その際、テンプレートとして「最小限のプロジェクト」を選択してください。 こちらからzepto.min.jsを入手し、それを「www/js」フォルダに配置してください。 以下のHTML、JS、CSSファイルを記述すればアプリ完成です！ 【www/index.html】 メ
[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する
長い文章を3行ぐらいで切っておいて、続きを読むボタンクリックでアニメーションしながら全文表示させてみます。 デモはこちら HTML <div class="grad-wrap"> <span class="grad-trigger">続きを読む</span> <div class="grad-item"> <p>近頃岡田さんへ講義人身少々招待にするあり権力…</p> </div> </div> トリガーとなるボタン.grad-triggerと高さを変化させる.grad-itemをgrad-wrapで囲います。 CSS .grad-wrap { position: relative; } .grad-wrap + .grad-wrap { margin-top: 40px; } .grad-trigger { /*ボタンのスタイルはご自由にどうぞ*/ } .grad-item { posit
![[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する](https://cdn-ak-scissors.b.st-hatena.com/image/square/e45aef30f59b2788e85409f3cf151e1c2b520743/height=288;version=1;width=512/https%3A%2F%2Fmetrograph.jp%2Fwp-data%2Fwp-content%2Fuploads%2F2015%2F08%2Ftemplate.jpg)
ローディング作成☆
Loading GIF or, so called loader gif is an animation that indicates a loading process on a web-site or an application. Being an critically important part of web-site and application design and usability, mostly the animations are used to show that something is loading on the background (e.g. AJAX applications). The animation objects are usually used in GIF format which is very popular due to it's
How to Code HTML5 Video Background in Email
Capabilities Litmus is an all-in-one email marketing solution that helps you optimize and personalize every email to maximize your ROI and create exceptional brand experiences for every subscriber. Why Litmus Email Monitoring Email Design Email Building Email Personalization Email Testing Spam Testing Email Analytics Email Collaboration and Review Technology Integrations AI & Emerging Email Techno
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
