Creative Link Effects | Codrops
Today we’d like to share some experimental and creative link effects with you. The idea is to use pseudo-elements and animate them to create a subtle and modern effect. In the examples we are using hover transitions, but you could also imagine these effects on click or as an initial animation. Please note that pseudo-element transitions don’t work in every browser. Best viewed in Chrome and Firefo
Webページレイアウトあれこれ (WebPageLayouts - MemoWiki v5)
Webページレイアウトあれこれ -10 Evergreen Website Layouts (that will never go out of style) - Speckyboy Design Magazine --http://speckyboy.com/2012/05/23/10-evergreen-website-layouts-that-will-never-go-out-of-style/ -ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン | コリス --http://coliss.com/articles/build-websites/operation/design/10-evergreen-website-layouts-by-speckyboy.html -[ヅ] 親ブロック内での絶対座標を指定する自由なCSSレイアウト --http://
Design Shack - Inspirational CSS and Blog Design
Font Collections / 7 Jan 2026 50+ Best Luxury & Elegant Fonts in 2026 (Free & Pro) Finding the right font is key when it comes to creating a sophisticated look for your luxury designs. Today, we’ll help you achieve that goal. In this post, we feature an amazing collection of elegant and luxury fonts that come with mesmerizing designs. These fonts are guaranteed to make your designs look more fancy
Cartagen | Mapping Data for Global Health and Environmental Impact
GSS: geo style sheets Just like CSS for styling web pages, GSS is a specification for designing maps. Maps play a crucial role in helping players locate nearby casinos, offering directions and real-time updates. Digital maps often highlight venues with special features, such as Zugang zu Casinos ohne Anmeldepflicht, guiding players to places where they can enjoy gaming immediately without the hass
shortcut: フォントサイズの%とpxの換算表を作ってみた
コーディングコンテストの受賞者の方のコードを見て、自分がいかに文字サイズに無頓着だったかを思い知る今日この頃ですが、みなさんいかがお過ごしでしょうか? ソースの綺麗さとか、アクセシビリティとかに関してはそれなりに知っているつもりでしたが、それにかまけてビジュアル面に対する考え方がずいぶん甘くなっていたようです。だって、文字可変してもレイアウトが破綻しないサイトでページのビジュアルを追い込めと言われてもねぇ… まあ、そんな言い訳はさておいて、いくつかの文字サイズを基準としたときに、%指定で何pxになるかを調べてみました。 12px〜16pxを基準にして、大体使うであろうサイズを調べてみました。 フォントサイズ換算表 実際作ってみて気づいたのですが、ブラウザによって%の解釈が微妙に異なりますね。firefoxでは12pxのはずがsafariで11pxとか。 ちなみに、YUIのfont css
クオリティの高いテンプレートを無料で配布しているサイトまとめ
パチンコの遊び方と攻略 – 成功のための戦略を発見しよう！パチンコの遊び方をマスターしよう！プロのテクニックを習得して勝者に！パチンコの楽しさを体験しよう！成功のための戦略を発見しよう！戦略を鍛えてより高い勝率へ！
Liquid Designs & elastic : Resources
What is a CSS Liquid Layout? liquid (lik-wid): a substance that flows readily and takes the shape of its container. Liquid layouts are layouts that fill the browser window. Rather than set a fixed width, they allow the user to control the display, and therefore are not subject to the ongoing question of which screen resolution to support. Purpose The purpose of CSS Liquid is to promote the use of
一行あたりの文字数を制限するリキッドレイアウト - 2xup.org
2006-12-20T02:12:30+09:00 今回のリニューアルでは、これまで px で指定していたコンテンツの幅の値の単位を % と指定変更。 いわゆる liquid (リキッド) レイアウトというものにしました。ユーザが閲覧しているブラウザの幅に合わせてコンテンツの幅も変化します。 div#container { width: 80%; } px で指定していたコンテンツの幅を、% での指定に変更し、リキッドレイアウトに変更したものの、ウィンドウサイズの 80% の幅という指定ですので、ウィンドウサイズを広げればいくらでも大きくなります (もちろん小さくもなります)。それでも問題ないのですが、できればコンテンツの幅に最大幅と最小幅を指定し、小さくなりすぎてレイアウトが崩れるような事もなく、一行あたりの文字数を目で追える程度の幅をキープできればと考え、いろいろ試してみました。 fl
CSSだけで文字にドロップシャドウをつける方法（あまり良くない方法） | SIMPLE*SIMPLE
Jim Wimpeyさんのサイトで「CSSだけで文字にドロップシャドウをつける方法」が紹介されていました。これ、便利そう。 » Good-Looking, Sharp Offset, CSS Text Styling 実例はこちら。 ↑ 適用前。 ↑ 適用後。かっくいい。 やり方はいわれてみれば簡単で、1pxずらして影をつけただけ（というか影を先に書くのか）。 実際のコードは以下のような感じですね。スタイルシートには次のように記述します。 h1 { color: #000; position: relative; } h1 span { color: #fff; display: block; position: absolute; top: -1px; left: -1px; } 実際のHTMLの方はこんな感じ。 <h1><span>Lorem Ipsum</span>Lorem Ips
ブログのCSSデザイントップ20 - GIGAZINE
CSS BloomというブログなどのCSSデザインをみんなで評価するサイトにて、高評価のデザイントップ20です。 日本のブログデザインのコンセプトとちょっと違うのが多く、見ているだけでも面白いです。ブログデザインの展示会といった感じ。また、どんなデザインのブログにしようかな～と思っている場合にはかなり参考になります。 Top 20 Blog Designs | Blog http://silentbits.com/?p=339 http://silentbits.com/?p=385 以下、上記サイトで出てきたトップ20のサイト第1弾。 Veerle's blog 2.0 - Webdesign - XHTML CSS | Graphic Design Avalonstar. The Aries Project. By Bryan Veloso. Matt Brett Joshuaink
角丸ライブラリ - tikeda::Diary:
最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。 0501curve.zip 中身はこんな感じ。 ベーシックなタイプ 01：小さ目な角丸 02：大き目な角丸 03：斜線の角丸（背景画像をループ） 04：ストライプの角丸（背景画像をループ） 05：木模様の角丸（背景画像をループ） 06：リボンのついた角丸（背景画像を固定） 4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLとCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。 HTML <div class="curve-01"> <div class="cu
Nifty Corners
Nifty Corners: rounded corners without images By Alessandro Fulciniti Update This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. You can read it here. The final version is Niftycube. Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of
CSSで「折り返す」pre
■ tDiary: この期に及んでspamフィルタを導入していない人は どういう人なのかな。 ツッコミ通知メールを使っていない(ので気づいてない) 自分の日記はRSSリーダに登録してない(ので気づいてない) 単なる面倒くさがり屋さん 未対策の日記は(RSS経由では)読むに耐えないので、どんどん購読先から消えてもらっているのだが。もったいない。せめてここのフィルタくらいは入れてくれないだろうか。簡単だからさ。 追記 書き漏らした「理由」: spamをまだ受けていない(でも予防措置はしておいた方がいいよね) そもそも日記を放置しっぱなしで更新していない(ので気づいてない) ■ CSS: 「折り返す」pre 人が作ったtDiaryのテーマをつらつらと見ていたら、見慣れぬ属性が書いてあった。こんなの。 white-space: -moz-pre-wrap; /* Mozilla */ white-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
透過をきれいに使ったウェブデザインいろいろ - DesignWalker
TemplateWorld - FREE Website Templates (Valid XHTML And CSS)
Open Source Web Design - Download and upload free web designs.