40+ CSS Book Effects
Welcome to our article showcasing a curated collection of CSS Book Effects! In this compilation, we have gathered a wide array of free HTML and CSS code examples that demonstrate various book-related effects, including 3D transformations, animations, flips, layouts, and more. These examples have been sourced from popular platforms like CodePen, GitHub, and other valuable resources, making it easie
印象深い小説の出だしがずらっと並んでインスピレーションが刺激されまくるサイト「本の書き出し」
「出だしよければ全てよし」「本の書き出しは、筆者が全力で考えた命の断片です」「新宿の紀伊国屋本店で行われた『本のまくらフェア』を、リアルの世界だけではもったいないのでWeb上で再現しました。偶然目にした一冊で、人生が変わるかもしれません 書き出しの中から自分を呼ぶ一冊を見つけてください」ということで、本好きの2人が本好き人たちのために作ったサイトが「本の書き出し」です。ずら～っと並んだ本の書き出しから好きなフレーズをクリックすれば詳細を確認でき、気に入ればそのまますぐにAmazonで購入できるようになっています。 本の書き出し http://kakidashi.com/ スクロールするとさまざまな小説の書き出しがどんどん現れます。 気になる書き出しをクリックすると…… 本の情報が見られるようになっています。「ドンドンはドンドコの父なり。」は筒井康隆の「バブリング創世記」の書き出し。 気にな
「Facebookデザイン プロフェッショナルガイド」お試し版無料ダウンロードのお知らせ
共著「Facebookデザイン プロフェッショナルガイド」お試し版を無料ダウンロードのお知らせです。 絶賛発売中の「Facebookデザイン プロフェッショナルガイド」ですが、このたび「パブー」からお試し版を無料ダウンロードできるようになりました。「パブー」は電子書籍の作成・販売サービスです。 Facebookデザイン プロフェッショナルガイド お試し版 ダウンロードできるのは次の3つのsectionです。それぞれの節を丸ごと読むことができます。 Chapter1 Section1 ソーシャル連携で効果をあげるために Chapter1 Section2 OGPの基本と実装方法 Chapter4 Section2 Facebookアプリ紹介 「Facebookマーケティング プロフェッショナルガイド」もお試し版を無料ダウンロードできます。 Facebookマーケティング プロフェッショナルガ
30 Examples of Book Cover Texture for Free | Naldz Graphics
The addition of textures in any graphic design project can provide a depth and life to the work. Texture can provide a grainy appearance or retro look to your artworks with just a couple of quick clicks. With textures, you can make an artwork look realistic or completely out of this world. In today’s post, we are going to showcase some freely downloadable examples of book cover texture which are v
3D Flipping Circle with CSS3 and jQuery | Codrops
In this tutorial we will create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients. Today I would like to show you how to create a little component with a realistic touch. The idea is based on the sweet paper effect found in the video of the Google Developer Stories. Maybe you ha
[CSS]HTMLはシンプルで、紙をぺろっと折ったエフェクトをつけるチュートリアル
Code a Simple Folded Corner Effect With CSS [ad#ad-2] 下記は各ポイントを意訳したものです。 コンセプト デモ 実装 コンセプト このチュートリアルのコンセプトは、div要素に対してできるだけシンプルに紙を折ったエフェクトを与えることです。画像を使用すれば、当然かなり簡単にできることですが、これをCSSで行います。 基本的に必要なものは長方形のボックスのほかに、二つの三角形です。 デモページ [ad#ad-2] 実装 HTML HTMLは非常にシンプルです。 見出しとパラグラフを配置したdiv要素に、class（foldtl）を加えます。 <div class="page foldtl"> <h2>見出し</h2> <p>パラグラフ...</p> </div> CSS まずは、ページ全体とdiv要素のスタイルです。 div要素の背景はCS
A Collection of Free Book Icon | Naldz Graphics
Icons are small pictures which are designed to symbolize a concept, task or perhaps feature in unique approaches. As with any visual images, icons accentuate the appearance of an artwork. They display descriptions effectively even though language is an issue. Icons are excellent resources for self-expression, particularly in instant messaging, and are widely used to speak for feelings and characte
ページめくりを実現するためのjQueryプラグイン集:phpspot開発日誌
ページめくりを実現するためのjQueryプラグイン集 先日のHTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 では多くの反響を頂きましたが、他にも同様のページめくりライブラリがあるようです Booklet 個人的にコンパクトなインタフェースがいいなと思うライブラリです。 HTML5がなくともIE8でも動きます Create a page flip effect with HTML5 canvas | Tutorial | .net magazine 以前紹介した、HTML5を使ったページめくりUIの作成チュートリアル。独自に作る場合は参考にできます jFlip なめらかなページめくりを表現できるjQueryプラグインです。 カーソルを合わせるとめくり部分が微妙にアニメーションしているあたりも芸が細かいです Simple Page Peel Effect with
HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」:phpspot開発日誌
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
Printed Web: Print Design Inspired Websites
It seems things are changing for website design. The minimalist style adopted by many websites is slowly being evolved into something a little more engaging. One of the main sources of inspiration for this change in the way website content is displayed has been print design, particularly newspapers and magazines. Here are some fine examples of print design inspired websites. The Websites Vogue Pla
WordPressのトップページを雑誌や新聞のような段組にする方法
WordPressのブログは一般的に記事タイトルと記事の概要が単純に縦に並ぶだけですが、jQuery Masonry という jQuery プラグインを使用すると、このブログのトップページのように雑誌や新聞のような段組で記事一覧を並べることができます。 jQuery Masonry は WordPress 用に作られたわけではありませんが、WordPress テーマに組み込んでトップページ等で使用することができます。 ただ、公式のドキュメント通りに JavaScript を書いただけでは WordPress テーマではうまく動かないので、やり方をここにまとめておきます。 ここでは、WordPress 3.3 のデフォルトテーマ「TwentyEleven」をベースに解説します。 準備 まず jQuery Masonry 公式サイト のページ中央にある「Download the script
40+ Best Tech Blog WordPress Themes for Magazine-Style Sites in 2024
Technology is constantly evolving and improving, making it incredibly appealing to bloggers. The tech industry is never short of events, products, and breakthroughs to write about. You need a website that offers a modern and professional appearance, intuitive navigation, search engine optimization, and mobile-friendly design if you plan on entering this industry. Here are the best WordPress techno
[JS]iPhone, iPad対応、パネルを雑誌のようにぺらっとめくるスクリプト -FlipPage
FlipPage 右端がぺらっとしてますが、キャプチャだと分かりにくいですね。 [ad#ad-2] FlipPageの実装 HTML 画像を配置したdiv要素をdiv要素で内包します。 <div id="exemples"> <div><img src="img1.jpg" style="margin-left: 0px;" /></div> <div><img src="img1.jpg" style="margin-left: -250px;" /></div> <div><img src="img2.jpg" style="margin-left: 0px;" /></div> <div><img src="img2.jpg" style="margin-left: -250px;" /></div> <div><img src="img3.jpg" style="margin-le
27 Websites leveraging jQuery Masonry - Inspiredology
We all know jQuery has become a huge platform, and the different techniques and effects are all over the web. jQuery is a very powerful platform, and usually accompanied with CSS and WordPress, developers can create some amazing projects. David DeSandro created a layout plugin called Masonry. “Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertical
30 Predominant Magazine-Themed Websites | Naldz Graphics
In Web Design, it is more likely important to make it look good not to mention the color you’d want it to have. It should appear organized and appealing at the same time. This may not be very easy to achieve. With Magazine-Themed Web Designs, you get a plot-out idea as to where to put which ones. Details not shattered. Sites doesn’t have to have less content to make it look good. It depends upon t
30 Examples of Magazine and Newspaper-Styled Websites - blueblots.com
In continuation with our website design inspiration post, we bring to you two styles of websites which look like a replica or imitation of the printed magazines or newspapers. Magazine or newspaper-styled websites are similar to the typical magazines and newspapers which contain a huge amount of content on the home page (basically text and not images, text is divided into two to three columns with
HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル:phpspot開発日誌
Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。 ライブデモ 実装のためのコードがチュートリアル形式で解説されていますが、このテクニックは色々と使えそうですね。 関連エントリ CSS3を使った驚きのデモいろいろ２５種類 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript
[JS]雑誌をめくるようにぺらっと画像を表示するスクリプト -mLivre
雑誌をめくる「Pege Flip」のエフェクトで画像を次々に表示するjQueryのプラグインを紹介します。 mLivre デモ [ad#ad-2] mLivreの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.mLivre.min.js"></script> HTML img要素をdiv要素で内包します。 <div id="demo1"> <img src="celestin/couverture.jpg" width="650" height="325" /> <img src="celestin/illustration2.jp
CSS Regionsのように雑誌のような複雑なレイアウトを組めるライブラリ・Regions.js
雑誌のような複雑なレイアウトをWebや 電子書籍でも組めるようにしよう、という 目的（かどうか分からないけど）で先日 W3Cで公開されたCSS Regionsをjsで 実装しよう、というもの。cssオンリーだと まだまだ時間かかりそうなのでjsの手を 借りて疑似体験しておくのも手ですかね・・ つい先日（2011/06/09）、W3CでCSS Regions Moduleが公開されました。CSS Regionsは、Adobeが提唱している、複雑なレイアウトを組むために要素間を繋いでテキストを自由に配置できるようにする、というものだそうです。 例えば、モニターの幅が狭い環境で閲覧した際に、余ってしまう要素内のテキストを次の要素に流し込めます。CSS Regionsに関してはPublickeyさんの説明が凄く分かりやすかったです。僕は存在すら知りませんでしｔ これに先行して実現したjsライブラリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS 20 stunning examples of CSS 3D transforms