fill horizontal Submit fill vertical Submit shrink horizontal Submit shrink vertical Submit rotate-angle-bottom perspective Submit rotate-angle-top perspective Submit rotate-angle-left perspective Submit rotate-angle-right perspective Submit
IMAGE CAPTION HOVER ANIMATION WITH CSS3 TRANSITIONS & TRANSFORMS This is an example of caption animation while hovering on images, using CSS3 transitions and transform rules. There is no Javascript used so it will work on modern browsers where CSS3 animations are supported. Please check the sourcecode of this page to understand how the animation is working. Illustration Credit: Illustrations used
PENGINEさんの記事直後の吹き出しが素敵なので、本ブログでも導入してみようと思います。 PENGINEさんの素敵な吹き出しまずは、私が素敵だと思ったPENGINEさんの吹き出しを紹介。 いい感じですけど、これ画像なんですよね。 んで、自分は絵を描くのがうまくないのでCSSでやろうかなと思い、良さげなソースがないか探してみました。 CSSで簡単に吹き出しを作成いろいろ探してみた所、簡単に吹き出しを作成できるソースを2つ見つけたので紹介したいと思います。 4種類の吹き出しいろんな種類の吹き出しを作成したい場合は、以下の記事をおすすめします。 参照:CSSだけで簡単に吹き出しを作成する方法4つ! オーソドックスな吹き出しや 丸みのある吹き出しまで あとは、これらに線ががついたタイプがそれぞれ作成できます。 本ブログでは丸みのある吹き出しを採用しました。 導入も非常に簡単で、以下のコードを追加
最近ちらほら見かける、コンテンツをアニメーションでぐぐぐっと傾けて、ナビゲーションを配置したサイドバーやヘッダを表示するスタイルシートを紹介します。 実装 Step 1: HTML パースペクティブで表示するコンテンツをdivなどのラッパーを使って配置します。 <div class="wrapper"> <div class="menu"> <div class="hover-icon"> <i class="icon-align-justify"></i> </div> <ul> <li class="category"><a href="#">HOME</a></li> <li class="category"><a href="#">SEARCH</a></li> <li class="category"><a href="#">ABOUT US</a></li> <li class
HOME>WEBプログラム覚書>[jQuery]デザイン系の人は、$(function(){})よりwindow.onloadを使ったほうがいいかも。 [jQuery]デザイン系の人は、$(function(){})よりwindow.onloadを使ったほうがいいかも。 入門記事の多くで、基本的に $(function(){}); にコード書けと言われますが、 window.onloadを使ったほうが良いケースも結構あります。 たとえば、 画像を含む要素の高さを取得したい。 CSSで設定された結果に対して何らかの操作をおこないたい。 とか。 ページロード時のイベント 通常ブラウザでページがロードされて表示されるまでに、発生する主なイベントは2つあって(もっとあるんだろうけど)DOMツリーの構築が完了して安全に操作ができるようになった段階で発生するのがDomReady、 外部リソースの読み込
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! I’ve been using Google Hangouts a bunch. It’s really pretty great. One on one or group text chat, audio, or video. Text is archived, maintains history, and is searchable. Video / audio is recordable. It works great on desktop and mobile devices and keeps them in sync. It’s free. Hard to beat
プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは?使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.
はじめに こんにちは、クラスメソッド株式会社の野中です。 HTTPリクエスト削減テクニックの紹介に入り、前回の『リクエスト数削減テクニック1:インラインイメージ編』では、インラインイメージについて紹介しました。本記事では「CSS Sprite」の基本的な知識と使い方、使いどころについて解説します。すでに定番のテクニックとなっていますが、何となく使っていることが多いと思います。初学者の方にも理解していただけるよう詳しく解説します。 対象者 対象者は主にコーダー、フロントエンドエンジニアです。 デザインとコーディングを合わせて担当するWebデザイナーも対象です。 コーダー・フロントエンドエンジニア Webデザイナー Webディレクター Web担当者 CSS Spriteとは Webサイトではアイコンやナビゲーションなどに多くの画像が使われ、サイトによっては20個30個とたくさんのアイコンが使わ
h1やh2などの見出し要素をシンプルなHTMLで実装し、美しいスタイルを適用するスタイルシートを紹介します。 Cool headings with pseudo-elements [ad#ad-2] デモ 実装 デモ デモは擬似要素だけでなく、background-clipなどのCSS3を使用しているため、Safari 5+, Chrome 7+, Firefox 3.6+, Opera 10+, IE 9+ でご覧ください。 デモページ 実装 HTML HTMLは非常にシンプルで、h1要素にclassを与えるだけです。 <h1 class="headline1">I took lessons</h1> ※デモは4つあり、classを変更するだけです。 CSS: 各デモ共通のベース body要素をメインのラッパーとして使用します。 h1要素にはfont-familyとsizeのみ共通で指定
ちょいちょい忘れるんでメモ。良く画像とテキストの横並びさせることがあるが、個人的には下記のようなCSSを記述することがある。 まぁ今さらっちゃ今更。 .left{ width:200px; float:left; } .right{ margin-left:200px; } でも、両方とも幅を指定したくない時ってあったりする。例えば、スマートフォンの場合は可変で作ることがほとんどだし。(まぁだいたい1カラムレイアウトだと思いますが) そんな時は、回り込ませる要素に「overflow:hidden」を使用すると幅を指定しなくても横並びにできる。 .left{ float:left; } .right{ overflow:hidden; *zoom:1; /* for ie7 */ } サンプルと言う訳でもないが、2パターンをjsdo itを使ってみたかったので載せておく。 cssで幅を指定し
ウェブサイトを制作中に、「あれ?コンテンツが少なくてフッターが浮き上がってきてる!?」なんて経験はありませんか? 弊社は東京と名古屋でホームページ制作を行っている会社ですので、稀にですがそういったシーンがあります。 「そうじゃなくて最下部にフッターを固定表示したいんだーっ!」というあなたのためのエントリーです。 ↓弊社リンク 「株式会社WEB企画」のホームページはこちら CSSで実装する flexbox(CSS3)を使う この記事を公開した際には、存在していなかったのですが、最近では flexbox のお陰でかなり実装が楽になっています。(2019/06/11現在) 下記の内容をコピペで実装できます。HTML5の書き方をしていることが条件になりますね。 【HTML】 <body> <div id="wrapper"> <main> <!-- メインコンテンツ --> </main> <fo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く