CSSで画像をハーフトーン（網点）に加工する
2022年10月19日 CSS 画像の中の色や明るさの濃淡を、様々な大きさのドットで表現するハーフトーン。日本語では網点とも言うようです。どこかレトロで、アメコミタッチなこのハーフトーンを、CSSで表現してみます！ ↑私が10年以上利用している会計ソフト！ グラフィックツールを使わず、CSSだけでひとつの画像をこんな感じに加工してみます。 1. 画像をdivに入れておく まずは下準備。「halftone」というクラス名をつけた div に画像を入れておきます。今回は猫ちゃんの画像を用意しました。 HTML <div class="halftone"> <img src="cat.jpg" alt=""> </div> 2. CSSで水玉模様を作成 「halftone」クラスに ::after で疑似要素を作成。 position を使って猫ちゃん画像の上に重ねます。水玉模様は円形グラデーシ
HTMLタグ 画像に文字を回り込ませる
画像を回り込ませるにはalign属性を使います。「画像と文字の並び方を指定する」のページでは、align属性の値にtop、middle、bottomに指定しましたが、ここではleftまたはrightを指定します。 align="left"と記入すれば、画像を左に配置し文字を右側に回りこませることができます。 align="right"と記入すれば、画像は右側に配置され、文字は右側に回りこみます。 なお、画像の高さの範囲に文字が収まりきらないときには、画像の下に文字が表示されます。 また、この回り込みを途中でやめることもできます。改行をするときに使う<br>タグにclear属性を指定し、値にleft、right、allを指定します。 <br clear="left、right、allのいずれかを指定"> 画像が左側にあるときの回り込みを解除するには、値にleftを指定します。 画像が右側にあ
jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG
会員制Webサイトやストレージサービスなどで input入力フォームでファイルをアップロードさせる[type=file]を使用する際、 選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったので File APIとjQueryを使って試しに作ってみたサンプルを紹介してみます。 まずは動作サンプルから。 「jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる方法」サンプルを別枠で表示 サンプル画面上にある入力フィールドinputにて画像を選択させた場合、 入力フィールド下に選択した画像が表示されます。 全体構成についてまずはHTMLから。 ◆HTML <div class="imgInput"> <input type="file" name="file1"> </div><!--/.imgInput--> <div class="img
![jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG](https://cdn-ak-scissors.b.st-hatena.com/image/square/c662e9771e0c7ac0df846a4838fb1480f378049f/height=288;version=1;width=512/https%3A%2F%2Fblack-flag.net%2Fcommon%2Fimg%2Fogp_jquery.png%3F20231001)
「あんずのうた/双葉杏(五十嵐裕美)」の歌詞 って「イイネ！」
い、いやだっ!私は働かないぞっ! 「働かない全ての者たちに告ぐ! これは遊びでもライブでもない!我々の正義のために!」 (メーデー メーデー メーデー メメメメ メーデー) (WE NEED メーデー 権利を!) やりたくない 何もしたくないナイ まだ寝てたっていいじゃないナイナイナイ 楽がしたい 眠ってたいタイタイ 24時間 年中有休 「あー、飴なめたい、お家帰りたい。続けるの?コレ。はあ…。 だいたい、こんなことしたって何もならなくなくなくなくない権利を!」 (メーデー メーデー メーデー メメメメ メーデー) (WE NEED メーデー 睡眠を!) 「杏、週休8日を希望しま～す 寝て起きて寝る…それが私の生き様だっ!! 諸君!我々は選ばれし者であ～る(ドヤッ★」 仕事 電車 通勤 ムリムリ 自宅 厳重 警備 フリフリ たまにサボっちゃっても 私 責めない (いいぞー!) ポテチ ピザ
画像の横に文字を書く・回りこみ解除改行 | 誰でも出来るＨＴＭＬ・タグ・ＪＡＶＡ入門
一定期間更新がないため広告を表示しています
feezch.infoで使われているあやしい技術を解説します - デー
feezch.infoで使われている一部の技術を解説しようと思います。 Railsやnginxの設定の話は、僕が書くことでもないので、一般的なウェブサービスではあまり使われてなさそうな２ちゃんねるに関連した技術やあやしめ技術をいくつか選んでみました。 主に画像関連です。 クローラー周りも、とてもよく考えられたすばらしい仕組みを持っているのですが、特にあやしくなく本当にすごいので、ここでは省略します。 以下がもくじです。（リンクはつけ方が分からなかったので、ついてないです） 画像URLのルール集『ImageViewURLReplace.dat』を使って投稿内容から画像URLを抽出しダウンロードする グロ画像ブラックリスト『NGFiles.txt』でグロ画像をブロックする ウェブブラウザがリファラを送らないように画像にリンクする グーグルの新機能『Search by Image』を使ってサムネ
画像自体をBase64エンコードしてHTML内に埋め込んで高速化するPHPコード例:phpspot開発日誌
Base64 Encoding for Images. 画像自体をBase64エンコードしてHTML内に埋め込んで高速化するPHPコード例。 Googleがインスタントプレビューや画像検索で導入してその読み込み速度に驚いた方も多いかもしれません。 その手法をPHPで実現するコードが掲載されていましたのでご紹介。 PHPでやるにはそんなに難しいわけではなさそう。 <?php $img_src = "image/sample.png"; // 画像ファイルの指定 $imgbinary = fread(fopen($img_src, "r"), filesize($img_src)); // バイナリデータを読み込み $img_str = base64_encode($imgbinary); // base64エンコード echo '<img src="data:image/png;base6
3/3 リボン部分だけをクリック可能にする [ホームページ作成] All About
<map name="ribbonmap"> <area href="ribbon.html" shape="polygon" coords="0, 111, 0, 150, 150, 0, 111, 0"> </map> <img src="ribbon.gif" width="150" height="150" border="0" alt="りぼん" usemap="#ribbonmap" style="position: absolute; top: 0px; left: 0px;"> ※上記のソースは、リボン画像のファイル名が「 ribbon.gif 」で、リボンをクリックした際の移動先が「 ribbon.html 」の場合の例です。 リボン画像の表示部分に関して詳しくは、前回の記事「ページの左上や右上に「リボン」を掛ける」をご参照下さい。 おわりに 今回は、ページの左上や右上に
![3/3 リボン部分だけをクリック可能にする [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
一発で表示崩れの原因が分かるCSSの小技！： OLの本音は給湯室にて･･･
OL7人とその課長の実況型ブログです。OL達のホンネや女子に囲まれた課長の苦悩と悦び(?)を等身大でお送りします。娘だらけのお父さん！女同士の人間関係に悩む方も必見です!? ナッチーはたまにcssやhtmlのコーディングなどもします。 でも、たまになのでショボイです・・・ で、書いてるうちにいきなり表示が崩れたりします！ でも前のバージョンとソースの違いがわからない・・・・ そんな時のみんなに笑われる必殺hackがあります！ その名も！ Photosopで差の絶対値攻撃!!!! 以下手順になります～ 全然違いのわからない AとBのソースが仮にあったとします。 2つをスクリーンショットして Photoshopのレイヤーを分けてそれぞれにペースト で。レイヤー操作「差の絶対値」 すると・・・・・ 見てー！犯人はココダーーー 差異があるところは黒くならないんです。 本来は画像修正時の差分チェック
tableタグで画像を描くPHPクラスを作ってみた
夏らしい花火画像です。さて左右の画像のうち、どちらがJPEG画像でしょう。 一見どちらもJPEG画像っぽいですが、実は片方はHTMLのtableだけで描画しています。 そんな画像をtableタグで描画するPHPクラスを書いてみました。 インストール 以下のURLからPHPファイルをダウンロードして、任意のディレクトリに設置するだけでokです。 http://www.1×1.jp/blog/download/TableImage.php 使い方 requireして、TableImage::createTag()に画像ファイルパスを与えるだけです。createTag()からは、画像を変換したtableタグが文字列として返ってくるので、それをechoすれば、tableタグで描画していた画像が表示されます。 対応画像 現在のところGIF/JPEG/PNGに対応しています。 画像サイズにTableI
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「max-width: 100%」が指定されたimg要素を縦横比が維持された状態で縮小する方法 | CreativeStyle