textarea内テキストをカラフルにハイライトさせられる「jquery.textarea-highl... 次の記事 ≫:SVG、CSSでアプリっぽいコミカルなローディングアニメーション実装「El...
最近ちょっとだけ受けた「画像」を回転させる方法です。 CSS3で画像を回転させる 画像をくるくる回転させるだけのCSSですが、ディスクの肥やしににでもなればということで公開しておきます。 作成するCSS 作成するCSSは簡単で以下のものをコピーして下さい。 <style type="text/css"> .img_spin { width: 50px; height: 50px; background-color:rgba(0,0,0,0); /*画像の背景を透明にする*/ zoom: 3.0; -webkit-animation: rotation 1.5s linear infinite; -moz-animation: rotation 1.5s linear infinite; -ms-animation: rotation 1.5s linear infinite; -o-ani
flex-wrapはFlexアイテムがFlexコンテナボックスの横幅から溢れた際の挙動を制御するためのプロパティです。 flex-wrapは以下の値を取ることができます。 値 振る舞い nowrap 改行せずFlexコンテナボックス内に収まろう縮小し表示される wrap 改行し縮小しないで表示される wrap-reverse 改行し縮小しないで表示されるが改行後のFlexアイテムは上部に表示される 図で示すと以下のようになります。 このプロパティはFlexコンテナボックスに対して指定を行います。 .flex{ display : -ms-flexbox; /*for IE10*/ display : -webkit-flex; /*for old webkit browser*/ display : flex; -ms-flex-wrap : nowrap; /*for IE10*/ -w
パソナテックさん主催コミュニティ「SHIBUYA☆LABU」のイベントの際のスライドです。 https://shibuya-labu-pt.doorkeeper.jp/events/30744 現在Web制作の現場において、コーダーとしてお仕事されているみなさん、今後のご自身のキャリアマップは描けていますでしょうか? 専門的なフロント知識を活かして技術を極めていくのか、それともディレクターとしてキャリアを積んでいくのか悩まれている方も多いかと思います。 もしディレクターへのキャリアを考えているそんなあなたに! ご自身の制作経験や強みを活かして、作れるディレクターとして活躍できるディレクション術をお伝えいたします!Read less
Webデザインで重要なのが「写真」。インパクトがあってきれいな写真がどーんと使われていると、その先に書いてあることが読みたくなったり、サービスや商品を試してみたくなったりしますよね。たとえば、こちらのページ。 ちょっとお金を借りようかと調べていたらたまたま見つけたページですが、笑顔のさわやかな女性が「安心で選ぶなら銀行系カードローン」と訴えています。「こんなすてきな女性がすすめてくれるなら、ここで借りちゃおうかな。安心できそうだし」。 でもちょっと待って。あれ、でもこの子、前にも別のどこかで見たことがあるような……。いまどきは銀行でも画像の使い回しをしているのかと、気になった私は、Google画像検索でさっそく調べてみました。 同じ女性が脱毛やクルマ女子にも! 「銀行系カードローン」の女性(長いので「人差し指さん」と呼びます)を検索してみると、やっぱりありました。格安脱毛店の紹介ページです
画像は使用せずにCSSだけでスタイリングしたタイトル(見出し)のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く