The Shapes Of CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into
[CSS]3ステップでマスターする、スマートフォンやデスクトップなど異なるサイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアル
Media Queries初心者でも分かりやすく解説された、スマートフォンやタブレットやデスクトップなど異なる表示サイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアルを紹介します。 Responsive Design in 3 Steps [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1: METAタグ Step 2: HTMLの構造 Step 3: Media Queries さらに実践的な使い方を学びたい人に Step 1: METAタグ スマートフォンなどで採用されているモバイル用ブラウザは、表示するHTMLページの大きさをビューポートの幅に（主に）縮小してフィットさせます。 まずは、この設定をMETAタグを使用して等倍で表示するようにしましょう。 HTML <head>～</head>に下記を記述します。 <meta
CSS3を極めたいなら知っておきたい三角形を作る3つの方法
CSS3を使い始めていくと、ぶつかる壁に「三角形みたいに尖った角」をどう表現するかというのがあります。三角形って思ったより難しいです。 まぁ無理しないで、イメージで作ればいいんですけど、ちょっとした装飾だったりすると、ちょこっとCSSで作れると楽な時もあります。 そこで、CSS3で「三角形みたいに鋭角を作る方法」を３つ紹介します。ここで紹介する方法には、メリットとデメリットがありますので、使い分けれるようになるといいと思います。 1. グラデーションを使う こちらの記事でも紹介しましたが、背景を background-size と background-position で4分割して、斜めのグラデーションを使うことで角を落とすことができます。 コード 4分割して、4つのグラデーションでそれぞれを塗ります。この方法では、塗りを使っているので、カスタマイズ性が高いですが、グラデーションを使って
[CSS]CSS3を使って美しい検索フォームを実装するチュートリアル
CSS3の角丸やグラデーションを少しだけ使って、美しい3種類（ライトグレー・ダークグレー・グレー）の検索フォームを実装するチュートリアルを紹介します。 デモページ 実装 HTML デモ3種類のHTMLは基本的に全て同じで、親のdiv要素のclassが異なるだけです。 <div class="lighter"> <form> <span><input type="text" class="search rounded" placeholder="Search..."></span> <span><input type="text" class="search square"><input type="button" value="Search"></span> </form> </div> <div class="dark"> <form> <span><input type="text"
3D Gallery with CSS3 and jQuery | Codrops
Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms. With 3D transforms, we can make simple elements more interesting by setting them into three dimensional space. Together with CSS transitions, these elements can be moved in 3D space and create a realistic effect. Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms. The main
CSS3ビギナーでも分かりやすく解説された、ユーザーが使いやすいボタンを実装するチュートリアル
CSS3のスタイルやアニメーションを使って、ユーザーが使いやすい美しいボタンを実装するスタイルシートのチュートリアルを紹介します。 Styling Button Links With CSS3 [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1:ボタンの実装 Step 2:ホバーのスタイル Step 3:アクティブのスタイル オプション:テキストの選択を不可に まとめ:全スタイルシート Step 1:ボタンの実装 ボタンの実装には、シンプルなテキストリンクを使用します。 HTML テキストリンクにclassを付与します。 <p><a class="button-link" href="#">Button Link</a></p> テキストリンクをボタンに見えるようスタイルしていきます。 ボタンがクリックしやすいように、paddingの値を充分に設定します。 .butto
[CSS]1ページで構成されたウェブサイトで使える、かっこいいCSS3アニメーションのテクニック
CSS3アニメーションを使って、ダイナミックなスライドやフェードのアニメーションでページ（コンテンツ）を切り替えるテクニックを3つ紹介します。 Demo 3 Demo 3は左からスライドのアニメーションで切り替わります。 実装 デモは一見、Homeを含む4ページで構成されているように見えますが、1ページで作成されています。 HTML HTMLはdiv要素で配置したコンテンツが4つ、ナビゲーションが1つの構成です。 コンテンツはそれぞれ異なるidとclassを付与します。 <!-- Home --> <div id="home" class="content"> <h2>Home</h2> <p>Some content</p> <!-- ... --> </div> <!-- /Home --> <!-- Portfolio --> <div id="portfolio" class="p
CSS3 Image Styles - Part 2 - Web Designer Wall
Previously I wrote two tutorials on how to style the image element with CSS3 inset box-shadow and border-radius. The trick is to wrap the image with a span tag and apply the image as background-image. However, I recently ran into a problem with that trick while designing the PhotoTouch theme. The issue is that the background-image is not resizable and thus it is not a good idea to use in responsiv
60 Web Design Galleries for Design Inspiration « AcrisDesign – Web Design Resources and Inspiration
Is it actually worthwhile to use LinkedIn? Whether you want to develop your personal brand or search for a job – having a LinkedIn profile…
[CSS]アニメーションを伴った画像ギャラリーをCSS3で実装するチュートリアル
jQueryなどのJavaScriptを使用せずに、フェードのアニメーションで画像が切り替わるギャラリーを実装するCSS3のチュートリアルを紹介します。 各画像への#リンクも有効です。 Pure CSS3 Slider (Fade Transition) [ad#ad-2] Pure CSS3 Sliderのデモ Pure CSS3 Sliderの実装 Pure CSS3 Sliderのデモ 画像ギャラリーのナビゲーションは下部の丸いアイコンで、クリックするとフェードのアニメーションで画像が切り替わります。 デモの対応ブラウザはFirefox, Chrome, Safari, IE9+です。 ※IE9ではフェードのアニメーションはなしです。 デモページ ギャラリーの各画像の#リンクにも対応しています。 デモページ：5枚目を表示 Pure CSS3 Sliderの実装 HTML HTMLは画
CSS3をサポートしていないブラウザでどのように見えるか簡単に確認できるブックマークレット -deCSS3
CSS3でスタイルした箇所をサポートしていない古いブラウザ、まぁ主にIEなのですが、でどのように見えるのか簡単に確認できるブックマークレットを紹介します。
Amazing Websites for Lawyers and Law Firm | VI-Designs
Simply put, they did a great job redesigning our personal injury site. With so many attorneys, it's really hard to stand out from the rest. VI-Designs definitely achieved that. - Sherwin Arzani, a personal injury attorney in Bakersfield, CA. https://www.bakersfieldpersonalinjurylawfirm.com I am beyond impressed with my new website designed by VI-Design. I think it's the perfect combination of bein
Full CSS3 HTML5 Contact Form with No Images
In this tutorial, I will show you the code step by step to create a full HTML5 CSS3 contact form like the one above, without using any images. First, a little disclaimer. HTML5 and CSS3 are still working drafts; the goal of this tutorial is to show what we can do with those technologies. This form has some compatibility issues with old browsers, so if you want to use it in production, do so at you
Page Transitions with CSS3 | Codrops
In the last few years, we’ve seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Well, now I’m gonna teach you how you can have your own, but instead I’ll be using CSS Transitions and the :target property to do all the magic. In the last few years, we’ve seen a lot of single page websites lying around the internet, most of them u
Top 10 Premium CSS3 and HTML5 Mega Menus
iNav – CSS3 Mega Menu This is an awesome Apple-inspired CSS3 only complete navigation menu for your web site. With 4 menu variants: Horizontal, Sticky Footer and Vertical Left and Right layout. This menu comes with 11 premade color scheme, live color scheme creator, unlimited drop down levels, mega dropdowns, content pre-styles (forms, headings, list, images, etc.), full working Ajax contact form,
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
CSS3で半透明のリングが波紋のように広がるボタンのエフェクトを作る方法
またまた CSS3 の小ネタです。これがやりたくて、ひそかに研究していました。 とりあえずデモです。↓のボタンにマウスを乗せてみてください。 ※ 最新の Firefox か webkit で見てください。 作り方 まず、CSS3で円をどうやって作るんだ？と思った方は、昨日の記事 CSS3 の border-radius を使って円形のサムネイルを作る方法２つ を読んでみてください。 HTML Aタグでマークアップしています。アニメーションするリングの部分は、SPAN.ring が担当します。 <a class="button" href="#"> <span class="ring"></span> </a> アニメーションするリングの部分は、SPAN.ring をキーフレームアニメーションで動かします。 ※ わかりやすくするために、ベンダープレフィックスは付けていません。 実際のものが欲
CSS3で画像を分割スライドする超クールなパネル実装例:phpspot開発日誌
Sliding Image Panels with CSS3 | Codrops CSS3で画像を分割スライドする超クールなパネル実装例。 例えば、画像が４枚に分割されていてそれらがアニメーションで次の画像に切り替わるというエフェクトをCSS3で実現しています。 アニメーションの種類は４種類あって、全部CSS3でJSオフで動きます。クオリティが超高いので、ダウンロード版をそのまま使いまわすことも可能。 デモページ 関連エントリ CSS3のプロパティやサンプルを調べるのに便利な「CSS3 Click Chart」 CSS3で出来たクールなLightBox実装チュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル
CSS Transformsについてのメモ
既に色々なデモページが作られていたり、実用されていたりするCSS Transformsですが、ちゃんと理解したかったので調べてみました。 まだそんなに自信はありませんが、以前よりは理解できた気がします。 というわけなので、自分が分かる範囲で説明してみたいと思います。 CSS Transformsは2Dと3Dとで別になっていますが、将来的には SVG Transforms と合わせて一つの仕様になるそうです。 今はまだ別々なので、それぞれにリンクをしておきます。括弧内は現時点での最新の日付です。 WD: CSS 2D Transforms（2011/12/15）ED: CSS Transforms（2011/11/28）WD: CSS 3D Transforms Module Level 3（2009/03/20）ED: CSS 3D Transforms（2011/03/21）新しくなった
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML / CSS3コーダーのためのチュートリアル | Outputter