画像を使用せず、画面に枠付き吹き出しをつけ、背景は透過したい。かつ、そこに表示するテキストは１行のマーキー表示が希望です。
受付中
回答 4
投稿 2015/01/29 11:14
- 評価
- クリップ 4
- VIEW 1,363
CSSで吹き出しを作る例として、三角を作成して、その上にずらした三角を背景色と同じで上に重ねることで、枠線付きの吹き出しを作成する例はあったが、
背景を透過するとなると、上に重ねた三角が意味を成さない？ため、
△部分は、背景色もしくは枠線色のベタになってしまう。
これをベタの部分をなしにして、スタイルシートで実現できる、という話を聞いたのだが、実現できていない。
また、この吹き出しの中は、横スクロールする１行のマーキー表示したい。
これらをあわせて実現できる方法が知りたいです。
背景を透過するとなると、上に重ねた三角が意味を成さない？ため、
△部分は、背景色もしくは枠線色のベタになってしまう。
これをベタの部分をなしにして、スタイルシートで実現できる、という話を聞いたのだが、実現できていない。
また、この吹き出しの中は、横スクロールする１行のマーキー表示したい。
これらをあわせて実現できる方法が知りたいです。
-
気になる質問をクリップする
クリップした質問に回答があった場合に通知・メールを受け取ることができます。
クリップした質問はマイページの「クリップ」タブからいつでも見ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+2
とりあえず三角部分だけですが、
適当に書いてみました。
http://jsdo.it/utun001/iRlP
この三角で使っている、範囲外を非表示にする方法を利用すれば、横スクロールのマーキーも書けると思うので、是非頑張ってみて下さい。
CSSはいろいろとやり様があるので、この方法でなくても特に問題有りません。
CSS3を利用しているので、レガシーブラウザ対応をする場合はもうちょっと小細工が必要になるかもです。
一応ソースも乗っけときます。
以上、ご参考になれば幸いです。
適当に書いてみました。
http://jsdo.it/utun001/iRlP
この三角で使っている、範囲外を非表示にする方法を利用すれば、横スクロールのマーキーも書けると思うので、是非頑張ってみて下さい。
CSSはいろいろとやり様があるので、この方法でなくても特に問題有りません。
CSS3を利用しているので、レガシーブラウザ対応をする場合はもうちょっと小細工が必要になるかもです。
一応ソースも乗っけときます。
<div class='sankakuwrapper'>
<div class='sankaku'>
</div>
</div>.sankakuwrapper{
white-space: nowrap;
overflow: hidden;
width: 53px;
padding: 30px 0 30px 30px;
}
.sankaku{
border: solid #000000;
width: 100px;
height: 100px;
content: " ";
transform: rotate(45deg);
background-color: #ffffff;
}以上、ご参考になれば幸いです。
投稿 2015/01/29 11:53
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
以下のような回答は評価を下げられます
- 間違っている回答
- 質問の回答になっていない投稿
- 不快な投稿
評価を下げる際はその理由をコメントに書き込んでください。
+2
<!DOCTYPE html lang="ja">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<style>
.outer {
padding:2em;
}
.triangle-isosceles {
position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #000;
background: #f3961c;
border-radius: 10px;
background: linear-gradient(top, #f9d835, #f3961c);
opacity: 0.9;
z-index: 10;
width: 65%;
}
/* creates triangle */
.triangle-isosceles:after {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
bottom: -15px;
left: 50px;
width: 0;
border-width: 15px 15px 0;
border-style: solid;
border-color: #f3961c transparent;
}
</style>
<script>
function typeWriter(selector) {
var q = document.querySelector(selector);
var txts = q.innerText;
var arr = [];
for (var i=0;i < txts.length;i++) {
var ch = txts.charAt(i);
arr.push("<span style='color:red;'>"+ch+"</"+"span>");
}
q.innerHTML = arr.join("");
var chArr = q.childNodes;
var counter = 0;
var sw = 0;
function timerFunc() {
if (counter < chArr.length) {
var ob = chArr[counter++];
ob.style.color = (["blue", "red", "yellow", "green", "snow"])[sw % 5];
setTimeout(function() {
timerFunc();
}, 200);
} else {
sw++;
counter = 0;
setTimeout(function() {
timerFunc();
}, 2000);
}
}
timerFunc();
}
window.onload = function() {
typeWriter(".marquee");
}
</script>
</head>
<body>
<!--
Bubbles: http://nicolasgallagher.com/pure-css-speech-bubbles/
-->
<div class="outer">
<div style="position: relative; width: 800px; height: 300px;">
<div class="triangle-isosceles">
<blockquote><p class="marquee"><span>Hello Speech Bubbles, this text scrolls left direction such as Marquee.</span></p></blockquote>
</div>
<div style="position: absolute; left:50px;top: -30px; width: 300px;">
<pre>
Background text one
Background text two
Background text three
Background text four
five
six
seven
eight
nine
ten
eleven
</pre>
</div>
</div>
</div>
</body>
</html>utun さん同様、marquee はピクセルずらすのが面倒なのでライブラリ探してください。
この例はタイプライター。
投稿 2015/01/29 12:41
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
以下のような回答は評価を下げられます
- 間違っている回答
- 質問の回答になっていない投稿
- 不快な投稿
評価を下げる際はその理由をコメントに書き込んでください。
+1
<!DOCTYPE html lang="ja">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!--
<script src="./JQuery/jquery-2.1.3.min.js"></script>
-->
<script src="./jquery-1.11.2.min.js"></script>
<script src="./jquery.marquee.js"></script>
<script>
$(function () {
$('p.ticker').marquee({direction: "right", pauseOnHover:true, gap:20});
/** Options: default
//If you wish to always animate using jQuery
allowCss3Support: true,
//works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
css3easing: 'linear',
//requires jQuery easing plugin. Default is 'linear'
easing: 'linear',
//pause time before the next animation turn in milliseconds
delayBeforeStart: 1000,
//'left', 'right', 'up' or 'down'
direction: 'left',
//true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: false,
//speed in milliseconds of the marquee in milliseconds
duration: 5000,
//gap in pixels between the tickers
gap: 20,
//on cycle pause the marquee
pauseOnCycle: false,
//on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
pauseOnHover: false
*/
var wr = $(".js-marquee-wrapper")[0].getBoundingClientRect();
var jr = $(".js-marquee")[0].getBoundingClientRect();
alert("幅と高さ：" + (wr.right - wr.left) + ", " + (wr.bottom - wr.top) + " || " + "幅と高さ：" + (jr.right - jr.left) + ", " + (jr.bottom - jr.top));
$(".triangle-isosceles").css({
height:"1.3em"
});
$(".marquee-position blockquote").css({
position: "relative"
, top:"-2.1em"
, border:"dashed 1px yellow"
});
});
</script>
<style>
.outer {
padding:1.0em;
}
.triangle-isosceles {
position: relative;
padding: 1px;
margin: 0.5em 0 0.5em;
color: #ffffff;
background: #0000ff;
border-radius: 10px;
background: linear-gradient(top, #f9d835, #0000ff);
opacity: 0.7;
z-index: 10;
width: 90%;
}
/* creates triangle */
.triangle-isosceles:after {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
bottom: -10px;
left: 30px;
width: 0;
border-width: 10px 10px 0;
border-style: solid;
border-color: #0000ff transparent;
}
</style>
</head>
<body>
<!--
Bubbles: http://nicolasgallagher.com/pure-css-speech-bubbles/
-->
<div class="outer">
<div style="position: relative; width: 480px; height: 20px;">
<div class="triangle-isosceles marquee-position">
<blockquote>
<p class="ticker">昔ながらのマーキーのようなスクロール表示。</p>
</blockquote>
</div>
<div style="position: absolute; left:30px;top: -30px; width: 300px;">
<pre>
Background text one
Background text two
Background text three
Background text four
five
six
seven
eight
nine
ten
eleven
</pre>
</div>
</div>
</div>
</body>
</html>投稿 2015/02/04 15:05
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
以下のような回答は評価を下げられます
- 間違っている回答
- 質問の回答になっていない投稿
- 不快な投稿
評価を下げる際はその理由をコメントに書き込んでください。
0
少し前の投稿ですが、これどうにかしたいですよね～
三角重なる部分だけボーダーつけない・・・
今だとSVGで吹き出しを作るっていう選択肢しかないですかね？
SVGなら座標変えてサイズも三角の位置も変えられるし…
CSSでやるなら、吹き出しの下辺以外をボックスで表現して、
下辺と三角はそれぞれ別の要素にするしかないのかな。
どうしても1個無駄な要素が増えてしまう
つД｀)･ﾟ･｡･ﾟﾟ･*:.｡..｡.:*･ﾟ
サンプル
投稿 2016/08/09 14:17
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
以下のような回答は評価を下げられます
- 間違っている回答
- 質問の回答になっていない投稿
- 不快な投稿
評価を下げる際はその理由をコメントに書き込んでください。
15分調べてもわからないことは、teratailで質問しよう！
ただいまの回答率
91.86%
2015/01/29 12:29
残念ながら、バックに写真を入れた場合に、三角の内側部分は透過されないため、
白い三角になってしまいました。
2015/01/29 14:48
私が質問内容を理解していないのかもしれませんが、透過しても問題無い前提で書いたというだけです。
.sankakuwrapper{
white-space: nowrap;
overflow: hidden;
width: 53px;
padding: 30px 0 30px 30px;
filter:alpha(opacity=50);
opacity: 0.5;
}
この様にalphaを指定すれば三角形ごと透過されると思いますが、これでは不十分という事でしょうか？
ちなみに、CSS3系のものはベンダープレフィックスを省略しているので、ブラウザによっては動きません。
宜しくお願い致します。
2016/01/26 20:01
横から失礼します。
上記コードだと三角の内側を透明にすることは可能ですが、
テキストが入る方の□枠と結合した際に枠側のボーダー線を隠すことができないため、
「背景透過の線だけの吹き出し枠」にならないかと思います。
三角が重なっている部分だけborderの一部を透明にすることができるなら良いのですが
多分そんな都合のいいことはできないですよね…？
私も仕事でそのようなデザインを実装してくれと頼まれて、
「無理ですｗ」と答えてしまったクチなので、もし実現する方法をご存知でしたらご教授いただけますと幸いです。